axiom-hig

Apple Human Interface Guidelines——快速参考

何时使用此技能

适用于：

• 制定视觉设计决策（颜色、背景、排版）
• 检查 UI 是否符合 HIG
• 回答“应该使用深色背景吗？”
• 在不同设计方案之间进行选择
• 向利益相关者阐述设计决策
• 快速查找常见设计问题的答案

相关技能

• 如需全面的详情和代码示例，请使用 axiom-hig-ref
• 如需了解 iOS 26 材质设计实现，以及有条件的版本设计（在同一应用中同时支持 Liquid Glass 之前的版本和 Liquid Glass），请使用 axiom-liquid-glass
• 如需了解 iOS 26 应用级采用指南及向后兼容策略，请使用 axiom-liquid-glass-ref
• 如需排查无障碍问题，请使用 axiom-accessibility-diag

有条件的版本设计

如果需要同时支持 iOS 25（Liquid Glass 之前的版本）和 iOS 26 及更高版本，请参阅 axiom-liquid-glass 了解采用策略——其中介绍了何时使用 #available(iOS 26, *)、如何优雅降级，以及哪些系统组件会自动采用 Liquid Glass，哪些需要明确选择启用。

---

快速决策树

背景颜色决策

Is your app media-focused (photos, videos, music)?
├─ Yes → Consider permanent dark appearance
│        WHY: "Lets UI recede, helps people focus on media" (Apple HIG)
│        EXAMPLES: Apple Music, Photos, Clock apps use dark
│        CODE: .preferredColorScheme(.dark) on root view
│
└─ No → Use system backgrounds (respect user preference)
         CODE: systemBackground (adapts to light/dark automatically)
         GROUPED: systemGroupedBackground for iOS Settings-style lists

Apple 的指南：“在少数情况下，可以考虑仅在界面中使用深色外观。例如，对于支持沉浸式媒体浏览的应用，永久使用深色外观可能是合理的。”

颜色选择决策

Do you need a specific color value?
├─ No → Use semantic colors
│        label, secondaryLabel, tertiaryLabel, quaternaryLabel
│        systemBackground, secondarySystemBackground, tertiarySystemBackground
│        WHY: Automatically adapts to light/dark/high contrast
│
└─ Yes → Create Color Set in asset catalog
         1. Open Assets.xcassets
         2. Add Color Set
         3. Configure variants:
            ├─ Light mode color
            ├─ Dark mode color
            └─ High contrast (optional but recommended)

核心原则：“使用 labelColor 等语义颜色名称，它们会自动适应当前的界面样式。”

字体字重决策

Which font weight should I use?
├─ ❌ AVOID: Ultralight, Thin, Light
│            WHY: Legibility issues, especially at small sizes
│
├─ ✅ PREFER: Regular, Medium, Semibold, Bold
│             WHY: Maintains legibility across sizes and conditions
│
└─ Headers: Semibold or Bold for hierarchy
            Body: Regular or Medium

Apple 的指南：“避免使用细字重。优先选择 Regular、Medium、Semibold 或 Bold 字重，而不是 Ultralight、Thin 或 Light。”

---

核心原则检查清单

发布任何 UI 之前

确认每个屏幕都通过以下检查：

外观

• 在浅色模式下正常显示
• 在深色模式下正常显示
• 启用“增强对比度”后正常显示
• 启用“降低透明度”后正常显示

排版

• 支持动态字体（文本可缩放至 200%）
• 不使用细字重（最低为 Regular）
• 所有字号下层次清晰
• 大字号下不会截断文本

无障碍

• 对比度至少为 4.5:1
• 小号文本的对比度至少为 7:1（建议值）
• 触控目标至少为 44x44 点
• 信息传达不单单依靠颜色
• 所有交互元素均有 VoiceOver 标签

动效

• 遵循“减弱动态效果”设置
• 动画可以取消或跳过
• 视频不会在没有控制项的情况下自动播放

本地化

• 图片中没有硬编码的文本
• 支持从右到左书写的语言
• 文本方向正确

---

常见设计问题

问：我的应用应该使用深色背景吗？

**答：**仅适用于以媒体为主的应用（照片、视频、音乐），这类应用应突出内容。其他情况都应使用系统背景。

Apple 自家的应用：

应用	背景	原因
Music	深色	专辑封面是焦点
Photos	深色	图片是主角
Clock	深色	适合夜间使用
Notes	系统	用于编辑文稿
Settings	系统	实用工具

代码：

// ❌ WRONG - Don't override unless media-focused
.background(Color.black)

// ✅ CORRECT - Let system decide
.background(Color(.systemBackground))

问：什么是合适的背景颜色？

**答：**使用 systemBackground，它会自动适应浅色和深色模式。对于分组内容（如 iOS 设置），请使用 systemGroupedBackground。

颜色层级：

• 主要：systemBackground——主背景
• 次要：secondarySystemBackground——分组元素
• 第三级：tertiarySystemBackground——次要背景中的分组

// ✅ Standard list
List { }
    .background(Color(.systemBackground))

// ✅ Grouped list (Settings style)
List { }
    .listStyle(.grouped)
    .background(Color(.systemGroupedBackground))

问：如何确保内容清晰易读？

**答：**使用语义标签颜色，保持 4.5:1 的对比度，并避免使用细字重。

标签层级：

// Most prominent
Text("Title").foregroundStyle(.primary)

// Subtitles
Text("Subtitle").foregroundStyle(.secondary)

// Tertiary information
Text("Detail").foregroundStyle(.tertiary)

// Disabled text
Text("Disabled").foregroundStyle(.quaternary)

Q：应该使用 SF Symbols 还是自定义图标？

答： 除非需要体现品牌特色的图像，否则使用 SF Symbols。它们会随动态字体大小缩放，并自动适配外观。

SF Symbols 的优势：

• 内含 5,000 多个符号（SF Symbols 5）
• 自动适配浅色／深色外观
• 随动态字体大小缩放
• 启用「粗体文本」辅助功能时会变粗
• 九种字重，与 San Francisco 字体相匹配

适合使用自定义图标的情况：

• 体现品牌特色的图像
• SF Symbols 中没有的 App 专属概念
• 需要独特的视觉风格

Q：应该使用浅色／深色模式，还是让用户选择？

答： 始终同时支持两种模式。绝不要创建 App 专属的外观设置。

Apple 的指导：「避免创建 App 专属的外观设置。用户希望 App 遵循其系统范围内的深色模式选择。App 专属的外观模式选项会增加用户的操作，因为他们必须调整多个设置才能获得想要的外观。」

Q：需要达到什么对比度？

答： 普通文本最低为 4.5:1，小号文本建议达到 7:1。

WCAG 对比度标准：

• AA（必需）： 普通文本为 4.5:1，大号文本（18pt+/14pt+ 粗体）为 3:1
• AAA（增强）： 普通文本为 7:1，大号文本为 4.5:1
• Apple 指导： 使用语义颜色，这些颜色会自动满足 AA 要求

测试： 使用在线对比度计算器或 Xcode 的辅助功能检查器。

Q：最小触控目标尺寸是多少？

答： iOS/iPadOS 上为 44x44 点，且目标之间应留有间距。

平台具体要求：

• iOS/iPadOS：最低 44x44 点
• macOS：最低 20x20 点；主要操作应更大
• watchOS：使用系统控件（针对小屏幕优化）
• tvOS：焦点清晰度所需间距为 60 点以上

---

设计审查清单

审查任何设计时

在设计审查、App Store 提交或利益相关者演示时，使用此清单：

内容优先设计

• UI 是否让位于内容？（不争夺用户注意力）
• 品牌元素是否克制？（不在每个屏幕都放置徽标）
• 背景是否适合内容？（媒体类 App 使用深色，其他使用系统背景）

平台一致性

• 是否具有 iOS/iPad/Mac 原生体验？
• 是否使用系统颜色和字体？
• 标准手势是否符合预期？
• 导航模式是否符合用户习惯？

辅助功能合规性

• 所有对比度是否达到要求？
• 所有触控目标是否至少为 44x44 点？
• 是否传达了颜色以外的信息？
• VoiceOver 标签是否完整？
• 是否支持动态字体大小？

浅色和深色模式

• 是否在两种外观模式下都能正常使用？
• 颜色是否自动适配？
• 是否没有硬编码的颜色值？
• 是否测试了增强对比度？

支持本地化

• 图像中是否没有硬编码文本？
• 是否支持 RTL 语言？
• 文本是否会被截断？
• 布局是否会根据文本大小调整？

---

设计审查中的压力：为 HIG 设计决策辩护

问题

在设计审查中，你会听到：

• 「为了保持品牌一致性，我们把徽标放到每个屏幕上吧」
• 「使用较细的字重，看起来更优雅」
• 「做一个自定义外观切换开关，有些用户更喜欢深色模式」
• 「这个屏幕需要一个体现品牌形象的启动屏幕」

这些做法违反了 HIG。以下是如何专业地提出异议。

危险信号——违反 HIG 的要求

如果你听到以下任何一项，请参考此技能：

• ❌ 「把徽标加到导航栏」 — 浪费空间，会分散用户对内容的注意力
• ❌ 「使用 Ultralight 字体」 — 可读性差，不符合辅助功能要求
• ❌ 「自定义深色模式切换开关」 — 增加用户操作，忽略系统偏好
• ❌ 「用启动屏幕宣传品牌」 — 启动屏幕不能包含品牌元素
• ❌ 「所有文本都使用自定义品牌色」 — 可能无法满足对比度要求

如何专业地提出异议

第 1 步：展示 HIG 指导

"I want to make this change, but let me show you Apple's guidance:

[Show the relevant HIG section from this skill or hig-ref]

Apple explicitly recommends against this because..."

步骤 2：展示风险

针对对比度问题：

• 展示对比度为 4.5:1 的设计（符合要求）
• 展示他们提出的方案（不符合要求）
• 说明被 App Store 拒绝的风险

针对外观切换选项：

• 展示 iOS 设置 → 显示与亮度
• 说明用户已经拥有此控制选项
• 展示两个独立设置造成的困惑

步骤 3：提出折中方案

"I understand the brand concern. Here are HIG-compliant alternatives:

1. Use your brand color as the app's tint color
2. Feature branding in onboarding (not launch screen)
3. Use your accent color for primary actions
4. Include subtle branding in content, not chrome"

步骤 4：记录决定

如果决定被推翻：

Slack message to PM + designer:

"Design review decided to [violate HIG guidance].

Important risks to monitor:
- App Store rejection (HIG violations)
- Accessibility issues (users with visual impairments)
- User complaints (departure from platform norms)

I'm flagging this proactively. If we see issues after launch,
we'll need an expedited follow-up."

何时接受设计决定

有时，设计师有充分的理由不遵循 HIG。满足以下条件时，请予以接受：

• 他们了解 HIG 指引
• 他们愿意承担被拒和无障碍访问方面的风险
• 你以书面形式记录了决定
• 他们承诺监测上线后的反馈

---

三项核心 HIG 原则

每项设计决定都应支持以下原则：

1. 清晰

定义： 内容应占据首要地位，界面元素应让位于内容。

实践中：

• 留白是你的好帮手
• 每个元素都有其用途
• 移除所有对用户没有帮助的内容
• 用户无需说明就应知道自己可以做什么

2. 一致

定义： 使用标准 UI 元素和熟悉的模式。

实践中：

• 标准手势应符合预期
• 导航遵循平台惯例
• 颜色和字体使用系统值
• 熟悉的组件放在熟悉的位置

3. 克制

定义： UI 不应与内容争夺注意力。

实践中：

• 使用柔和的背景，而非醒目的背景
• 不需要时，导航应退居次要位置
• 内容是主角
• 品牌展示应保持克制

摘自 HIG：“克制能让内容脱颖而出，同时避免周围的视觉元素与之争夺注意力，从而让应用更美观。”

---

各平台快速提示

iOS

• 优先采用竖屏设计
• 考虑单手操作范围
• 主要导航使用底部标签栏
• 支持向后滑动手势

iPadOS

• 采用可适配侧边栏的布局
• 支持分屏视图
• 支持指针交互
• 支持任意窗口尺寸（iOS 26+）

macOS

• 使用菜单栏提供命令
• 可采用高密度布局
• 优先支持指针交互
• 使用窗口边框和控件

watchOS

• 采用一目了然的界面
• 内容铺满屏幕
• 尽量减少内边距
• 支持 Digital Crown 交互

tvOS

• 采用基于焦点的导航
• 考虑 10 英尺观看距离
• 使用较大的触控目标
• 支持手势遥控器

visionOS

• 采用空间布局
• 使用玻璃材质
• 提供舒适的观看深度
• 避免内容固定在头部位置

---

资源

WWDC：356，2019-808

文档：/design/human-interface-guidelines、/design/human-interface-guidelines/color、/design/human-interface-guidelines/dark-mode、/design/human-interface-guidelines/typography

技能：axiom-hig-ref、axiom-liquid-glass、axiom-liquid-glass-ref、axiom-accessibility-diag

---

最后更新：基于 Apple HIG（2024-2025）、WWDC25-356、WWDC19-808
技能类型：规范（快速决策、检查清单、压力场景）