你可能经历过在浏览网站时对各种设计元素感到困惑，以至于不知道从哪里开始。如果你很难找到注意焦点，那么可能因为这个网站缺少一个清晰的视觉层次。

在本文中，我们将讨论网站的视觉层次结构以及它是如何帮助用户集中注意力的。本文还将讨论一些有关话题，帮助我们了解人眼是如何处理设计元素的。作为UX设计师，它将帮助你更有效地排布UI元素。

什么是视觉层次

任何数字空间布局中的内容都遵循了特定的层次结构。例如：标题通常在正文的上方，导航栏通常位于屏幕的顶部、底部、左侧或右侧。

设计人员构建页面的视觉层次结构，首先在任何给定页面上呈现最高优先级的内容。其余的页面元素从最高到最低优先级排列。

“层次结构”，简单地说，是指页面元素从最高优先级到最低优先级的排列。层次结构还用来显示每个内容块之间的关系。

设计人员使用视觉层次结构对UX设计元素进行排序，并引导用户按照他们希望用户查看的顺序来浏览。他们使用一些例如设置对比，调整比例，保持平衡等指导原则来帮助他们决定每个元素应该在的正确位置，使得突出最重要的内容信息块。

视觉层次结构在UX中的重要性

页面的视觉层次结构对用户体验有巨大的影响。这不仅会影响用户对网站或产品的第一印象，而且还会影响用户对网站理解并利用它的优势。

视觉层次在页面信息架构的规划中也起着关键作用，使得用户可以更轻松地浏览网站，数字产品或应用程序。并且由于改进导航系统，视觉层次将会减少用户在与产品、网站或应用程序互动方面的工作量。 一般来说，UX设计人员的目标是消除摩擦并增强产品的可用性。值得注意的是视觉层次的设计是实现此目标的一种方式。

让我们看一下UX的设计原则，它们如何工作以及这些原则是如何影响内容的导航。

视觉层次原则

所有UX设计都知道布局的重要性。它可以在第一印象中成就或毁灭一个产品。因此，在关键的最初时刻，良好的构图是最重要的。

为什么呢？因为用户习惯不去阅读屏幕上的所有内容或要素。Weinreich等人对页面的实证研究的进一步研究， 发现大多数用户习惯于仅浏览页面中的几个单词。而且用户停留在屏幕的时间不足以让他们阅读所有内容，因此他们只会扫视去查看他们感兴趣的区域。

尼尔森·诺曼小组（Nielsen Norman Group）进一步支持了这项研究，表明大多数用户仅阅读页面内容的20％和30％。

这些发现帮助我们理解视觉层次设计及其在阅读模式中的作用非常重要。下一个问题是，读者是如何扫视以及影响用户扫视的因素是什么？让我们通过了解不同阅读模式来了解用户的扫描行为。

1、F模式

这个模式在内容文字为主的页面上很常见。F模式是指用户的视线沿着一条竖线，在水平线上只是短暂地浏览内容，从而形成F的形状。如下面的示例热图所示。

这种阅读模式是由NNG于2006年首次提出的，此后一直是网页设计中使用最广泛的阅读模式。

用户以这种形状扫读页面的原因有多种。常见原因是用户正在快速寻找他们的问题或疑虑的答案，而不是通读全部内容。用户不愿阅读页面上的全部内容，相反他们想要最快地以找到所需内容。

研究认为F形图案是大脑对文本的默认扫读方式，无论是否存在视觉层次。更重要的是，他们认为阅读模式是一件坏事，因为用户往往只处理文章中的几个单词，而遗漏了大量的未读信息。

除此之外，它还会因响应式UX设计而产生问题，即使您为F模式创建了视觉层次结构，单词和句子也会根据屏幕大小而不同放置。

在手机上与在电脑上浏览同一网站的用户专注于不同的单词组。然而，解决此问题的方法比我们想象的要更容易。关键在于正确的内容结构，其中最重要的UI元素能够吸引用户的注意力。

你需要利用层次结构，这样用户就不会错过最重要的信息，例如在开头放置最重要的内容；对于文本来说，这意味着在前两段可以获取主要观点。对于标题和副标题来说，在开头使用描述性的词语是很重要的。

2、Z模式

与F模式相比，Z模式发生在用户更加关注视觉组件而不是文字内容的时候。通常情况下，对于单页网站或登录页面来说，用户不会去阅读大量书面内容。

设计人员知道用户会以Z形扫视页面后，需要将最重要的元素放在Z角处，以确保用户不会错过它们。

通常放在Z角的最重要的元素是标志、登录模块，有关该站点的信息以及号召性用语按钮（CTA），如以下经典示例所示：

3、分层饼状模式

当页面上有大量书面内容时，也会发生分层饼状模式。然而，它仍然不同于F模式不同。

用户的视线不再停留在垂直线上并且很少阅读段落内容，用户被提供了分为栏目和子栏目的文本。当用户阅读内容并沿着页面向下方浏览时，视线会跟随页面的标题和副标题以产生分层模式，如下图所示。

使用这种模式最关键的要求之一是结构良好的内容。分层饼状模式是为了避免使用户浏览页面的长段落。相反，您引导用户注意到你已经架构好了的不同小节。因此，标题和描述必须能够准确描述，因为这些信息会为用户指向他们要查看的小节内容。

另一个需要注意的重要事项是各小节之间的距离、接近度、字体大小和颜色。并且在各小节内容之间留出足够的空间，以便用户轻松识别这些出不同的小节内容。

4、格式塔原则

广义上讲，格式塔理论探讨了人类如何理解他们看到的事物。 它支持了这样一种理论，即人类通过对物体进行分组来查看，实际上是找到形成更大图形的模式。

这5种格式塔原理对产品的设计视觉层次有很大影响。这些原理为设计师提供了将产品的不同元素融合在一起的方法。这些原则的关键是要理解外部世界，而不是我们的眼睛如何捕捉视觉

相似性效应

视觉上相似的元素会被归为一组，因为我们的大脑将它们视为同一形式的一部分。

连续性效应

我们的大脑将各部分联系起来并形成图案模式。一旦我们注意到了这种模式，我们的大脑就会遵循该模式。

闭环效应

这个原理表明如果将一系列的不同的组件展示给用户，那么我们的大脑将自动填补这些空隙。我们的大脑会看到完整的图像，这使我们甚至在注意到组成它们的各个部分之前就可以看到由这各个不完整的部分可以填补出的整个图像。

相同效应

用户会将沿相同方向移动的元素联系起来。例如，滑动菜单证明这种效应。

聚焦和背景效应

人脑将元素视为人物（聚焦）或地面（背景）。我们的眼睛可以感知并规定首先要关注和处理的对象。

临近效应

这意味着可以依据不同组件之间的相似性，感知和判断它们是一个部分还是不同部分。

5、空白和极简主义

留白在有效的视觉层次设计中具有重要的作用。但是，在设计带有空白的网站时，因为通常会减少组件的数量，所以你需要确保页面上所有东西都是准确的。这同样适用于极简设计。

由于元素较少，因此留白和极简设计不会有被太多元素扰乱用户注意的问题。但是，这样做的缺点是视觉层次结构需要更加完善和精确，因为它几乎没有视觉元素的帮助，也无法去弱化。

在做这类用户界面设计元素时，关键是要更好地理解主动留白的功能。主动留白故意留在组件之间，以达到有效的视觉层次、结构和可读性。

对于极简主义的设计，请仔细观察你的排版，颜色以及间距和比例。

版式

当提到排版层次时，想想你在标题上做了什么，在你的数字产品上做同样的事情。排版将文本组织起来，这样用户就知道从哪里开始，什么是最重要的。作为一名设计师，你可以决定用户从哪里开始阅读，以及他们首先应该注意什么。

这里的关键点是，你可以基于你的目标，结合用户扫视的模式来进行版式设计。你可以遵循常见的扫描模式，也可以创造性地违背它们。让我们回顾一些经典的排版技巧，你可以使用它们来建立文本的视觉层次结构。

字体大小和元素占比

字体大小是传达重要性最常见的方法。这也是引导用户从这里开始阅读最简单的方法，因为我们习惯于先阅读较大的字体然后在阅读其他。

发挥尺寸的关键是比例，即不同组件的尺寸之间的关系从确定正文的大小开始向后进行。首先确保正文文本的可读性。然后，你就可以更容易地设定你希望用户注意的内容

对比

使用不同的字体会可以形成对比。许多UX设计师为同一页选择一个衬线字体和一个无衬线字体，以使得字体有明显的差异。

这里需要注意的是即使有很大的差异，字体也应该采用相同的形状。

增加对比度的另一种方法是粗细。字体的粗细可以立即增加对比度，从而建立层次结构。例如，将细体和粗体搭配，粗体可以增加文本的视觉层次。

即使添加了大量的对比，也保持页面了平衡与和谐。就是说，UX设计人员在交付视觉设计时通常会感觉很好。

移动端视觉层次

网页和移动端的视觉层次设计原则趋于相同。两者主要区别在于：可用屏幕空间之间的巨大差异。

移动设备上有限的空间会影响设计师对移动产品的规划，就像我们所预料的那样，为了达到用户的期待，移动设备设计更加困难。这意味着用户界面设计必须满足产品标准，来保持其功能性和吸引性。

随着移动设备空间的减少，每个层次结构变得更加重要，因为用户会在整个屏幕上看到所有内容。

在移动设备上进行视觉层次设计，应该更多地关注导航而不是流程。导航应该是移动端设计的重点。

这意味着在移动端的用户界面设计中，内容应该更少，以至于不会使屏幕变得混乱。 因此，指导不应该引导用户跳转到更多的内容，而是引导用户进入下一个屏幕，所以导航变得如此重要。

强大的视觉层次技巧

1、根据我们的了解，如果您的视觉层次结构很强，则可以轻松地引导用户使用页面功能，同时为他们提供正确的视觉提示。

2、创建强大的视觉层次结构时，需要良好的用户研究。同时在为用户设计时，有以下一些要点：

3、当到达一个界面时，用户会快速做出反应，并以毫秒为单位决定是停留还是离开。

4、用户经常遵循可预测的阅读路径，这会受到一些文化的影响。例如，西方用户从左到右阅读并使用F或Z模式。您可以加强或打破这些阅读模式，来引导用户实现你的目标。

5、用户更喜欢识别而不是回忆。因此，重要的是，他们可以扫视而不是阅读很多东西或记住所有东西。/牢记业务目标。列出目标，并根据这些目标进行UI设计。

6、首先保持功能。尽管视觉层次提供了美学方面的UI元素，但你需要了解，结构化和组织化元素是为了使UI设计更易于使用和导航。

7、在视觉层次的创造过程中，网格的使用是应用不同元素的关键。网格有助于构造所有的视觉元素，并将它们按适当的大小和比例排列。

8、在对不同的元素布局视觉层次时，网格的使用非常重要。网格可以帮助设计师组织页面上所有视觉元素，并将它们按适当的大小和比例排列。

9、应用黄金分割率。它是适用于不同大小UI元素的一个数学比例。这个黄金比例被认为在美学上会使人感到愉悦。

10、在建立良好的视觉层次时，颜色的选择和组合也很重要。因为颜色也有它的层次结构，并且颜色可能会界定用户类型以及影响用户的使用。比如大胆的颜色很容易被人注意到，因此UX设计人员经常将它们用作产生对比的一种方式。

最后的想法

在开始设计之前，先从视觉效果上退一步，然后首先定义内容的层次结构，以及你希望用户使用的路径。

有了这些之后，你可以更多地关注色彩和对比度的变化，然后开始缩放模块或分组。 创建了具有视觉层次的结构后，通过对目标用户进行测试，检查设计是否完全符合您的预期。一旦正确的建立了视觉层次并且准确地反映了不同的设计视觉元素，用户就可以很容易地理解它并完成他们的任务，这就产生了对设计和品牌的信任。

END

原文作者：Userpeek

原文链接：Why Visual Hierarchy In UX Is Important 

翻译: 简立方 ；公众号：CJM Studio

本文由 @CJM Studio 整理发布于UI中国，未经作者许可，禁止转载。

文章内容来源于网络，若侵请联系微信公众号CJM Studio删除。

Powered by Froala Editor