以下是使用 Sketch 製作一個 iOS 設定頁（Settings Page） 的完整指南，符合 Apple 的 Human Interface Guidelines（HIG），包括結構、元件、設計尺寸與技巧。
📱 iOS 設定頁設計結構（常見樣式）
通常的設定頁會有：
- 導覽列（Navigation Bar）
- Section 區塊分隔
- 設定選項列（Cell）
- Icon（可選）
- 標題（Title）
- 子標題/說明（Subtitle / Right Label）
- 切換開關（Switch）或箭頭（Disclosure Indicator）
- 登出按鈕 / 關鍵操作按鈕（可選）
🛠 在 Sketch 製作設定頁步驟
1. 建立 Artboard
- 點選：
Insert > Artboard - 選擇尺寸：iPhone 14 Pro (
393 x 852) 或其他 iOS 裝置尺寸 - 將名稱命名為：
Settings
2. 加入 Navigation Bar
- 插入 Rectangle（長方形）：
- Size:
393 x 88（含 Safe Area 高度） - 背景色：
#FFFFFF - 底部陰影可加上
Border Bottom或Shadow
- Size:
- 加上標題文字：
- 文字：「設定」/「Settings」
- Font:
SF Pro, Size:20pt, Weight:Semibold - 垂直置中於 Navigation Bar
3. 建立 Setting Cell（設定項目）
使用 Symbol 或 Group 建立一個 Cell：
| 元件 | 尺寸 / 說明 |
|---|---|
| 高度 | 56pt（常見），也可使用 60pt |
| Icon | 24x24px，左側，顏色可使用 Tint 色 |
| Title | 字體 17pt、字重 Regular |
| Right label | 小字 13pt，右側灰色輔助文字 |
| Switch | 對應設定開關項目（如推播開啟） |
| Disclosure | 向右箭頭圖示，用於點擊跳轉 |
| 分隔線 | 底部 1px 線條（#E5E5EA） |
👉 可建立 Symbol：SettingCell_Default、SettingCell_Switch、SettingCell_WithDetail
4. 區塊分隔 Section
- 可用淺灰背景色區隔區段：
- Color:
#F2F2F7（iOS group table view 背景）
- Color:
- 建議使用內距 Top / Bottom 各
8~16pt - 用於群組不同性質的設定（例如帳號設定、通知、關於）
5. 建立常見設定項目
以下是一些典型設定項目，可逐項做為元件：
| Icon | 標題 | 額外元件 |
|---|---|---|
| 👤 | 帳號資訊 | Disclosure |
| 🔔 | 通知設定 | Switch |
| 🌐 | 語言選擇 | Subtitle: 中文 |
| ⚙️ | 一般設定 | Disclosure |
| 🔒 | 密碼變更 | Disclosure |
| ❌ | 登出帳號 | 紅色字標示 |
✨ 小技巧與設計建議
✅ 使用 Symbol：
建立可重複使用的 Cell 組件並設定 Overrides（文字、icon、switch 狀態等）
✅ 使用 Layout Grid / Ruler：
設計對齊更整齊，可開啟 Layout Settings 設定 8pt 或 10pt 基礎網格
✅ Color Style 與 Text Style：
建立一組 iOS Style Guide，如文字大小、顏色風格，保持一致性
✅ 使用 iOS UI Kit（免費提供）：
- Apple 官方 iOS Design Resources (Sketch)
- Sketch 社群資源，如
Sketch iOS 17 UI Kit（包含完整元件）
🔄 範例設定頁結構（簡化）
[Navigation Bar] 設定
[Section]
👤 帳號資訊 >
🔒 密碼變更 >
[Section]
🔔 推播通知 [開關]
🌐 語言 中文 >
[Section]
❌ 登出帳號（紅色文字）