你有没有遇到过这样的网页，忙于各种各样的设计元素，你甚至不知道从哪里开始找?如果你很难在屏幕上找到焦点，很可能是布局缺少清晰的视觉层次。

页面的视觉层次结构控制从系统到最终用户的信息传递 - 它允许用户知道在哪里关注他们的注意。

Williams-sonoma.com的移动版本：我们从哪里开始寻找？ 除了栗色网络星期一块，此页面上的元素在大小和颜色上都相对相等，并且缺少呼吸空间。因为大多数文本都是大写的，所以很少有突出的部分。很少有用户愿意花时间分析这种视觉混乱。

定义：这个视觉层次结构在2D显示（网页，图形，打印等）中是指页面上的设计元素的组织，以便引导眼睛按预期重要性的顺序消耗每个设计元素。

可以使用可视层次结构使用：

  1. 颜色和对比度
  2. 规模
  3. 分组（邻近区域和公共区域）

1.颜色和对比度

良好的视觉设计使用颜色或对比（或两者）在页面上创建可视化层次结构。将颜色应用于设计使一些元素似乎推进和其他元素来撤退，因此，决定了抓住我们的注意力和我们分配给各种设计元素的重要性。

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

设计师经常使用类型对比度用特殊的字体处理来表示重要性。厚重的字体，如粗体，在轻量字体或常规字体的衬托下显得更加突出。与周围文字风格不同的文字(如斜体或下划线)也会引起注意。

MoMA.org使用颜色传达层次结构 - 右上角的绿色链接与标识下方的黑色链接相比 .
thyounproject.com：眼睛首先被吸引到搜索领域不仅因为它的大尺寸，而且它的白色与黑色背景的对比。该字段提示用户开始搜索 . 然后眼睛会被导向搜索栏下方的白色图标，这些图标提供了可能的结果。

使用颜色和对比时的最佳实践：

  • 考虑颜色饱和度。鲜艳的色彩自然脱颖而出，所以用它们为重要的物品;较少饱和的颜色可用于更重要的项目。保留温暖的鲜艳颜色，如红色，用于警告或错误。
  • 不要使用太多的颜色。虽然一些复杂的颜色方案是美丽的，但它们可以感到难以置压在网页上。当使用太多颜色的类似价值或饱和度时，人们在元素之间的层次结构的看法通常会减少。有用的简单设计，将颜色限制为2个主要和2个二次颜色。
  • 不要使用太多的对比变化。对于复杂的设计，使用不超过3种对比变化。如果把所有的东西都对比起来，那么就没有什么能突出。有效的设计通常对标题、子标题和正文文本使用不同的处理方法。
  • 不要仅仅依靠颜色来传达视觉层次。色盲的人可能无法在某些颜色组合之间感知差异。

2.规模

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

泽西乳制品： 这个牛奶盒上的排版处理通过比例变化创造了一个有影响力的视觉层次。人们的目光立刻被吸引到产品最重要的方面——牛奶及其脂肪含量。
hipcamp.com：视觉层次通过字体大小（和对比度）来传达。眼睛首先被吸引到了眼睛上在外面找到自己由于其大而粗糙的尺寸，文本。本文为您提供了您在本网站上所做的内容的一般想法。

使用scale时的最佳实践：

  • 使用不超过3种尺寸-小型、中型和大型。三种尺寸提供了足够的多样性，可以使用它们-考虑页眉、副标题和正文副本的类型尺寸-但仍然保持层次关系定义良好且清晰。在web设计中，正文副本的大小可以从14px到16px，副标题的大小可以从18px到22px，标题的大小可以从32px到32px。
  • 使最重要的元素最大化。强调设计中最重要的方面，使其最大。同样，将不太重要的元素缩小。将大元素的数量限制在2个以内，这样它们就能够突出并强化层级结构。

3.分组：邻近区域和公共区域

隐式和显式分组可以帮助我们看到页面的骨架或结构，并允许我们将注意力转移到屏幕上可能与我们的目标相关的区域。如果没有分组，就很难理解诸如导航、内容、广告等标准领域在哪里，因此，也就更难弄清楚应该将注意力转移到哪里，以及哪些领域可以安全地忽略。例如，一旦用户识别了一个右栏组，他们可能会忽略它，因为它与广告有关联横幅失明.

分组通常通过隐含地传达接近以及使用空白空间或通过外壳明确使用（公共区域）。

iPhone上的Spotify：眼睛会立即在屏幕上看到3个不同的分组。有意增加组间的间隔使每组都独立且个性化。同样重要的是有意减少标题和相关内容之间的空白。这种减少的间距在标题和内容之间创建了层次关系。
Shopify结帐表单字段： 近似原则很明显 表格设计 . 节标题和相关表单字段之间的最小空白使关系变得清晰-它们属于一起。每个字段块之间的空间也增加了，这进一步帮助眼睛看到这种层次空间模式。还要注意两个边界的边界表达检测按钮（公共区域原理的示例），其将它们与下面的结账表单分开。

分组的最佳做法：

  • 让它呼吸吧。一个周围有更多空间的元素将被视为一个群体，因此将得到更多的关注。(如果群体包含很多元素，注意力很可能会被分散。)考虑通过给它更多的空间来强调设计中最重要的方面。
  • 考虑使用容器。如果仅仅改变空格不足以作为创建层次结构的视觉提示，那么添加额外的元素，如边框或背景。这些额外的元素可能会造成视觉混乱，因此请谨慎使用它们。

斜视试验

在设计学校，我们被教导眯着眼睛或对设计进行轻微的模糊处理，以了解传达的分组和层次。这项技术突出了设计中强调的内容，并揭示了底层的层次结构。

在上面的Spotify例子中，以5或10像素为半径模糊设计表明分组按照预期工作，并且最近玩即使您无法阅读文本，段也脱颖而出。20像素模糊显示了一个意外的层次结构，其中最近播放的项目之一是由于其强烈的颜色而成为页面最突出的元素 - 在原始屏幕截图中也可以辨别出来的效果。

Spotify：原始（左上）和模糊，半径为5（右上）、10（左下）和20像素（右下）

这个例子表明，设计模板是不够的，还必须考虑填充它的内容。例如，一张色彩极其强烈的新闻照片可能会占据新闻主页的主导地位，即使它是为了说明次要故事。编辑需要考虑其内容选择的用户体验影响。

结论

在开始设计之前，请从视觉效果退回步骤，并定义内容的层次结构和您希望用户带走的关键点。一旦您建立了层次结构，请侧重于应用颜色和对比度，缩放或分组的变化。在设计视觉层次结构之后，请退后一步，看看设计是否按照目标用户测试时读取。

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

参考文献

戴维斯，M.和亨特，J.（2017）。可视通信设计。布卢姆斯伯里视觉艺术。

Lupton，E。（2008）。平面设计：新的基础。纽约：普林斯顿建筑出版社。