掌握视觉层级原则优化用户体验
⇨⇦
在本文中，我们将全面解析UX中视觉层级的关键原则，探讨如何使用视觉层级来改进产品并优化用户体验。
自设计之初，我们已经使用它来传达重要的信息。设计中的每个元素都应有助于改善用户体验，并更清楚地传达该信息。
01 视觉层级的重要性
视觉层级也是传达信息。如何组织、排序内容，让接受者能够尽可能轻易地理解信息。设计师可以利用视觉元素去区别信息的重要性，引导观看者阅读的顺序或焦点。
视觉层级结构用于按设计者希望用户查看它们的顺序对设计元素进行排序。通过使用对比，比例，平衡等原则，帮助在正确的位置排布每个设计元素，并让最重要的元素脱颖而出。
为什么视觉层级结构在UX设计中如此重要？
视觉层级结构可以在信息架构中发挥关键作用，可以帮助用户更轻松地浏览产品，大大减少与产品互动所需的时间和精力。UX设计的目的是消除使用时的摩擦并提高产品的易用性，而关注视觉层级结构是实现这一目标的关键方法。
让我们来分析其中的一些原则，看看它们如何影响内容的排布。
02 视觉层级的类别
1. 透视原则
大多数界面（例如网站和应用程序）的设计都是二维平面的。通过运用透视，我们可以在元素中产生距离和分隔的错觉，以帮助将焦点集中到设计中重要的区域。
可以通过几种方法增加透视的错觉，即增加与周围物体有关的元素的大小。这会使这些元素看起来更接近用户。向元素添加视差运动效果，使其移动速度比周围的元素慢或快，添加阴影或在背景或前景层上添加模糊效果也可以产生戏剧性的效果。
可以通过几种方法让用户产生透视的错觉，首先可以增加元素相对于周围元素的大小；这将使这些元素看起来更接近用户。将视差运动效果添加到元素中使它比周围元素移动得快或慢，或在背景层或前景层上添加模糊也可以产生显著的效果。
从上面左侧的图中，能看出来所有元素看起来都是平坦的，没有深度。由于文字和背景粘连在一起，造成文字的可读性变差。
而在右面的图中，将模糊添加到背景图像中，并为文字添加适当的阴影。这有助于为设计元素间增加一些距离，使信息更容易可视可读。
在看火人的游戏首页中，多个图像层被设置成以不同的速度滚动，来提供视差效果，从而使观看者更好地理解游戏的深度内容。
2. 恰当的浏览模式
其实每个人在观看内容的时候，都会有一个潜意识的观看模式。这种模式可能会因为用户正在查看的内容类型的不同而有所差异，但是可以说最受用户欢迎的两种浏览模式是Z型模式和F型模式。
两种浏览模式都可以根据要设计的内容类型来达到独特的目的。这些浏览模式将页面的信息流动起来，帮助观者获得更好的体验。让我们更详细地看一下这两种模式。
Z型视觉动线
Z型视觉动线的设计最适合于文字信息不繁重的页面中。将内容设计成以这种模式的排布将帮助读者快速浏览每个元素，并清晰地知道每个元素的重要性。
在Apple的网站中，页面顶部有多个Mac的选项，所以我们首先会进行水平浏览，然后沿对角线方向看到标语，最后以目标产品的详细介绍作为结束。所有信息的布局都非常清晰明了，同时大多数人已经下意识地被这种浏览模式吸引了。
F型视觉动线
F型视觉动线更多地使用在诸如文章和博客之类的文字比较密集的页面上。
对于文章和资讯内容繁杂的网站，简单的F型布局可以有效地帮助读者扫描图像和标题。
以这种浏览模式进行设计布局时，尽管读者可能会扫描前几行的信息，但随着他们快速向下移动视线时，他们通常只会浏览最吸引其注意力的地方。
3. 布局规则
通过使用参考线和网格来布局设计，可以使所有元素保持整洁和对齐，从而不会破坏观者的浏览体验。他们的注意力知道要跟踪的位置，并且这些信息都是整齐的对齐和分组，所以每组元素都可以紧密关联。
诸如黄金分割率之类的公式试图做到这一点；但是可以将重要元素从这些既定规则中分离出来，以增加其视觉层次。这也可以帮让设计更具动感和乐趣。
在这个的示例中，网站为了保持整体界面的工整，使用网格的方式来排布信息，但是为了更加关注Mercedez的形象，图片忽略了网格布局，从而创建了一种弹出效果。
4. 合理使用字体
正确的字体可以让网站拥有自己的个性，并引起用户对某些领域的关注。具有不同大小和粗细的字体也可以用于增加层级结构，并使更重要的文本信息脱颖而出。
大多数网站旨在利用不同大小的标题来强调与它们相关的内容。优良作法是将主标题用作页面的最大和最重要的标题，并使用副标题、小标题等来标注不太重要的内容。这也有助于读者浏览文本页面，以准确定位在他们感兴趣的区域。
Slack的网站就是一个很好的例子，该网站使用恰当的标题为内容赋予重要性。在标题部分，它们具有最大的主标题，其中包含介绍信息和号召性用语。横幅下方有许多带有较小标题的版块，以介绍更多功能。
5. 平衡与对称
在页面上对称出现的元素可以帮助平衡设计，使信息保持简单，有条理并且易于遵循。
如下图所示，Avioc利用其主页上的对称性将重点放在其主要优势上，同时在图像的两边提供更丰富的文字摘要。焦点直接位于中心，可以轻松浏览页面以查找更多信息，而不会感到迷茫。