# iOS 人机界面指南设计技巧用于设计直观、一致且符合 Apple 设计理念的原生 iOS 应用程序界面的框架。基于 Apple 的人机界面指南，这是构建与 iPhone、iPad 和更广泛的 Apple 生态系统无缝集成的应用程序的权威资源。 ## 核心原则 Apple 的 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 个主要目的地 **主页指示器** |底部 34 点插图 |系统手势区域 **复制图案：** * 使用默认尊重安全区域的`VStack { }` * 仅将 `.ignoresSafeArea()` 用于背景和装饰元素，切勿用于交互式内容 * 始终在多种设备尺寸上进行测试，包括 iPhone SE 和 Pro Max **道德边界：** 切勿将关键内容或控制隐藏在硬件入侵背后。拥有任何设备的用户都应该拥有对所有功能的平等访问权限。有关详细的导航栏和选项卡栏规范，请参阅：[references/navigation.md]()。 ### 2\.版式和动态类型 **核心概念：** iOS 使用 San Francisco (SF Pro) 字体和语义文本样式系统，可通过动态类型自动缩放以实现可访问性。 **为什么有效：** 语义文本样式在整个平台上创建一致的视觉层次结构。动态类型确保每个用户（包括有视觉障碍的用户）都可以按照自己喜欢的尺寸阅读内容，而不会破坏布局。 **关键见解：** * 大标题：34pt 粗体；标题：17pt 中号；主体：17pt 常规 * 辅助文本：15pt 常规，不透明度为 60%；说明文字：12-13 点 * 最小文本大小为 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 **产品应用：** 背景 |颜色图案|示例 ---|---|--- **主要文本** | `颜色（.标签）` |适应每种模式的白色/黑色 **辅助文本** | `颜色(.secondaryLabel)` |两种模式下的不透明度均为 60% **背景** | `颜色(.systemBackground)` / `.secondarySystemBackground` |分层深度 **破坏性行为** | `颜色（.systemRed）` |删除按钮、警告 **交互式色彩** |应用强调色或 `.systemBlue` |链接、切换状态 **复制图案：** * 在预览中使用 `.preferredColorScheme(.light)` 和 `.dark` 并排测试两种模式 * 在资产目录中定义具有浅色/深色变体的自定义颜色，而不是在代码中 * 永远不要假设背景是白色或黑色——始终使用语义颜色 * 启用增加对比度辅助功能设置进行测试 **道德边界：** 深色模式不是可选的修饰——它是用户所期望的。切勿发布在深色模式下无法读取或损坏的应用程序。请参阅：[references/colors-depth.md]() 了解语义颜色、深色模式调色板和对比度指南。 ### 4\.导航模式 **核心概念：** iOS 使用分层导航模型，其中包含用于主要目的地的选项卡栏、用于分层钻取的导航堆栈以及用于重点任务的模式。 **为什么有效：** 一致的导航模式意味着用户始终知道他们在哪里、如何到达那里以及如何返回。违反这些模式会造成混乱，并使应用程序在 iOS 上感觉很陌生。 **关键见解：** * 选项卡栏：2-5 个主要目的地，始终可见，记住每个选项卡的状态 * 导航栏：后退按钮（左上角）、标题（中心或大）、操作（右上角） * 大标题折叠为滚动上的紧凑标题，动画流畅 * 重点任务的模态；通过向下滑动或显式关闭按钮关闭 * 永远不要使用汉堡菜单---iOS用户期望标签栏 * 搜索栏可以出现在导航栏下方，隐藏直到下拉 **产品应用：** 背景 |导航模式|示例 ---|---|--- **应用程序结构** |带有 3-5 个选项卡的选项卡栏 |主页、搜索、个人资料 **内容层次结构** |推送导航（向下钻取）|列表 > 详细信息 > 编辑 **重点任务** |模态演示 |撰写、设置、过滤器 **搜索** |下拉搜索栏|聚光灯式搜索 **分割视图** | 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)` 对相关元素进行分组 * 支持所有尺寸的Dynamic Type---最大设置下测试 * 最小触摸目标：44 x 44pt * 最小对比度：文本为 4.5:1 (WCAG AA) * 切勿仅通过颜色来传达含义 **产品应用：** 背景 |辅助功能模式|示例 ---|---|--- **图标** | `.accessibilityLabel("收藏夹")` |带标签的心形图标 **滑块** | `.accessibilityValue("\(Int(volume * 100))%")` |音量控制 **按钮** | `.accessibilityHint("分享此项目")` |分享按钮 **团体** | `.accessibilityElement(子项：.combine)` |头像+姓名行 **图像** |装饰： `.accessibilityHidden(true)` |背景图案 **复制图案：** * 将辅助功能标签写为名词：“收藏夹”、“设置”、“关闭” * 将提示写入操作：“与其他人共享此项目”、“打开设置” * 仅使用 VoiceOver 测试完整的应用程序流程 * 使用 Xcode 中的 Accessibility Inspector 审核对比度和标签 **道德界限：** 可访问性并不是可有可无。发布无法访问的应用程序会将真实的人排除在外。像视觉测试一样认真对待 VoiceOver 测试。请参阅：[references/accessibility.md]() 了解 VoiceOver 实现、动态类型支持和辅助功能检查表。 ### 7\.图标和图像 **核心概念：** iOS 使用 SF Symbols 作为标准图标系统，并要求应用程序图标具有特定尺寸，并自动应用签名超椭圆（“方圆”）遮罩。 **工作原理：** SF 符号旨在与旧金山文本完美对齐，使用动态类型进行缩放，并适应不同的重量和大小。一致的图标使界面具有凝聚力和原生感。 **关键见解：** * 对所有标准图标使用 SF 符号（`Image(systemName:)`）——它们随文本缩放 * 应用程序图标：导出为 1024x1024px 正方形； iOS 自动应用方圆蒙版 * 图标拐角半径公式：边长 x 0.222，拐角平滑度为 61% * iOS 18+ 支持浅色、深色和有色图标变体 * 避免在应用程序图标中出现文本——它不能很好地缩放 * 保持图标设计简单，轮廓清晰 **产品应用：** 背景 |图标模式|示例 ---|---|--- **标签栏** | SF 符号，所选 | 的填充变体`house.fill`, `放大镜` **导航栏** |常规重量的 SF 符号 | `齿轮`、`加号`、`省略号` **列出配件** | SF 符号，二次色 | `chevron.right`、`复选标记` **应用程序图标** | 1024px正方形，简单大胆的设计|单一可识别字形 **小工具** | SF 符号匹配小部件样式 |与应用程序品牌一致 **复制图案：** * 使用 `Image(systemName: "heart.fill")` 作为 SF 符号 * 应用 `.symbolRenderingMode(.hierarchical)` 实现多色深度 * 使用 `.imageScale(.large)` 或 `.font()` 来调整符号相对于文本的大小 * 浏览 SF Symbols 应用程序中的可用符号（来自 Apple 免费） **道德边界：** 切勿使用暗示不存在功能的误导性图标。图标含义应符合 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 模式** |汉堡菜单、顶部标签栏、材质风格的 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 原生的吗？ |应用程序感觉很陌生；用户很难导航|用标签栏替换汉堡菜单；使用标准推送/模式导航 ## 参考文件 * [typography.md]()：文本样式、字体大小、动态类型、深色模式排版 * [navigation.md]()：标签栏、导航栏、模式、搜索模式、分割视图 * [components.md]()：按钮、列表、输入控件、菜单、确认对话框 * [colors-depth.md]()：语义颜色、深色模式、对比度 * [gestures.md]()：标准手势、触觉、动画 * [accessibility.md]()：VoiceOver、动态类型、辅助功能清单 * [app-icons.md]()：图标大小、形状、SF 符号指南 * [keyboard-input.md]()：键盘类型、输入附件视图、硬件键盘支持 * [privacy-permissions.md](): 权限请求时机、预权限屏幕、处理拒绝 * [widgets-extensions.md]()：小部件尺寸、应用剪辑设计、实时活动 * [system-integration.md]()：Siri、快捷方式、切换、拖放、通用链接 ## 进一步阅读该技能基于 Apple 的人机界面指南，即所有 Apple 平台的官方设计文档。有关完整的指南、特定于平台的指南和最新更新： * [Apple 人机界面指南]() \--- iOS、iPadOS、macOS、watchOS 和 VisionOS 设计的权威参考 * [SF Symbols]() \--- Apple 的图标系统，拥有 5,000 多个可配置符号 * [Apple 设计资源 (Figma/Sketch)]() \--- 官方设计模板和 UI 套件 * [WWDC 设计会议]() \--- 涵盖设计原理和新功能的视频会议 * [_"Designed by Apple in California"_]() \--- 记录苹果设计流程和理念的写真集 * [_"The Design of Everyday Things"_]() 作者：Don Norman --- 以人为本的设计的基础文本，影响了 Apple 的方法 * [_“通用设计原则”_]() 作者：William Lidwell、Kritina Holden 和 Jill Butler --- 适用于 iOS 界面设计的 125 条设计原则 ## 关于作者 **Apple 人机界面指南** 由 Apple 人机界面设计团队编写和维护，该团队是技术领域最具影响力的设计组织之一。 HIG 的起源可以追溯到 1984 年，当时 Apple 在推出第一台 Macintosh 计算机的同时发布了最初的_Macintosh 人机界面指南_。该文件确立了直接操作、即看即点、一致性、所见即所得、用户控制等原则，定义了图形用户界面设计数十年。在 Jef Raskin、Bruce Tognazzini 以及后来的 Jony Ive 和 Alan Dye 等设计师的领导下，Apple 的设计理念在 Mac OS、iPhone (2007)、iPad (2010)、Apple Watch (2015) 和 Apple Vision Pro (2024) 中不断演变。 HIG 不断更新，以反映新的交互范例——从鼠标到多点触控再到空间计算——同时保持技术应该直观、易于访问和令人愉悦的核心信念。如今，HIG 可在developer.apple.com 上免费获取，并且仍然是任何在 Apple 平台上构建应用程序的人的重要参考。

Ios高设计

包含技能