Apple Hig

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 的三大支柱：

与其他平台的根本区别

Apple: 做减法，每一个像素都要有理由
Material: 做加法，用动效和色彩引导注意力
Fluent: 做透明，用 Acrylic/Mica 融入环境

2. 颜色系统

Apple System Colors

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

语义色

使用原则

✅ 用 System Colors 做交互元素的强调色
✅ 用语义色做文字、背景、分隔线
❌ 不要硬编码 #007AFF — 在 Dark Mode 下它应该变成 #0A84FF
❌ 不要用 System Colors 做静态数据展示（如参数值 "0.3"、"18s"）

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

3. 排版

字体栈

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

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

字号层级（macOS）

字号层级（iOS）

实战要点

• macOS 默认正文 13px，iOS 默认正文 17px — 差异大，不要混用
• Section 标题用 11px font-medium text-black/40 降噪（macOS），禁止 uppercase tracking-wide font-bold
• 静态数值（Slider 值、时间）用 12px font-mono text-black/50
• 辅助说明 10-11px font-normal text-black/25~30

4. 控件规格

macOS 标准控件尺寸

iOS 标准控件

⚠️ 触控目标铁律

最小触控目标：44×44pt（iOS） / 24×24px（macOS 鼠标）

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

Segmented Control（macOS 仿真规格）

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

5. 布局与间距

macOS 间距系统

窗口

容器层级

✅ 平铺式布局 — 内容直接放在白底上，用间距和微弱分隔线区分
❌ 框套框 — Card 里面套 Card，增加视觉噪音

实战规则：

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

6. 图标

SF Symbols

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

使用场景：macOS / iOS 原生应用
替代方案：Lucide Icons（Web/Electron，风格接近 SF Symbols）

图标规格

颜色规则

✅ 可交互图标：System Blue（或当前 accent color）
✅ 信息图标：Secondary Label 色
✅ 状态图标：对应 System Color（Green=成功, Red=错误）
❌ 禁止给信息图标上彩色 — 只有可交互/状态图标用色

7. 动画与过渡

标准时长

Apple 标准缓动

/* macOS 标准 */
--apple-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

/* Spring-like（弹性） */
--apple-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

动画原则

✅ 动画要有目的 — 引导注意力、暗示关系
✅ 支持 prefers-reduced-motion — 简化或禁用动画
❌ 不要为了炫技加动画 — Apple 的动画是"感觉到但说不出"的
❌ 不要用 linear 缓动 — 感觉机械

8. Dark Mode

设计原则

Dark Mode ≠ 反转颜色
Dark Mode = 重新设计的配色方案

macOS Dark Mode 特殊处理

/* Light: 阴影分层 */
box-shadow: 0 1px 3px rgba(0,0,0,0.08);

/* Dark: 阴影无效，改用微弱边框 */
border: 1px solid rgba(255,255,255,0.06);

适配检查

✅ 所有文字在 Dark 背景上对比度 ≥ 4.5:1
✅ 分隔线/边框在两种模式下都可见
✅ 图标在两种模式下都清晰
✅ 品牌色在 Dark 模式下略微提亮

9. 辅助功能（Accessibility）

WCAG 对比度

Apple 特有要求

✅ 支持 Dynamic Type（iOS）— 用户可全局调整字体大小
✅ 支持 VoiceOver — 所有可交互元素有 aria-label
✅ 支持 Reduce Motion — 简化动画
✅ 支持 Increase Contrast — 提高边框/文字对比度
✅ 支持键盘导航（macOS）— Tab 遍历所有控件

Focus Ring

/* macOS 标准 Focus Ring */
outline: none;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);

/* 或用 Tailwind */
ring-[var(--color-primary)]/30  /* 不带 ring-offset */

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

10. macOS vs iOS 差异速查

跨平台设计策略

如果是 Electron 桌面应用：
  → macOS: 追求 native 感，使用 Segmented Control、Sidebar
  → Windows: 可以偏 Fluent，也可以保持统一（大多数 Electron 应用选后者）

如果是 React Native / Flutter：
  → 每个平台用对应的组件库（iOS: Cupertino / Android: Material）
  → 或用自定义设计语言统一（如 Notion、Figma 的做法）

11. HIG 审计 Checklist

设计审计五维度

D1 — 容器层级与分组

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

D2 — 排版降噪

• Section 标题用 11px font-medium text-black/40（macOS）
• 禁止 uppercase tracking-wider font-bold
• Card header 高度适当（macOS: ~40px）

D3 — 控件选择

• 2-5 选项切换用 Segmented Control
• 数值显示用纯文字 font-mono text-black/50
• 主按钮用 accent color，不用品牌色

D4 — 交互反馈

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

D5 — 状态表达

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

通用审计

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

12. 快速参考卡片

色彩

主强调: #007AFF (Light) / #0A84FF (Dark)
成功:   #34C759 / #30D158
警告:   #FF9500 / #FF9F0A
错误:   #FF3B30 / #FF453A

字体

macOS 正文: 13px Regular
iOS 正文:   17px Regular
字体栈:     -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui

间距

最小: 4px | 控件间: 8px | 区块间: 16px | 窗口边距: 20px

动画

微交互: 150ms ease-out
状态切换: 250ms ease-in-out
标准缓动: cubic-bezier(0.25, 0.1, 0.25, 1)

来源

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