在平面和网页设计中，视觉层次一般分为三层：主层（Primary）、副层（Secondary）和三层（Tertiary）。其中主层一般是指头条标题等核心信息，也是要让用户眼就注意到的信息。副层可以是小标题等信息，展示出主要内容与提纲。后的三层一般由正文或其他额外信息构成，展示全部的内容，可以用较小的字号。

一、一个模块中的层次感

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

1. 大小

对比的步就是大小的对比，在大家的认知中，大的东西比小的东西更显眼、更重要。用户会自然而然地关注到尺寸较大的文本和尺寸较大的图，比如下图中一张足够大的信用卡卡面图片，一秒吸引目光。再比如页面中的大标题，都是这样的效果。

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

2. 重量

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

3. 颜色

颜色对于用户的感知有着巨大的影响。所以在进行视觉层次构建的时候，不同的颜色可以轻松构成层次结构，强烈的颜色比如红色、橙色都很容易引人注意。白色和浅灰通常可以用来作为大面积的背景色，和其他的颜色构成对比。在设计的时候可以运用App 的主色和辅助色来拉开视觉层次。

4. 对比

大小、重量、颜色的运用，归根结底就是制造对比，这也是创建层次结构依靠的核心。一个元素和另外一个元素构成对比，才能有层次的展示他们之间重要程度上的差异，让用户更加容易获取到信息。

更多详情咨询电话：400-008-8106 QQ：1093524471 微信（手机）：18237149188

广州天琥设计培训学校：http://thschool.soxsok.com/

广州天琥设计培训学校（手机端）：http://m.soxsok.com/thschool/