axiom-hig

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Apple Human Interface Guidelines — Quick Reference

Apple Human Interface Guidelines — 快速参考

When to Use This Skill

何时使用本技能

Use when:

Making visual design decisions (colors, backgrounds, typography)
Reviewing UI for HIG compliance
Answering "Should I use a dark background?"
Choosing between design options
Defending design decisions to stakeholders
Quick lookups for common design questions

适用于以下场景：

做出视觉设计决策（颜色、背景、排版）
审查UI是否符合HIG规范
解答“我应该使用深色背景吗？”这类问题
在多种设计方案中做选择
向利益相关者为设计决策辩护
快速查阅常见设计问题

Related Skills

Version-Conditional Design

版本适配设计

When supporting both iOS 25 (pre-Liquid Glass) and iOS 26+, see

axiom-liquid-glass

for the adoption strategy — it covers when to use

#available(iOS 26, *)

, how to degrade gracefully, and which system components adopt Liquid Glass automatically vs which need explicit opt-in.

当同时支持iOS 25（Liquid Glass之前版本）和iOS 26+时，请查看

axiom-liquid-glass

获取适配策略——其中涵盖了何时使用

#available(iOS 26, *)

、如何优雅降级，以及哪些系统组件会自动适配Liquid Glass、哪些需要手动开启。

Quick Decision Trees

快速决策树

Background Color Decision

背景色决策

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's guidance: "In rare cases, consider using only a dark appearance in the interface. For example, it can make sense for an app that enables immersive media viewing to use a permanently dark appearance."

你的应用是否以媒体内容为主（照片、视频、音乐）？
├─ 是 → 考虑永久使用深色外观
│        原因：“让UI退居次要位置，帮助用户专注于媒体内容”（Apple HIG）
│        示例：Apple Music、照片、时钟应用使用深色模式
│        代码：在根视图上设置.preferredColorScheme(.dark)
│
└─ 否 → 使用系统背景（遵循用户偏好）
         代码：systemBackground（自动适配浅色/深色模式）
         分组列表：使用systemGroupedBackground实现iOS设置风格的列表

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

Color Selection Decision

颜色选择决策

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)

Key principle: "Use semantic color names like labelColor that automatically adjust to the current interface style."

你是否需要特定的颜色值？
├─ 否 → 使用语义化颜色
│        label, secondaryLabel, tertiaryLabel, quaternaryLabel
│        systemBackground, secondarySystemBackground, tertiarySystemBackground
│        原因：自动适配浅色/深色/高对比度模式
│
└─ 是 → 在资源目录中创建颜色集
         1. 打开Assets.xcassets
         2. 添加颜色集
         3. 配置变体：
            ├─ 浅色模式颜色
            ├─ 深色模式颜色
            └─ 高对比度（可选但推荐）

核心原则：“使用如labelColor这类语义化颜色名称，它们会自动适配当前界面风格。”

Font Weight Decision

字体粗细决策

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's guidance: "Avoid light font weights. Prefer Regular, Medium, Semibold, or Bold weights instead of Ultralight, Thin, or Light."

我应该使用哪种字体粗细？
├─ ❌ 避免：Ultralight、Thin、Light
│            原因：易出现可读性问题，尤其是小字号时
│
├─ ✅ 推荐：Regular、Medium、Semibold、Bold
│             原因：在各种字号和场景下都能保持可读性
│
└─ 标题：使用Semibold或Bold来区分层级
            正文：使用Regular或Medium

Apple官方指南：“避免使用轻量字体粗细。优先选择Regular、Medium、Semibold或Bold，而非Ultralight、Thin或Light。”

Core Principles Checklist

核心原则检查清单

Before Shipping Any UI

上线前UI检查

Verify every screen passes these checks:

确保每个页面都通过以下检查：

Appearance

外观

Works in Light Mode
Works in Dark Mode
Passes with Increased Contrast enabled
Passes with Reduce Transparency enabled

支持浅色模式
支持深色模式
开启高对比度后可正常显示
开启降低透明度后可正常显示

Typography

排版

Supports Dynamic Type (text scales to 200%)
No light font weights (Regular minimum)
Hierarchy clear at all text sizes
No truncation at large text sizes

支持动态字体（文本可缩放至200%）
未使用轻量字体粗细（至少使用Regular）
在所有字号下层级清晰
大字号下文本不会被截断

Accessibility

可访问性

Motion

动效

Respects Reduce Motion setting
Animations can be canceled/skipped
No auto-playing video without controls

遵循“减少动效”设置
动画可被取消/跳过
无自动播放的无控制视频

Localization

本地化

Common Design Questions

常见设计问题

Q: Should my app have a dark background?

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

A: Only for media-focused apps (photos, videos, music) where content should be the hero. Use system backgrounds for everything else.

Apple's own apps:

App	Background	Reason
Music	Dark	Album art is focus
Photos	Dark	Images are hero
Clock	Dark	Nighttime use
Notes	System	Document editing
Settings	System	Utilitarian

Code:

swift

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

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

**答：**仅适用于以媒体内容为主的应用（照片、视频、音乐），这类应用中内容应成为视觉焦点。其他应用请使用系统背景。

Apple官方应用示例：

应用	背景模式	原因
Music	深色	专辑封面为视觉焦点
Photos	深色	图片为核心内容
Clock	深色	适配夜间使用场景
Notes	系统默认	文档编辑类应用
Settings	系统默认	工具类应用

代码：

swift

// ❌ 错误 - 除非是媒体类应用，否则不要强制设置
.background(Color.black)

// ✅ 正确 - 交由系统决定
.background(Color(.systemBackground))

Q: What's the right background color?

问：正确的背景色是什么？

A: Use

systemBackground

which adapts to light/dark automatically. For grouped content (like iOS Settings), use

systemGroupedBackground

Color hierarchy:

Primary:
```
systemBackground
```
- Main background
Secondary:
```
secondarySystemBackground
```
- Grouping elements
Tertiary:
```
tertiarySystemBackground
```
- Grouping within secondary

swift

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

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

**答：**使用

systemBackground

，它会自动适配浅色/深色模式。对于分组内容（如iOS设置），使用

systemGroupedBackground

。

颜色层级：

主背景：
```
systemBackground
```
- 主要背景
次级背景：
```
secondarySystemBackground
```
- 分组元素背景
三级背景：
```
tertiarySystemBackground
```
- 次级分组内的背景

swift

// ✅ 标准列表
List { }
    .background(Color(.systemBackground))

// ✅ 分组列表（设置风格）
List { }
    .listStyle(.grouped)
    .background(Color(.systemGroupedBackground))

Q: How do I ensure legibility?

问：如何确保文本可读性？

A: Use semantic label colors, maintain 4.5:1 contrast, avoid light font weights.

Label hierarchy:

swift

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

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

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

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

**答：**使用语义化标签颜色，保持4.5:1的对比度，避免使用轻量字体粗细。

标签层级：

swift

// 最突出的文本
Text("Title").foregroundStyle(.primary)

// 副标题
Text("Subtitle").foregroundStyle(.secondary)

// 三级信息
Text("Detail").foregroundStyle(.tertiary)

// 禁用状态文本
Text("Disabled").foregroundStyle(.quaternary)

Q: Should I use SF Symbols or custom icons?

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

A: SF Symbols unless you need brand-specific imagery. They scale with Dynamic Type and adapt to appearance automatically.

Benefits of SF Symbols:

5,000+ symbols included (SF Symbols 5)
Automatic light/dark adaptation
Scale with Dynamic Type
Become bolder with Bold Text accessibility
Nine weights matching San Francisco font

When to use custom:

Brand-specific imagery
App-specific concepts not in SF Symbols
Unique visual style requirement

**答：**除非需要品牌专属图标，否则优先使用SF Symbols。它们会随动态字体缩放，并自动适配外观模式。

SF Symbols的优势：

包含5000+个符号（SF Symbols 5）
自动适配浅色/深色模式
随动态字体缩放
开启粗体文本可访问性设置时自动加粗
提供九种与San Francisco字体匹配的粗细

何时使用自定义图标：

需要品牌专属视觉元素
SF Symbols中没有的应用专属概念
有独特的视觉风格需求

Q: Light/Dark Mode or user choice?

问：应该使用浅色/深色模式还是让用户选择？

A: Always support both. Never create app-specific appearance settings.

Apple's guidance: "Avoid creating app-specific appearance settings. Users expect apps to honor their systemwide Dark Mode choice. An app-specific appearance mode option creates more work for people because they have to adjust more than one setting to get the appearance they want."

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

Apple官方指南：“避免创建应用专属的外观设置。用户希望应用遵循系统级的深色模式选择。应用专属的外观模式选项会增加用户的操作负担，因为他们需要调整多个设置才能获得想要的外观。”

Q: What contrast ratio do I need?

问：我需要达到多少对比度？

A: 4.5:1 minimum for normal text, 7:1 recommended for small text.

WCAG Contrast Standards:

AA (required): 4.5:1 for normal text, 3:1 for large text (18pt+/14pt+ bold)
AAA (enhanced): 7:1 for normal text, 4.5:1 for large text
Apple guidance: Use semantic colors which automatically meet AA requirements

Testing: Use online contrast calculators or Xcode's Accessibility Inspector.

**答：**普通文本最低4.5:1，小字号文本推荐7:1。

WCAG对比度标准：

**AA（要求）：**普通文本4.5:1，大文本（18pt+/14pt+粗体）3:1
**AAA（增强）：**普通文本7:1，大文本4.5:1
**Apple指南：**使用语义化颜色，它们会自动满足AA要求

**测试：**使用在线对比度计算器或Xcode的可访问性检查器。

Q: What's the minimum touch target size?

问：最小触摸目标尺寸是多少？

A: 44x44 points on iOS/iPadOS, with spacing between targets.

Platform-specific:

iOS/iPadOS: 44x44 points minimum
macOS: 20x20 points minimum; larger for primary actions
watchOS: Use system controls (optimized for small screen)
tvOS: 60+ point spacing for focus clarity

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

平台差异：

iOS/iPadOS：最小44x44点
macOS：最小20x20点；主要操作按钮需更大
watchOS：使用系统控件（已针对小屏幕优化）
tvOS：焦点元素间距需≥60点以保证清晰度

Design Review Checklist

设计审查检查清单

When Reviewing Any Design

审查任何设计时

Use this checklist for design reviews, App Store submissions, or stakeholder presentations:

本检查清单适用于设计审查、App Store提交或向利益相关者展示：

Content-First Design

内容优先设计

Does UI defer to content? (Not competing for attention)
Is branding restrained? (No logo on every screen)
Are backgrounds content-appropriate? (Media apps dark, others system)

UI是否为内容让路？（不与内容争夺注意力）
品牌标识是否克制？（不在每个页面都添加logo）
背景是否适合内容？（媒体类应用用深色，其他用系统默认）

Platform Consistency

平台一致性

Does it feel native to iOS/iPad/Mac?
Uses system colors and fonts?
Standard gestures work as expected?
Navigation patterns familiar?

是否具有iOS/iPad/Mac的原生质感？
是否使用系统颜色和字体？
标准手势是否符合预期？
导航模式是否为用户所熟悉？

Accessibility Compliance

可访问性合规

Light & Dark Modes

浅色与深色模式

Works in both appearance modes?
Colors adapt automatically?
No hardcoded color values?
Increased Contrast tested?

是否在两种外观模式下都能正常工作？
颜色是否自动适配？
无硬编码颜色值？
是否测试过高对比度模式？

Localization-Ready

本地化就绪

Design Review Pressure: Defending HIG Decisions

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

The Problem

问题

In design reviews, you'll hear:

"Let's add our logo to every screen for brand consistency"
"Use light font weights—they look more elegant"
"Make a custom appearance toggle—some users prefer dark"
"This screen needs a splash screen for our brand"

These violate HIG. Here's how to push back professionally.

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

“为了品牌一致性，我们在每个页面都添加logo吧”
“使用轻量字体粗细——看起来更优雅”
“做一个自定义的深色模式切换按钮——有些用户喜欢深色”
“这个页面需要一个品牌启动页”

这些请求都违反了HIG。以下是专业的反驳方法。

Red Flags — Requests That Violate HIG

红色预警——违反HIG的请求

If you hear ANY of these, reference this skill:

❌ "Add logo to navigation bar" — Wastes space, distracts from content
❌ "Use Ultralight font" — Legibility issues, fails accessibility
❌ "Custom dark mode toggle" — Creates more work for users, ignores system preference
❌ "Splash screen for branding" — Launch screens can't include branding
❌ "Custom brand color for all text" — May fail contrast requirements

如果你听到以下任何请求，请参考本技能：

❌ “在导航栏添加logo” —— 浪费空间，分散用户对内容的注意力
❌ “使用Ultralight字体” —— 可读性差，不符合可访问性要求
❌ “自定义深色模式切换按钮” —— 增加用户操作负担，忽略系统偏好
❌ “为品牌添加启动页” —— 启动页不能包含品牌标识
❌ “所有文本都使用品牌色” —— 可能不符合对比度要求

How to Push Back Professionally

专业反驳步骤

Step 1: Show the HIG Guidance

步骤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..."

“我理解想要做这个修改，但让我展示Apple的官方指南：

[展示本技能或hig-ref中的相关HIG章节]

Apple明确建议不要这样做，因为...”

Step 2: Demonstrate the Risk

步骤2：展示风险

For contrast issues:

Show the design at 4.5:1 contrast (passing)
Show their proposal (failing)
Explain App Store rejection risk

For appearance toggles:

Show iOS Settings → Display & Brightness
Explain users already have this control
Demonstrate confusion of two separate settings

对于对比度问题：

展示符合4.5:1对比度的设计
展示他们提议的设计（不符合要求）
解释App Store被拒的风险

对于外观切换按钮：

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

Step 3: Offer Compromise

步骤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"

“我理解品牌需求。以下是符合HIG的替代方案：

1. 将品牌色用作应用的 tint color
2. 在引导页中突出品牌（而非启动页）
3. 将强调色用于主要操作按钮
4. 在内容中加入微妙的品牌元素，而非界面框架中

Step 4: Document the Decision

步骤4：记录决策

If overruled:

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."

如果被否决：

给产品经理和设计师的Slack消息：

“设计审查决定[违反HIG指南的内容]。

需要关注的重要风险：
- App Store被拒（违反HIG）
- 可访问性问题（视障用户受影响）
- 用户投诉（偏离平台规范）

我提前标记这些风险。如果上线后出现问题，我们需要紧急跟进。

When to Accept the Design Decision

何时接受设计决策

Sometimes designers have valid reasons to override HIG. Accept if:

They understand the HIG guidance
They're willing to accept rejection/accessibility risks
You document the decision in writing
They commit to monitoring post-launch feedback

有时设计师有充分的理由违反HIG。如果满足以下条件，可以接受：

他们理解HIG指南
他们愿意承担被拒/可访问性风险
你已书面记录决策
他们承诺监控上线后的用户反馈

Three Core HIG Principles

HIG三大核心原则

Every design decision should support these principles:

每个设计决策都应遵循这些原则：

1. Clarity

1. 清晰

Definition: Content should be paramount, interface elements should defer to content.

In practice:

White space is your friend
Every element has a purpose
Remove anything that doesn't serve the user
Users should know what they can do without instructions

**定义：**内容应是核心，界面元素应为内容让路。

实践：

留白是你的好帮手
每个元素都有明确用途
移除任何对用户无帮助的元素
用户无需说明就知道可以做什么

2. Consistency

2. 一致

Definition: Use standard UI elements and familiar patterns.

In practice:

Standard gestures work as expected
Navigation follows platform conventions
Colors and fonts use system values
Familiar components in familiar locations

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

实践：

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

3. Deference

3. 顺从

Definition: UI shouldn't compete with content for attention.

In practice:

Subtle backgrounds, not bold
Navigation recedes when not needed
Content is the hero
Branding is restrained

From HIG: "Deference makes an app beautiful by ensuring the content stands out while the surrounding visual elements do not compete with it."

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

实践：

使用微妙的背景，而非醒目背景
导航在不需要时退居次要位置
内容是视觉焦点
品牌标识克制使用

来自HIG：“顺从让应用更美观，因为它确保内容脱颖而出，而周围的视觉元素不会与之竞争。”

Platform-Specific Quick Tips

平台专属快速提示

iOS

Portrait-first design
One-handed reachability
Bottom tab bar for primary navigation
Swipe back gesture

优先竖屏设计
支持单手握持操作
底部标签栏用于主要导航
滑动返回手势

iPadOS

Sidebar-adaptable layouts
Split view support
Pointer interactions
Arbitrary window sizing (iOS 26+)

支持侧边栏适配布局
支持分屏视图
指针交互
任意窗口大小调整（iOS 26+）

macOS

Menu bar for commands
Dense layouts acceptable
Pointer-first interactions
Window chrome and controls

使用菜单栏执行命令
可接受紧凑布局
优先指针交互
窗口框架和控件

watchOS

Glanceable interfaces
Full-bleed content
Minimal padding
Digital Crown interactions

可快速浏览的界面
全屏内容
最小内边距
数码表冠交互

tvOS

Focus-based navigation
10-foot viewing distance
Large touch targets
Gestural remote

基于焦点的导航
10英尺观看距离适配
大触摸目标
手势遥控器

visionOS

Spatial layout
Glass materials
Comfortable viewing depth
Avoid head-anchored content

空间布局
玻璃材质
舒适的观看深度
避免头部锚定内容

Resources

资源

WWDC: 356, 2019-808

Docs: /design/human-interface-guidelines, /design/human-interface-guidelines/color, /design/human-interface-guidelines/dark-mode, /design/human-interface-guidelines/typography

Skills: axiom-hig-ref, axiom-liquid-glass, axiom-liquid-glass-ref, axiom-accessibility-diag

Last Updated: Based on Apple HIG (2024-2025), WWDC25-356, WWDC19-808 Skill Type: Discipline (Quick decisions, checklists, pressure scenarios)

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 技能类型: 规范（快速决策、检查清单、压力场景）

axiom-hig

Original

Translation

Apple Human Interface Guidelines — Quick Reference

Apple Human Interface Guidelines — 快速参考

When to Use This Skill

何时使用本技能

Related Skills

相关技能

Version-Conditional Design

版本适配设计

Quick Decision Trees

快速决策树

Background Color Decision

背景色决策

Color Selection Decision

颜色选择决策

Font Weight Decision

字体粗细决策

Core Principles Checklist

核心原则检查清单

Before Shipping Any UI

上线前UI检查

Appearance

外观

Typography

排版

Accessibility

可访问性

Motion

动效

Localization

本地化

Common Design Questions

常见设计问题

Q: Should my app have a dark background?

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

Q: What's the right background color?

问：正确的背景色是什么？

Q: How do I ensure legibility?

问：如何确保文本可读性？

Q: Should I use SF Symbols or custom icons?

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

Q: Light/Dark Mode or user choice?

问：应该使用浅色/深色模式还是让用户选择？

Q: What contrast ratio do I need?

问：我需要达到多少对比度？

Q: What's the minimum touch target size?

问：最小触摸目标尺寸是多少？

Design Review Checklist

设计审查检查清单

When Reviewing Any Design

审查任何设计时

Content-First Design

内容优先设计

Platform Consistency

平台一致性

Accessibility Compliance

可访问性合规

Light & Dark Modes

浅色与深色模式

Localization-Ready

本地化就绪

Design Review Pressure: Defending HIG Decisions

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

The Problem

问题

Red Flags — Requests That Violate HIG

红色预警——违反HIG的请求

How to Push Back Professionally

专业反驳步骤

Step 1: Show the HIG Guidance

步骤1：展示HIG指南

Step 2: Demonstrate the Risk

步骤2：展示风险

Step 3: Offer Compromise

步骤3：提供折中方案

Step 4: Document the Decision

步骤4：记录决策

When to Accept the Design Decision