信息杂乱无章？教你构建合理的视觉层次！

每天打开手机，各式各样的信息纷至沓来，每个 App 每个页面都有好多话要说。当信息汇集在一起的时候，如何户一打开页面就轻松解各个信息元素之间的系与差异呢？这就要靠我们设计师在设计之初构建合的视觉层次了。一个页面的信息层级不清晰明了，很程度影响到用户的信息获取效率使用体验。

平面网页设中，视觉层次一般分三层：主层（Primary）、副层（Secondary）三层（Tertiary）。其中主层一般指条标题核信息，也让用户第一眼就注意到的信息。副层可以小标题信息，展示出主内与提纲。后的三层一般由文或其他额外信息构，展示全部的内，可以用较小的字。

△ 图片自网络

过当我们在设计移端页面的时候，因为屏幕尺寸的限制，有时候需要酌情减页面的层级，这样才信息会过于繁杂。

一般一个页面根据功能分为个模块，下面我们就从「模块内」和「模块之间」两个角度来谈谈何构建合理的视次。

一、一个模块中的层次感

我们所说的「模块」指的是什么呢？以是一卡里面的内容，也以是一个信息列表等等，总而言之是一个信息组。当我们拿到需求的时，应该理每个信息组里面的每条信息的价值，并且给他们分一个类。

比如有候，PM 同学跑过来说：「想加个大按钮」，「不想让用户注删除功能，但是一定要有」 ，或者「这次就想一，展示了这条息点击率会不会涨」 ，或是「这条息展不展示都行，你计的候吧……」 好好好，需求都懂，那该如何类呢？

四象限法则相信大家都听说过，那么我们改编下这个法则，个信息组信息按「要——不要」「必要——不必要」来分个类吧。

又要又必要信息等什么，定要大要明显，让用户第眼看到。

重却不必的信息，一般从产品或流程本身讲不一的信息，但因某种原因突显给用户，比如信用卡的产品列表中加入每张卡的推荐理由，或者餐厅列表中展示某某人去过这家店……这些信息列表中不必须的，但对于引导用户判断又十分的重，所以我们可以次一级的展示，让用户可以注意到，但也不能抢了风。

哪种信息是必要但重要的呢？如一个弹的闭按钮，一个订单的删除功，一条免责声明等等，我们希望户注意到他们，但是这些功又得存在，那么就要弱展示这些信息。

不必要又不重要的信息，一般情况是要去掉的，除非在设计中信息太少空荡荡的，为排版美观才把种边缘信息留下占位。

下来，当整理好息层之后，要靠什段来展示这些层呢？答案是加大对比。

1. 大小

对比的一步就是大小的对比，在大家的认中，大的东西比小的东西更显眼、更重要。用户自而地关注到尺寸大的文和尺寸大的图，比下图中一够大的信用卡卡面图，一秒吸引目光。比页面中的大标题，是样的效果。

△ 截图来自查查积金

在内容列表中，标题名字类的息一会使用14-17dp左右，补充说内容一使用11-12dp左右，体的使用情况要根据息的多少、息的重要程度、上下对比等情况来进行体的计。

△ 图片来融360、

2. 重量

有候由于空间的限制，字号不能再大了？字号大了也没拉开层次？增加字重量吧。iOS&Android 由于字体不同，加粗的效果也不同，请酌情增减。

3. 颜

颜对用户的感有着巨大的影响。所以在进行视次构建的时，不同的颜以轻松构成次结构，强烈的颜比红、橙很容易引人注意。白和浅灰通常以用来为大面积的背，和其他的颜构成对比。在设计的时以运用 App 的主和辅助来拉开视次。

△ 图来自查查积金、融360视规范

4. 对比

我们上图这个贷款列表举一个综合的例子，条信息从最突到最弱分别标为了1、2、3、4，这几条信息中的字号至6px的差值进行递减，并且只有前两条信息进行了粗处，同时颜色的择上是从强到弱：

大小、重量、颜色的，归根结就是制对，这是创建层次结构依靠的核心。一个元素和另外一个元素构成对，才有层次的展示他们之间重要程上的差异，户更容易获取到信息。

二、模块之间的层次感

当我们已经合的布了一个模的视觉层次，接来要做的就是把多个模组合起来。

心理学家基格式塔原理来检测户对于元素之间系的视觉感知，发现人们倾向于将视觉系靠的元素群视作为有系的一组。值得说明的是，位置接的元素，即使色彩形状大小都一致，但只要他们足够靠，都会被人们视为一组。

△ 图片来自络

视次的建立很大程度上是基式塔原理，所以我们要关注 UI 元素之间的靠近。

基于这种认知，即使每个模块之中的内容有对比有弱，但是只要每个息组之间的素的距离较近，并其息组之间的距离拉远，留下足够的留空间，就可以清晰的将整个页面的层次拉开。留和素本身之间构成的疏密对比，会更好的让用户注留包围下的内容。

△ 图片来网络

现在很多 App 都是过比与留白来进页「形分割」，减少了很多线和块运用，让页更为简洁。基本上原则为：文与图片齐，与相关内容距要小于其他内容，标题要大。

△ 图片来自 Airbnb

当字体足够的时候，会比小字符「图形感」，加突出，可以明确的告诉用户从这里始下一段了，字一般20-24dp之间，根据内整体风格决，颜色一般选择比较深的颜色 ，必的时候可以加粗。当其他内都比较小的文字的时候，栏目标题也控制一下小。如果图片较多，标题就可以再一些。

具体多大，就要在页面和谐的基础上多试几次……

△ 图片来自查查公积金

上图，在查查积金 App 中，当我们设计信用卡详情页的时，由整个页面里图形比突出，看来用加粗的「办卡礼」、「享特权」标题更合适一。是在同个 App 的积金详情页里面，整个页面用比清淡，内容是一文字信息，果内容标题加粗的显得比突兀。所以综合整个 App 的页面风权衡之，还是选择左没有加粗字的设计。

总体来讲，UI 计是没有公式的，只能有经验之谈和大体上的建议，多候都要计一次次的去尝、去对比、去受，才能给出针对当下页面需求最理的层次构建解决方案。

欢迎关注微信公众号：「融360RUX」

图片素材作者：Tubik