编辑指南:有时候，一个页面充满了设计元素，用户眼花缭乱，甚至不知道重点在哪里。如果你很难在页面上找到焦点，布局可能缺乏清晰的视觉层次。应该如何体现视觉层次？本文作者将从四个方面进行分析，希望对你有所帮助。

你见过一个页面，堆了各种设计元素，连从哪里开始都不知道？如果你很难在页面上找到焦点，布局可能缺乏清晰的视觉层次。

页面的视觉层次结构控制着信息从系统到最终用户的传递——它让用户知道应该关注哪里。

威廉姆斯手机版-Sonoma.com:从哪里开始找？除了栗色的“网络星期一”区块外，本页元素大小颜色相对相等，没有呼吸空。因为大部分课文都是大写的，很少有突出的。很少有用户愿意花时间通过这种视觉混乱来分析。

定义:2D显示的视觉层次(网页、图形、印刷品等)。)是指设计元素在页面上的组织，从而引导眼睛按照预期的重要程度顺序浏览每个设计元素。

有三种方法可以创建视觉层次结构:

颜色和对比度比例分组（邻近区域和公共区域）

首先，颜色和对比度

良好的视觉设计使用颜色或对比度(或两者)在页面上创建视觉层。色彩在设计中的应用会让一些元素向前看，而另一些元素向后看，从而决定了吸引我们注意力的内容和我们对各种设计元素的重视程度。

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

设计者通常也使用类型比较来表示层次，并通过特殊的字体处理来表达重要性。粗体比细字体或普通字体更引人注目。与周围文字风格不同的文字(例如斜体或下划线)也会引起注意。

MoMA.org用颜色来传达层次结构——右上角的绿色链接与徽标下的黑色链接形成鲜明对比。

TheNounProject.com:眼睛首先被吸引到搜索领域，不仅是因为它的体积大，还因为它的黑白背景对比。该字段提示用户开始搜索。然后，把你的眼睛对准搜索栏下面的白色图标，预测可能的结果。使用颜色和对比度的最佳实践:

考虑高饱和度的色彩。鲜艳的色彩自然会脱颖而出，因此可用于重要物品。低饱和的颜色可用于重要性较低的项目。保留温暖的明亮颜色（例如红色）以警告或错误。不要使用太多颜色。尽管有些复杂的配色方案看起来ʯ��ׯ��վ���很漂亮，但它们可能会让你感到不知所措。当使用太多具有相似值或饱和度的颜色时，人们对元素之间层次结构的感知通常会降低。在一般设计中，将颜色使用限制为2种主要色和2种辅助色即可。不要使用太多的对比变化。对于复杂的设计，请使用不超过3个对比度变化。如果一切都有对比，那么什么都不会脱颖而出。有效的设计通常对标题，子标题和正文使用不同的处理方式。不要仅仅依靠颜色来传达视觉层次。色盲人士可能无法感知某些颜色组合之间的差异。

第二，比例

较大的元素会脱颖而出，吸引用户的注意力，所以大小可以作为重要性的标志。

泽西牛奶公司:这款牛奶纸盒的印刷工艺，通过尺度变化，创造出有影响力的视觉层次。立即注意产品最重要的方面——牛奶及其脂肪含量。

Hipcamp:视觉层次是通过字体大小(和对比度)来传达的。吸引我的是主要口号，因为它够大，够大胆。使用比例的最佳实践:

使用不超过3种尺寸-小，中和大。三种大小提供了足够的多样性以供使用-考虑标题，子标题和主体副本的类型大小-但仍保持层次结构关系的良好定义和清晰性。在网页设计上，主体副本的大小范围为14px至16px，副标题的大小范围为18px至22px，标题的大小范围为32px。使最重要的元素最大化。通过最大程度地强调设计中最重要的方面。同样，将不太重要的元素缩小。将元素的最大数量限制为最多2个，这样它们才能脱颖而出并加强层次结构。

三.分组:相邻区域和公共区域

隐式和显式分组帮助我们看页面的骨架或结构，促使我们将注意力转向屏幕上与目标相关的区域。没有分组，就很难理解标准区域(比如导航、内容、广告)在哪里，所以也就很难搞清楚关注点在哪里，哪些区域可以放心忽略。例如，一旦用户识别出右列组，他们可能会忽略它，因为它与广告相关联。

Spotify:眼睛立即在这个屏幕上看到3个不同的组。组与组之间有意增加的间距分隔并个性化了每个组。同样重要的是，标题和相关内容之间有意减少的空白色。这种减小的间距在标题和内容之间创建了层次关系。

Shopify结账表单域:在好的表单设计中，邻近性原则是显而易见的。节标题和相关表单域之间的最小空空格使关系变得清晰——它们属于同一个类。每个场块之间的空空间也增加了，这进一步帮助眼睛看到这种分层的空空间模式。还要注意两个快速结帐按钮周围的边界(公共区域原则的一个示例)，这将它们与下面的结帐表分开。

分组的最佳实践:

留白。周围有更多空间的元素将被视为一个组，因此将受到更多关注。（如果组中包含许多元素，则注意力可能会分散在其中。）考虑通过提供更多留白来强调设计中最重要的方面。使用容器（卡片）。如果仅凭空白不足以创建层次结构的视觉提示，请添加边框或背景之类的额外元素。这些其他元素会造成视觉混乱，因此请谨慎使用。

第四，斜视测试

在设计中，我们有时会以怀疑的眼光或略微模糊的设计来理解所传达的分组和层次。这种技术突出了设计的重点，并揭示了底层的层次结构。

在上面的Spotify示例中，使用5或10个像素的半径模糊设计表示该组按预期浏览，即使您无法阅读文本，“最近播放”部分也是最突出的部分。20像素的模糊呈现出意想不到的层次结构，一个最近播放的内容因为其强烈的色彩而成为页面上最突出的元素——这种效果在原截图中也可以看到。

Spotify:原图(左上角)，半径5(右上角)，半径10(左下角)，半径20像素(右下角)模糊。

这个例子表明，设计一个模板是不够的——你还必须考虑什么将填充模板。比如，色彩鲜明的新闻照片可能会占据新闻的头版，即使是为了解释次要故事。编辑需要考虑他们的内容选择对用户体验的影响。

五.结论

在开始设计之前，请从视觉上后退一步，然后定义内容的层次结构和用户应该注意的要点。建立层次后，请集中精力应用颜色和对比度、比例或分组的变化。在考虑了视觉层次的设计之后，请退一步，和目标用户一起测试，看看设计是否如预期的那样被阅读。

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