视觉层次（Visual Hierarchy）是设计中最核心也最容易被忽视的原则。它决定了用户首先看到什么、其次看到什么、以及信息之间的逻辑关系。Apple 的 Human Interface Guidelines 将「Clarity（清晰）」列为四大设计基石之首。

字重比字号更重要

很多设计师习惯用字号来区分层级，但 Apple 告诉我们：字重（Font Weight）才是更有效的手段。

观察 iOS 的字体层级：标题 1（28pt Bold）与标题 3（20pt Semibold）之间，字重变化带来的视觉差异比单纯放大字号更加清晰可辨。这也是为什么 HIG 推荐「用字重建立层级，而不仅仅是字号」。

「在好的设计中，每一个字重、每一级字号都经过了精心考量和计算。」

空间的四种角色

  • 间距建立关系：相近的元素属于同一组（ proximity 原则）
  • 间距引导视线：更大的间距意味着内容的段落切换
  • 间距创造节奏：一致的间距体系让阅读体验流畅可预期
  • 间距提升可读性：充足的行高和段落间距减少阅读疲劳

色彩的层级作用

在 HIG 色彩体系中，文字被精心分为四级：

  • --label-primary (#000000) — 最重要的标题和正文
  • --label-secondary (60% 透明度) — 次要信息、辅助说明
  • --label-tertiary (30% 透明度) — 占位符、时间戳等次要元素
  • --label-quaternary (18% 透明度) — 最弱层级、装饰性内容

这种精细的透明度梯度让信息层级一目了然，而不需要依赖蓝色链接或加粗来区分。

实战建议

  • 主标题用 Bold 28pt（Large Title）
  • 次级标题用 Semibold 20pt（Title 3）
  • 正文用 Regular 17pt（Body）
  • 辅助文字用 Regular 13pt（Footnote）+ secondary 色
  • 行高保持在 1.4–1.6 之间

好的视觉层次就像一场精心编排的交响乐——每个元素都在正确的位置上，发出恰到好处的声音。