ios-hig-design

iOS 人机界面指南设计技能

设计直观、一致且符合苹果设计哲学的原生 iOS 界面的框架。基于苹果人机界面指南，这是与 iPhone、iPad 和苹果生态系统无缝集成的应用的权威资源。

核心原则

苹果的 iOS 设计哲学建立在三大支柱上：清晰性（每个元素清晰且有目的）、谦逊（界面永不掩盖其呈现的内容）和深度（分层、过渡和逼真的运动传达层次和空间关系）。

基础： 最好的 iOS 应用内化这一哲学，而不是机械地遵循 HIG 规则。原生组件、系统惯例和平台一致性不是约束——它们是 iOS 用户信任和享受感觉属于这里的应用的原因。

评分

目标：10/10。 每满足快速诊断的一行得 1 分（共 6 行），加上最多 4 分用于原生习惯用法：+1 语义颜色/文本样式贯穿始终（无硬编码值），+1 系统控件而非自定义重新实现，+1 标准手势和有意义的触觉反馈，+1 SF Symbols 和正确的应用图标形状。等级：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

在布局 chrome 时请参见 references/navigation.md——精确的导航栏和标签栏尺寸、大标题行为和分屏规则。

2. 排版与动态类型

核心概念： iOS 使用 San Francisco (SF Pro) 字体，带有语义文本样式，通过动态类型自动缩放以适应无障碍需求。语义样式提供一致的平台层次结构；动态类型让用户以他们喜欢的尺寸阅读而不会破坏布局。

关键见解：

• 大标题：34pt 粗体；标题：17pt 中等；正文：17pt 常规；说明：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 进行自定义间距缩放
• 优先使用粗细和颜色变化而非极端大小差异来建立层次结构
• 在最大的动态类型尺寸下测试所有布局

在将设计与精确规格匹配时请参见 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)	删除按钮、警告
交互色调	应用强调色或 .systemBlue	链接、切换状态

复制模式：

• 在预览中使用 .preferredColorScheme(.light) 和 .dark 并排测试两种模式
• 在 Asset Catalog 中定义自定义颜色，带有浅色/深色变体，而不是在代码中
• 切勿假设背景是白色或黑色；在启用“增强对比度”的情况下测试

在检查对比度时请参见 references/colors-depth.md——完整的 WCAG 比率表（普通文本、大文本、UI 组件）以及三级/分组背景标记。

4. 导航模式

核心概念： iOS 使用分层导航模型：标签栏用于主要目的地，导航堆栈用于层次化深入，模态视图用于聚焦任务。用户依赖这些模式来知道他们在哪里以及如何返回；重新发明它们会让应用感觉陌生。

关键见解：

• 标签栏：2-5 个主要目的地，始终可见，每个标签记住状态
• 导航栏：返回按钮（左上）、标题（居中或大）、操作（右上）；大标题在滚动时折叠
• 模态视图用于聚焦任务；通过向下滑动或明确的关闭按钮关闭
• 切勿使用汉堡菜单——iOS 用户期望标签栏
• 搜索栏可以位于导航栏下方，隐藏直到下拉

产品应用：

上下文	导航模式	示例
应用结构	3-5 个标签的标签栏	首页、搜索、个人资料
内容层次	推送导航（深入）	列表 > 详情 > 编辑
聚焦任务	模态呈现	撰写、设置、筛选
搜索	下拉搜索栏	Spotlight 风格搜索
分屏视图	iPad 侧边栏 + 详情	邮件、备忘录在 iPad 上

复制模式：

• 返回按钮文本应为上一屏幕的标题，而不是“返回”
• 标签栏标签是单个词（“首页”、“搜索”）；模态标题描述任务（“新消息”、“编辑个人资料”）
• 在 SwiftUI 中使用 NavigationStack（而非已弃用的 NavigationView）

5. 控件与输入

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

为什么有效： 原生控件内置了无障碍、触觉反馈和习得的交互模式；自定义控件会产生摩擦并错过苹果已经解决的边缘情况。

关键见解：

• 页面级操作位于导航栏（顶部）或操作栏（底部）
• 主要按钮使用主题色填充；次要按钮为轮廓或仅文本
• 破坏性操作使用红色，并在不可逆时要求确认
• 列表（表格视图）是 iOS 的基本内容模式
• 将键盘类型与输入匹配（.emailAddress、.phonePad、.URL）；使用 .textContentType 实现自动填充

产品应用：

上下文	控件模式	示例
表单	原生文本字段，带有适当的键盘类型	带有 @ 键盘的电子邮件字段
设置	分组列表，带有开关、展开指示	iOS 设置风格
选择	选择器、分段控件或操作表	日期选择器、排序选项
破坏性操作	红色按钮 + 确认提示	“删除账户”流程
上下文操作	长按菜单或滑动操作	编辑、分享、删除行

复制模式：

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

道德边界： 切勿将广告伪装成原生控件，或使破坏性操作容易意外触发。

在构建特定控件时请参见 references/components.md——按钮样式、列表/节变体、选择器与分段控件的选择以及确认对话框的连线。在构建表单时请参见 references/keyboard-input.md——键盘类型表、输入附件视图和硬件键盘快捷键。

6. 无障碍

核心概念： iOS 拥有世界一流的无障碍功能（VoiceOver、动态类型、开关控制、语音控制），每个应用都必须将其作为一等公民支持。App Store 审核可以拒绝那些无法与辅助技术一起使用的应用。

关键见解：

• 每个交互元素都需要 .accessibilityLabel；使用 .accessibilityValue 表示状态，.accessibilityHint 表示效果
• 使用 .accessibilityElement(children: .combine) 对相关元素进行分组
• 支持所有尺寸的动态类型；在最大设置下测试
• 尊重 44 x 44pt 触摸目标（第 1 节）和 4.5:1 最小对比度（第 3 节）作为无障碍要求，而不仅仅是视觉默认值
• 切勿仅通过颜色传达含义

产品应用：

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

复制模式：

• 将标签写为名词（“收藏”、“设置”）；将提示写为操作（“与他人分享此项目”）
• 仅使用 VoiceOver 测试完整的应用流程
• 使用 Xcode 的无障碍检查器审核对比度和标签

在签署前请参见 references/accessibility.md——完整的 VoiceOver 实现模式以及发布前无障碍检查清单，用于对照应用运行。

7. 图标与图像

核心概念： iOS 使用 SF Symbols 作为标准图标系统，并要求应用图标具有特定尺寸，并自动应用标志性的超椭圆（“squircle”）蒙版。SF Symbols 在视觉上与 San Francisco 文本对齐，并随动态类型缩放，因此在任何粗细和尺寸下都保持对齐和清晰。

关键见解：

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

产品应用：

上下文	图标模式	示例
标签栏	SF Symbols，选中时使用填充变体	house.fill、magnifyingglass
导航栏	SF Symbols，常规粗细	gear、plus、ellipsis
列表附件	SF Symbols，次要颜色	chevron.right、checkmark
应用图标	1024px 正方形，简单粗体设计	单个可识别字形

复制模式：

• 使用 Image(systemName: "heart.fill")；应用 .symbolRenderingMode(.hierarchical) 实现多色深度
• 使用 .imageScale(.large) 或 .font() 相对于文本调整符号大小
• 在苹果免费的 SF Symbols 应用中浏览符号

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

在导出应用图标时请参见 references/app-icons.md——每种上下文的尺寸表、精确的 squircle 数学计算以及 iOS 18 浅色/深色/着色变体要求。

8. 手势与触觉反馈

核心概念： iOS 定义了标准手势（向右滑动返回、下拉刷新、长按显示上下文菜单）和触觉反馈模式，必须尊重且切勿覆盖。手势是肌肉记忆——重新利用向右滑动返回或下拉刷新会使用户迷失方向；触觉反馈提供操作已注册的隐形确认。

关键见解：

• 切勿覆盖：从右边缘向左滑动（返回）、在模态视图上向下滑动（关闭）、在列表上向下拉（刷新）
• 在行上向左滑动显示操作；长按显示上下文菜单；捏合缩放图像和地图
• 三种触觉类型：冲击（物理操作）、通知（结果）、选择（UI 变化）
• 触觉反馈应微妙且有意义——切勿持续或烦人

产品应用：

上下文	手势/触觉模式	示例
导航	从左侧边缘向右滑动	系统返回手势
模态视图	向下滑动关闭	表单关闭
列表	下拉刷新，滑动操作	刷新内容，删除行
确认	完成时 .success 触觉	付款确认
选择	切换/选择时选择触觉	选择器滚轮滚动

复制模式：

• UIImpactFeedbackGenerator(style: .medium) 用于物理交互；UISelectionFeedbackGenerator() 用于 UI 状态变化
• UINotificationFeedbackGenerator() 配合 .success、.warning、.error 用于结果
• 在触发触觉前调用 .prepare() 以最小化延迟

在连接手势或动画时请参见 references/gestures.md——完整的保留手势表、触觉生成器配方以及标准动画时序/曲线。

常见错误

错误	失败原因	修复
覆盖标准手势	破坏向右滑动返回、下拉刷新的肌肉记忆	按预期使用系统手势；自定义手势仅用于补充操作
触摸目标小于 44pt	误触、挫败感、无障碍失败	使所有交互元素至少 44 x 44pt
忽略安全区域	内容隐藏在刘海、灵动岛、主屏幕指示器后面	尊重安全区域插入；.ignoresSafeArea() 仅用于背景
在 iOS 上使用 Android 模式	汉堡菜单、顶部标签、FAB 感觉陌生	使用标签栏、底部表单、原生 iOS 组件
跳过深色模式	布局损坏，深色模式用户文本不可读	使用语义颜色；测试两种外观
硬编码字体大小	破坏动态类型，排除低视力用户	始终使用语义文本样式（.title、.body、.caption）
低对比度文本	未通过 WCAG AA；在阳光下不可读	保持 4.5:1 最小值；在“增强对比度”下测试
未在真实设备上测试	模拟器遗漏性能、触觉、安全区域边缘情况	在最小和最大尺寸的物理设备上测试

快速诊断

审核任何 iOS 界面设计：

问题	如果否	操作
布局是否在所有设备尺寸上尊重安全区域？	内容隐藏在硬件后面	在 iPhone SE 和 Pro Max 上审核；修复插入
所有触摸目标是否至少 44 x 44pt？	误触和无障碍失败	增加点击区域；.frame(minWidth: 44, minHeight: 44)
应用在深色模式下是否完全正常工作？	深色模式用户 UI 损坏/不可读	用语义系统颜色替换硬编码颜色
文本是否随动态类型正确缩放？	排除低视力用户	使用语义文本样式；在最大设置下测试
VoiceOver 用户能否完成每个任务？	应用对盲人用户不可访问	为所有交互元素添加标签、值、提示
导航模式是否为原生 iOS？	应用感觉陌生	用标签栏替换汉堡菜单；标准推送/模态导航

超越核心 UI

上述八个框架部分各自在需要时内联链接其深度参考。另外三个参考涵盖位于屏幕 UI 之外的系统表面：

• 当应用请求相机、位置、通讯录或任何受保护资源时，请参见 references/privacy-permissions.md——请求时机、预权限提示屏幕、使用字符串措辞以及拒绝权限后的恢复路径。
• 当构建主屏幕小部件、App Clip、实时活动或分享/操作扩展时，请参见 references/widgets-extensions.md——支持的尺寸和每个表面的设计约束。
• 当将应用连接到操作系统时，请参见 references/system-integration.md——Siri/Shortcuts 意图、Handoff、拖放、通用链接和 Spotlight 索引。

延伸阅读

有关完整指南、平台特定指导和最新更新：

• 苹果人机界面指南 —— 所有苹果平台的权威参考
• SF Symbols —— 苹果的图标系统，5000 多个可配置符号
• 苹果设计资源 —— 官方 Figma/Sketch 模板和 UI 套件
• WWDC 设计会议 —— 关于设计原则和新功能的视频
• "Designed by Apple in California" —— 苹果设计过程的摄影集
• "The Design of Everyday Things" 作者 Don Norman —— 影响苹果的以人为中心的设计文本
• "Universal Principles of Design" 作者 William Lidwell、Kritina Holden 和 Jill Butler —— 125 条适用于 iOS 的原则

关于作者

苹果人机界面指南由苹果人机界面设计团队编写和维护，该团队是技术领域最具影响力的设计组织之一。HIG 于 1984 年与最初的 Macintosh 一起首次发布，确立了定义图形界面设计的原则——直接操作、一致性、用户控制——并随着 iPhone、iPad、Apple Watch 和 Vision Pro 的发展而演变。它仍然在 developer.apple.com 上免费提供，作为苹果平台的必备参考。