你有没有遇到过这样的网页，忙于各种各样的设计元素，你甚至不知道从哪里开始找?如果你很难在屏幕上找到焦点，很可能是布局缺少清晰的视觉层次。
页面的视觉层次结构控制从系统到最终用户的信息传送 - 它允许用户知道在哪里集中注意力。
定义:的视觉层次结构2D显示（网页，图形，打印等）是指页面上的设计元素的组织，以便引导眼睛以预期重要性的顺序消耗每个设计元素。
可以使用以下内容创建可视层次结构：
- 颜色和对比
- 规模
- 分组(邻近和共同区域)
1.颜色和对比
良好的视觉设计使用颜色或对比度（或两者）在页面上创建可视化层次结构。将颜色应用于设计使某些元素似乎推进和其他元素来退回，因此决定了抓住我们的注意力和我们分配给各种设计元素的重要性。
创建层次结构的不是元素的实际颜色，而是元素和它所出现的环境(包括背景和其他附近的元素)之间的值和饱和度的对比。
设计师经常使用类型对比度用特殊的字体处理来表示重要性。厚重的字体，如粗体，在轻量字体或常规字体的衬托下显得更加突出。与周围文字风格不同的文字(如斜体或下划线)也会引起注意。
使用颜色和对比度时的最佳实践：
- 考虑颜色饱和度。鲜艳的色彩自然脱颖而出，所以用它们为重要的物品;较少饱和的颜色可用于更重要的项目。保留温暖的鲜艳颜色，如红色，用于警告或错误。
- 不要使用太多的颜色。虽然一些复杂的颜色方案是美丽的看，但他们可以感到压倒性地在网页上。当使用类似价值或饱和度的颜色太多时，人们通常会减少元素之间的层次结构的看法。有用的简单设计，将颜色限制为2个主要和2个二次颜色。
- 不要使用太多的对比变化。对于复杂的设计，使用不超过3种对比变化。如果把所有的东西都对比起来，那么就没有什么能突出。有效的设计通常对标题、子标题和正文文本使用不同的处理方法。
- 不要仅仅依靠颜色来传达视觉层次。色盲的人可能无法在某些颜色组合之间感知差异。
2.规模
的规模的原则是在设计中创造视觉层次的关键。更大的元素更突出，更能吸引用户的注意，所以大小可以作为重要性的标志。
使用scale时的最佳做法:
- 使用不超过3个尺寸-小，中，大。三种大小提供了足够的多样性——考虑标题、子标题和正文副本的类型大小——但仍然保持层次关系的良好定义和清晰。在网页设计中，主体文本的大小可以是14px到16px，子标题的大小可以是18px到22px，标题的大小可以是32px。
- 把最重要的元素做大。强调设计中最重要的方面，使其最大。同样，将不太重要的元素缩小。将大元素的数量限制在2个以内，这样它们就能够突出并强化层级结构。
3.分组:邻近区域和公共区域
隐式和显式分组可以帮助我们看到页面的骨架或结构，并允许我们将注意力转移到屏幕上可能与我们的目标相关的区域。如果没有分组，就很难理解诸如导航、内容、广告等标准领域在哪里，因此，也就更难弄清楚应该将注意力转移到哪里，以及哪些领域可以安全地忽略。例如，一旦用户识别了一个右栏组，他们可能会忽略它，因为它与广告有关联横幅失明．
分组通常通过隐含地传达接近以及使用空白空间或明确通过外壳（常见的地区）。
分组的最佳实践:
- 让它呼吸。一个周围有更多空间的元素将被视为一个群体，因此将得到更多的关注。(如果群体包含很多元素，注意力很可能会被分散。)考虑通过给它更多的空间来强调设计中最重要的方面。
- 考虑使用容器。如果仅仅改变空格不足以作为创建层次结构的视觉提示，可以添加额外的元素，如边框或背景。这些额外的元素可能会造成视觉混乱，所以要谨慎使用。
斜视测试
在设计学校，我们被教导斜视或应用轻微模糊的设计，以获得传达的分组和层次的想法。这种技术突出了设计中所强调的内容，并揭示了底层的层次结构。
在上面的Spotify例子中，以5或10像素为半径模糊设计表明分组按照预期工作，并且最近玩即使在您无法阅读文本时，部分即使是最多的部分也是最多的。20像素模糊显示了一个意外的层次结构，其中最近播放的项目之一是页面的最突出的元素，因为它的强烈颜色 - 在原始屏幕截图中也可以辨别出来的效果。
这个例子表明，仅仅设计模板是不够的，还必须考虑填充模板的内容。例如，一张色彩非常强烈的新闻图片可能会占据新闻主页的主导地位，即使它的目的是展示次要的故事。编辑需要考虑他们的内容选择的用户体验影响。
结论
在开始设计之前，请从视觉效果退回并定义内容的层次结构和您希望用户带走的关键点。一旦建立了层次结构，专注于应用颜色和对比度，缩放或分组的变化。在设计视觉层次结构之后，退后一步，看看设计是否通过使用目标用户测试而读取。
当页面的视觉层次结构准确反映了不同设计元素的重要性时，用户可以轻松理解它并可以成功完成任务，从而获得设计和品牌的信任。
参考文献
陈志强(2017)。可视通信设计。布卢姆斯伯里视觉艺术。
Lupton，E。（2008）。平面设计:新基础。纽约：普林斯顿建筑出版社。
分享此文章：