ios-hig-design

iOS Human Interface Guidelines 設計 Skill

用於設計直觀、一致且符合 Apple 設計理念的原生 iOS 介面的框架。基於 Apple 的人機介面指南（Human Interface Guidelines），這是打造與 iPhone、iPad 及 Apple 生態系統無縫融合 App 的權威指南。

核心原則

Apple 的 iOS 設計哲學基於三大支柱：清晰（clarity）（所有元素皆易於辨識且具備明確目的）、謙遜（deference）（介面絕不搶走內容本身的風采），以及深度（depth）（透過分層、轉場與逼真的動態效果呈現層級與空間關係）。

基石： 最出色的 iOS App 是將此哲學內化於心，而非機械式地遵守 HIG 規則。原生元件、系統規範與平台一致性並非限制——它們正是 iOS 使用者信任並喜愛「具備原生質感」之 App 的根本原因。

評分標準

目標：10/10。 快速診斷表（6 行）中每符合一行得 1 分，加上最多 4 分的原生慣用度加分：全域使用語意化顏色/文字樣式（不硬編碼數值）+1 分、使用系統控制項而非自行重新實作 +1 分、標準手勢與具意義的觸覺回饋 +1 分、SF Symbols 與正確的 App 圖示形狀 +1 分。分級：9-10 = 原生、無障礙、能自適應深色模式與動態型級（Dynamic Type）、零外來模式；5-6 = 可運作但混入 Android 慣用模式或硬編碼顏色/尺寸；<=3 = 未能符合安全區域（safe areas）、觸控目標或 VoiceOver。務必標明得分以及達到 10/10 所需的具體改進項目。

iOS 設計框架

1. 版面配置與安全區域（Layout & Safe Areas）

核心概念： iOS 裝置具有特定的螢幕尺寸、安全區域邊距（safe area insets）與硬體遮擋（切口/瀏海、動態島、主畫面指示條），所有版面配置都必須尊重這些限制。

關鍵洞察：

• 優先針對最小螢幕進行設計（寬度 375pt，如 iPhone SE）
• 安全區域可保護內容不被瀏海、動態島與主畫面指示條遮擋——切勿在這些區域下方放置互動元素
• 標準內容邊距：距螢幕邊緣 16-20pt；間距遞增單位：8 / 16 / 24pt
• 最小觸控目標與列表列高：44pt

產品應用：

情境	版面配置模式	範例
狀態列	經典 20pt，動態島裝置為 44-54pt	時間、訊號、電池區域
導覽列	44pt 標準列 + ~52pt 大標題（總計約 96pt）	返回按鈕、標題、動作按鈕
內容區域	彈性、可滾動、符合安全區域	App 主要內容
標籤列	高度 49pt，具模糊效果的半透明介面	2-5 個主要分頁
主畫面指示條	底部 34pt 內距	系統手勢區域

程式碼模式：

• 使用預設即符合安全區域的 VStack { }
• 僅對背景與裝飾元素使用 .ignoresSafeArea()，絕不用於互動內容
• 在多種尺寸上進行測試，包括 iPhone SE 與 Pro Max

當佈局外框 chrome 時——精確的導覽列與標籤列尺寸、大標題行為以及分拆視圖（split-view）規則，請參閱 references/navigation.md。

2. 字型排印與動態型級（Typography & Dynamic Type）

核心概念： iOS 使用 San Francisco (SF Pro) 字型與語意化文字樣式，可透過動態型級（Dynamic Type）自動縮放以支援無障礙功能。語意化樣式能提供一致的平台層級；動態型級則讓使用者能在不破壞版面配置的情況下，以偏好的字型大小進行閱讀。

關鍵洞察：

• 大標題：34pt 粗體；標題：17pt 中粗體；內文：17pt 常規體；標註：12-13pt；次要文字：15pt 搭配 60% 不透明度
• 最小文字尺寸 11pt（僅限標註/次要文字）
• 行高至少為字型大小的 1.3 倍；行動裝置上的最佳行長為 35-50 個字元
• 文字一律靠左對齊，不使用左右對齊（non-justified）

產品應用：

情境	字型排印模式	範例
螢幕標題	.largeTitle 或 .title 樣式	滾動時大標題會收合
內文內容	.body 樣式，17pt	列表項目、描述文字
次要資訊	.subheadline 或 .footnote	時間戳記、元資料
標籤標籤	10pt SF 文字	標籤列項目標籤
按鈕	.body 字重半粗體（semibold）	主要動作文字

程式碼模式：

• 使用 .font(.title)、.font(.body)、.font(.caption) 代替硬編碼尺寸；自訂間距縮放請使用 @ScaledMetric
• 在建立層級時，優先使用字重與顏色的變化，而非極端的尺寸差異
• 在最大的動態型級尺寸下測試所有版面配置

當需要將設計與精確規格比對時——包含各樣式的 Hex 值與深色模式文字顏色對映，請參閱 references/typography.md。

3. 顏色與深色模式（Color & Dark Mode）

核心概念： iOS 提供語意化系統顏色，能在亮色與深色外觀之間自動自適應，同時保持對比度與層級感。

關鍵洞察：

• 使用 Color(.label)、Color(.secondaryLabel)、Color(.systemBackground) 代替硬編碼顏色
• Color(.systemBlue) 為預設色調（tint）；.systemRed 用於破壞性動作；.systemGreen 用於成功狀態
• 深色模式會反轉文字顏色並將背景調深，同時保持相對層級；強調色需要較低的亮度與較高的飽和度以凸顯出來
• 在兩種模式下均保持 4.5:1 的對比度；開發期間需同時預覽兩種模式

產品應用：

情境	顏色模式	範例
主要文字	Color(.label)	依模式自適應黑/白
次要文字	Color(.secondaryLabel)	兩種模式下皆為 60% 不透明度
背景	Color(.systemBackground) / .secondarySystemBackground	分層深度
破壞性動作	Color(.systemRed)	刪除按鈕、警告
互動色調	App 強調色或 .systemBlue	連結、切換開關狀態

程式碼模式：

• 在預覽中使用 .preferredColorScheme(.light) 與 .dark 並排測試兩種模式
• 在 Asset Catalog 中定義包含亮色/深色變體的自訂顏色，而非在程式碼中硬編碼
• 絕不假設背景是純白或純黑；在啟用「增加對比」的情況下進行測試

當檢查對比度時——包含完整的 WCAG 比率表（一般文字、大文字、UI 元件）以及三級/分組背景 Token，請參閱 references/colors-depth.md。

4. 導覽模式（Navigation Patterns）

核心概念： iOS 使用分層導覽模型：標籤列用於主要分頁、導覽堆疊用於層級深入，以及模態視窗（modals）用於聚焦任務。使用者依賴這些模式來了解自己身在何處以及如何返回；重新發明這些模式會讓 App 顯得生硬陌生。

關鍵洞察：

• 標籤列：2-5 個主要分頁，始終可見，並記住每個標籤頁的狀態
• 導覽列：返回按鈕（左上）、標題（置中或大標題）、動作（右上）；滾動時大標題會收合
• 模態視窗用於聚焦任務；透過向下滑動或明確的關閉按鈕關閉
• 切勿使用漢堡選單（hamburger menu）——iOS 使用者期望使用標籤列
• 搜尋列可位於導覽列下方，下拉時才顯示

產品應用：

情境	導覽模式	範例
App 架構	包含 3-5 個標籤頁的標籤列	首頁、搜尋、個人檔案
內容層級	推入導覽（Push navigation / 深入層級）	列表 > 詳細資訊 > 編輯
聚焦任務	模態呈現（Modal presentation）	撰寫、設定、篩選器
搜尋	下拉搜尋列	Spotlight 風格搜尋
分拆視圖	iPad 側邊欄 + 詳細資訊	iPad 上的郵件、備忘錄

程式碼模式：

• 返回按鈕的文字應為前一個螢幕的標題，而非 "Back"
• 標籤列標籤應為單一字詞（如 "首頁"、"搜尋"）；模態標題應描述該任務（如 "新訊息"、"編輯個人檔案"）
• 在 SwiftUI 中使用 NavigationStack（而非已廢棄的 NavigationView）

5. 控制項與輸入（Controls & Inputs）

核心概念： iOS 提供了豐富的原生控制項庫（按鈕、列表、切換開關、選取器、選單、文字欄位），使用者已經非常熟悉且有心理預期。

為何有效： 原生控制項內建了無障礙功能、觸覺回饋（haptics）與已被使用者習得的互動模式；自訂控制項會造成摩擦，且容易遺漏 Apple 已經解決的邊角情況（edge cases）。

關鍵洞察：

• 頁面級動作置於導覽列（頂部）或動作列（底部）
• 主要按鈕以主題顏色填滿；次要按鈕為外框線或僅文字
• 破壞性動作使用紅色，且不可逆時需要確認
• 列表（Table views）是 iOS 的基本內容模式
• 將鍵盤類型與輸入匹配（.emailAddress、.phonePad、.URL）；使用 .textContentType 以實現自動填入

產品應用：

情境	控制項模式	範例
表單	具備適當鍵盤類型的原生文字欄位	帶有 @ 鍵盤的 Email 欄位
設定	包含切換開關、展開箭頭的分組列表	iOS 設定風格
選取	選取器（Picker）、分段控制項（Segmented control）或動作選單（Action sheet）	日期選取器、排序選項
破壞性動作	紅色按鈕 + 確認警示框	"刪除帳號" 流程
情境動作	長按選單或滑動動作	列上的編輯、分享、刪除

程式碼模式：

• 將 .keyboardType(.emailAddress) 與 .textContentType(.emailAddress) 搭配使用
• 優先使用系統確認：.alert() 或 .confirmationDialog()；在列表列上使用 .swipeActions
• 將主要動作按鈕放在螢幕底部拇指可及的範圍內

道德界線： 絕不將廣告偽裝成原生控制項，或使破壞性動作容易被意外觸發。

當建構特定控制項時——按鈕樣式、列表/區段變體、選取器 vs 分段控制項的選擇，以及確認對話框的串接，請參閱 references/components.md。建構表單時——鍵盤類型表、輸入輔助視圖（input accessory views）以及硬體鍵盤快捷鍵，請參閱 references/keyboard-input.md。

6. 無障礙功能（Accessibility）

核心概念： iOS 擁有世界級的無障礙功能（VoiceOver、動態型級、切換控制、語音控制），每個 App 都必須將支援這些功能視為第一要務。App Store 審查可能會退回無法透過輔助技術使用的 App。

關鍵洞察：

• 每個互動元素都需要 .accessibilityLabel；狀態使用 .accessibilityValue，效果使用 .accessibilityHint
• 使用 .accessibilityElement(children: .combine) 將相關元素分組
• 在所有尺寸下支援動態型級（Dynamic Type）；在最大設定下進行測試
• 將 44 x 44pt 觸控目標（第 1 節）與 4.5:1 最小對比度（第 3 節）視為無障礙功能要求，而非僅是視覺預設值
• 切勿僅透過顏色來傳達資訊

產品應用：

情境	無障礙模式	範例
圖示	.accessibilityLabel("收藏")	帶有標籤的心形圖示
滑桿	.accessibilityValue("\(Int(volume * 100))%")	音量控制
按鈕	.accessibilityHint("分享此項目")	分享按鈕
分組	.accessibilityElement(children: .combine)	頭像 + 姓名列
圖片	裝飾性：.accessibilityHidden(true)	背景圖案

程式碼模式：

• 標籤寫成名詞（如 "收藏"、"設定"）；提示寫成動作（如 "與他人分享此項目"）
• 僅使用 VoiceOver 測試完整的 App 流程
• 使用 Xcode 的 Accessibility Inspector 進行檢視