设计中的视觉层级：如何控制人们的视线落点

你的设计只有三秒钟告诉用户该看哪里。如果所有元素都以同等程度争夺注意力，就没有什么会被阅读，没有什么会被点击，用户就会离开。这不是设计观点，这是视觉的运作方式。

视觉层级就是控制这三秒窗口的系统。以下是如何构建一个真正能引导用户的视觉层级。

视觉层级究竟是什么

视觉层级是对元素的排布，使眼睛按照刻意设定的顺序处理它们。不是随机的，不是同时处理所有的，而是按顺序：先看这个，然后这个，再然后这个。

大脑不会像读书一样从上到下阅读页面，它会扫描信号。尺寸、对比度、颜色、间距和位置，这些都在告诉眼睛什么最重要。构建良好的层级让最重要的元素无处遁形，让最不重要的元素容易被忽略。

五个调节杠杆

每一个视觉层级都由五个杠杆构成。你不需要同时用到全部五个，你需要的是适合你特定布局的正确组合。

1. 尺寸

更大的元素先被看到。这是最显而易见也是最可靠的杠杆。一个48px的标题永远比一个14px的段落更先抓住注意力。创造层级的是尺寸之间的比例，而不是绝对数值。

常见错误：把所有东西都做大。当标题、副标题、正文和 CTA 都过大时，层级就会变得扁平，没有任何元素能起到引导作用。

2. 对比度

高对比度吸引眼球。浅色页面上的深色元素、低饱和背景上的亮色按钮、灰度布局上的彩色徽章。对比度是在不改变元素尺寸的情况下让某个元素突出的最快方式。

反过来也一样。低对比度会让元素退到后面。元数据、时间戳和次要标签应该具有低对比度，这样它们就不会与主要内容竞争。

3. 颜色

颜色创造情感分量。一片灰色海洋中的一个红色徽章永远会吸引注意力，不是因为红色有什么特别，而是因为它是整个情境中唯一具有色彩能量的元素。当每种颜色有明确的角色时，色彩方案就服务于层级：主色用于 CTA，中性色用于正文，暗色用于元数据。

4. 间距

留白不是空白，它是一种信号。被充裕空间包围的元素会被理解为重要，因为空间将它隔离出来并给了它呼吸的余地。挤在一起的元素会被理解为次要，因为没有任何东西突出。

网页设计中最常见的层级失败是区块之间的间距不足。当每个区块都渗入下一个区块时，眼睛就无法分辨一个想法在哪里结束、另一个想法在哪里开始。

5. 位置

在从左到右阅读的语言中，眼睛自然从左上角开始，然后沿着可预测的模式移动。将最重要的元素放在自然起点位置，在应用任何其他杠杆之前就已经为它创造了优势。

单独依靠位置很弱。左上角的小型低对比度元素仍然会输给中央的大型高对比度元素。位置在强化其他四个杠杆时效果最好。

眯眼测试

这是检查你的层级是否有效的最快方法。对着你的设计眯眼，直到一切变得模糊。仍然清晰可见的元素，就是你的层级正在优先展示的元素。

如果你眯眼时第一眼看到的是 CTA、标题或主视觉图，你的层级就在正常运作。如果你第一眼看到的是装饰性的侧边栏或导航栏，那它就没有。

这只需要五秒钟，就能在任何用户测试之前发现80%的层级问题。

常见的层级失败

所有东西都是粗体。 如果每个段落都以粗体文本开头，那就没有任何东西被强调了。粗体在稀少时才有效。

太多焦点。 一个页面上有三个同等大小、同等色彩鲜艳的元素，这不是层级，这是三个竞争者。每个视口只选一个赢家。

忽视移动端。 为1440px屏幕设计的层级在375px手机上往往会崩溃。五个杠杆需要针对每个断点重新评估，因为空间关系会完全改变。

有颜色但无对比度。 彩色背景上的彩色按钮会消失。只有当焦点元素与其周围环境之间的颜色对比度高到足以创造分离时，层级才能发挥作用。

在实践中构建层级

以下是适用于任何页面布局的具体框架：

1. 确定唯一重点。 这个页面上最重要的一个行动或信息是什么？那个元素获得最大的尺寸、最高的对比度和最佳的位置。
2. 给其他所有元素排序。 创建一个页面上所有元素的编号列表，按重要性排序。排名决定每个元素获得哪个杠杆。
3. 每个层级至少应用两个杠杆。 顶层元素获得大尺寸加高对比度。二层元素获得中等尺寸加颜色。三层元素获得小尺寸加低对比度。
4. 删除直到它崩溃。 删除元素直到层级受损。你在事情崩溃之前删除的最后一个元素，很可能是不必要的。

这个框架适用于落地页、仪表板、文章、电子邮件，以及任何用户需要知道先看哪里的布局。

常见问题

设计中的视觉层级是什么？

视觉层级是按重要性顺序排列设计元素的方式。它利用尺寸、对比度、颜色、间距和位置来控制眼睛处理页面上信息的顺序。

视觉层级为什么重要？

因为用户不会阅读，他们只会扫描。没有清晰的层级，每个元素都在同等地争夺注意力，用户会不知所措然后离开。层级将一堆元素转变成一段被引导的体验。

如何测试视觉层级？

眯眼测试是最快的方法。对你的设计模糊或眯眼，检查哪些元素仍然清晰可见。这些就是你的层级优先展示的元素。如果错误的元素占主导，就调整尺寸、对比度或间距，直到正确的元素处于领先位置。