超好用的“视觉关键原则”和“UX设计原理”

作者 | 交互设计小助手 来源 | 美国交互设计资讯

推荐理由：学好视觉层次的设计，同时也学会提升UX用户体验，本文将用简单的案例，告诉你一些视觉层次结构的关键原则和UX设计原理，有的原则有助于平衡设计，有的原则可以优化视觉顺序，又棒又实用的设计方法，收藏学习起来！

什么是视觉层次？

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

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

视觉层次结构设计原则

使用大小和比例吸引焦点

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

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

使用颜色和对比度

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

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

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

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

发挥视角的作用

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

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

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

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

查看模式的重要性

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

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

Z模式

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

F模式

使用正确的字体

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

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

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

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

使用留白引导用户

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

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

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

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

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

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

平衡和对称

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

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

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

屏幕对齐

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

元素之间的距离与排布

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

布局规则（Layout）

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

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

运用动态效果（Motion）

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

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

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

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

////// 感谢阅读 //////