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

Sponsor

前言：UX是User Experience的缩写，UX设计就是我们常说的交互设计。其核心在于用户体验，即用户在使用产品以及与产品发生交互时出现的主观感受和需求满足。在产品设计的整体过程，用户体验应该应该是融入其中的，而其中最直观的就是视觉感受，那么今天的文章将着重对于视觉感受来谈谈UX设计的中的视觉层次结构。

什么是视觉层次？

视觉层次结构用于按您希望用户查看它们的顺序对设计元素和影响进行排序。通过使用对比度，比例，平衡等原则，您可以帮助在正确的位置建立每个元素，并帮助最重要的元素脱颖而出。

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

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

视觉层次结构设计原则

使用大小和比例吸引焦点

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

下图所示的Simply Chocolate是一个很好的示例，说明了如何使用大小和比例来强调视觉层次。在设计中首先吸引您的是巨大的文字，它解释了产品的全部含义。

使用颜色和对比度

颜色地差别性使用，可以区别设计中元素的重要性。通常，较明亮的颜色比无色，不饱和的颜色更能吸引观众的注意力。

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

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

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

发挥视角的作用

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

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

如下面左侧的示例：所有元素看起来都是平坦的，没有深度。由于对比度太弱，文字部分会与底图产生竞争效果，因此难以阅读文本。

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

查看模式的重要性

每个人的观看模式可能略有不同，具体取决于他们正在观看的内容类型，但是可以说，人们使用的两种最受欢迎的观看模式是Z模式和F模式。

两种查看模式均根据您要设计的内容类型而具有独特的用途。将您的内容设计为以这些模式流动将帮助观看者获得更好的体验。

Z模式

Z模式遵循从左上到右上，然后向下到左下，再到右下的路径。此模式最适合于文本或内容不繁复的情况，通过这种模式设计内容流，将有助于读者快速浏览每个元素，并了解每个元素的重要性。

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

F模式

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

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

使用正确的字体

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

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

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

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

下面的示例展示了三种不同的字体大小；我们发现：即使顶部字体最大，底部字体也会更加吸引您的注意力。这是因为下面的字体看起来更重，对比度更高。

使用留白引导用户

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

留白（spacing）是用于描述设计中元素之间的负间距的术语。它可用于将元素分组在一起或将它们分开以赋予它们更大的重要性。

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

材质（texture）和色调（Tone）的差异

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

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

平衡和对称

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

如下图所示，Avioc利用其主页上的对称性将重点放在其主要优势上，同时在图像的每一侧提供了更广泛的摘要。焦点位于中心，但仍然可以轻松浏览页面以查找更多信息。

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

屏幕对齐

当沿同一路径对齐元素时，可以帮助它们感觉彼此关联，从而使眼光扫描周围其他相似内容更加容易。想一想您在许多应用程序和网站中看到的表格。当您对齐每列中的内容时，实际上没有必要使用列边框，因为您的眼睛通过数据对齐来关联此列。

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

元素之间的距离与排布

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

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

布局规则（layout）

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

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

在下面的示例中，网站概念使用网格布置元素以保持外观整洁，但是为了更加关注Mercedez，图像忽略了此网格布局，从而创建了一种弹出效果。

运用动态效果（motion）

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

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

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

视觉层次结构可以突出重点设计元素，但是重点元素越多，设计的难度越大。想要在视觉层次上做到更好的体现，可以从简单的开始，专注于最重要的一个。

作者 | 交互设计小助手
来源 | 美国交互设计资讯(ID：gh_deb1a91db646)

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。