本文共享九种方法来帮助您构建更高效的可视化层次结构。享受〜

视觉层次结构是塑造优秀数字产品的基础，这些产品允许以更有效的方式组织内容，使其更容易理解。视觉水平对用户体验有很大影响。信息的组织清晰直观，直接影响整体导航和浏览互动。

虽然每个人都对视觉水平有基本的了解，但在设计过程中，可以采取哪些措施来确保合理的视觉水平？首先，不同的产品构造方法肯定是不同的，但有一些相对的一般方法适用于大多数情况。今天的文章为您提供了一些视觉水平构建的一般技巧。

1.根据您的业务目标构建

每个数字产品背后都有明确的业务目标。为了实现这些目标，创意团队可以根据目标确定不同元素的重要性和优先级。电子商务网站是最典型的案例。不同的元素占据不同的层次，共同努力实现目标。其中，图片是最重要的视觉元素之一，它用于吸引用户的注意力，并在视觉上鼓励用户考虑它。标题位于图片后面，产品以文字描述。之后，通过CTA按钮向用户提供醒目的购买条目。明确的业务目标和明确的营销方向将为设计团队提供视觉设计的基础。

2，结合用户浏览模式构建层次结构

在之前的文章中，没有提到用户的浏览模式。两种最常见的浏览模式是F型浏览模式和Z型浏览模式。

当用户浏览具有大量内容（如新闻和博客）的网站时，他们将使用F模式快速扫描并找到他们感兴趣的内容。用户将首先平移景观，然后向下移动视线，然后水平浏览。整个视线的轨迹类似于字母F，并且用户将一目了然地继续找到他或她感兴趣的关键字或内容。

Z型浏览模式主要发生在不太复杂的页面中，即使不包含太多文本内容，用户也会从上到下快速从左到右浏览，整个视觉轨迹类似于字母Z. 。

通过了解这些用户浏览模式，您可以有意识地将关键元素放置在用户扫描最多的节点上，具体取决于实际情况，引起用户的注意。

3，功能优先

分层感似乎更具偏见和美学设计，但实际上它的功能性更强。设计人员需要确保产品用户能够清楚地使用它们，并且导航足以引导用户。功能级别比视觉级别更重要，并且它具有不足以构建有效且可用的产品体验的视觉级别。没有良好结构的界面自然不会提供足够好的用户体验。因此，在设计UI时，应该在功能上构建视觉级别。只有确保功能的可用性，例如导航的可用性，视觉水平才会发挥作用。

空白也是一个需要控制的视觉元素

要离开的第一件事不仅仅是元素和元素之间的空域。它也是用于构建布局的可视元素。白色空间的重要性在于它允许用户注意到由白色空间包围的元素，尤其是关键交互控件。通过控制白色空间的密度，设计者可以使不同元素之间的关系显现出来，并且大量的空白也可以使需要强调的关键元素突出地呈现给用户。换句话说，如果使用空格，则可以自然地控制UI的分层。

5.使用黄金比例

几天前，我们写了一篇专门讨论在UI中使用黄金比率的文章。黄金比例是1: 1.618，这被认为是最美丽的视觉比例。它几乎无处不在，许多美丽的自然景观和生物奇观大多与黄金比例有关。

许多设计师喜欢在布局框架中使用黄金比例，这使得布局轻巧，重量足以协调。

6，使用网格

网格是设计人员控制布局的关键工具之一。布局在不同的链接中扮演不同的角色，控制视觉水平同样有用。网格有助于将不同的元素保持在不同的比例下，保持合理的距离，并控制空白区域。通常，网格对于水平控制非常有效。

7，增加颜色

在控制视觉水平时，颜色所起的作用也是不可替代的。在许多情况下，颜色可以帮助理解哪些元素是核心。在整个配色方案中，颜色通常有优点和缺点。红色和橙色等大胆的颜色比相对较弱的白色和浅灰色更显眼，设计师经常使用引人注目的颜色来突出关键内容。

当使用色彩构造水平时，关键在于控制水平，有一定程度的对比度。

8，注意字体的使用

视觉层次结构的控制还涉及字体和排版的关键部分。不同的字体组合和不同大小的字体也直接影响视觉水平的构建。标题和显示文本中使用的字体应与正文部分的字体清楚地对比。这种对比度通常通过字体系列，颜色和大小以及横幅中的显示副本，正文标题，副标题和正文来区分。内容这些内容处于不同的层次，重要性不同，功能不同，并且自然地处于不同的层次。但是，一般来说，设计师需要控制三个类别中的字体数量，太多字体会使整个设计看起来凌乱。

9，桌面级别3，移动级别2级

在特定的内容级别控制上，桌面和移动设备有不同的要求。在相对较大的桌面屏幕上浏览网页时，三个级别的信息可以使页面看起来丰富，但信息的呈现足够清晰和有条理，主要和核心信息最有可能引起注意。用户。这是第一级;易于扫描的文本内容以标题和副标题的形式呈现，这有助于用户对内容有基本的了解，而文本和描述则更具体地显示内容供用户仔细阅读。

但是，移动端的情况却截然不同。小屏幕不足以携带三级信息显示。通常，设计师将内容分为两个级别，以便用户可以轻松地吸收它。用户界面看起来清新直观，用户则不然。我很困惑，因为有太多的水平。

结论

高效的分层结构不仅仅是一个美学方面，它还具有功能性。拥有一个有效的层次结构来帮助用户获得更多信息并帮助他们更轻松地实现业务目标，这并不是一件令人高兴的事。

原作者: Tubik Studio

译者：陈子木

翻译地址：http://www.uisdc.com/9-effective-tips-visual-hierarchy

本文由@陈子木授权，未经作者许可，禁止转载。

标题图来自英国，基于CC0协议