ios-hig-design

iOS 人机界面指南设计技能

用于设计原生 iOS 界面的框架，让界面直观、一致，并符合 Apple 的设计理念。基于 Apple 的《人机界面指南》，这是打造可与 iPhone、iPad 和 Apple 生态系统无缝集成的应用的权威参考。

核心原则

Apple 的 iOS 设计理念基于三大支柱：清晰（每个元素都清晰易读且目的明确）、尊重内容（界面绝不喧宾夺主，掩盖所呈现的内容）以及纵深感（通过分层、转场和逼真的动态效果传达层级与空间关系）。

**基础：**最好的 iOS 应用会将这一理念融会贯通，而不是机械地遵循 HIG 规则。原生组件、系统惯例和平台一致性并非限制——它们正是 iOS 用户信任并喜爱那些原生应用的原因。

评分

目标：10/10。快速诊断（6 行）中每满足一行得 1 分；原生设计习惯另加最多 4 分：全程使用语义颜色和文本样式（不硬编码值）+1 分；优先使用系统控件，而非自定义重制控件 +1 分；采用标准手势和有意义的触觉反馈 +1 分；使用 SF Symbols 和正确的应用图标形状 +1 分。评分区间：9-10 = 原生、无障碍、适配深色模式和动态字体大小，不含任何异质设计模式；5-6 = 可以运行，但混入 Android 设计习惯或硬编码颜色/尺寸；<=3 = 未能正确处理安全区域、触控目标或 VoiceOver。务必说明评分，以及达到 10/10 所需的具体改进。

iOS 设计框架

1. 布局与安全区域

**核心概念：**iOS 设备有特定的屏幕尺寸、安全区域内边距和硬件占用区域（刘海、灵动岛、主屏幕指示器），所有布局都必须考虑这些因素。

要点：

• 先针对最小屏幕设计（宽度 375pt，iPhone SE）
• 安全区域用于保护内容不受刘海、灵动岛和主屏幕指示器遮挡——切勿将交互元素放在这些区域下方
• 标准内容边距：距屏幕边缘 16-20pt；间距增量：8 / 16 / 24pt
• 最小触控目标和列表行高：44pt

产品应用：

场景	布局模式	示例
状态栏	经典布局为 20pt，灵动岛设备为 44-54pt	时间、信号、电池区域
导航栏	标准行高 44pt + 大标题约 52pt（总计约 96pt）	返回按钮、标题、操作项
内容区域	灵活、可滚动，并遵循安全区域	应用主要内容
标签栏	高 49pt，半透明并带模糊效果	2-5 个主要目的地
主屏幕指示器	底部内边距 34pt	系统手势区域

代码模式：

• 使用 VStack { }，它默认遵循安全区域
• 仅对背景和装饰使用 .ignoresSafeArea()，切勿用于交互内容
• 在多种屏幕尺寸上进行测试，包括 iPhone SE 和 Pro Max

布局界面外壳时，请参阅 references/navigation.md——了解导航栏和标签栏的精确尺寸、大标题行为以及分栏视图规则。

2. 字体排印与动态字体

核心概念： iOS 使用 San Francisco（SF Pro）字体，并通过语义文本样式支持 Dynamic Type，自动缩放以满足无障碍需求。语义样式提供一致的平台层级；Dynamic Type 让用户可以按自己偏好的字号阅读，同时不会破坏布局。

关键要点：

• Large Title：34pt Bold；Title：17pt Medium；Body：17pt Regular；Caption：12-13pt；次要文本：15pt，透明度为 60%
• 最小文本字号为 11pt（仅用于说明文字和次要文本）
• 行高至少为字号的 1.3 倍；移动设备上的最佳行长为 35-50 个字符
• 始终使用左对齐，不要两端对齐

产品应用：

场景	字体排印模式	示例
屏幕标题	.largeTitle 或 .title 样式	大标题在滚动时收起
正文内容	.body 样式，17pt	列表项、描述
次要信息	.subheadline 或 .footnote	时间戳、元数据
标签栏标签	10pt SF 文本	标签栏项目标签
按钮	.body 半粗体	主要操作文本

文案模式：

• 使用 .font(.title)、.font(.body)、.font(.caption)，而不是硬编码字号；使用 @ScaledMetric 设置可随字号缩放的自定义间距
• 优先通过字重和颜色变化来体现层级，避免字号差异过大
• 在最大的 Dynamic Type 字号下测试所有布局

需要根据精确规范匹配设计时，请参阅 references/typography.md——其中包含各样式的十六进制颜色值和深色模式文本颜色映射。

3. 颜色与深色模式

核心概念： iOS 提供语义系统颜色，可在浅色和深色外观之间自动适配，同时保持对比度和层级。

关键要点：

• 使用 Color(.label)、Color(.secondaryLabel)、Color(.systemBackground)，而不是硬编码颜色
• Color(.systemBlue) 是默认强调色；破坏性操作使用 .systemRed；成功状态使用 .systemGreen
• 深色模式会反转文本颜色并将背景调暗，同时保持相对层级；强调色需要降低亮度、提高饱和度，才能更加醒目
• 两种模式下都要保持 4.5:1 的对比度；开发过程中预览两种模式

产品应用：

场景	颜色模式	示例
主要文本	Color(.label)	根据模式适配为白色或黑色
次要文本	Color(.secondaryLabel)	两种模式下透明度均为 60%
背景	Color(.systemBackground) / .secondarySystemBackground	形成分层纵深感
破坏性操作	Color(.systemRed)	删除按钮、警告
交互强调色	App 强调色或 .systemBlue	链接、切换状态

文案模式：

• 在预览中使用 .preferredColorScheme(.light) 和 .dark，并排测试两种模式
• 在资源目录中定义带有浅色/深色变体的自定义颜色，不要在代码中定义
• 切勿假设背景一定是白色或黑色；启用“增强对比度”后进行测试

需要检查对比度时，请参阅 references/colors-depth.md——其中包含完整的 WCAG 比率表（普通文本、大文本、UI 组件）以及第三级/分组背景令牌。

4. 导航模式

核心概念： iOS 采用分层导航模型：使用标签栏呈现主要目的地，使用导航堆栈逐层深入内容，使用模态界面处理专注任务。用户依靠这些模式了解自己当前的位置以及如何返回；重新设计这些模式会让应用显得格格不入。

关键要点：

• 标签栏：包含 2-5 个主要目的地，始终可见，并记住每个标签页的状态
• 导航栏：返回按钮（左上角）、标题（居中或大标题）和操作项（右上角）；滚动时大标题会收起
• 专注任务使用模态界面；通过向下滑动或点击明确的关闭按钮来关闭
• 切勿使用汉堡菜单——iOS 用户期待使用标签栏
• 搜索栏可以放在导航栏下方，并在用户向下拉动时显示

产品应用：

场景	导航模式	示例
应用结构	包含 3-5 个标签页的标签栏	Home、Search、Profile
内容层级	推入式导航（逐层深入）	列表 > 详情 > 编辑
专注任务	模态呈现	撰写、设置、筛选器
搜索	下拉显示搜索栏	Spotlight 风格搜索
分栏视图	iPad 侧边栏 + 详情	iPad 上的 Mail、Notes

文案模式：

• 返回按钮应显示上一屏的标题，而不是“返回”
• 标签页标签使用单个词（“Home”“Search”）；模态标题描述任务（“新建消息”“编辑个人资料”）
• 在 SwiftUI 中使用 NavigationStack（而非已弃用的 NavigationView）

5. 控件与输入

核心概念： iOS 提供丰富的原生控件库（按钮、列表、开关、选择器、菜单、文本字段），用户已经熟悉并期待这些控件。

有效原因： 原生控件内置无障碍功能、触觉反馈和用户熟悉的交互模式；自定义控件会增加使用阻力，也会遗漏 Apple 已解决的边缘情况。

关键要点：

• 页面级操作放在导航栏（顶部）或操作栏（底部）
• 主要按钮使用主题色填充；次要按钮使用描边样式或纯文本样式
• 危险操作使用红色；不可撤销的操作需要确认
• 列表（表格视图）是 iOS 的基本内容模式
• 输入内容应匹配键盘类型（.emailAddress、.phonePad、.URL）；使用 .textContentType 启用自动填充

产品应用：

场景	控件模式	示例
表单	使用合适键盘类型的原生文本字段	带 @ 键的邮箱字段
设置	包含开关和指示箭头的分组列表	iOS 设置风格
选择	选择器、分段控件或操作菜单	日期选择器、排序选项
危险操作	红色按钮 + 确认提醒	“删除账户”流程
上下文操作	长按菜单或滑动操作	对列表行进行编辑、分享、删除

文案模式：

• 将 .keyboardType(.emailAddress) 与 .textContentType(.emailAddress) 搭配使用
• 优先使用系统确认方式：.alert() 或 .confirmationDialog()；对列表行使用 .swipeActions
• 将主要操作按钮放在屏幕底部，方便拇指触及

伦理边界： 切勿将广告伪装成原生控件，也不要让用户容易误触危险操作。

构建特定控件时，请参阅 references/components.md——其中介绍按钮样式、列表/分区变体、选择器与分段控件的选择，以及确认对话框的配置。构建表单时，请参阅 references/keyboard-input.md——其中包含键盘类型表、输入辅助视图和硬件键盘快捷键。

6. 无障碍功能

核心概念： iOS 拥有一流的无障碍功能（VoiceOver、Dynamic Type、Switch Control、Voice Control），每个 App 都必须将其作为首要考量予以支持。若 App 无法与辅助技术配合使用，App Store 审核可能会拒绝上架。

关键要点：

• 每个交互元素都需要 .accessibilityLabel；使用 .accessibilityValue 表示状态，使用 .accessibilityHint 说明效果
• 使用 .accessibilityElement(children: .combine) 将相关元素组合起来
• 支持所有字号的 Dynamic Type；在最大字号设置下进行测试
• 将 44 x 44pt 的触控目标（第 1 节）和最低 4.5:1 的对比度（第 3 节）视为无障碍要求，而不只是视觉默认设置
• 切勿仅通过颜色传达含义

产品应用：

情境	无障碍模式	示例
图标	.accessibilityLabel("Favorite")	带标签的心形图标
滑块	.accessibilityValue("\(Int(volume * 100))%")	音量控制
按钮	.accessibilityHint("Shares this item")	分享按钮
分组	.accessibilityElement(children: .combine)	头像 + 姓名行
图片	装饰性图片：.accessibilityHidden(true)	背景图案

文案模式：

• 标签使用名词（"Favorite"、"Settings"）；提示使用动作描述（"Shares this item with others"）
• 仅使用 VoiceOver 测试完整的 App 流程
• 使用 Xcode 的 Accessibility Inspector 检查对比度和标签

签字确认前，请参阅 references/accessibility.md——其中包含完整的 VoiceOver 实现模式，以及用于测试 App 的发布前无障碍检查清单。

7. 图标与图片

核心概念： iOS 使用 SF Symbols 作为标准图标系统，并要求 App 图标采用特定尺寸；标志性的超椭圆（“圆角方形”）蒙版会自动应用。SF Symbols 在视觉上与 San Francisco 文本对齐，并随 Dynamic Type 缩放，因此在各种字重和尺寸下都能保持对齐和清晰。

关键要点：

• 所有标准图标均使用 SF Symbols（Image(systemName:)）——它们会随文本缩放
• App 图标：导出为 1024x1024px 正方形；iOS 会应用圆角方形蒙版（圆角半径 = 边长 x 0.222，平滑度为 61%）
• iOS 18+ 支持浅色、深色和着色图标变体
• 避免在 App 图标中使用文字；设计应简洁，并采用易于识别的轮廓

产品应用：

情境	图标模式	示例
标签栏	SF Symbols，选中时使用填充变体	house.fill、magnifyingglass
导航栏	使用常规字重的 SF Symbols	gear、plus、ellipsis
列表附属元素	使用次要颜色的 SF Symbols	chevron.right、checkmark
App 图标	1024px 正方形，简洁醒目的设计	单个易于识别的字形

文案模式：

• 使用 Image(systemName: "heart.fill")；应用 .symbolRenderingMode(.hierarchical) 呈现多色层次效果
• 使用 .imageScale(.large) 或 .font()，让符号尺寸与文本相匹配
• 在 Apple 免费提供的 SF Symbols App 中浏览符号

道德边界： 切勿使用暗示不存在的功能或与 iOS 惯例相悖的图标（垃圾桶表示删除，而非归档）。

导出 App 图标时，请参阅 references/app-icons.md——其中包含按情境划分的尺寸表、精确的圆角方形计算方法，以及 iOS 18 浅色／深色／着色变体的要求。

8. 手势与触觉反馈

核心概念： iOS 定义了标准手势（向右滑动返回、下拉刷新、长按打开上下文菜单）和必须遵循、不得覆盖的触觉反馈模式。手势会形成肌肉记忆——重新定义向右滑动返回或下拉刷新会让用户感到困惑；触觉反馈则能在无形中确认操作已被识别。

关键要点：

• 不得覆盖：从屏幕边缘向右滑动（返回）、在模态视图上向下滑动（关闭）、在列表上下拉（刷新）
• 在行项目上向左滑动可显示操作；长按可显示上下文菜单；捏合可缩放图像和地图
• 三种触觉反馈类型：冲击反馈（实体操作）、通知反馈（操作结果）、选择反馈（UI 变化）
• 触觉反馈应当轻柔且有意义——绝不能持续触发或令人厌烦

产品应用：

场景	手势/触觉反馈模式	示例
导航	从左侧边缘向右滑动	系统返回手势
模态视图	向下滑动关闭	关闭工作表
列表	下拉刷新，滑动显示操作	刷新内容、删除行项目
确认	操作完成时触发 .success 触觉反馈	支付已确认
选择	切换/选择时触发选择反馈	滚动选择器滚轮

代码模式：

• 实体交互使用 UIImpactFeedbackGenerator(style: .medium)；UI 状态变化使用 UISelectionFeedbackGenerator()
• 操作结果使用带有 .success、.warning、.error 的 UINotificationFeedbackGenerator()
• 触发触觉反馈前调用 .prepare()，以尽量减少延迟

连接手势或动画时，请参阅 references/gestures.md——其中包含完整的预留手势表、触觉反馈生成器用法示例，以及标准动画时长/曲线。

常见错误

错误	失败原因	修正方法
覆盖标准手势	破坏用户对向右滑动返回、下拉刷新的肌肉记忆	按预期使用系统手势；自定义手势仅用于辅助操作
触控目标小于 44pt	容易误触、令人沮丧，也会造成无障碍问题	所有交互元素至少设为 44 x 44pt
忽略安全区域	内容被刘海、灵动岛、主屏幕指示条遮挡	遵循安全区域内边距；.ignoresSafeArea() 仅用于背景
在 iOS 上使用 Android 模式	汉堡菜单、顶部标签栏、浮动操作按钮显得格格不入	使用标签栏、底部表单和原生 iOS 组件
忽略深色模式	布局异常，深色模式用户无法读清文本	使用语义颜色；测试浅色和深色外观
硬编码字体大小	无法适配 Dynamic Type，也会排斥低视力用户	全程使用语义文本样式（.title、.body、.caption）
文本对比度低	不符合 WCAG AA 标准；阳光下难以阅读	对比度至少保持 4.5:1；使用“增强对比度”进行测试
未在真实设备上测试	模拟器无法覆盖性能、触觉反馈和安全区域边缘情况	在实体设备上以最小和最大尺寸进行测试

快速诊断

审核任何 iOS 界面设计：

问题	如果否	操作
布局是否在所有设备尺寸上都遵循安全区域？	内容被硬件遮挡	在 iPhone SE 和 Pro Max 上审核；修正内边距
所有触控目标是否至少为 44 x 44pt？	容易误触，也会造成无障碍问题	增大点击区域；使用 .frame(minWidth: 44, minHeight: 44)
应用是否能在深色模式下完整运行？	深色模式用户的 UI 异常或无法读清	将硬编码颜色替换为语义系统颜色
文本是否会随 Dynamic Type 正确缩放？	排斥低视力用户	使用语义文本样式；在最大设置下测试
VoiceOver 用户能否完成每项任务？	盲人用户无法访问应用	为所有交互元素添加标签、值和提示
导航模式是否符合 iOS 原生规范？	应用显得格格不入	将汉堡菜单替换为标签栏；使用标准的推入式/模态导航

超越核心 UI

上文的八个框架章节都在相应位置内联链接了深入参考资料。另有三份参考资料介绍了屏幕 UI 之外的系统界面：

• 当应用请求访问相机、位置、联系人或任何受保护的资源时，请参阅 references/privacy-permissions.md——了解请求时机、权限请求前的引导界面、用途说明文案，以及权限被拒后的恢复流程。
• 构建主屏幕小组件、App Clip、实时活动或分享/操作扩展时，请参阅 references/widgets-extensions.md——了解支持的尺寸及各界面的设计限制。
• 将应用接入操作系统时，请参阅 references/system-integration.md——了解 Siri/Shortcuts 意图、Handoff、拖放、通用链接和 Spotlight 索引。

延伸阅读

如需完整指南、平台专属指导和最新更新，请参阅：

• Apple 人机界面指南 --- 所有 Apple 平台的权威参考
• SF Symbols --- Apple 的图标系统，包含 5,000 多个可配置符号
• Apple 设计资源 --- 官方 Figma/Sketch 模板和 UI 工具包
• WWDC 设计专题 --- 介绍设计原则和新功能的视频
• 《Designed by Apple in California》 --- 展示 Apple 设计流程的摄影集（已绝版；Apple 不再销售）
• Don Norman 所著的 《The Design of Everyday Things》 --- 影响了 Apple 的以人为本设计著作
• William Lidwell、Kritina Holden 和 Jill Butler 所著的 《Universal Principles of Design》 --- 125 条适用于 iOS 的设计原则

关于作者

Apple 人机界面指南由 Apple 人机界面设计团队编写并维护。该团队是科技领域最具影响力的设计组织之一。HIG 于 1984 年与初代 Macintosh 一同首次发布，确立了直接操控、一致性和用户控制等原则，定义了图形界面设计，并随着 iPhone、iPad、Apple Watch 和 Vision Pro 不断演进。它仍可在 developer.apple.com 免费获取，是 Apple 平台的必备参考资料。