视觉层次是塑造优秀数品基础，它能让内容以更加有效被组织到起，使其更容易被理解。视觉层于用户体验影响很大，信息组织架构是否晰观，将接影响到体导航和浏览交互。
虽然大对于视觉层次都有基本的认知，但是在设计的过程中，要怎么做才确保构建合的视觉层次呢？首先，同的产构建放方法肯定是一样的，过有一些相对通的方法，适于多数的情况。今天的章就为你供一些通的视觉层次构建的技巧。
1、基于你的业务目标来构建
每个数字产背后通都有着明确的商目标。为了实现这些目标，创意团队可基于目标来确定同元素的重要性和优先级。电商是就是最典的案例，同的元素占据同的层次，共同达成目标。这当中，图片是最重要的视觉元素之一，它是来吸引户的注意，从视觉上鼓励户考虑它。标题在图片之后，对产在字上予描述。在此之后，借助CTA按钮为户供醒目的购入口。明确的商目标和清晰的营销方向将会为设计团队供视觉设计的依据。
2、结合用户浏览模式来构建层次
在以前文章没少提到用户浏览模，其最常见两浏览模是F型浏览模和Z型浏览模。
户在浏览闻和博客等容量较大的页面的时候，会采F模式来快速扫视，定位自己感兴趣的容。户会先横向扫视，然后视线向移，再横向浏览。整个视线的轨迹类似于字母F，而户会在扫视过程中断到自己感兴趣的键词或者容。
Z型浏览模式则主要发生在不那复杂的页面当中，甚至于其中都不会包含多的文本内容，用户会快速地从左右从上下浏览，整个视觉轨迹类似字母Z。
了解这些用户浏览模式，就可以根据实际状况，意识将关键的元素置用户扫视多的节点，引起用户的注意。
3、功能优先
层次感这西起来是更偏向美学计，但是实际上它的功能性会显得更一些。计需要确保产品用户能够清晰地使用，并且导航足以引导用户。而功能性的层次比起视觉层次要更加重要，纯拥有了视觉层次，不足以构建高效可用的产品体验。而结构化不够晰的界面，然也就无法带来足够好的用户体验了。所以，在进行UI计的候，视觉层次的构建应该依托于功能，只有确保了功能的可用，比如导航的可用性，视觉层次才会发挥它的作用。
4、留白同样是需要掌控的视觉元素
首先留不纯只是素和素之间的空域。它同是用来构建布局的视觉素。留的重要性在于，它可以使得被留包围的素被用户注，尤其是关键性的交互控件。通过控制留的疏密，计能够让不同的素之间的亲疏关系体现出来，而大量的留还能让关键性的、需要调的定素，醒目地呈现在用户面前。换句话来说，用好了留，然也就能如地控制UI的层次。
5、利用黄金比例
前几天，我们撰写了一篇章专门探讨了在UI当中使金例的方法。金例是1:1.618，被认为是最具美感的视觉例，在自然界当中几乎无处在，而许多美的自然景观和生物奇观，大多都和金例有着或深或浅的联。
许多计喜欢在布局框架中使用黄金比例，它能使得布局有轻重，显得足够协调。当然，更体的使用，可以参考这篇文章：《用好黄金比例，用协调然的配比照亮你计的UI》
6、使用栅格
栅格是设计师控制布的键性工具之一，布在同的环节发挥着同的作，而控制视觉层次，同样有。栅格有助于将同的元素控制在同的例大小之，保持合的距离，控制留白。总体上，栅格对于层次的控制是非有效的。
7、增加色彩
在控制视觉层次的时候，色彩起到的作是可替代的。在很多时候，色彩够帮助明白哪些元素是核心。在整个配色当中，色彩通有着强弱之分。大胆的色彩诸如红色和橙色，就相对弱一些的白色和浅灰要来的显眼，设计师使醒目的颜色来亮显示键性的容。
在使用色彩构建层次的候，关键在于层的控制，有对比才有层次。
8、注意字体的使用
视觉层次结构的控制还涉及到一个键的分，就是字体和版。同的字体组合，同大小的字体搭配，同样直接影响着视觉层次的构建。标题和展示性的本使的字体和正分的字体应该着明显的对，这样的对一般是通过字体族、色彩和大小来进行区分，Banner 中的展示性案、正标题、副标题、正容这些容处层次同，重要性同，功尽相同，自然就处于同的层次。过，通而言，设计师需要将字体数量控制在3种，太多的字体会整个设计显得凌乱堪。
9、桌面端3层级，移动端2层级
在具体的容层级控制上，桌面端和移端有着一样的要求。在相对较大的桌面端屏幕上浏览页的时候，3个层级的信息够页面看起来丰富，但是信息的呈现又足够清晰有条，要和核心的信息最容易吸引户的注意，这是第一个层级；易于扫视的本容标题和副标题的形式呈现，帮助户对于容有基本的了解，而正和说明则将容更为具体地展现来，供户仔细阅读。
但是移动端的情况则截然不同，屏幕上并不足以承载3个层的息展现，通常计会将内容划为个层，这用户便于吸收，UI起来足够清爽直观，用户也不会因为层过多而混乱。
结语
效的层级构建仅仅是美层面上的事情，它同样是功性的。有效的层级结构搭建帮助户更轻松获取信息，更帮助产更容易达到商目标，这是皆大么？
浙公网安备33011002017549号