马克思大大的伟大哲学中提出过主要矛盾和次要矛盾 ，主要矛盾是居支配地位，起主导和决定作用的，次要矛盾是处于从属的地位，起次要作用。
二者相互联系，相互依存，互为存在的前提，在我们的设计中同样也有着视觉层级的主次之分，主与次二者存在着辨证关系 。
在我们的移动端设计的学习过程中，会遇见很多优秀的作品也会遇到相对一般的作品，从视觉层级上来说，好的作品会去引导用户去先看什么，再看什么，最后看什么，而相对一般的作品表现出来的是整个页面没有视觉的重点 ，所有的内容都是在一个层级上，用户看到页面毫无焦点，很迷茫，不知道应该把自己的目光放在哪一个位置。
所以，我们设计师在设计的过程中要把握好对视觉层级的主次划分，让用户的目光随着我们的视觉层级逐一移动 。视觉层级有着优化信息结构、引导视觉焦点、强化界面逻辑的作用。下面简单的介绍在移动端中介绍部分重要的区域如何实现视觉层级的划分。
一、首先我们看到下图，一些大部分功能齐全的APP，在首页即展示出多功能的入口，我们在众多功能中划分出主要功能和次要的功能，对图标进行差异化 的设计和布局。这种差异化设计可以体现在对图标的大小，复杂程度，颜色使用，排列位置等对比方式，拉开与次要功能的视觉距离。
二、目前卡片样式的界面应用的也是非常的广泛，我们在设计一些卡片样式的时候，也是要注意到卡片的 视觉层级 。
我们只有在有对比的情况下才可以形成差异，形成主次，如下图，主要卡片与次要卡片之间有大小对比，有颜色对比，有空间上的悬浮对比，所以才产生出 主次层级 。
如果次要卡片的大小和主要卡片一致，那么主次的层级就会减弱，如果次要卡片也悬浮起来，主次层级消失，那么整个页面也就没有了 视觉重点 。
三、UI设计过程中，我们文字信息是一个非常重要的部分，合理的文字层级，将极大的提升界面的 质感 。在文字信息中，可以使用字号，颜色，标签，等作为区分。
看下图中我们可以根据卡片内的内容进行强弱排序
最新 > 大标题 > 文章来源 > 评论人数
最新： 使用了红底白字的标签，文案易于理解且视觉较为突出
大标题： 占位较大，文字颜色最深，视觉层级次之，用户会根据标题选择是否查阅
文章来源： 文字颜色较浅，字号较小，适当弱化
评论人数： 小字号，视觉层级较弱
以上简单的介绍了三个部分视觉层级。
为了让我们的界面视觉层级 更加合理 ，首先要知道功能上什么是主什么是次，再去通过我们的各种对比的方式拉开主次的层级，给用户一个合理、清晰、有视觉焦点的移动端界面。
版权声明 | 文章配图仅供学习参考，引用图片版权归属原作所有
如有问题，请及时与我们联系，我们将第一时间做出处理
