如何构建页面的视觉层次结构

ZZiUP

北京/设计爱好者/5年前/1128浏览

版权

如何构建页面的视觉层次结构

ZZiUP

视觉层次结构是一种帮助用户理解所见内容的方法。但是，如何使视觉层次结构变得更好呢？在这篇文章中查看完整的过程！

视觉层次结构对用户的体验产生巨大影响。它不仅会影响产品的第一印象，还会影响用户如何理解它。大多数设计师都非常熟悉如何组织页面视觉上的美观性，但是却忽视了页面的视觉层次结构，冒着让用户困惑、不知所措的风险。

视觉层次结构有哪些不同方面？在考虑产品内部的视觉组件时，设计师必须使用哪些工具来调整组件以建立重要性顺序？我们如何创建一个流程，将用户引导到创建过程中的所有最重要的点？

什么是视觉层次？

视觉层次结构用于按希望用户查看它们的顺序，对设计元素进行排序。通过使用对比、配色、平衡等原则，在正确的位置建立每个元素，并帮助最重要的元素脱颖而出。视觉层次结构是按重要性顺序排列和表示设计元素的步骤。它影响人眼感知正在显示的信息的顺序。

它可以帮助用户了解一个元素相对于另一个元素的重要性，或者用户应该从哪里开始阅读。它有助于理解产品，并且对于良好的用户体验至关重要-用户需要了解每个元素是什么，并且包括其在设计中的重要性。

为什么视觉层次结构在UX设计中很重要？

视觉层次结构在信息体系结构规划中发挥关键作用，以帮助用户更轻松地浏览产品。这样可以大大减少用户与产品互动所需的精力。UX设计的全部目的在于消除摩擦并增强产品的可用性，而关注视觉层次结构是实现此目的的关键方法。

通过对设计具有良好的视觉层次结构，可以期望用户能够更轻松地消化信息。用户无需拥有包含许多相同组件的屏幕，而是可以拥有焦点以及可以注意到和处理事物的顺序。就像人们可能会猜到的那样，视觉层次结构设计就是要使用几种视觉线索为元素赋予一定的层次结构。设计人员可以使用这些视觉效果来创建到屏幕的流，因此用户的眼睛可以跟随该流向屏幕的最重要部分。

这意味着视觉层次结构将与设计的信息体系结构齐头并进。虽然可能不会在线框图制作阶段就颜色和阴影进行考量，但可以确定视觉提示和内容是否位于正确的位置 。在人类平均注意力跨度为8秒的世界中，正确的视觉层次对于任何设计的成功至关重要。

视觉层次结构设计的基础：阅读模式

所有设计师都熟悉良好构图的重要性，因为大多数用户实际上并不阅读屏幕上的所有内容或组件。

实际上，实证研究中发现，大多数用户习惯于扫描页面中的几个单词。他们在屏幕上停留的时间根本不足以让他们阅读实际的内容，而只是扫描文本以查找感兴趣的关键区域。

尼尔森·诺曼（Nielsen Norman）小组甚至进一步指出，大多数用户只会在他们的文章《用户很少阅读》中阅读页面内容的20％至30％。这很重要，因为它有助于我们了解视觉层次结构设计的重要性以及阅读模式在这里扮演的角色。事实是，大多数用户在初次接触时都会扫描页面-但是他们如何扫描页面呢？哪些因素影响此扫描？

您是否知道每个人都有通常用于扫描内容的潜意识观看模式？对于每个人来说，此模式可能有所不同，并且可能会略有不同，具体取决于他们正在查看的内容类型，但是可以说，人们使用的两种最受欢迎的观看模式是Z模式和F模式。

不同的查看模式都可以根据您要设计的内容类型来达到独特的目的。将内容设计为以这些模式流动将帮助观看者获得更好的体验。让我们更详细地看一下这些阅读模式。

F模式

用于查看的F模式在诸如文章和博客文章之类的文本大量页面上更显着地使用。在这种模式下，查看者通常从左上角到右上角扫描站点，然后从左到右向下到下一行，依此类推。这与大多数西方世界的阅读方向相似。

对于博客和文本内容繁重的内容（例如Verge（如下图所示）），简单的F模式布局可帮助读者扫描图像和标题。

F模式在具有大量书面内容的屏幕中更常见，它表示用户将沿垂直线前进，而仅在水平短线中冒险进入内容–在热图中形成F的形状。它最早是在2006年由尼尔森·诺曼集团（Nielsen Norman Group）制定的，此后一直是Web设计的主要内容。

用户扫描特定形状的页面有多种原因。通常，原因是用户正在寻找问题的快速答案，而不是针对该主题的深入论文。因此，他们不愿意阅读有关该主题的整个屏幕--用户试图将找到所需内容所需的交互成本降至最低。

关于F模式的奇怪之处在于，尼尔森·诺曼集团（Nielsen Norman Group）认为它是大脑对文本的默认扫描模式-是否存在视觉层次。

使用此模式意味着用户只处理整个单词中的几个单词，而大块的单词会被忽略。更糟糕的是：它可能会因响应式设计而产生问题。即使最重要的内容遵循F模式，单词也将根据屏幕大小而不同摆放。

那么，我们如何减轻这种趋势呢？事实证明，这并不像想象的那么难–这是关于使用视觉层次结构，以防止用户遗漏重要信息。这包括在开始时保留内容的最重要部分。对于书面文本，这意味着在前两段中提出要点。对于分隔各节的标题和小标题，这意味着在开头使用最具描述性的词。

“如果用户仅在标题中看到前两个单词，则他们仍应了解以下内容的要点。”

Kara Pernice-尼尔森·诺曼集团

一般的可读性指南也倾向于对此提供帮助。欢迎设计人员将少量内容组合在一起，以使阅读更容易，并且在关键单词上使用粗体。改善设计的F模式可读性的好主意包括：分解较大的段落，在项目符号中显示内容以及清除所有不必要的内容。

Z模式

Z模式遵循从左上到右上，然后向下到左下，再到右下的路径。

此模式最适用于文本或内容不繁重的内容。通过这种模式设计内容流，将有助于读者快速浏览每个元素，并了解每个元素的重要性。

在Apple网站上，正如您将在Mac页面下方看到的那样，该页面旨在在顶部显示多个Mac选项，进行水平扫描，然后沿对角线方向放置标语。然后以产品的号召性按钮结束。所有信息的布局都非常清晰，大多数人已经被潜意识地吸引使用。

与之前的模式不同，Z形发生在页面上文本内容更少，视觉元素更多的页面上。通常是主页或带有图像的页面。当没有太多内容可供用户消化时，这是一种更自然的模式，这使其非常适合大多数网页。

知道大多数用户都会以Z形扫描时，设计人员可以将最重要的视觉效果放置在Z形的角落，并确保用户可以看到它们。例如，趋向于放在Z末端的最经典元素是CTA。Nick Babich很好地总结了以下内容：

分层蛋糕模式

当页面具有大量书面内容时，就会发生分层蛋糕模式，但它与F模式根本不同。

代替用户停留在垂直线上并且仅勉强阅读段落，将为用户提供分成许多部分和小部分的文本。这意味着用户将主要阅读标题和子标题，并在进入页面时进入书面内容。

这种阅读模式的要求是内容必须具有良好的结构。这是关于避免长篇幅迫使用户进行扫描，而是针对定义明确的许多不同部分。这些部分的标题必须具有描述性和准确性，因为它们将成为寻找正确信息的用户的参考点。

重要的是要牢记部分之间的距离和接近度，以及更经典的问题，例如字体大小和颜色。您希望在不同部分之间留出足够的空间，以便用户可以立即注意到两个部分以及带有子部分的部分之间的差异。

让我们看一下其中的一些原理，以及它们如何工作以帮助影响内容的导航。

格式塔原理改善视觉层次

对格式塔原理的理解可以帮助UX设计人员创建影响用户行为并提供直观和视觉愉悦用户体验的网站。

当涉及一组视觉元素时，有六项认知原理在起作用。这些认知原理可以极大地影响用户体验设计中视觉信息的排列方式，并且可以用来理解用户如何以及为什么会误解视觉信息。

六项认知原则是：

封闭性。人们不完整时将对象视为整体的原理，我们的大脑将自行填补空白。我们的大脑偏爱完整的图片，这使我们在看到组成它们的各个部分之前先看到整个视图。

连续性。我们的大脑将在组件之间形成连接，并识别出一种模式。一旦我们注意到该模式，我们的眼睛自然就会遵循该模式。

相似度。视觉上相似的不同元素（颜色、形状、尺寸）应该组合在一起，因为我们的大脑会认为它们是同一形式的一部分。

共同的命运。沿相同方向移动的组元素可在用户的眼中增加连接-例如，滑动菜单可产生这种效果。

图形和背景。将元素视为图形（即焦点的元素）或背景（即图形所处的背景）的方式。这个原则从本质上告诉我们首先要注意什么。它以我们的观点为基础，并规定了眼睛首先要关注和处理的内容。

邻近度。意味着不同组件之间的接近程度将确定它们是否被视为在一起或整体的一部分。更靠近的元素将被视为属于在一起。

想要了解更多的关于【格式塔原理】👉指路这篇文章：https://www.zcool.com.cn/article/ZMTE4OTczNg==.html

使用大小和比例吸引注意力

尺寸调整是一项非常基本但至关重要的原则，可以使元素比其他元素更为重要，并有助于将观众的视线吸引到特定区域。通过增加元素的比例，可以立即吸引观看者的注意力。但是，要小心一点，不要放大太多元素或增加大小，而这可能会降低屏幕上其他元素的重要性。

在上面的示例图中，人的眼睛已被控制，并且随着对象调整大小而变化。

下图是一个很好的示例，说明了如何使用大小和比例来强调视觉层次。在设计中首先要吸引您的是吸引人的文字，它解释了产品的全部含义。这样做的方式不会影响屏幕上的其他元素。

使用颜色和对比度使对象脱颖而出

颜色可以与大小和尺寸类似地使用，以提高设计中元素的重要性。通常，更鲜艳的颜色将吸引观众的注意力。

同样，具有较高对比度的颜色将显得更重，更接近观看者，从而使它们更具重要性。在下面的示例中，您可以看到，较亮的颜色在较暗的背景下看起来更近，而在较亮的背景上则较远。

无论将元素按设计顺序放置在哪里，使用一种明亮的颜色作为焦点都可以帮助吸引注意力。

在下面的示例中，以及大多数网站导航中，都会看到按钮上的高对比色作为最关键的号召性用语。通过帮助用户了解产品希望他们去哪里，可以为他们提供更愉快的体验并增加所需流量的转化。

发挥透视的作用

大多数界面（例如网站和应用程序）都设计为二维的，并且通常看起来很平坦。通过透视，您可以在元素中创建距离和分隔的错觉，以帮助将重点放在设计中重要的区域上。

您可以通过几种方法增加透视的幻觉，即增加与周围物体有关的元素的大小。这会使这些元素看起来更接近您。向您的元素添加视差运动效果，使其移动速度比周围的元素慢或快，添加阴影，或在背景或前景层上添加模糊效果也会产生戏剧性的效果。

看一下下面左侧的示例。所有元素看起来都是平坦的，没有深度。由于对比度会与背景竞争，因此难以阅读文本，并且没有阴影效果可帮助文本脱离图像。

另一方面，在上面的右图中，将模糊添加到背景图像，并将阴影添加到文本。这有助于给这些元素一定的距离，并使事情更容易可视化。

利用字体

正确的字体搭配可以使网站拥有自己的个性，并引起人们对某些领域的关注。具有不同大小和权重的字体也可以用于增加层次结构，并使更重要的文本元素脱颖而出。

大多数网站旨在利用不同大小的标题来强调或标出与它们相关的内容。好的作法是将标题1（H1）用作页面的最大和最重要的标题，并使用标题2（H2），3（H3）等来标注不太重要的区域。这也有助于读者浏览文本页面，以准确定位在他们感兴趣的区域。

Slack的网站就是一个很好的例子，该网站使用标题为内容赋予重要性。在标题部分，它们具有最大的标题，其中包含其他信息以及一些使该区域感到最重要的号召性用语。横幅下方有许多带有较小标题的部分，以介绍更多功能。

除了字体大小之外，您还可以使用不同的字体粗细来使相同大小的字体显得更重或更轻。您还可以在权重较小的较大字体与权重较大的较小字体之间取得平衡，以使它们具有相似的重要性。

在下面的示例中，我们有三种不同的字体大小；但是，请注意，即使顶部字体最大，底部字体也会如何吸引您的注意力。这是因为下面的字体看起来更重，对比度更高。

可以将排版层次结构与标题做同样的事情，以便用户可以了解从何处开始以及最重要的内容。此功能的一个重要方面是，作为设计师，必须确定人们从哪里开始阅读以及他们首先注意到的内容。

使用留白引导用户

当第一次开始以空白画布进行设计时，你可能会想到利用空间来填充尽可能多的元素。但是请记住，留白的空间与使用的空间同样重要。

留白可用于将元素分组在一起或将它们分开以赋予它们更大的重要性。

在下面的quip网站上，您会注意到左侧文本周围的间距以及周围的所有其他元素。空格的使用将文本和号召性用语组合在一起，同时仍为整个设计提供了很好的空间平衡。

简洁设计的原因在于，与经典样式相比，它们倾向于减少页面元素的数量。因为越多的元素或组件，视觉层次结构的视觉效果越难处理。但是，同一枚硬币的另一面是，简约产品的视觉层次结构必须完美无缺，因为它简洁，所以漏洞也无处可藏。如果要以简约的设计创建良好的视觉层次结构，则需要仔细观察版式，颜色的使用以及间距和比例。

质地和色调可以吸引注意力

即使某些元素可能小于或低于屏幕上的其他元素，也可以使用纹理和色调来引导用户的注意力。

在下面的第一个示例中，用户将首先注意到标题文本；但是在示例2中，当我们更改下面的文本的色调时，两行文本显得更加平衡。在最后一个示例中，背景中的涂鸦与标题冲突，难以阅读或识别。这使得下面的文本更加突出。

视觉层次结构中的平衡和对称

在页面上对称出现的元素可以帮助平衡设计，使事情保持简单，有条理并且易于遵循。

如下图所示，Avioc利用其主页上的对称性将重点放在其主要优势上，同时在图像的两面提供更广泛的摘要。焦点直接位于中心，但是仍然可以轻松浏览页面以查找更多信息，而不会感到迷路。

还可以在设计中缺乏平衡和对称性来传达某些元素的重要性，并帮助设计显得更加流畅和随机。在下面的示例中，即使在元素上随机放置且没有对称性的情况下，产品还是在页面上随机设计的，从而仍然在空间上保持平衡。引起您注意的第一件事是分散产品的排列。

屏幕对齐

当沿着相同的路径对齐元素时，可以帮助它们感觉彼此关联，从而使扫描周围其他相似内容更加容易。

想一想我们在许多应用程序和网站中看到的表格。当对齐每列中的内容时，实际上不需要列边框，因为人的眼睛会通过数据对齐来关联此列。

这在许多带有导航栏的网站上也可以看到。由于图标和所有页面链接是水平对齐的，因此您可以立即将其与导航栏相关联，并熟悉每个页面链接和号召性用语之间的关系。

元素的接近度

将元素放在一起可以使读者感觉到它们是相关的，这将激励他们继续阅读或参与其中。

在下面的示例中，在元素彼此靠近之前，人的眼睛很难轻松地阅读内容。当阅读标题时，由于摘要文本不在正下方，因此可能不太愿意跟进。当我们重新排列这些元素时，阅读内容要容易得多，增加了观看者参与度更高的机会。

布局规则

通过使用参考线和网格来布局设计，可以使所有元素保持干净和对齐，从而帮助用户遵循不会破坏体验的简单模式。他们的眼睛知道要跟踪的位置，并且由于沿这些指南的对齐和分组，每组元素都可以紧密关联。

诸如黄金分割率之类的公式试图做到这一点；但我们也可以将重要元素从这些既定规则中分离出来，以增加其视觉层次。这也可以帮助你的设计更具动感和乐趣。

在下面的示例中，网站概念使用网格布置元素以保持外观整洁，但是为了更加关注汽车本身，汽车图片突破了此网格布局，从而创建了一种弹出效果，更加吸引人。

有效运用微交互

还记得互联网刚开始的时候，每个弹出窗口或标注都必须眨眼或跳动才能引起人们的注意？这种做法确实引起了我们的注意，但是在此过程中，也牺牲了令人愉悦的体验，并给观众带来了烦人的感觉，这对参与度没有帮助。

如今，我们可以更细微的方式使用这些相同的运动原理来引起注意或重视某些领域。同样，我们可以简单地以巧克力为例，说明它们如何结合微妙的动作来吸引人的注意力并提供提示，促使用户参与设计。

当你在口味选择中滚动时，颜色会更改以匹配产品。当鼠标悬停在包装纸上时，它会打开一条条条，露出内部的巧克力，给你的印象是你可以将其打开以了解更多信息。

将这些视觉层次结构原理整合到UX设计中的最佳方法

我们讨论了许多不同的UX设计原理和视觉层次结构示例。它们现在可能都有意义，但是到了将它们付诸实践并找出在一个设计中平衡所有这些原理的方法时，可能会更加令人困惑。

这里有一些建议可以帮助你。视觉层次结构用于帮助将重点放在设计的某些元素上，但是“最重要”的元素越多，完善设计的难度就越大。从简单开始，专注于最重要的一件事，它将帮助你的设计走向成功。

客户或者领导层将一切视为“最重要”，就是对设计师的最大的折磨之一。你是否曾经让客户或团队成员解释每个要素的重要性？他们的评论可能是这样的：

“标题再大点儿，一定要让用户注意到。”

“能不能把这个功能设计的再上档次一些，一点都不高端大气呢。”

“可以旋转这几个字，加粗加大，以便引起读者的注意吗？”

“要不试试在背景中使用橙色，再弹出怎么样？”

所有元素都重要，就等同于所有元素都不重要。页面中每一种元素都突出的设计会让人分心，导致页面外观非常混乱，反而没有建立起页面的层级结构。

在这种情况下，一定要分析，梳理出信息结构体系，不要盲目听从领导层或者他人的建议，改来改去。不要盲目听从“背后人”的指挥。你可以退一步，问自己这个设计的目标是什么。谁是你的目标，你如何计划信息体系结构以推动这一最重要的功能？页面元素的排序是怎样的？用户的视觉流向是怎样的？通过回答这些问题，结合构建页面视觉层级的原理，就可以改善页面的结构，达到更好的用户体验。