设计系统（Design System）是连接设计与开发的桥梁。而 Apple HIG 组件库则是这套桥梁的「交通规则」。本文将带你一步步构建一套符合 HIG 规范的前端组件库。

设计 Token 优先

任何组件库的第一步都应该是建立设计 Token（Design Tokens）。Token 是设计决策的原子化表达：

  • 颜色 Token：`--system-blue: #007AFF`、`--label-primary: #000000`
  • 间距 Token：`--space-4: 16px`、`--space-6: 24px`
  • 圆角 Token：`--radius-xl: 16px`、`--radius-full: 9999px`
  • 字体 Token：`--text-body: 17px`、`--text-title1: 28px`
「设计 Token 是设计系统中的单一事实来源。一次定义，处处使用。」

按钮组件规范

以最常用的按钮为例，HIG 定义了清晰的层级：

  • 主要按钮（Primary）：胶囊形状、蓝色背景、白色文字、600 字重、最小高度 44pt
  • 次要按钮（Secondary）：胶囊形状、蓝色文字、10% 蓝色透明背景
  • 文本按钮（Tertiary）：纯蓝色文字、无背景
  • 按下反馈：`scale(0.98)` 微缩效果

卡片与列表

HIG 推荐两种卡片风格：

  • 独立卡片：实色背景 + 16px 圆角 + 微妙阴影
  • 分组列表：灰色外框 + 白色内项 + inset 分隔线（起始缩进 16px）

关键是一致性——所有卡片圆角保持 Concentric 关系（内层圆角 + padding = 外层圆角）。

检测清单

在发布组件前，逐一检查：

  • 所有交互元素 ≥ 44×44pt 触摸目标
  • 文字对比度 ≥ 4.5:1（WCAG AA）
  • 支持 Dynamic Type 字号缩放
  • 支持 VoiceOver 旁白（`aria-label`）
  • 按下/悬停/聚焦状态可区分

构建 HIG 组件库不是一次性的工作，而是一个持续迭代的过程。随着 Apple 每年更新 HIG 规范，组件库也需要同步进化。