名称: ios-hig-design 描述: ‘基于苹果人机界面指南的原生iOS应用设计框架。在以下情况下使用：(1) 设计遵循苹果规范的iPhone/iPad界面，(2) 构建感觉原生的SwiftUI/UIKit组件，(3) 实现导航模式，(4) 确保无障碍合规，(5) 处理安全区域和动态岛，(6) 根据HIG标准验证设计。’ 许可证: MIT 元数据: 作者: wondelai 版本: “1.1.0”
iOS人机界面指南设计技能
用于设计原生iOS应用界面的框架，确保界面直观、一致且符合苹果的设计哲学。基于苹果的人机界面指南，这是构建与iPhone、iPad及更广泛苹果生态系统无缝集成的应用的权威资源。
核心理念
苹果的iOS设计哲学基于三大支柱：清晰度、尊让和深度。每个元素必须清晰可读且有目的（清晰度）。界面不应遮蔽其所呈现的内容（尊让）。层次、过渡和逼真动效应提供结构和空间关系（深度）。
基础： 最佳的iOS应用不仅机械遵循HIG规则，而是内化了界面服务于用户内容和任务的理念。原生组件、系统惯例和平台一致性不是约束，而是iOS用户信任并喜欢感觉归属的应用的原因。
评分
目标：10/10。 在审查或创建iOS界面或SwiftUI/UIKit代码时，基于对以下原则的遵守程度进行0-10分评分。10/10表示完全符合所有指南；较低分数表示需要解决的差距。始终提供当前分数和达到10/10所需的具体改进。
iOS设计框架
1. 布局与安全区域
核心概念： iOS设备有特定屏幕尺寸、安全区域插入和硬件侵入（刘海、动态岛、主指示器），这些必须在每个布局中得到尊重。
为什么有效： 当布局尊重安全区域和标准间距时，应用感觉原生且可信赖。用户永远不会让内容隐藏在硬件功能或系统UI后，视觉节奏与平台其他部分匹配。
关键见解：
- 首先为最小屏幕设计（iPhone SE宽度375pt）
- 安全区域保护内容免受硬件功能影响——切勿将交互元素置于刘海、动态岛或主指示器下
- 标准内容边距为屏幕边缘16-20pt
- 最小触摸目标尺寸为44 x 44pt
- 列表行最小高度为44pt
- 标准间距增量：8 / 16 / 24pt
产品应用：
| 上下文 | 布局模式 | 示例 |
|---|---|---|
| 状态栏 | 高度59pt，始终尊重 | 时间、信号、电池区域 |
| 导航栏 | 44pt标准行 + 58pt大标题 | 返回按钮、标题、操作 |
| 内容区域 | 灵活、可滚动、尊重安全区域 | 主要应用内容 |
| 标签栏 | 高度49pt，半透明带模糊 | 2-5个主要目的地 |
| 主指示器 | 底部插入34pt | 系统手势区域 |
复制模式：
- 使用默认尊重安全区域的
VStack { } - 仅对背景和装饰元素使用
.ignoresSafeArea()，切勿用于交互内容 - 始终在多个设备尺寸上测试，包括iPhone SE和Pro Max
道德边界： 切勿将关键内容或控件隐藏在硬件侵入后。任何设备的用户都应平等访问所有功能。
参见：references/navigation.md 获取详细导航栏和标签栏规范。
2. 排版与动态类型
核心概念： iOS使用San Francisco（SF Pro）字体，带有语义文本样式系统，通过动态类型自动缩放以适应无障碍需求。
为什么有效： 语义文本样式在平台间创建一致的视觉层次。动态类型确保每个用户——包括视觉障碍者——可以在首选大小下阅读内容而不会破坏布局。
关键见解：
- 大标题：34pt粗体；标题：17pt中粗体；正文：17pt常规
- 次要文本：15pt常规，60%不透明度；标题：12-13pt
- 最小文本大小为11pt（仅用于标题/次要信息）
- 正文文本行高最小为字体大小的1.3倍
- 移动设备上最佳行长度：每行35-50字符
- 始终使用左对齐、非对齐文本
- 最小对比度比：4.5:1（WCAG AA）
产品应用：
| 上下文 | 排版模式 | 示例 |
|---|---|---|
| 屏幕标题 | .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以并排测试两种模式 - 在资产目录中定义具有浅/深变体的自定义颜色，而不是在代码中
- 切勿假设背景是白色或黑色——始终使用语义颜色
- 启用增加对比度无障碍设置进行测试
道德边界： 深色模式不是可选的修饰——用户期望它。切勿发布在深色模式下不可读或破损的应用。
参见：references/colors-depth.md 获取语义颜色、深色模式调色板和对比度比指南。
4. 导航模式
核心概念： iOS使用分层导航模型，标签栏用于主要目的地，导航栈用于层次化深入，模态用于专注任务。
为什么有效： 一致的导航模式意味着用户始终知道他们所处位置、如何到达以及如何返回。违反这些模式会造成困惑，使应用在iOS上感觉陌生。
关键见解：
- 标签栏：2-5个主要目的地，始终可见，每个标签记住状态
- 导航栏：返回按钮（左上）、标题（中心或大）、操作（右上）
- 大标题在滚动时平滑动画折叠为紧凑标题
- 模态用于专注任务；通过下拉滑动手势或显式关闭按钮解除
- 切勿使用汉堡菜单——iOS用户期望标签栏
- 搜索栏可出现在导航栏下，隐藏直到下拉
产品应用：
| 上下文 | 导航模式 | 示例 |
|---|---|---|
| 应用结构 | 带3-5个标签的标签栏 | 首页、搜索、个人资料 |
| 内容层次 | 推送导航（深入） | 列表 > 详情 > 编辑 |
| 专注任务 | 模态呈现 | 撰写、设置、筛选 |
| 搜索 | 下拉搜索栏 | Spotlight风格搜索 |
| 拆分视图 | iPad侧边栏 + 详情 | iPad上的邮件、笔记 |
复制模式：
- 返回按钮文本应为前一个屏幕的标题，而非“返回”
- 标签标签应为单个词：“首页”、“搜索”、“个人资料”
- 模态标题应描述任务：“新消息”、“编辑个人资料”
- 在SwiftUI中使用
NavigationStack（非弃用的NavigationView）
道德边界： 切勿在无清晰退出的流程中困住用户。每个屏幕必须有明显的返回或解除方式。
参见：references/navigation.md 获取标签栏、导航栏、模态、搜索模式和拆分视图。
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、动态类型、切换控制、语音控制），每个应用必须作为首要考虑支持它们，而非事后思考。
为什么有效： 无障碍不是可选的——它由应用商店指南和道德设计实践要求。全球超过10亿人患有某种形式的残疾。无障碍应用也惠及所有用户（阳光下较大文本、驾驶时VoiceOver）。
关键见解：
- 每个交互元素都需要
.accessibilityLabel描述其是什么 - 使用
.accessibilityValue表示当前状态和.accessibilityHint表示其作用 - 用
.accessibilityElement(children: .combine)分组相关元素 - 支持所有大小的动态类型——在最大设置下测试
- 最小触摸目标：44 x 44pt
- 最小对比度比：文本4.5:1（WCAG AA）
- 切勿仅通过颜色传达意义
产品应用：
| 上下文 | 无障碍模式 | 示例 |
|---|---|---|
| 图标 | .accessibilityLabel("收藏") |
带标签的心形图标 |
| 滑块 | .accessibilityValue("\(Int(volume * 100))%") |
音量控制 |
| 按钮 | .accessibilityHint("分享此项目") |
分享按钮 |
| 分组 | .accessibilityElement(children: .combine) |
头像 + 名称行 |
| 图像 | 装饰性：.accessibilityHidden(true) |
背景图案 |
复制模式：
- 编写无障碍标签为名词：“收藏”、“设置”、“关闭”
- 编写提示为动作：“与他人分享此项目”、“打开设置”
- 仅使用VoiceOver测试完整应用流程
- 在Xcode中使用无障碍检查器审核对比度和标签
道德边界： 无障碍不是锦上添花。发布无障碍应用排除真实人群。将VoiceOver测试与视觉测试同等重视。
参见：references/accessibility.md 获取VoiceOver实现、动态类型支持和无障碍清单。
7. 图标与图像
核心概念： iOS使用SF Symbols作为标准图标系统，并要求特定尺寸的应用图标，自动应用签名超椭圆（“圆角矩形”）蒙版。
为什么有效： SF Symbols设计为完美对齐San Francisco文本，随动态类型缩放，并适应不同重量和大小。一致的图标系统使界面感觉凝聚且原生。
关键见解：
- 对所有标准图标使用SF Symbols（
Image(systemName:)）——它们随文本缩放 - 应用图标：导出为1024x1024像素方形；iOS自动应用圆角矩形蒙版
- 图标圆角半径公式：边长 x 0.222，61%角平滑
- iOS 18+支持浅色、深色和色调图标变体
- 避免应用图标中包含文本——缩放效果不佳
- 保持图标设计简单，具有可识别的轮廓
产品应用：
| 上下文 | 图标模式 | 示例 |
|---|---|---|
| 标签栏 | SF Symbols，选中时为填充变体 | house.fill、magnifyingglass |
| 导航栏 | SF Symbols，常规重量 | gear、plus、ellipsis |
| 列表配件 | SF Symbols，次要颜色 | chevron.right、checkmark |
| 应用图标 | 1024像素方形，简单粗体设计 | 单个可识别符号 |
| 小部件 | SF Symbols匹配小部件样式 | 与应用品牌一致 |
复制模式：
- 使用
Image(systemName: "heart.fill")用于SF Symbols - 应用
.symbolRenderingMode(.hierarchical)用于多颜色深度 - 使用
.imageScale(.large)或.font()根据文本调整符号大小 - 在SF Symbols应用（苹果免费提供）中浏览可用符号
道德边界： 切勿使用误导性图标暗示不存在功能。图标含义应匹配iOS惯例（例如，垃圾桶 = 删除，非归档）。
参见：references/app-icons.md 获取图标大小表、形状规范和设计指南。
8. 手势与触觉反馈
核心概念： iOS定义标准手势（滑动返回、下拉刷新、长按上下文菜单）和触觉反馈模式，必须尊重且切勿覆盖。
为什么有效： 手势是肌肉记忆。当应用覆盖滑动返回手势或重用下拉刷新时，用户感到迷失和沮丧。触觉提供动作已注册的隐形确认，减少不确定性。
关键见解：
- 切勿覆盖：从边缘向右滑动（返回）、在模态上向下滑动（解除）、在列表上向下拉（刷新）
- 在行上向左滑动揭示动作（删除、归档等）
- 长按显示上下文菜单
- 在图像和地图上预期捏合缩放
- 使用三种触觉类型：冲击（物理动作）、通知（结果）、选择（UI变化）
- 触觉应微妙且有意义——切勿持续或烦人
产品应用：
| 上下文 | 手势/触觉模式 | 示例 |
|---|---|---|
| 导航 | 从左边边缘向右滑动 | 系统返回手势 |
| 模态 | 向下滑动解除 | 表单解除 |
| 列表 | 下拉刷新、滑动动作 | 刷新内容、删除行 |
| 媒体 | 捏合缩放、双击 | 照片查看器 |
| 确认 | 完成时 .success 触觉 |
付款确认 |
| 选择 | 切换/选择时选择触觉 | 选择器滚轮滚动 |
复制模式：
- 使用
UIImpactFeedbackGenerator(style: .medium)用于物理交互 - 使用
UINotificationFeedbackGenerator()带.success、.warning、.error用于结果 - 使用
UISelectionFeedbackGenerator()用于UI状态变化 - 在触发触觉前调用
.prepare()以最小化延迟
道德边界： 切勿使用激进触觉胁迫用户行动。触觉反馈应确认，非胁迫。
参见：references/gestures.md 获取标准手势表、触觉反馈模式和动画指南。
常见错误
| 错误 | 为什么失败 | 修复 |
|---|---|---|
| 覆盖标准手势 | 用户期望全局滑动返回、下拉刷新；覆盖破坏肌肉记忆 | 使用系统手势用于其预期目的；仅添加自定义手势用于补充动作 |
| 触摸目标小于44pt | 小目标导致误点击，尤其对无障碍需求用户，使他们沮丧 | 确保所有交互元素至少44 x 44pt |
| 忽略安全区域 | 内容隐藏在刘海、动态岛或主指示器后 | 始终尊重安全区域插入；仅对背景使用 .ignoresSafeArea() |
| 在iOS上使用Android模式 | 汉堡菜单、顶部标签栏、Material风格浮动操作按钮感觉陌生 | 使用标签栏用于主要导航、底部表单、原生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？ | 应用感觉陌生；用户难以导航 | 用标签栏替换汉堡菜单；使用标准推送/模态导航 |
参考文件
- typography.md：文本样式、字体大小、动态类型、深色模式排版
- navigation.md：标签栏、导航栏、模态、搜索模式、拆分视图
- components.md：按钮、列表、输入控件、菜单、确认对话框
- colors-depth.md：语义颜色、深色模式、对比度比
- gestures.md：标准手势、触觉反馈、动画
- accessibility.md：VoiceOver、动态类型、无障碍清单
- app-icons.md：图标大小、形状、SF Symbols指南
- keyboard-input.md：键盘类型、输入辅助视图、硬件键盘支持
- privacy-permissions.md：权限请求时机、预权限屏幕、处理拒绝
- widgets-extensions.md：小部件大小、App Clips设计、实时活动
- system-integration.md：Siri、快捷指令、Handoff、拖放、通用链接
进一步阅读
本技能基于苹果的人机界面指南，这是所有苹果平台的官方设计文档。获取完整指南、平台特定指导和最新更新：
- 苹果人机界面指南 —— iOS、iPadOS、macOS、watchOS和visionOS设计的权威参考
- SF Symbols —— 苹果的图标系统，含5,000+可配置符号
- 苹果设计资源（Figma/Sketch） —— 官方设计模板和UI套件
- WWDC设计会话 —— 涵盖设计原则和新功能的视频会话
- “加州苹果设计” —— 记录苹果设计过程和理念的摄影书
- “日常用品设计” 由唐·诺曼著 —— 影响苹果方法的人本设计基础文本
- “通用设计原则” 由威廉·利德韦尔、克里蒂娜·霍尔登和吉尔·巴特勒著 —— 125个适用于iOS界面设计的通用原则
关于作者
苹果人机界面指南 由苹果的人机界面设计团队作者和维护，这是科技领域最有影响力的设计组织之一。HIG可追溯至1984年，当时苹果发布了原版《Macintosh人机界面指南》，伴随第一台Macintosh电脑的推出。该文件确立了直接操作、所见即所得、一致性、用户控制等原则，这些原则定义了几十年的图形用户界面设计。在设计领导者如杰夫·拉斯金、布鲁斯·托格纳兹尼及后来的乔尼·艾夫和艾伦·戴伊的领导下，苹果的设计哲学通过Mac OS、iPhone（2007）、iPad（2010）、Apple Watch（2015）和Apple Vision Pro（2024）不断演化。HIG持续更新以反映新交互范式——从鼠标到多点触控再到空间计算——同时维持技术应直观、可访问且愉悦的核心信念。如今，HIG免费提供于developer.apple.com，仍是任何在苹果平台构建应用者的基本参考。