视觉层次:有效的UI内容组织。

亨利·亚当斯曾经说过:“混乱是自然规律，秩序是人类的梦想”。人们总是喜欢这种秩序，因为它让事情变得更容易理解。同样适用于数字产品的用户界面。当UI元素有组织和结构时，人们可以很容易地使用应用程序或网站，对产品感到满意。

为了让用户能够清楚地组织UI，设计师们应用了一种叫视觉层次结构的著名技术。今天的文章介绍了这种方法的本质，以及帮助正确组织内容的工具。

视觉层次结构是什么?

视觉层次结构是应用于设计过程的核心技术之一。它最初是基于格式塔心理学理论，它研究了用户对元素之间相互关系的视觉感知，并展示了人们如何倾向于将视觉元素统一为组。

视觉层次结构力求以这种方式呈现产品的内容，这样用户就可以理解每个元素的重要性程度。它组织UI组件，这样大脑就可以根据物体的物理差异，例如大小、颜色、对比度、风格等来区分物体。

UI元素的视觉呈现对产品的用户体验有很大的影响。如果内容组件看起来一团糟，人们就不能在产品中导航，也不能正确地与它交互。此外，非结构化拷贝内容的易读性很低，因此用户无法快速浏览，他们需要作出重大的努力来区分他们一直在寻找的数据。如此糟糕的用户体验可能会导致用户满意度不高，这意味着产品将不会受到追捧。

排版的层次结构

拷贝内容是任何UI设计的重要组成部分。这就是为什么视觉层次往往高度依赖于排版。专家们决定通过创建一个叫做排版层次结构的视觉层次结构来强调复制演示的重要性。

该系统旨在以最好的方式组织拷贝内容以供用户感知。设计师修改和组合字体，以构建最具意义和最突出的拷贝元素之间的对比，这些元素应该被注意到，首先是普通的文本信息。字体通过调整大小、颜色和家庭以及它们的对齐方式来修改。

排版层次结构包括不同的复制内容元素，它们分别是标题、子标题、正文副本、调用操作元素、标题和其他内容。为了建立有效的视觉层次结构，所有的元素都需要被分割成不同的层次。让我们看看它们是什么。

主要的水平。它包括在标题中最大的类型。初级阶段的目标是为用户提供核心信息，并吸引人们对产品的关注。

二级水平。这是应该易于扫描的复制元素的类型。它们通常包含子标题和标题，帮助用户快速浏览内容。

第三级。正文文本和一些额外的数据构建了第三级。设计人员通常使用相对较小的类型，但仍应保持足够的可读性。

由于复制内容通常是UI中的主要信息来源，因此设计者需要逐渐地展示数据。通过将复制元素分割成不同级别的设计，可以帮助用户轻松地从一个副本转移到另一个副本，并以正确的顺序感知信息。

还有一件事需要说明的是，在为移动产品创建排版时，建议设计师将图层的数量保持在2个以内。问题是，小的移动屏幕没有足够的空间容纳三个层次。这就是为什么次要级别的元素，比如subheaders，让移动UI看起来干净。

视觉层次结构工具

当设计人员已经选择了所有内容组件时，是时候创建一个订单了。让我们来看看是什么帮助设计师设置了有效的UI组件的视觉层次结构。

大小

视觉材料转换最强大的工具之一是大小。它根植于人类的头脑中，大的事物比小的事物更重要。这就是为什么用户的注意力会自动地放在大字或大图片上。

设计者需要区分每个内容元素的重要性级别，并基于此数据将组件转换为大的和小的。

颜色

在我们之前的文章中，我们提到过，颜色对用户的感知有很大的影响，这就是为什么它是视觉层级创建的有效工具。

颜色有自己的层次，它是由影响用户心理的力量决定的。有红色、橙色和黑色等大胆的颜色，很容易引起注意。另一方面，有白色和奶油色的弱或软的颜色，效果更好。

使用不同颜色的设计器可以支持UI元素的细微层次结构。例如，使用大胆颜色的CTA按钮肯定是用户看到的第一件事，如果其他UI元素创建在更柔和的调色板中。

对比

层次结构是基于对比本身的。一个元素与另一个元素形成了对比，这就是用户如何看到内容元素之间的差异。对比可以通过视觉上的差异来产生，包括大小、颜色和风格。尽管如此，还是建议保持平衡，这样一个物体就不会完全掩盖其他物体。

负空间

在用户界面中可以有许多组件，并使它们对用户的眼睛都很明显，设计者需要给他们一些私人空间。负空间，即白色空间，是设计构成元素之间的区域。一些设计师通常不认为白色空间是设计的一个组成部分，但专家们将它作为一个有用的工具来帮助构建一个合适的组合。元素之间的适当数量的负空间将帮助用户注意并感知每一个元素。

接近

如上所述，视觉层次结构是建立在格式塔原则之上的，因此设计师非常关注UI元素的接近性。当人们倾向于将可视化元素统一为组时，UI组件需要这样放置，这样用户就可以对它们进行分类。如果某些元素被放置在一定的距离内，用户会自动将其视为一个组。设计人员可以将接近性作为一种工具，帮助将内容划分为子类别。

重复

如果人们注意到有些元素看起来很相似，他们可能会自动将它们合并成一个组。这是重复是如何工作的。设计者为不同的对象重复一些模式，这样用户就可以将它们统一起来。例如，一个网站有大量的身体拷贝在一个页面可以突出最重要的句子和另一个颜色。看到这个颜色的句子，用户可以从一个关键点到另一个关键点。

视觉层次结构是有效信息架构的基础。当UI元素是结构化和有组织的时候，人们喜欢使用一个产品，它会更有效地解决他们的问题。此外，强大的视觉层次结构改善了导航系统，因为人们可以更好地定位产品。请继续关注并为下一篇关于视觉层次结构的文章做好准备。