设计中的信息层级对比

“设计”除了众所周知的美观效果外，最重要的意义其实是对所要表达的信息进行层级的划分，以达到有效的传达效果。我们在描述一个长相良好的人时往往会有“五官立体、五官精致”之类的评价。设计同样如此，信息层级划分清晰的页面，不仅看起来舒适整齐，而且使用户更易于理解内容信息。因此，好的设计肯定是信息层级划分准确、主次清晰的。

在绘画中，层级一般可分为近景、中景与远景（背景），主体往往置于中景进行细致地描绘，近景与远景（背景）则起到营造空间感和对比的作用，进而更加强调突出中景的主体元素。设计是同样的道理，主体元素一样需要前景和背景的衬托才能更加突出。

△ 绘画中前、中、后层级的划分

△ 海报设计的前、中、后信息层级的划分

△ UI设计的前、中、后信息层级的划分

设计中信息层级的划分一般会用到以下几种方法，可单独使用，也可多个方法结合使用。

1  大小对比

很好理解，通过视觉元素体量上的对比进行层级的划分，体量越大则层级越高，也就越突出。Appstore的页面中，利用字号大小和图片大小来区分信息层级，一目了然。iOS11中去除了以往的背景和装饰元素，很多页面均利用文字大小来区分层级，使整体页面看上去层级更加清晰易懂。

△ AppStore中的大小对比

2 明暗对比

明暗对比即通过颜色的明度来进行对比。一般在处理文字信息层级时较为常用，通过使用不同明度或灰度的文字来划分层级。知乎的信息流中，标题用较深的颜色作为第一层级，用于让用户快速判断核心信息，简介用略浅的颜色可以使用户清晰阅读，其余文字信息则作为辅助信息置灰处理为第三层级。

△ 知乎APP中的文字的明暗对比

3  色彩对比

重点信息除了可以用较大体量的元素和明暗对比表达外，往往受限于页面尺寸，则可以考虑使用添加背景底色来进行突出。代表性的是支付宝头部的蓝色，不仅强调了“扫一扫”等主要功能，而且大面积使用品牌色更能向用户有效传达了品牌信息。天猫APP首页为了突出限时抢购的模块，也使用了非常亮的黄色来吸引眼球，与黑色文字形成强烈反差，进而突出了有效信息。

△ 支付宝中的色彩对比

△ 天猫APP中的色彩对比

4  虚实对比

虚实对比在背景信息中较为常用，使用虚化的背景来突出前景，借鉴于摄影中的景深效果。书旗小说详情页头部的背景处理，不仅能突出重点信息，而且能够较好营造氛围感、场景感和立体感。

△ 书旗小说APP中的虚实对比

5  前后对比

前后对比类似于虚实对比，但层级划分更加明显，往往应用于两类完全不同的信息之间，一般情况下，弹窗、浮层等均属于这一对比范围。ofo、各类地图产品等为了以更大区域展示背景中的地图信息，往往会采用这一形式。在信息量巨大的地图上利用浮层形式进行前后对比，进而突出操作信息。

△ ofo中的前后对比

6  动静对比

在信息较多，色彩较丰富的页面中，大小与色彩对比往往就不能派上用场了。此时如果向再突出某个元素，则可以考虑使用动态图形。如抖音的新手引导、咸鱼的二级入口icon。不过使用动态元素需要节制，不仅在数量上要严格控制，在动画频率上也需要谨慎。过多或过快的动态元素不仅起不到突出信息的作用，反而容易令页面失去焦点，激发用户急躁和烦乱的情绪。

△ 抖音的动态新手引导

△ 咸鱼APP中的动态二级icon