在我们进行界面设计的过程中，很多设计师可能都会遇到这种情况，需求方或者产品经理看完设计稿后总是说：“我总感觉缺点什么”或者说：“太平了”、“有点单调” 其实这些都是缺乏层次的表现。
除了我们工作经验或者凭感觉来做，对于层次关系来说是可以发现规律的，建立视觉层次结构，我们可以先把最基础的做好，然后通过这些基础的要素来构成整个视觉层次结构。
但是，究竟如何才能结合产品特色和用户的真实需求，将页面视觉内容层级化，从而提供更加优质的用户体验呢？下面分不同维度为大家细致的剖析用户界面设计过程中如何营造层次感
上图两封简历，大家看一下哪一份更能够引起HR的关注，大部分人都会觉得是第一份，为什么？
作为一个每天会看几百份简历的HR , 对于他们来说只会关心有价值的重点信息，如果一封简历在几秒钟内没有看到HR想要的信息，那样有很大的可能会被PASS掉，大家可以看下第一份的视觉层次明显要好于第二份，两份简历的主要信息其实是相似的，不同的只是视觉层级的构建。
关于界面设计来说，要面对的问题其实也一样，我们也需要通过视觉层次让界面有好的节奏和韵律，使界面有好的用户使用体验。
有哪些可以让视觉层级有序的要素？
我们可以通过对视觉基本元素的组合来对视觉的层级进行构建，大小、字重、颜色、留白，这是基础的元素，任何设计都会包含这些要素，我们可以先掌握他们的排布技巧，然再灵活的运用到每个地方
1. 大小
通过界面元素的大小属性，一些想要突出的元放大显示，因为大的元素会首先吸引人们的阅读视线。
利用大小属性构建视觉层级的APP
facebook 把要推荐用户操作的快拍等元素，做成卡片按钮，放在用户视角的第一个位置，这是对用户比较重要的功能，能随时分享用的动态，也是该app推荐的核心功能， Medium 则是把卡片做大放在首页金刚区位置，目的则是要重点推荐用户阅读的推荐内容，然后首页的主次关系也就明朗起来了。
杂志封面
网页招贴
通过对英文字母的放大和加粗，来凸显层次关系，可以使界面上的观感有不小的提升。
2. 字重
见词如意，我们可以用文字的粗细来构建视觉的层次结构，这样界面主题的信息结构会更加清晰。
文字排版
上面的两个版面，第二张的层次明显要优于第一张。在进行层级区分时只用颜色的深浅是不够的，这就要用到字重来区分层级的主次关系。
网页
书籍封面
APP界面
上图几个案例中有网页、图书封面、界面等等，这些案例在设计的过程中都运用到了加粗加大字体来强烈的视觉层次对比。
3. 颜色
说到颜色，就有很多因素需要我们考虑，不同的颜色的色彩认识都是不同的，比如：在界面设计中，蓝色文字的含义一般都是可点击，红色的含义大部分都是是错误或警示，在排版中来说黑色和红色都是重量颜色，能够吸引视觉重心，轻量色彩就的吸引力相对来说会比较弱。
通过色彩元素来构建视觉层级的APP
上面的例子，有没有发现视觉重心被有色彩的地方先吸引过去了，并且层次也有了，这样对用户来说就有了一个阅读的先后次序，这个页面视觉层次就是正确的。
书籍杂志封面
封面海报
产品包装
上面几个例子都使用了色彩、字重、大小用来区分视觉的层次。
4. 留白
留白是对界面布局的构建，用留白去产生视觉层次关系，给予内容充足的呼吸空间，我们可以使用网格系统来构建规则有序的留白布局，这样整体的视觉会比较干净清爽。
网格系统
gird system
通过留白来构建视觉层级的APP
留白构建了视觉层级，创造了精彩的观感，给用户带来了不同风格的产品。
结语
看到这里如何去构建好的视觉层次，大家应该都明白了。对于设计师来说，还是要通过欣赏好的作品，多做元素组合使用的练习，去提升自己在构建视觉层级上的认知。
网友评论