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

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

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

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

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

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

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

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

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

　　3、功能优先

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

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

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

　　5、利用黄金比例

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

　　许多设计师喜欢在布局框架中使用黄金比例，它能使得布局有轻重，又显得足够协调。当然，更具体的使用，可以参考这篇文章：《用好黄金比例，用协调自然的配比照亮你设计的UI》

　　6、使用栅格

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

　　7、增加色彩

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

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

　　8、注意字体的使用