设计中的视觉层次

你的设计有三秒钟的时间来告诉某人要看什么。如果所有东西都同样呼喊要获得注意力,就没有东西被阅读,没有东西被点击,用户离开。这不是设计观点。这是视觉的工作方式。

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

视觉层级真正是什么

视觉层级是元素的排列,使眼睛按照特定的顺序处理它们。不是随机的,不是一次全部,而是按序列:这个先,然后这个,然后这个。

大脑不像读书那样从上到下读取页面。它扫描信号。大小、对比度、颜色、间距和位置都告诉眼睛什么是最重要的。一个精心构建的层级使最重要的元素不可能错过,最不重要的元素容易忽略。

五个控制

每个视觉层级都是由五个杠杆构建的。你不需要一次性使用所有五个。你需要适合你的特定布局的正确组合。

1. 大小

更大的元素会首先被看到。这是最明显的杠杆,也是最可靠的。48px标题总是会在14px段落之前吸引注意力。大小之间的比率创建层级,而不是绝对数字。

错误:让一切都很大。当标题、副标题、正文和CTA都超大时,层级变平,没有任何东西引导。

2. 对比度

高对比度吸引眼睛。浅色页面上的深色元素,柔和背景上的亮按钮,灰度布局上的彩色徽章。对比度是使一个元素突出而不改变其大小的最快方法。

这反过来也有效。低对比度将元素推向后面。元数据、时间戳和辅助标签应该具有低对比度,以免与主要内容竞争。

3. 颜色

颜色产生情感权重。一个红色徽章在灰色海洋中总是会吸引注意力,不是因为红色是特殊的,而是因为它是其背景中唯一具有色彩能量的元素。调色板在每种颜色都有明确角色时服务于层级:主要用于CTA,中性用于正文,暗淡用于元数据。

4. 间距

空白不是空的空间。这是一个信号。周围有充足空间的元素被读作重要,因为空间隔离了它并给了它呼吸的空间。紧密放在一起的元素被读作次要,因为没有任何东西突出。

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

5. 位置

在LTR语言中,眼睛自然地从左上角开始,从那里开始遵循可预测的模式。将最重要的元素放在自然起始位置会在应用任何其他杠杆之前给予它优势。

仅靠位置很弱。左上角的小型低对比度元素仍会输给中心的大型高对比度元素。位置在强化其他四个控制时效果最好。

眯眼测试

这是检查你的层级是否有效的最快方法。眯着眼睛看你的设计,直到一切模糊。保持可见的元素是你的层级正在优先处理的元素。

如果眯眼时你首先看到的是CTA、标题或英雄形象,你的层级正在工作。如果你首先看到的是装饰性侧边栏或导航栏,就不是。

这只需五秒钟,能在任何用户测试之前捕捉80%的层级问题。

常见的层级失败

所有东西都是粗体。 如果每个段落都以粗体文本开始,就没有任何东西被强调。粗体在罕见时工作。

焦点过多。 一个具有三个相同大小、相同彩色元素的页面没有层级。它有三个竞争者。每个视口选择一个赢家。

忽视移动。 为1440px屏幕设计的层级经常在375px手机上崩溃。五个控制需要为每个断点重新评估,因为空间关系完全改变。

没有对比度的颜色。 彩色背景上的彩色按钮消失。只有当焦点元素与其周围的颜色对比度足够高以产生分离时,层级才有效。

实践中构建层级

这是任何页面布局的具体框架:

1. 决定唯一的事情。 这个页面上最重要的单一行动或消息是什么?该元素获得最大的大小、最高的对比度和最佳的位置。
2. 对所有其他内容进行排名。 创建页面上每个元素的编号列表,按重要性排序。排名决定每个元素获得哪个杠杆。
3. 每层应用至少两个控制。 顶层元素获得大尺寸+高对比度。二级元素获得中等大小+颜色。三级元素获得小尺寸+低对比度。
4. 删除直到它破裂。 删除元素直到层级受损。在事情破裂之前删除的最后一个元素可能是不必要的。

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

常见问题解答

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

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

为什么视觉层级重要?

因为用户不阅读,他们扫描。没有清晰的层级,每个元素都同样竞争注意力,用户被淹没,然后离开。层级将元素集合转变为引导体验。

我如何测试视觉层级?

最快的方法是眯眼测试。模糊或眯眼看你的设计,检查哪些元素保持可见。那些是你的层级优先处理的元素。如果错误的元素占主导地位,调整大小、对比度或间距,直到正确的元素引导。