อินเทอร์เฟซผู้ใช้แอปวิ่งสีพาสเทลพร้อมมาสคอตสลอธ

{ "type": "โมเดล UI แอปฟิตเนสบนมือถือ", "style": "ดีไซน์แอปที่สะอาดตาและทันสมัยโทนสีพาสเทล โดดเด่นด้วยพื้นผิวสีเบจอ่อนและสีขาวอบอุ่น ตัดกับสีเขียวอ่อนละมุน การ์ดและปุ่มทรงกลม เงาเล็กน้อย ไอคอนมินิมอลเพรียวบาง เอกลักษณ์แบรนด์ที่เป็นมิตรและสนุกสนานด้วยมาสคอตตัวสลอธ และพื้นหลังลายจุดสีน้ำตาลเข้มสไตล์ Dribbble", "theme": "แอปติดตามการวิ่ง", "layout": { "device_count": 3, "arrangement": "หน้าจอสมาร์ทโฟนยาว 3 จอเรียงกันด้านข้าง เว้นระยะห่างเท่าๆ กัน มุมมองด้านหน้า", "background": "สีน้ำตาลเข้มมาก มีลายตารางจุดจางๆ สม่ำเสมอ", "screens": [ { "position": "ด้านซ้าย", "screen_type": "หน้าแดชบอร์ดหลัก", "header": { "greeting": "สวัสดีตอนเช้า นักวิ่ง! 👋", "left_icon": "ไม่มี", "right_icon": "กระดิ่งแจ้งเตือน" }, "hero_card": { "headline": "พร้อมสำหรับวันที่แสนวิเศษหรือยัง?", "subcard_text_line_1": "ทุกก้าวที่เดินไปข้างหน้าคือชัยชนะ", "subcard_text_line_2": "มาทำให้ทุกช่วงเวลามีความหมายกันเถอะ 🌱", "illustration": "สลอธน่ารัก สวมที่คาดผมสีครีมและชุดวอร์มสีเขียวมิ้นต์ ยืนอยู่ทางด้านขวาของการ์ดและโบกมือ" }, "sections": [ { "title": "สัปดาห์นี้", "position": "บนกลาง", "count": 3, "labels": [ "จำนวนครั้งที่วิ่ง", "ระยะทาง", "เวลา" ], "values": [ "3", "12.6 กม.", "1 ชั่วโมง 45 นาที" ], "presentation": "การ์ดสถิติมุมโค้งมนใบเดียว ประกอบด้วยเนื้อหาสามคอลัมน์ที่มีความกว้างเท่ากัน และไอคอนวงกลมสีเขียวอ่อน" } ] ] ] }, { "title": "เป้าหมายต่อไป", "position": "กลางไปล่าง", "count": 1, "labels": [ "20 กิโลเมตรในเดือนนี้" ], "values": [ "63%" ], "presentation": "การ์ดแสดงความคืบหน้ามุมโค้งมนพร้อมแถบความคืบหน้าสีเขียวและภาพประกอบเล็กๆ ของตัวสลอธกำลังโบกมืออยู่ทางด้านขวา" }, { "title": "กิจกรรมล่าสุด", "position": "ล่างสุด", "count": 1, "labels": [ "กิจกรรมล่าสุด" ], "presentation": "ขอบด้านบนของการ์ดมุมโค้งมนอีกใบหนึ่งมองเห็นได้ แต่ถูกบดบังด้วยแถบนำทางด้านล่าง" } } ], "bottom_nav": { "count": 4, "labels": [ "front page", "running", "schedule", "Personal information" ], "active": "front page" } }, { "position": "middle", "screen_type": "Running Summary", "header": { "left_icon": "Return arrow", "center_text": "Well done!", "subtext": "You did it! Time to celebrate! 🎉", "right_icon": "share" }, "hero_illustration": "An adorable sloth, wearing a headband, a mint green tracksuit and a gold medal, raises its arms in celebration.", "stats_row": { "count": 3, "labels": [ "distance", "time", "pace" ], "values": [ "5.00 km", "32:15", "6:27" ], "การนำเสนอ": "แคปซูลสถิติมุมโค้งมนสามอัน" }, "การ์ดความสำเร็จ": { "จำนวน": 1, "ชื่อเรื่อง": "สถิติส่วนตัวที่ดีที่สุดใหม่! 🌟", "คำบรรยายย่อย": "คุณวิ่งได้เร็วกว่าครั้งที่แล้ว 1 นาที 12 วินาที ในการวิ่ง 5 กิโลเมตร", "ไอคอน": "เหรียญรางวัลสีทองขนาดเล็ก" }, "ส่วนของตาราง": { "ชื่อเรื่อง": "การแบ่งส่วน", "จำนวน": 2, "คอลัมน์": [ "กิโลเมตร", "ความเร็ว", "เวลา" ], "แถว": [ [ "1", "6:35", "6:35" ], [ "2", "6:23", "12:58" ] ], "การนำเสนอ": "การ์ดแบบฟอร์มสีขาวมุมโค้งมนพร้อมเส้นแบ่งสีอ่อน" } }, { "ตำแหน่ง": "ด้านขวา", "ประเภทหน้าจอ": "การตั้งเป้าหมายการวิ่ง", "header": { "left_icon": "ปิด X", "center_text": "มาเริ่มวิ่งกันเถอะ!", "subtext": "คุณทำได้ เราจะค่อยๆ ไป 🦥", "right_icon": "ตั้งเกียร์" }, "goal_visual": { "type": "ตัวเลือกความคืบหน้าแบบวงกลม", "top_label": "เลือกเป้าหมาย", "main_value": "5.00", "unit": "กิโลเมตร", "ring": "ส่วนโค้งสีเขียวเข้มบนวงแหวนสีเบจอ่อน", "illustration": "สลอธตัวน้อยกำลังยืดตัวอยู่ที่มุมบนขวาของวงกลม" }, "goal_options": { "count": 4, "labels": [ "2 กิโลเมตร", "5 กิโลเมตร", "10 กิโลเมตร", "ฮาล์ฟมาราธอน" ], "active": "5 กิโลเมตร" }, "primary_cta": { "label": "เริ่มวิ่ง", "style": "ปุ่มสีเขียวอ่อนขนาดใหญ่ทรงกลม" }, "secondary_action": { "label": "ติดตามอย่างเดียว", "icon": "เครื่องหมายตำแหน่ง" }, "bottom_nav": { "count": 4, "labels": [ "หน้าแรก", "วิ่ง", "ตารางเวลา", "ข้อมูลส่วนตัว" ], "active": "กำลังวิ่ง" } } ] } }