现在视觉层次对于用户体验的影响很大，信息的组织架构是否清晰直观，将直接影响到整体的导航和浏览交互。

虽然大家对于视觉层次都有基本的认知，但是在整个设计的过程中，怎么样做才能构建出合理的视觉层次呢？

一．基于你的业务目标来建构

图片是较重要的视觉元素，它是用来吸引用户的注意力，从视觉上鼓励用户考虑它。

二．结合用户浏览模式

较常见的两种浏览模式，Z型和F型。

F型用户会选择自己喜欢的内容横着浏览，然后向下浏览，再横浏览。而且用户会在扫视的过程中，会不断的扫视自己感兴趣的内容和关键词。整个视觉轨迹类似字母F。

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

三．功能

层次感这种东西感觉很偏向与美学有关的东西，但其实功能性更强一些。必须导航可以清楚的指引用户，功能性的层次要高于视觉层次，这样产品体验更高。

界面一定要结构化，可以增加用户体验。

所以，视觉层次的构建应该依托于功能，比如导航的可用性，视觉层次才会发挥它的作用。

四．留白也很重要

留白的重要性在于，它可以使得被留白包围的元素被用户注意到，尤其是关键性的交互控件。让不同的元素之间的亲疏关系体现出来，而大量的留白还能让关键性的、需要强调的特定元素，醒目地呈现在用户面前

五．使用栅格

栅格有助于将不同的元素控制在不同的比例大小之下，保持合理的距离，控制留白。

六．增加色彩

色彩搭配可以帮助明白哪些主要的，形成主次之分，哪些是核心。设计师常常使用醒目的颜色来高亮显示关键性的内容。

七．注意字体使用

字体和排版，直接影响视觉层次的建构。标题和展示型文本使用的字体和正文部分字体应该形成明显的对比。重要性不同，功能不同，自然就是不同的层次。

八．桌面端3层，移动端2层

桌面端和移动端有着不同的要求。

3个层级的信息能够让页面看起来丰富，但是信息的呈现又足够清晰有条理，主要和核心的信息较容易吸引用户的注意力，这是较好个层级；

易于扫视的文本内容以标题和副标题的形式呈现，帮助用户对于内容有基本的了解，而正文和说明则将内容更为具体地展现出来，供用户仔细阅读。

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