本文属于“前端设计基础”系列。视觉层次会综合使用色彩对比、字号阶梯、间距和设计四原则。

视觉层次是在控制用户先看到什么、接着看到什么，以及哪些信息可以稍后再看。没有层次的页面会让所有元素同时说话，最终没有任何重点。

大小是最直接的信号

更大的元素通常会先被注意到，因此页面标题、关键数据和核心卖点可以使用更大尺寸。但如果所有区块都使用超大标题，大小就失去了区分作用。

字重增加视觉质量

粗体比常规字重更容易留住视线。它适合标题、关键数字和需要强调的短语，不适合覆盖整段正文。层级之间应有明显差异，避免同时堆叠过多字重。

颜色和对比控制前后关系

高对比元素会向前突出，低对比元素会向后退。主要文字和操作需要足够清晰；时间、说明和次要信息可以使用较弱颜色，但仍需满足可读性要求。

强调色应该稀缺。页面上到处都是品牌色时，真正的主要操作反而不再突出。

留白也是强调工具

一个元素周围拥有更多空间时，会显得更独立、更重要。与其不断添加边框和背景，不如先检查是否能通过间距和分组解决问题。

位置影响浏览顺序

用户通常从上到下、从左到右浏览，并优先寻找标题、图片、数字和按钮。重要信息应出现在符合预期的位置，不要让关键操作藏在视觉路径之外。

建立三层而不是十层

多数界面可以先建立三个层级：

1. 主要层：页面目标、核心标题、主要操作。
2. 次要层：支持标题的正文、关键功能和内容分组。
3. 辅助层：时间、标签、说明和低频操作。

完成页面后，可以眯起眼睛或把截图缩小，观察哪些色块和文字最先跳出来。如果顺序与业务重点不一致，就需要重新调整大小、对比或空间。

视觉层次不是单纯把标题放大，而是让所有视觉信号共同服务于阅读顺序。

更多可直接浏览的界面案例，可以访问 StyleKit。