在这个信息碎片化的时代，每次打开手机，都会有各种信息扑面而来。如何能让用户在短时间内获取到想要的信息，是我们设计者需要思考的。今天UI设计培训像素妹跟大家分享一些能够提升视觉层次的方式，让我们做的设计更加友好。

将页面内的信息按照重要级进行排版，做出合理的视觉层次，很大程度上能够影响用户的信息获取效率，从而减轻用户的压力，提升用户体验。层次在排版中是一个很大的概念，非常的重要。如果面对一个页面，信息排布的杂乱无章，那么用户有可能连往下看的兴趣都没有了。今天像素妹跟大家分享一些能够提升视觉层次的方式，让我们做的设计更加友好。

1、调整字号大小

通过文字大小来进行对比，是最简单的层次区分方式。在我们的认知中，大的东西比小的东西更突出、更重要，用户会自然而然地注意到尺寸大的东西。比如下图，若是标题与正文字号大小一致或相差不大的话，就会失去了对比，分不清主次，不能够一眼分辨页面想要表达的重点信息。 

2、使用不同的字重

有时候因为屏幕大小的限制，文字的字号不会特别大，那么对于字号大小差别不是很大的文字使用不同粗细的字重，是一个能够增强对比的区分层级方式。 

3、运用颜色对比

人对色彩非常敏感，颜色可以让文字内容更加突出，在构建视觉层次的时候，不同的颜色可以轻松的构成层次结构。

下方右图，卡片上的两个按钮颜色是不一致的，“确认下单”用了鲜亮的颜色，拉开了视觉层次，吸引人的注意。

再如这张消息页面，右图的三类文字用了不同深浅的颜色进行了对比，让信息主次更加分明。

4、使用分隔线

在设计中，最传统也很常见的分隔信息的方式就是分隔线（分割线）了。它能够帮助用户理解页面的层次结构，起到分隔、组织信息的作用。分隔线分为两种：通栏分隔线和内嵌分隔线。

通栏分隔线

通栏分隔线指的是一条分隔线横向贯穿整个页面，一般用于区分同一类别下的不同内容，内容与内容之间显得更加独立。比如美团的美食页面和微信朋友圈页面，通过使用通栏分隔线，让用户清晰的知道界限在哪里，让信息分隔的更明显、更独立。 

内嵌分隔线

内嵌分隔线并不是横向完全打通的，而是会在分隔线的左端留有缺口，用于区分同一类别下的相关内容，目的是便于用户快速浏览相关内容信息，视觉上看起来也更加简洁美观。在安卓的Material Design中也提到了内嵌分隔线的用法：当列表中有头像、图片等的时候，可采用内嵌分隔线，左端与文字左对齐。

比如陌陌的消息页面和个人中心页面，就是采用了内嵌分隔线，区分同一纬度下有关联的信息。 

5、使用色块分割

与分隔线区分同一类别下的内容不同，色块分割用于区分不同类别或不同属性的内容。通常做法是将不同类别的内容模块整体拉开，露出下层的背景色，以起到色块分割的作用。

比如微信的发现页面，若是所有的功能项都在一起视觉上不好辨别，采用了色块分割的方式，以达到层次清晰、归类明确的目的。整合的话一般是小于/等于5项一类，我们做色块分割的时候要根据信息之间的关系进行合理的表达，不可为了视觉效果而盲目的使用。

再比如，蘑菇街的首页，运用色块分割的方式，将不同类别的内容模块（功能入口、直播特卖、今日必买）拉开了间隔，显得视觉上内容之间更加独立，便于用户视觉聚焦。36Kr的个人中心页面，采用了同样的分割方式，将不同内容信息层次结构划分的非常清晰，提高用户操作效率。 

我们常见的卡片式设计也有很多运用到了色块分割，如下图案例，卡片底板颜色与浅灰背景色有了颜色的深浅对比，将卡片内容与背景分离出来，从而进行了视觉分层。 

6、采用留白

留白是我们常用的一种方式，使用留白能够让页面显得更加简洁并且富有呼吸感（留白不是画白色矩形，而是通过内容之间的空间距离，营造一种自然与舒适的感觉）。留白的设计手法有很多，用好留白可以以一种柔和的方式来区分页面中的内容。

最近几年流行的无边框设计，就是用留白来区分内容。比如网易严选，通过无框设计，抛弃了分割线、边框，非但没有让页面信息显得混乱，反而更加简洁，原因是留白可以区分页面层次。根据交互定律接近法则，在视觉上认为挨的近的元素是有关联的，用户会认为它们是一个整体。 

留白的作用还有很多，比如网易云音乐“主播电台”页面，几个内容模块是通过留白区分层次的，留白可以减轻页面带给用户的负担，更加简洁有呼吸感。再比如留白APP，通过留白的方式，让用户视觉聚焦于产品想要表达的重点信息上，提升阅读效率。 

7、通过阴影表达Z轴深度

安卓的Material Design提出了Z轴的概念，即垂直于屏幕，用户日常操作时是看不到Z轴的，但可以通过阴影很好地表达出不同元素在Z轴纵向深度上的海拔高度区别。

比如支付宝和微众银行，通过给卡片添加阴影，将卡片信息突出了出来，能引起用户的注意力，从而拉开了内容之间的层次。 

8、使用图片分隔

图片本身可以起到视觉区分的作用，就不需要再加分隔线或者别的元素来进行分隔了。比如下图的案例，图片之间的留白起到了区分的作用。 

总体来说，设计不是一成不变的，任何表现形式都是为了能更好地呈现功能和内容，合理地使用这些区分视觉层次的方法可以让我们做出更吸引人的产品，对用户来讲体验也会更加友好。如果你在做设计的时候发现页面很乱没有主次，不妨试一试上面提到的这些方法吧～