移動端設計（Mobile Design）核心原則報告
產出日期：2026-06-24
研究範圍：iOS HIG、Material Design、手勢操作、底部導航
一、iOS Human Interface Guidelines (HIG) 重點
1. 基本設計哲學
- 直覺性：使用者應能立即理解介面功能，無需說明文件。
- 一致性：遵循 Apple 既有的設計模式與控件標準。
- 層次感：透過字體大小、顏色深淺、陰影建立視覺 hierarchy。
2. 核心設計原則
- 內容優先（Content over Chrome）：UI 元素不應喧賓奪主，讓內容成為焦點。
- 尊重使用者隱私：明確請求權限，透明說明資料用途。
- 無縫整合系統功能：善用通知中心、Siri、快捷指令等原生能力。
3. 關鍵設計規範
- 安全區域（Safe Area）：考慮瀏海、動態島、底部指示條等硬體限制。
- 字型標準：SF Pro 為主要字型，支援動態字型大小（Dynamic Type）。
- 色彩系統：支援深色模式（Dark Mode），使用系統定義的色彩 token。
- 動畫原則：過渡動畫應自然流暢，提供反饋但不干擾操作。
4. 常用控件
- Navigation Bar / Tab Bar / ToolBar
- Sheet（半頁彈出）
- Alert / Action Sheet
- List / Table View
二、Material Design 重點
1. 基本設計哲學
- 物質化 metaphor：介面元素模擬真實世界的物理特性（深度、光影、材質）。
- 以人為本：設計應適應不同文化、語言、能力的使用者。
- 開放標準：由 Google 主導，開源且跨平台適用。
2. 最新版本：Material Design 3 (Material You)
- 動態色彩（Dynamic Color）：根據使用者壁紙自動生成配色方案。
- 個人化：元件形狀、尺寸可隨使用者偏好調整。
- 大圓角：按鈕、卡片等元件採用更圓潤的邊角設計。
- 字型：採用 Material Sans，支援多語言與可變字型（Variable Font）。
3. 核心設計原則
- 層次與深度：使用陰影（Elevation）區分元素的重要性。
- 有意義的動畫：轉場動畫應反映空間關係變化，提供方向感。
- 響應式佈局：支援手機、平板、摺疊螢幕、桌面等多種螢幕尺寸。
- 可及性（Accessibility）：內建 WCAG 合規設計考量。
4. 關鍵設計元素
- FAB（Floating Action Button）：代表頁面主要操作。
- Bottom Navigation / Navigation Rail：頁面間切換導航。
- Cards：封裝相關資訊的容器。
- Top App Bar：頁面標題與主要操作。
- Lists：高效展示大量資訊。
三、手勢操作設計（Gestures）
1. 常見手勢模式
| 手勢 | 操作方式 | 典型用途 |
|---|---|---|
| 點擊（Tap） | 單指輕觸 | 選擇、確認、開啟 |
| 長按（Long Press） | 單指按住 0.5s+ | 選取、快顯選單、預覽 |
| 滑動（Swipe） | 單指水平/垂直拖曳 | 刪除、切換頁面、展開 |
| 雙指縮放（Pinch） | 兩指張開/合攏 | 放大/縮小圖片或地圖 |
| 雙擊（Double Tap） | 快速連續點擊兩次 | 放大/縮小、收藏 |
| 拖曳（Drag） | 單指按住並移動 | 重新排序、滾動 |
| 邊緣返回（Edge Swipe） | 從螢幕左/右邊緣滑入 | 返回上一頁 |
2. 手勢設計最佳實踐
- 避免手勢衝突：同一螢幕區域不要同時綁定多種手勢。
- 提供視覺提示：手勢功能應有適當的 UI 標記（如滑動箭頭）。
- 保留備用操作：手勢操作應同時提供按鈕替代方案。
- 符合心智模型：滑動方向應符合使用者預期（左滑＝刪除/關閉）。
- 最小觸控區域：建議至少 44x44 pt（iOS）或 48x48 dp（Android）。
- 誤觸防範：設定手勢閾值，避免意外觸發。
- 動畫反饋：手勢執行時提供即時視覺回饋，確認操作已生效。
3. 趨勢觀察
- 全面返回鍵逐漸被「邊緣滑動手勢」取代。
- 摺疊螢幕帶來新的手勢挑戰（折痕區域避讓）。
- 無按鈕設計（Buttonless）趨勢下，手勢成為主要互動方式。
四、底部導航模式（Bottom Navigation）
1. 兩種主流模式比較
A. iOS 風格：Tab Bar
- 位置：固定在螢幕最底部。
- 數量：建議 3–5 個標籤。
- 圖示優先：以圖示為主，文字標籤為輔（置於圖示下方）。
- 未選中狀態：圖示與文字皆為次要色彩。
- 選中狀態：圖示與文字皆為主色或高亮顯示。
- 特殊行為：點擊已選中的 Tab 可觸發「滾動回頂部」效果。
B. Android 風格：Bottom Navigation Bar
- 位置：固定在螢幕最底部。
- 數量：3–5 個項目。
- 文字優先：文字標籤為主，圖示為輔（置於文字上方）。
- 選中指示器：通常帶有底部指示條（Indicator）。
- Material You：支援動態色彩與自訂形狀。
2. 設計原則
- 數量限制：不超過 5 個標籤，超出則改用漢堡選單或更多按鈕（More button）。
- 明確標識：每個標籤應有清晰的圖示與文字說明。
- 當前位置反饋：選中的 Tab 必須有明顯的視覺區別。
- 一致性：導航結構在全應用中保持固定不變。
- 優先順序：Tab 排列應反映功能重要性（最重要放中間或最左）。
3. 進階導航模式
| 模式 | 適用場景 | 特點 |
|---|---|---|
| 標準底部導航 | 3-5 個平級頁面 | 最常見，易於切換 |
| 底部工作列（Bottom App Bar） | 需要主要操作 + 導航 | 結合 FAB 使用 |
| 側邊導航（Navigation Drawer） | 多層級、複雜導航 | 隱藏式，節省空間 |
| 分段控制（Segmented Control） | 少量選項間切換 | 類似開關按鈕 |
| 麵包屑（Breadcrumb） | 深層級頁面導航 | 顯示路徑，支援返回 |
4. 常見陷阱
- Tab 過多導致文字截斷或圖示過小。
- 缺乏明確的選中狀態指示。
- 導航項目之間缺乏邏輯關聯。
- 未考慮安全區域（Safe Area）導致底部指示條遮擋。
五、總結與建議
跨平台設計關鍵要點
- 遵循平台規範：iOS 應用優先參考 HIG，Android 應用優先參考 Material Design。
- 一致性與可預測性：無論哪個平台，操作邏輯應一致且可預測。
- 響應式設計：考慮不同螢幕尺寸、橫豎屏切換、摺疊螢幕等場景。
- 可及性優先：確保色盲使用者、視力障礙使用者也能正常操作。
- 性能感知：設計應考慮載入狀態、骨架屏（Skeleton Screen）等體驗細節。
設計檢查清單
- [ ] 是否符合目標平台的設計規範？
- [ ] 觸控區域是否足夠大（≥44pt / ≥48dp）？
- [ ] 手勢操作是否有備用按鈕？
- [ ] 導航結構是否清晰且一致？
- [ ] 是否支援深色模式？
- [ ] 是否考慮了不同螢幕尺寸的適配？
- [ ] 是否有適當的動畫反饋？
- [ ] 是否滿足可及性標準？
報告完
Top comments (0)