ios-hig-design

iOS 人机界面指南（HIG）设计 Skill

一套用于设计直观、一致且符合 Apple 设计理念的原生 iOS 界面设计框架。基于 Apple 人机界面指南（HIG）构建，该指南是让应用无缝融入 iPhone、iPad 和 Apple 生态系统的权威指南。

核心原则

Apple 的 iOS 设计理念建立在三大支柱之上：清晰度（Clarity）（每个元素都清晰易读且富有用意）、让位内容（Deference）（界面绝不抢占其展示内容的风头）和层次深度（Depth）（通过分层、过渡与真实的动效来传达层级与空间关系）。

底层逻辑： 顶尖的 iOS 应用会深入内化这一理念，而非机械地照搬 HIG 规则。原生组件、系统规范与平台一致性并非束缚——恰恰相反，正是因为这些设计，iOS 用户才会信任并喜爱那些“浑然一体、原生感十足”的应用。

评分标准

目标：10/10 分。 快速诊断表（共 6 行）中每满足一行得 1 分；另有最高 4 分的原生体验加分项：全程使用语义化颜色/文本样式（无硬编码值）+1 分，优先使用系统控件而非自定义重新实现 +1 分，采用标准手势与恰到好处的触觉反馈 +1 分，使用 SF Symbols 及正确的 App 图标形状 +1 分。得分区间：9-10 分 = 完美原生、无障碍友好、完美适配深色模式与动态字体（Dynamic Type），无任何异类设计模式；5-6 分 = 功能正常，但夹杂 Android 设计习惯或存在颜色/尺寸硬编码；<=3 分 = 未适配安全区域、触控热区过小或未支持 VoiceOver。评估时须明确给出得分，并列出达到 10/10 分所需的具体改进项。

iOS 设计框架

1. 布局与安全区域

核心概念： iOS 设备拥有特定的屏幕尺寸、安全区域边距（safe area insets）以及硬件遮挡区（刘海、灵动岛、底部主屏幕指示条），所有布局都必须严格遵循这些规范。

关键要点：

• 优先针对最小屏幕尺寸进行设计（如宽度为 375pt 的 iPhone SE）
• 安全区域用于防止内容被刘海、灵动岛或主屏幕指示条遮挡——切勿将可交互元素放置在遮挡区下方
• 标准内容边距：距离屏幕边缘 16-20pt；间距增量单位：8 / 16 / 24pt
• 最小触控热区（Touch Target）及列表行高：44pt

产品应用场景：

场景	布局模式	示例
状态栏（Status bar）	经典机型 20pt，灵动岛机型 44-54pt	时间、信号、电池区域
导航栏（Navigation bar）	44pt 标准行 + ~52pt 大标题（共约 96pt）	返回按钮、标题、操作项
内容区（Content area）	弹性可滚动，严格遵循安全区域	应用主要内容
标签栏（Tab bar）	49pt 高度，带毛玻璃模糊的半透明效果	2-5 个核心一级入口
主屏幕指示条（Home indicator）	底部 34pt 缩进区域	系统手势响应区

参考代码范式：

• 使用默认遵循安全区域的 VStack { }
• 仅将 .ignoresSafeArea() 用于背景和装饰性元素，绝不用于可交互内容
• 在多种机型尺寸上进行测试，包括 iPhone SE 和 Pro Max

在布局应用外框框架（Chrome）时，请参考 references/navigation.md——包含导航栏与标签栏的精确尺寸、大标题滚动折叠行为以及分栏视图（Split View）规则。

2. 排版与动态字体（Dynamic Type）

核心概念： iOS 采用 San Francisco（SF Pro）字体，并提供语义化文本样式。这些样式可通过动态字体（Dynamic Type）自动缩放以支持无障碍体验。语义化样式能确保平台层级结构清晰一致；动态字体则能让用户在按需调整字号的同时，布局依然完好不破裂。

关键要点：

• 大标题（Large Title）：34pt 粗体；标题（Title）：17pt 中粗；正文（Body）：17pt 常规；标注（Caption）：12-13pt；次要文本：15pt（60% 透明度）
• 最小字号 11pt（仅限标注/次要文本）
• 行高至少为字号的 1.3 倍；移动端最佳每行字数建议为 35-50 个字符（或 20-30 个汉字）
• 始终左对齐，避免使用两端对齐

产品应用场景：

场景	排版模式	示例
页面标题	.largeTitle 或 .title 样式	大标题在向上滚动时自动折叠
正文内容	.body 样式，17pt	列表项、描述文本
次要信息	.subheadline 或 .footnote 样式	时间戳、元数据
标签栏文案	10pt SF 字体	标签栏图标下方文字
按钮	.body 样式，半粗体（Semibold）	主操作按钮文本

参考代码范式：

• 使用 .font(.title)、.font(.body)、.font(.caption) 代替硬编码字号；对于需要按比例缩放的自定义间距，请使用 @ScaledMetric
• 建立视觉层级时，优先通过字重和颜色差异来实现，而非拉大字号差距
• 在最大动态字体（Dynamic Type）字号下测试所有布局表现

在对照精确设计规范时，请参考 references/typography.md——包含每种样式的 Hex 色值及深色模式下的文本颜色映射关系。

3. 颜色与深色模式（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	链接、开关选中状态

参考代码范式：

• 在 Preview 预览中使用 .preferredColorScheme(.light) 与 .dark 并排测试浅色和深色模式
• 在 Asset Catalog 中定义自定义颜色的浅色/深色变体，切勿直接写死在代码中
• 绝不要假定背景只有纯白或纯黑；开启“增强对比度（Increase Contrast）”模式进行测试

在检查对比度时，请参考 references/colors-depth.md——包含完整的 WCAG 对比度对照表（普通文本、大文本、UI 组件）以及三级/分组背景（tertiary/grouped-background）设计令牌 Token。

4. 导航模式

核心概念： iOS 采用分层导航模型：标签栏（Tab Bar）用于一级核心入口，导航栈（Navigation Stack）用于层级深挖与下钻，模态框（Modal）用于聚焦特定任务。用户非常依赖这些既有模式来明确“身在何处”以及“如何返回”；强行造轮子重新发明导航会让应用显得格格不入。

关键要点：

• 标签栏：2-5 个核心一级入口，常驻显示，各 Tab 独立记忆页面状态
• 导航栏：返回按钮（左上角）、标题（居中或大标题）、操作按钮（右上角）；大标题在向上滚动时自动收起折叠
• 模态框：用于集中处理特定独立任务；支持下滑手势或显式点击关闭按钮来取消/关闭
• 切勿使用汉堡包菜单（Hamburger Menu）——iOS 用户的习惯是底栏 Tab 切换
• 搜索栏可至于导航栏下方，默认隐藏，下拉页面即可展开显示

产品应用场景：

场景	导航模式	示例
应用整体架构	带 3-5 个 Tab 的标签栏	首页、搜索、个人中心
内容层级关系	Push 导航（逐层下钻）	列表 > 详情 > 编辑
独立聚焦任务	模态弹窗/半屏页（Modal）	发帖/撰写、设置、筛选
搜索	下拉展开搜索栏	类似 Spotlight 的搜索体验
分栏视图	iPad 侧边栏 + 详情页	iPad 上的邮件、备忘录应用

参考代码范式：

• 返回按钮文案应显示上一级页面的标题，而非硬生生的“返回”或“Back”
• 标签栏文案尽量精简为单个词（如“首页”、“搜索”）；模态框标题应准确描述当前任务（如“新建消息”、“编辑资料”）
• 在 SwiftUI 中请使用 NavigationStack（避免使用已废弃的 NavigationView）

5. 控件与输入

核心概念： iOS 提供了极其丰富的原生控件库（按钮、列表、开关 Toggle、选择器 Picker、菜单 Menu、文本框 Text Field 等），用户对其交互逻辑早已了然于心。

底层逻辑： 原生控件开箱即用自带无障碍支持、触觉反馈（Haptics）以及符合用户直觉的交互逻辑；手造自定义控件往往会增加用户的使用门槛，且极易遗漏 Apple 早就解决掉的边缘异常情况。

关键要点：

• 页面级操作放置于顶部导航栏（Nav Bar）或底部操作栏（Action Bar）
• 主按钮使用品牌主题色填满填充；次要按钮使用边框线框或纯文本形式
• 不可逆的破坏性操作必须使用红色，并弹出确认提示框
• 列表（Table Views / Lists）是 iOS 最核心的内容展示范式
• 键盘类型必须与输入内容精准匹配（如 .emailAddress、.phonePad、.URL）；配合使用 .textContentType 实现自动填充

产品应用场景：

场景	控件范式	示例
表单输入	配备对应键盘类型的原生输入框	带 @ 键的邮箱输入键盘
设置项	带开关和箭头指示的分组列表	iOS 系统设置风格
选项选择	选择器（Picker）、分段控件（Segmented Control）或操作表（Action Sheet）	日期选择器、排序方式选择
破坏性操作	红色按钮 + 二次确认 Alert 弹窗	“注销账号”流程
上下文操作	长按菜单（Menu）或列表项滑动操作（Swipe Action）	列表行上的编辑、分享、删除

参考代码范式：

• 组合使用 .keyboardType(.emailAddress) 与 .textContentType(.emailAddress)
• 优先选择系统级确认弹窗：.alert() 或 .confirmationDialog()；列表行推荐使用 .swipeActions
• 将核心主操作按钮放置在屏幕底部单手拇指触及范围内

合规与伦理边界： 严禁将广告伪装成原生控件，或将破坏性操作设计得极易误触。

在构建具体控件时，请参考 references/components.md——包含按钮样式、列表/分组变体、Picker 与 Segmented Control 的选型指南以及确认弹窗的逻辑绑定。在构建表单时，请参考 references/keyboard-input.md——包含键盘类型对照表、输入辅助视图（Input Accessory View）以及硬件键盘快捷键设置。

6. 无障碍支持（Accessibility）

核心概念： iOS 拥有世界顶尖的无障碍特性（VoiceOver 旁白、动态字体 Dynamic Type、切换控制 Switch Control、语音控制 Voice Control），每个应用都必须将其作为一等公民对待。若应用无法被辅助技术正常使用，可能会在 App Store 审核中被拒绝上架。

关键要点：

• 每个可交互元素都必须配备 .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)	背景花纹/图案

参考代码范式：

• 标签（Label）建议写成名词（如“收藏”、“设置”）；提示（Hint）建议写成动词短语（如“与他人分享此项目”）
• 尝试仅开启 VoiceOver 旁白模式来完成整个应用的核心流程测试
• 使用 Xcode 的 Accessibility Inspector 进行自动检查

<!-- truncated for translation batch; full body continues in source -->