mobile-app-ui-design

行動應用程式 UI/UX 設計技能

此技能引導您建立專業、精緻的行動應用程式介面，遵循 Airbnb、Duolingo、Spotify、Revolut 和 Phantom 等頂級應用程式使用的成熟設計原則。

核心哲學

優秀的行動 UI 不在於花俏，而在於意圖性。每個像素、每個間距值、每個顏色選擇都應服務於使用者。目標是創造流暢、個人化且生動的介面，而不僅僅是功能性的。

在設計任何東西之前，先了解三件事：

1. 使用者想完成什麼？（減少達成目標的障礙）
2. 這應該讓使用者有什麼感覺？（信任、愉悅、自信、平靜）
3. 他們應該最先注意到什麼？（視覺層級）

設計流程

針對任何行動畫面，請依序遵循以下步驟：

步驟 1：了解背景

• 這是什麼類型的應用程式？（健身、金融、社交、生產力、健康、加密貨幣等）
• 使用者是誰？（新用戶、回訪用戶、重度用戶 — 調整體驗）
• 此畫面的主要操作是什麼？
• 有哪些行業設計慣例？（請參閱 references/industry-conventions.md）

步驟 2：先結構化（UX 視角）

• 繪製使用者流程：此畫面前後是什麼畫面？
• 找出 MVP 元素 — 僅保留此畫面必要的內容
• 將主要操作放在拇指區（畫面下方 1/3）
• 內容排版遵循 F 型閱讀順序
• 降低互動成本：直接顯示內容，而非藏在點擊背後
• 將空白狀態轉化為機會，提供引導、插圖和行動呼籲
• 選擇正確的輸入方式：一次性設定用滑桿/滾輪，重複或精確輸入用文字欄位

步驟 3：套用視覺設計（UI 視角）

依序遵循以下規則：

字體排版

• 使用一種字體家族（最多兩種，並有明確的層級用途）
• 最多 4 種字體大小 和 2 種字體粗細
• 對大數字（價格、統計、指標）使用等寬字體變體
• 文字容器寬度保持在 600px 以下以利閱讀
• 透過大小、粗細和不透明度建立層級，而不是全部加粗

色彩系統（60/30/10 法則）

• 60% — 中性底色（白色、淺灰或深色背景）
• 30% — 互補色（黑色文字、深色元素）
• 10% — 品牌/強調色（行動呼籲、關鍵指標、圖示）
• 使用中性色的不透明度變化來建立文字層級：標題 100%，內文 80%，次要文字 60-70%
• 次要按鈕和微妙的卡片強調使用 5% 不透明度的強調色
• 陰影顏色與背景匹配（陰影帶色調，彩色背景上絕不使用純灰/黑）
• 保留強烈顏色（如紅色）用於重要時刻 — 過度使用會破壞層級

間距（8 點網格系統）

• 所有間距值必須能被 8 或 4 整除（8, 12, 16, 24, 32, 48, 64, 80, 96）
• 使用基於關係的間距：相關元素靠攏，無關元素分開
• 倍數規則：如果相關文字元素相距 16px，則與下一組的間距應為 2 倍（32px）
• 區塊垂直內距：至少 80-96px（較大畫面的主要區塊為 160px）
• 卡片內部內距：基準為 24-32px
• 文字越大，所需間距越大

陰影

• 始終使用柔和陰影 — 絕不尖銳/明顯
• 陰影顏色與背景匹配並帶有色調
• 在按鈕上使用微妙的白色內陰影以增加立體感
• 使用淡化的投影來營造深度，但不沉重

視覺提示與圖像

• 使用圖示、表情符號、插圖和圖片讓資訊易於理解
• 使用者頭像/照片 > 姓名縮寫 > 通用圖示（用於代表人物）
• 使用柔和純色背景加上乾淨獨立圖片的顏色編碼類別
• 在整個應用程式中保持視覺風格一致 — 不要隨意混用圖庫照片
• 使用 AI 生成或精心挑選的視覺素材，搭配匹配的色調

步驟 4：為情感而設計（峰終定律）

使用者會記住兩個時刻：高峰（最強烈）和結尾（最後印象）。

• 找出你的高峰時刻：完成核心任務、達成里程碑、找到他們想要的東西
• 設計高峰：微動畫、慶祝反饋、閃光、徽章、鼓勵性文案
• 設計結尾：摘要卡片、進度肯定、輕柔提示回訪
• 加入情感反饋迴圈：成功狀態應讓人感到有回報（彈跳、發光、閃爍）
• 慶祝小勝利 — 成功狀態不必盛大，但應讓人感到用心
• 使用動態和動畫作為信任信號，特別是在高風險領域（金融、加密貨幣、健康）

步驟 5：打磨與細節

• 在關鍵元素後方加入微妙的發光效果（模糊 + 不透明度）
• 在主按鈕上使用微小的白色內陰影
• 在次要元素上加入 5% 不透明度的主色邊框
• 考慮狀態變化的微動畫
• 確保所有點擊目標至少為 44×44pt
• 檢查對比度以確保無障礙性
• 設計錯誤狀態、空白狀態、載入狀態和成功狀態

可套用的聰明模式

依使用者階段個人化

• 新用戶：簡單歡迎、引導設定、最少選項
• 回訪用戶：個人化內容、以例行任務為重點、進度指示
• 重度用戶：進階統計、最佳化工具、密集資訊

更聰明的搜尋

絕不顯示空白搜尋畫面。應包含：

• 近期搜尋
• 熱門/趨勢項目
• 個人化推薦

訂單/狀態追蹤

• 以自信的狀態訊息開頭
• 使用照片、姓名、快速操作按鈕來人性化
• 使用視覺時間軸而非純文字日期列表

類別畫面

• 使用柔和背景加上乾淨獨立圖片的顏色編碼卡片
• 確保所有類別項目的視覺一致性
• 在排版中創造節奏，便於輕鬆掃視

選擇勝於手動輸入

• 為常見選項（職稱、偏好等）提供可點擊的選擇
• 在選項旁加入圖示/表情符號以增加個性
• 提供「其他」選項並附上手動輸入作為備用

應避免的反模式

• 過度使用花俏的漸層和模糊效果（除非你真的能駕馭）
• 超過 4 種字體大小或 3 種字體粗細
• 隨機的間距值（使用 8 點網格！）
• 將關鍵內容藏在橫幅或額外點擊後面
• 將行動呼籲放在拇指區之外
• 沒有引導的通用空白狀態
• 對頻繁/精確的資料輸入使用滑桿
• 所有資訊的視覺重量相同（沒有層級）
• 強調標籤勝過數值（例如讓「銷售額」比「591」更大）
• 在彩色背景上使用純灰/黑陰影

實作注意事項

當以 React 成品或 HTML 建置這些設計時：

• 使用 Tailwind CSS 工具類別處理間距、顏色和字體排版
• 匯入 Lucide React 以獲得乾淨一致的圖示
• 使用 Recharts 進行任何資料視覺化
• 對微互動和狀態變化套用 CSS 轉場
• 使用 CSS 變數處理色彩系統
• 行動優先：以 375px 寬度（iPhone SE）為基準設計
• 使用 rounded-2xl 或 rounded-3xl 獲得現代卡片美學
• 在適當處套用 backdrop-blur 以實現玻璃擬態效果

如需更深入的行業特定慣例和情感設計模式指引，請閱讀 references/industry-conventions.md。