视觉层次构建的9个技巧

本文分享了9个方法，帮你搭建更加高效的视觉层次。enjoy~

视觉层次是塑造优秀数字产品的基础，它能让内容以更加有效的方式被组织到一起，使其更容易被理解。视觉层次对于用户体验的影响很大，信息的组织架构是否清晰直观，将直接影响到整体的导航和浏览交互。

虽然大家对于视觉层次都有基本的认知，但是在设计的过程中，要怎么做才能确保构建出合理的视觉层次呢？首先，不同的产品构建放方法肯定是不一样的，不过有一些相对通用的方法，适用于多数的情况。今天的文章就为你提供一些通用的视觉层次构建的技巧。

1、基于你的业务目标来构建

每个数字产品背后通常都有着明确的商业目标。为了实现这些目标，创意团队可以基于目标来确定不同元素的重要性和优先级。电商网站是就是最典型的案例，不同的元素占据不同的层次，共同达成目标。这当中，图**是最重要的视觉元素之一，它是用来吸引用户的注意力，从视觉上鼓励用户考虑它。标题在图**之后，对产品在文字上予以描述。在此之后，借助CTA按钮为用户提供醒目的购买入口。明确的商业目标和清晰的营销方向将**为设计团队提供视觉设计的依据。

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

在以前的文章当中没少提到用户的浏览模式，其中最常见的两种浏览模式就是F型浏览模式和Z型浏览模式。

用户在浏览新闻和博客等内容量较大的网站页面的时候，**采用F型模式来快速扫视，定位自己感兴趣的内容。用户**先横向扫视，然后视线向下移动，再横向浏览。整个视线的轨迹类似于字母F，而用户**在扫视过程中不断找到自己感兴趣的关键词或者内容。

Z型浏览模式则主要发生在不那么复杂的页面当中，甚至于其中都不**包含太多的文本内容，用户**快速地从左到右从上到下浏览，整个视觉轨迹类似字母Z。

了解这些用户浏览模式，你就可以根据实际状况，有意识地将关键的元素放置在用户扫视最多的节点上，引起用户的注意。

3、功能优先

层次感这东西看起来是更偏向与美学设计，但是实际上它的功能性**显得更强一些。设计师需要确保产品用户能够清晰地使用，并且导航足以引导用户。而功能性的层次比起视觉层次要更加重要，单纯拥有了视觉层次，不足以构建高效可用的产品体验。而结构化不够明晰的界面，自然也就无法带来足够好的用户体验了。所以，在进行UI设计的时候，视觉层次的构建应该依托于功能，只有确保了功能的可用，比如导航的可用性，视觉层次才**发挥它的作用。

4、留白同样是需要掌控的视觉元素

首先留白不单纯只是元素和元素之间的空域。它同样是用来构建布局的视觉元素。留白的重要性在于，它可以使得被留白包围的元素被用户注意到，尤其是关键性的交互控件。通过控制留白的疏密，设计师能够让不同的元素之间的亲疏关系体现出来，而大量的留白还能让关键性的、需要强调的特定元素，醒目地呈现在用户面前。换句话来说，用好了留白，自然也就能自如地控制UI的层次感。

5、利用**金比例

前几天，我们撰写了一篇文章专门探讨了在UI当中使用**金比例的方法。**金比例是1:1.618，被认为是最具美感的视觉比例，在自然界当中几乎无处不在，而许多美丽的自然景观和生物奇观，大多都和**金比例有着或深或浅的关联。

许多设计师喜欢在布局框架中使用**金比例，它能使得布局有轻重，又显得足够协调。

6、使用栅格

栅格是设计师控制布局的关键性工具之一，布局在不同的环节发挥着不同的作用，而控制视觉层次，同样有用。栅格有助于将不同的元素控制在不同的比例大小之下，保持合理的距离，控制留白。总体上，栅格对于层次的控制是非常有效的。

7、增加色彩

在控制视觉层次的时候，色彩所起到的作用也是不可替代的。在很多时候，色彩能够帮助用明白哪些元素是核心。在整个配色当中，色彩通常有着强弱之分。大胆的色彩诸如红色和橙色，就比相对弱一些的白色和浅灰要来的显眼，设计师常常使用醒目的颜色来高亮显示关键性的内容。

在使用色彩构建层次的时候，关键在于层级的控制，有对比才有层次。

8、注意字体的使用

视觉层次结构的控制还涉及到一个关键的部分，就是字体和排版。不同的字体组合，不同大小的字体搭配，同样直接影响着视觉层次的构建。标题和展示性的文本所使用的字体和正文部分的字体应该着明显的对比，这样的对比一般是通过字体家族、色彩和大小来进行区分，Banner 中的展示性文案、正文标题、副标题、正文内容这些内容所处层次不同，重要性不同，功能也不尽相同，自然也就处于不同的层次。不过，通常而言，设计师需要将字体数量控制在3种以内，太多的字体**让整个设计显得凌乱不堪。

9、桌面端3层级，移动端2层级

在具体的内容层级控制上，桌面端和移动端有着不一样的要求。在相对较大的桌面端屏幕上浏览网页的时候，3个层级的信息能够让页面看起来丰富，但是信息的呈现又足够清晰有条理，主要和核心的信息最容易吸引用户的注意力，这是第一个层级；易于扫视的文本内容以标题和副标题的形式呈现，帮助用户对于内容有基本的了解，而正文和说明则将内容更为具体地展现出来，供用户仔细阅读。

但是移动端的情况则截然不同，小屏幕上并不足以承载3个层级的信息展现，通常设计师**将内容划分为两个层级，这样用户便于吸收，UI看起来足够清爽直观，用户也不**因为层级过多而感到混乱。

结语

高效的层级构建不仅仅是美学层面上的事情，它同样是功能性的。有效的层级结构搭建帮助用户更轻松获取信息，更能帮助产品更容易达到商业目标，这不是皆大欢喜么？

原文作者 : Tubik Studio

译者： 陈子木

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

本文由 @陈子木 授权发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自 Pixabay，基于 CC0 协议