你有没有遇到过一个页面，版面上布满了各种设计元素，你甚至不知道从哪里开始寻找？如果难以在屏幕上找到焦点，则布局可能缺少清晰的视觉层次结构。

页面的可视层次结构控制信息从系统到最终用户的传递 - 它让用户知道将注意力集中在何处。

颜色和对比度

一个好的视觉设计使用颜色和/或对比度在页面上创建视觉层次结构。将颜色应用于设计会使某些元素看起来先进，而其他元素则逐渐消退，从而决定了吸引我们注意力的因素以及我们对各种设计元素的重要性。

创建层次结构的不是元素的实际颜色，而是元素与其出现的上下文（包括背景和其他邻近元素）之间的值和饱和度之间的对比度。

设计人员通常还使用类型对比度来指示层次结构，通过特殊的字体处理来表示重要性。重量较重的字体（如粗体）与轻量级或常规字体相比尤为突出。与周围文本样式不同的单词（例如，斜体或下划线）也会引起注意。

使用颜色和对比度的最佳做法：

考虑颜色饱和度。鲜艳的颜色自然而然地突出，因此请将其用于重要项目;饱和度较低的颜色可用于重要性较低的项目。保留暖亮颜色（如红色），以备警告或错误使用。

不要使用太多的颜色。虽然一些复杂的配色方案看起来很漂亮，但它们在网页上可能会让人感到不知所措。当使用太多具有相似值或饱和度的颜色时，人们对元素之间层次结构的感知通常会降低。在常见的简单设计中，请将颜色使用限制为 2 种主色和 2 种辅助色。

不要使用太多的对比度变化。对于复杂设计，使用不超过 3 种对比度变体。如果一切都是对比鲜明的，那么没有什么是突出的。有效的设计通常对标题、副标题和正文文本使用不同的处理方式。

不要仅仅依靠颜色来传达视觉层次。色盲患者可能无法察觉到某些颜色组合之间的差异。

规模

缩放原则是在设计中创建视觉层次结构的关键。较大的元素更突出并吸引用户的注意力，因此大小可以用作重要性的标记。

使用体重秤时的最佳做法：

使用不超过 3 种尺寸 - 小号、中号和大号。三种大小提供了足够的多样性来使用 - 想想标题，副标题和正文副本的类型大小 - 但仍然要保持明确定义和清晰的层次结构关系。在网页设计上，正文副本的大小范围可以从 14px 到 16px，副标题的大小可以从 18px 到 22px 不等，标题的大小可以从 32px 到 32px 不等。

使最重要的元素最大。强调设计中最重要的方面，使其成为最大的方面。同样，使不太重要的元素变小。将元素的数量限制为最多2个，以便它们脱颖而出并加强层次结构。

分组

隐式和显式分组有助于我们看到页面的骨骼或结构，并允许我们将注意力引导到可能与我们的目标相关的屏幕区域。如果没有分组，将更难理解导航，内容，广告等标准区域的位置，因此，将更难确定将注意力引导到何处以及哪些区域可以安全地忽略。例如，一旦用户识别出右轨组，他们可能会忽略它，因为它与广告相关联 -横幅盲法的一个实例 。

分组通常通过邻近性和空格的使用隐式传达，或通过封闭（公共区域）显式传达。

分组的最佳做法：

让它呼吸。周围有更多空间的元素将被视为一个群体，因此将受到更多的关注。（如果该组包含许多元素，则注意力可能会在它们之间分配。考虑通过给设计更多的空间来强调设计中最重要的方面。

请考虑使用容器。如果仅更改空格不足以作为创建层次结构的视觉提示，请添加额外的元素，如边框或背景。这些附加元素可能会造成视觉混乱，因此请谨慎使用它们。

结论

在开始设计之前，请从视觉对象退后一步，定义内容的层次结构以及您希望用户带走的关键点。建立该层次结构后，请专注于应用颜色和对比度、比例或分组的变化。在设计时考虑了视觉层次结构之后，退后一步，通过与目标用户进行测试来查看设计是否按预期运行。

当页面的视觉层次结构准确反映不同设计元素的重要性时，用户很容易理解它，并可以成功完成任务，从而获得对设计和品牌的信任。

来源：UI Blogger