UI设计中的视觉层次营造可以显著提升用户体验，那么构建合理的视觉层次方法有哪些呢？今天和大家分享一些个人在工作中常用的技巧。
视觉层次具体是什么呢，下面通过几组图片对比来进一步感受。
左图菜摊子里各种颜色的菜堆叠在一起，混乱的摆放让人花费更多时间挑选自己想要的菜，想必大家也遇到这样的困扰。右图超市货架上，用框一格格清晰分开不同水果，颜色区分明显。我们能快速找到红色的火龙果，绿色的牛油果。这就是摆放有层次的体现。
上面两封简历，大家第一眼看， 哪张最引起的你注意?
很明显肯定是右图。图二把信息模块化处理，突出标题，层次分明，方便HR快速找到需要的信息。比如我们找教育的信息，左图必须逐行从上往下看到第9行才能看到教育相关的信息，而右图马上就能看到教育这个版块相关信息。
我们回到正题，来看下两张UI界面，哪张使用体验更好。
毋庸置疑是右图。相较于左图平淡无奇，毫无重点的界面设计计，具有良好视觉层次的右图界面更受用户青睐。
这就是今天我们要讲的UI设计中的视觉层次。
01
界面缺乏视觉层次的影响
乍一看上去信息还整齐规整，但却是毫无重点，不知道从而看起。
首先选中Tab并没有明显强化凸显，容易让用户疑惑自己所处位置，增加理解成本；然后下面的列表中，作者和时间这行辅助信息用了跟标题一样的字号和明度，视线从第一个标题到第二个标题之间会被干扰，妨碍用户快速获取信息。并且这样的信息展示无强弱视觉对比没有亮点，会导致缺乏美感。
02
视觉层次的作用
大字标题让页面对比强烈，视觉更具引导性。
进入页面视觉落脚点，很快落在选中的推荐tab上，然后在依次从上往下看。
同时突出选中的推荐栏目，弱化其他未选中的栏目，这样信息主次结构更加合理。
03
营造视觉层次的具体方法
设计前，可以根据信息关联性，合理划分归类，优化原型
仔细分析原型我们会发现：
①评分和星级本是用户评价信息却分开展示；
②顶部的两条提示信息原本属于详情Tab下“温馨提示”模块，却分离开；
③最佳设计奖不属于游戏基本信息，也不是每个游戏都有却放在游戏名称描述下方。
用户视觉从上往下，从评分数值跳到提示信息然后又跳到星级，完整的用户评价信息被提示信息割裂，视觉层次就有问题了。
同样提示信息也是，顶部两条提示信息和下面的温馨提示被中间的信息阻隔，用户不能在同一区域看到所有相关信息，视觉层次混乱，获取信息的效率降低。
该怎么优化呢？
可以根据信息关联性，把评分和星界归类在一起，顶部两条提示信息划入温馨提示里，与游戏基本信息不相关的最佳设计奖独立一个区域展示。
可以看到优化后的原型用户视觉信息流不再被打断，视觉层次合理，更快地获得相关信息。
设计中，将从整体页面逐步细化到模块，图标、字体和辅助元素来讲
不单是页面里的元素有视觉层次，不同入口层级的页面之间也有视觉层次关系。入口层级高的页面信息量相对较多需要更多刻画；入口层级低的 页面信息量少，简单化处理，页面跳转时体验上就有层次感。
页面
举个明显的例子，一般APP的首页都会做得相对信息复杂一些，样式较多，比如像闲鱼，头部有图标入口区域，两个运营板块等等内容很多，用到卡片化，背景色等样式，而二级页则设计比较清爽直观的列表页。
从首页到二级页时，信息组合由复杂跳转到简单，这样视觉体验上就有层次感。
饿了么也是， 超市的拟物头部样式，banner，拟物图标等等，内容很丰富。
二级页面就是简单的商品罗列没有过多样式。这样视觉上跳转有层次，试想内部列表页样式设计比首页还复杂，那会让用户感受到困扰。
在这里我相信有很多想要学习UI设计的小伙伴，我自己是一名从事了多年UI设计工作的设计师，辞职目前在做自己的私人定制课程，今年年初我花了一个月时间整理了一份最适合2019年学习的学习干货，从最基础到实战都有整理，送给每一位想学习的小伙伴，想要获取的可以关注然后私信我“学习”两个字，即可免费获取资料，伸手党勿扰~
网友评论