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

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

手机版威廉姆斯-Sonoma.com网站:我们在哪里开始看? 除了栗色网络星期一块,此页面上的元素尺寸和颜色均相对相等,缺乏呼吸室。因为大多数文本都在所有帽子中,它很少突出。很少有用户愿意花时间通过这种视觉杂乱进行解析。

定义:视觉层次结构二维显示器(网页、图形、印刷品等)的视觉效果是指页面上设计元素的组织,以便引导眼睛按照预期的重要性顺序使用每个设计元素。

可以使用以下方法创建视觉层次结构:

  1. 颜色和对比
  2. 比例尺
  3. 分组(邻近和常见区域)

1颜色和对比度

好的视觉设计使用颜色或对比度(或两者)在页面上创建视觉层次结构。在设计中运用色彩会使一些元素显得前移,而另一些元素则显得后移,从而决定了什么吸引了我们的注意力以及我们对各种设计元素的重视程度。

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

设计师也经常使用类型对比度表示等级,用特殊的字体处理来表示重要性。粗体字和粗体字一样,与轻体字或普通字相比显得更为突出。与周围文本风格不同的单词(例如斜体或下划线)也会引起注意。

MOMA.ORG.使用颜色来传达层次感-右上角的绿色链接与徽标下方的黑色链接形成鲜明对比
TheNounProject.com网站:眼睛首先被吸引到搜索区域不仅是因为它的大尺寸,而且它的白色与黑色背景形成对比。该字段提示用户开始搜索 然后,眼睛被引导到搜索字段下面的白色图标,这些图标提供了可能的结果的一瞥。

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

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

2比例尺

比例尺原理是在设计中创建视觉层次结构的关键。更大的元素突出更多并吸引用户的注意力,因此尺寸可以用作重要性的标记。

泽西牛奶: 在该牛奶纸盒上的印刷处理通过比例变化产生了有影响力的视觉等级。眼睛立即绘制了产品的最重要方面 - 这是它是牛奶及其脂肪含量的事实。
Hipcamp.com:可视化层次结构通过字体大小(和对比度)传达。眼睛首先被绘制到在外面找你自己文本由于其大,粗体的大小。这篇文章让你大致了解你可以在这个网站上做什么。

使用比例的最佳实践:

  • 使用不超过3尺寸- 小,中等和大。三种尺寸提供足够的品种来使用 - 思考标题,副标题和正文副本的类型大小 - 但仍然保持分层关系明确和清晰。在网页设计上,大小可以从14px到16px的正文副本,18px为子标题为22px,标题最多32px。
  • 使最重要的元素最大。强调你的设计最重要的方面,使它最大。同样,使不太重要的元素变小。将元素的数量限制为最多2个,以便它们确实突出并加强层次结构。

3.分组:邻近和常见地区

隐式和显式分组可以帮助我们看到页面的骨骼或结构,并使我们能够将注意力引导到屏幕上那些可能与我们的目标相关的区域。如果没有分组,就很难理解导航、内容、广告等标准领域在哪里,因此,就很难弄清楚应该把注意力引向哪里,哪些领域可以安全地忽略。例如,一旦用户识别出一个正确的铁路集团,他们可能会忽略它,因为它与广告的关联-一个例子广告盲点

分组通常通过接近并使用空格或显式通过外壳(公共区域).

Spotify On iPhone:眼睛立即在此屏幕上看到3个不同的分组。组之间的有意增加的间隔使每个设置分开和个性化。同样重要的是,故意减少标题之间的白色空间和相关内容。这种减少的间隔在标题和内容之间产生了分层关系。
Shopify Checkout表单字段: 接近原则在良好的环境中是显而易见的 窗体设计 部分标题和相关表单字段之间的最小空白空间使得关系清晰 - 它们属于它们。每个块之间的空间也有所增加,进一步帮助眼睛看到这种层次空间模式。还要注意两者周围的边界快速结帐按钮(公共区域原理的一个示例),它将它们与下面的签出窗体分开。

分组的最佳实践:

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

斜视测试

在设计学校,我们被教导眯着眼睛或在设计上稍加模糊,以了解传达的分组和层次。这种技术突出了设计中强调的内容,并揭示了底层的层次结构。

在上面的Spotify示例中,用5或10个像素的半径模糊设计表明分组按预期工作,并且最近即使你看不懂课文,这一节也最为突出。20像素的模糊显示了一个意外的层次结构,其中一个最近播放的项目是页面中最突出的元素,因为它的强烈颜色-这种效果在原始屏幕截图中也可以看到。

Spotify:原始(左上角)和模糊的半径(右上),10(左下角)和20像素(右下)

此示例显示设计模板是不够的 - 您还必须考虑将填充它的内容。例如,即使它旨在说明次要故事,它的新闻照片可能会主导新闻主页。编辑需要考虑其内容选择的UX含义。

结论

在开始一个设计之前,从视觉上退一步,定义内容的层次结构和你想让用户拿走的关键点。一旦你建立了层次结构,就要集中精力应用颜色和对比度、比例或分组的变化。在考虑了视觉层次结构之后,后退一步,通过与目标用户进行测试,看看设计是否符合您的预期。

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

工具书类

戴维斯,M.和Hunt,J.(2017)。视觉传达设计。布卢姆斯伯里视觉艺术。

Lupton,E.(2008年)。图形设计:新基础知识。纽约:普林斯顿建筑出版社。