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

页面的视觉层次控制着从系统到最终用户的信息传递——它让用户知道他们的注意力应该集中在哪里。

Williams-Sonoma.com手机版:我们从哪里开始寻找? 除了栗色网络星期一块，这个页面上的元素在大小和颜色上都是相对相等的，缺乏喘息的空间。因为大多数文本都是大写的，所以很少能突出。很少有用户愿意花时间解析这种视觉混乱。

定义:的视觉层次结构指的是设计元素在页面上的组织，以便引导眼睛按照预期的重要性顺序消费每个设计元素。

可视层次可以创建使用:

  1. 颜色和对比
  2. 规模
  3. 分组(邻近和共同区域)

1.颜色和对比

好的视觉设计使用颜色或对比(或两者兼用)来创建页面的视觉层次。在设计中使用颜色可以使一些元素显得先进，而另一些元素则显得落后，从而决定了什么能吸引我们的注意力，以及我们对各种设计元素的重视程度。

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

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

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

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

  • 考虑色彩饱和度。明亮的颜色自然会脱颖而出，所以在重要的物品上使用它们;不太饱和的颜色可以用于不太重要的物品。保留温暖明亮的颜色，如红色，用于警告或错误。
  • 不要使用太多的颜色。虽然一些复杂的配色方案看起来很漂亮，但它们在网页上可能会让人感到不知所措。当使用太多相似值或饱和度的颜色时，人们对元素之间的层次感往往会降低。通常，简单的设计，限制你的颜色使用2个原色和2个副色。
  • 不要使用太多的对比变化。对于复杂的设计，使用不超过3种对比变化。如果把所有的东西都对比起来，那么就没有什么能突出。有效的设计通常对标题、子标题和正文文本使用不同的处理方法。
  • 不要仅仅依靠颜色来传达视觉层次。有色盲的人可能无法察觉某些颜色组合之间的差异。

2.规模

的规模的原则是在设计中创造视觉层次的关键。更大的元素更突出，更能吸引用户的注意，所以大小可以作为重要性的标志。

泽西牛奶: 这个牛奶盒上的印刷处理通过比例变化创造了一个有影响力的视觉层次。人们的眼睛会立刻被产品最重要的部分所吸引——牛奶和它的脂肪含量。
Hipcamp.com:视觉层次是通过字体大小(和对比度)来传达的。眼睛首先会被吸引到发现自己在文本，因为它的大，粗体大小。这篇文章给你一个大致的概念，你可以在这个网站上做什么。

使用scale时的最佳做法:

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

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

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

分组通常是含蓄地通过接近以及使用留白或明确地通过附件(常见的地区）.

iPhone上的Spotify:眼睛会立刻在屏幕上看到3个不同的分组。故意增加组与组之间的间隔，使得每一组都是独立和个性化的。同样重要的是有意减少标题和相关内容之间的空白。这种间距的减少在标题和内容之间创建了一种层次关系。
Shopify签出表单字段: 接近原则显然是好的 表单设计 ． section标题和相关表单字段之间的最小空白使关系更加清晰——它们属于一起。每个字段块之间的空间也增加了，这进一步帮助人们看到这种层次空间模式。还要注意两者的边界表达检测按钮(公共区域原则的一个例子)，它将它们与下面的签出表单分开。

分组的最佳实践:

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

斜视测试

在设计学校，我们被教导斜视或应用轻微模糊的设计，以获得传达的分组和层次的想法。这种技术突出了设计中所强调的内容，并揭示了底层的层次结构。

在上面的Spotify例子中，以5或10像素为半径模糊设计表明分组按照预期工作，并且最近玩即使在你不能阅读文本的时候，部分也是最突出的。20像素的模糊显示了一个意想不到的层次结构，由于其强烈的颜色，最近播放的一个项目成为页面最突出的元素——这种效果在原始截图中也可以分辨出来。

Spotify:原始(左上)和模糊半径5(右上)，10(左下)，和20像素(右下)

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

结论

在开始设计之前，先从视觉上退一步，定义内容的层次和你想让用户了解的要点。一旦你建立了层次结构，专注于应用颜色和对比度、比例或分组的变化。在考虑到视觉层次结构后，后退一步，通过与目标用户进行测试，看看设计是否符合您的预期。

当页面的视觉层次准确地反映了不同设计元素的重要性时，用户就容易理解并能顺利完成任务，从而获得对设计和品牌的信任。

参考文献

陈志强(2017)。视觉传达设计。布卢姆斯伯里视觉艺术。

勒普顿,大肠(2008)。平面设计:新基础。纽约:普林斯顿建筑出版社。