Apple Human Interface Guidelines 实战参考

从 Apple 官方 HIG 和生产级桌面应用实战中提炼的设计规范速查。

适用场景

• - macOS 桌面应用 UI 设计（Electron / SwiftUI / AppKit）
• iOS 应用 UI 设计
• 需要"原生感"的跨平台应用
• 审计现有 UI 是否符合 Apple 设计语言

不适用

• - Android / Windows 应用（参考 Material Design / Fluent Design）
• Web 专属设计（不追求 native 感）

---

1. 核心设计原则

Apple HIG 的三大支柱：

原则	含义	实践
Clarity（清晰）	文字可读、图标清晰、功能一目了然	用 SF 字体、标准图标、足够对比度
Deference（顺从）

UI 服务内容，不喧宾夺主 | 减少装饰、留白充足、动画克制 |
| Depth（层次） | 通过视觉层级传达结构 | 阴影、模糊、动画暗示前后关系 |

与其他平台的根本区别

CODEBLOCK0

---

2. 颜色系统

Apple System Colors

这些颜色在 Light/Dark 模式下自动适配，优先使用：

颜色	Light HEX	Dark HEX	用途
Blue	INLINECODE0	INLINECODE1	主强调色、链接、可交互元素
Green

#34C759 | #30D158 | 成功、确认 |
| Orange | #FF9500 | #FF9F0A | 警告 |
| Red | #FF3B30 | #FF453A | 错误、危险操作、删除 |
| Purple | #AF52DE | #BF5AF2 | 辅助强调 |
| Teal | #5AC8FA | #64D2FF | 次要信息 |
| Yellow | #FFCC00 | #FFD60A | 注意 |
| Pink | #FF2D55 | #FF375F | 情感、收藏 |
| Indigo | #5856D6 | #5E5CE6 | 特殊强调 |

语义色

用途	Light	Dark
Label（主文字）	INLINECODE18	INLINECODE19
Secondary Label

rgba(0,0,0,0.5) | rgba(255,255,255,0.55) | | Tertiary Label | rgba(0,0,0,0.25) | rgba(255,255,255,0.25) | | Quaternary Label | rgba(0,0,0,0.1) | rgba(255,255,255,0.1) | | Separator | rgba(0,0,0,0.1) | rgba(255,255,255,0.1) | | Background（窗口） | #FFFFFF | #1E1E1E | | Secondary BG | #F5F5F5 | #2C2C2E | | Tertiary BG | #FFFFFF | #3A3A3C |

使用原则

CODEBLOCK1

铁律：主强调色严格保留给强交互元素（按钮、Checkbox 选中、Slider 填充段、Focus Ring），不用于静态文字/数值。

---

3. 排版

字体栈

CODEBLOCK2

macOS 上会自动使用 SF Pro，iOS 上使用 SF。不要手动指定 SF Pro 的 TTF 文件。

字号层级（macOS）

层级	字号	字重	颜色	用途
Large Title	26px	Bold	Label	页面大标题（iOS 常用，macOS 少用）
Title 1

22px | Regular | Label | 区块标题 | | Title 2 | 17px | Regular | Label | 次要标题 | | Title 3 / Headline | 15px | Semibold | Label | 工具栏标题、卡片标题 | | Body | 13px | Regular | Label | 正文、控件默认 | | Callout | 12px | Regular | Label | 注释文字 | | Subheadline | 11px | Regular | Secondary Label | 辅助说明 | | Footnote | 10px | Regular | Tertiary Label | 脚注、时间戳 | | Caption 1 | 10px | Regular | Tertiary Label | 图片说明 | | Caption 2 | 10px | Medium | Tertiary Label | 表格表头 |

字号层级（iOS）

层级	字号	字重
Large Title	34px	Bold
Title 1

28px | Regular | | Title 2 | 22px | Regular | | Title 3 | 20px | Regular | | Headline | 17px | Semibold | | Body | 17px | Regular | | Callout | 16px | Regular | | Subheadline | 15px | Regular | | Footnote | 13px | Regular | | Caption 1 | 12px | Regular | | Caption 2 | 11px | Regular |

实战要点

• - macOS 默认正文 13px，iOS 默认正文 17px — 差异大，不要混用
• Section 标题用 11px font-medium text-black/40 降噪（macOS），禁止 INLINECODE35
• 静态数值（Slider 值、时间）用 INLINECODE36
• 辅助说明 INLINECODE37

---

4. 控件规格

macOS 标准控件尺寸

控件	高度	内边距	圆角
Button（Regular）	22px	12px 水平	5px
Button（Large）

28px | 16px 水平 | 7px | | TextField | 22px | 4px 内 | 5px | | Checkbox | 14×14px | — | 3px | | Radio | 16×16px（circle） | — | 50% | | Switch（macOS Ventura+） | 20×34px | — | 10px | | Slider | 4px 轨道高 | — | 2px | | Segmented Control | 22px | 6px 水平 | 5px | | Popup Button | 22px | 内含箭头 | 5px |

iOS 标准控件

控件	最小高度	触控目标
Button	44px	44×44px
TextField

44px | — | | Navigation Bar | 44px | — | | Tab Bar | 49px | — | | Table Row | 44px | 全宽 |

⚠️ 触控目标铁律

CODEBLOCK3

即使视觉上更小，可点击区域也必须达到最小尺寸。

Segmented Control（macOS 仿真规格）

属性	值
底座色	INLINECODE38
底座内距

p-[3px] | | 底座圆角 | rounded-lg | | 选中药丸 | bg-white rounded-[7px] | | 药丸阴影 | 0 1px 3px rgba(0,0,0,0.08), 0 0.5px 1px rgba(0,0,0,0.12) | | 文字 | text-[13px] font-medium | | 选中文字 | text-[#1d1d1f] | | 未选中文字 | text-black/50 | | 布局 | flex-1 平分等宽 |

不要替换为 Tabs 或 RadioGroup — Segmented Control 是 2-5 个选项的切换专用控件。

---

5. 布局与间距

macOS 间距系统

间距	值	用途
最小间距	4px	相关元素间
控件间距

8px | 按钮组、表单字段间 | | 区块间距 | 12-16px | 功能区块间 | | 大区块间距 | 20-24px | 页面 section 间 | | 窗口内边距 | 20px | 窗口内容边距 |

窗口

属性	macOS	iOS
最小宽度	400px	—
标题栏高度

22px（标准）/ 52px（工具栏） | — | | Sidebar 宽度 | 200-260px（标准） | — | | Safe Area | 无 | 顶部/底部刘海 |

容器层级

CODEBLOCK4

实战规则：

• - 配置参数直接平铺，不要用 border + padding 整体包裹
• 列表 Header 可用极弱底纹（bg-[#f5f5f7]/50）产生软分隔
• 去掉灰色嵌套面板（bg-s-bg-subtle Card 套 Card）

---

6. 图标

SF Symbols

Apple 提供 5000+ 个 SF Symbols 图标，与 SF 字体匹配。

CODEBLOCK5

图标规格

场景	尺寸	线宽
工具栏	16×16px	1.5px
导航项

20×20px | 1.5px | | Tab Bar（iOS） | 25×25px | — | | 空状态 | 48-64px | 1px |

颜色规则

CODEBLOCK6

---

7. 动画与过渡

标准时长

类型	时长	缓动
微交互（hover, press）	100-200ms	ease-out
状态切换

200-300ms | ease-in-out | | 页面转场 | 300-500ms | ease-in-out | | 弹窗出现 | 200ms | ease-out | | 弹窗消失 | 150ms | ease-in |

Apple 标准缓动

CODEBLOCK7

动画原则

CODEBLOCK8

---

8. Dark Mode

设计原则

CODEBLOCK9

原则	实践
用语义色	不硬编码 #FFFFFF / INLINECODE50
降低饱和度

Dark 模式中高饱和度色块刺眼 |
| 提高对比度 | 文字/图标的对比度要求更严格 |
| 阴影不可见 | Dark 模式中阴影效果弱，改用微弱边框或高光 |

macOS Dark Mode 特殊处理

CODEBLOCK10

适配检查

CODEBLOCK11

---

9. 辅助功能（Accessibility）

WCAG 对比度

级别	正文	大字体（≥18px bold / ≥24px）
AA	≥ 4.5:1	≥ 3:1
AAA

≥ 7:1 | ≥ 4.5:1 |

Apple 特有要求

CODEBLOCK12

Focus Ring

CODEBLOCK13

所有可聚焦控件统一此规则。

---

10. macOS vs iOS 差异速查

差异点	macOS	iOS
正文字号	13px	17px
最小交互目标

24px | 44px |
| 导航模式 | Sidebar + Tab | Tab Bar + Navigation Stack |
| 窗口管理 | 多窗口 | 单窗口全屏 |
| 输入方式 | 鼠标 + 键盘 | 手指触控 |
| Hover 状态 | 必须有 | 没有（无鼠标） |
| Right-click | 上下文菜单 | 长按菜单 |
| 滚动条 | 自动隐藏 / 始终显示 | 始终自动隐藏 |
| 标题栏 | 红黄绿三按钮（左上角） | 无 |
| 通知 | 右上角通知中心 | 顶部横幅 |

跨平台设计策略

CODEBLOCK14

---

11. HIG 审计 Checklist

设计审计五维度

D1 — 容器层级与分组

• - [ ] 无框套框（Card 套 Card）
• [ ] 配置参数平铺，不过度包裹
• [ ] 列表 Header 用弱底纹分隔，非强边框

D2 — 排版降噪

• - [ ] Section 标题用 11px font-medium text-black/40（macOS）
• [ ] 禁止 INLINECODE52
• [ ] Card header 高度适当（macOS: ~40px）

D3 — 控件选择

• - [ ] 2-5 选项切换用 Segmented Control
• [ ] 数值显示用纯文字 INLINECODE53
• [ ] 主按钮用 accent color，不用品牌色

D4 — 交互反馈

• - [ ] 所有可交互元素有 hover 状态（macOS）
• [ ] Focus Ring 统一使用 accent color /30
• [ ] 动画时长 100-300ms，缓动用 ease-out

D5 — 状态表达

• - [ ] 日志/状态用纯文字颜色区分（Apple System Colors）
• [ ] 时间戳 INLINECODE54
• [ ] 空状态克制：浅灰图标 + 简短文字
• [ ] Loading 用 skeleton / spinner，不留空白

通用审计

• - [ ] 所有文字对比度 ≥ 4.5:1
• [ ] 触控目标 ≥ 44pt（iOS）/ 24px（macOS）
• [ ] 支持 prefers-reduced-motion
• [ ] 支持 prefers-color-scheme（Dark Mode）
• [ ] 键盘可导航所有控件（macOS）

---

12. 快速参考卡片

色彩

CODEBLOCK15

字体

CODEBLOCK16

间距

CODEBLOCK17

动画

CODEBLOCK18

---

来源

Apple Human Interface Guidelines (developer.apple.com/design/human-interface-guidelines) + 生产级 macOS Electron 应用实战中的像素级校准经验。