
UI / UX 設計
粉彩色系跑步應用三屏UI展示
生成帶有可愛動物吉祥物與溫和粉彩色調的三屏運動健身App設計。可替換吉祥物或主題色彩以適配各類健康追蹤軟體。
ui設計行動應用健身追蹤跑步應用介面模型粉彩色系吉祥物
提示詞
{
"type": "移動健身應用UI模型",
"style": "乾淨現代的柔和粉彩色應用介面設計,米色與暖白卡片底色,啞光鼠尾草綠點綴,圓角卡片與按鈕,柔和微陰影,極簡細線條圖示,融入[樹懶]吉祥物的親切趣味品牌風格,深棕色細點網格背景上的Dribbble風格展示",
"theme": "[跑步記錄應用]",
"layout": {
"device_count": 3,
"arrangement": "三臺豎屏智慧手機等距正面並排展示",
"background": "帶有細密均勻點陣的極深棕色背景",
"screens": [
{
"position": "left",
"screen_type": "首頁儀表盤",
"header": {
"greeting": "Good morning, Runner! 👋",
"left_icon": "none",
"right_icon": "notification bell"
},
"hero_card": {
"headline": "Ready for a great day?",
"subcard_text_line_1": "Every step forward is a win.",
"subcard_text_line_2": "Let's make it count. 🌱",
"illustration": "戴著米色髮帶、身穿薄荷綠運動服的可愛[樹懶],在卡片右側站立揮手"
},
"sections": [
{
"title": "This Week",
"position": "upper middle",
"count": 3,
"labels": [
"Runs",
"Distance",
"Time"
],
"values": [
"3",
"12.6 km",
"1h 45m"
],
"presentation": "包含三等分列和淡綠色圓形圖示的單張圓角資料卡片"
},
{
"title": "NEXT GOAL",
"position": "middle lower",
"count": 1,
"labels": [
"20 km this month"
],
"values": [
"63%"
],
"presentation": "帶有綠色進度條和右側揮手小樹懶插圖的圓角目標卡片"
},
{
"title": "Recent Activity",
"position": "lower",
"count": 1,
"labels": [
"Recent Activity"
],
"presentation": "被底部導航欄截斷的另一張圓角卡片頂部邊沿"
}
],
"bottom_nav": {
"count": 4,
"labels": [
"Home",
"Run",
"Progress",
"Profile"
],
"active": "Home"
}
},
{
"position": "center",
"screen_type": "跑步結算頁面",
"header": {
"left_icon": "back chevron",
"center_text": "Great job!",
"subtext": "You did it. Time to celebrate. 🎉",
"right_icon": "share"
},
"hero_illustration": "頭戴髮帶、身穿薄荷綠運動裝並掛著金牌的可愛[樹懶],高舉雙手歡呼慶祝",
"stats_row": {
"count": 3,
"labels": [
"DISTANCE",
"TIME",
"PACE"
],
"values": [
"5.00km",
"32:15",
"6:27"
],
"presentation": "三枚圓角膠囊狀資料標籤"
},
"achievement_card": {
"count": 1,
"title": "New Personal Best! 🌟",
"subtitle": "You shaved 1:12 off your previous 5K.",
"icon": "小金牌徽章"
},
"table_section": {
"title": "Splits",
"count": 2,
"columns": [
"KM",
"PACE",
"TIME"
],
"rows": [
[
"1",
"6:35",
"6:35"
],
[
"2",
"6:23",
"12:58"
]
],
"presentation": "帶有細分隔線的白色圓角分段配速表格卡片"
}
},
{
"position": "right",
"screen_type": "跑步目標設定",
"header": {
"left_icon": "close x",
"center_text": "Time to run!",
"subtext": "You've got this. We'll take it slow. 🦥",
"right_icon": "settings gear"
},
"goal_visual": {
"type": "circular progress selector",
"top_label": "CHOOSE A GOAL",
"main_value": "5.00",
"unit": "kilometers",
"ring": "淺米色底圓上的粗鼠尾草綠進度圓弧",
"illustration": "在圓環右上角伸展身體的可愛小[樹懶]"
},
"goal_options": {
"count": 4,
"labels": [
"2 km",
"5 km",
"10 km",
"Half"
],
"active": "5 km"
},
"primary_cta": {
"label": "Start Run",
"style": "鼠尾草綠色大圓角主按鈕"
},
"secondary_action": {
"label": "Just Track",
"icon": "location pin"
},
"bottom_nav": {
"count": 4,
"labels": [
"Home",
"Run",
"Progress",
"Profile"
],
"active": "Run"
}
}
]
}
}可以替換的部分
生成前,把提示詞裡的這些部分換成你自己的主題或文案。
[樹懶]佔位符[跑步記錄應用]佔位符
提示詞資訊
- 模型
- GPT IMAGE 2
- 每張圖消耗
- 1K:43 點數 · 2K:86 點數 · 4K:143 點數
- 畫幅比例
- 16:9
- 收錄時間