在进行设计工作的时候，层次感是个必要重要的内容。层次感是在满足视觉合理性的基础上，把要强调或者突出的主体与画面中的其他元素进行区分。通过对版面中元素的大小、远近和前后等多重关系进行梳理，并运用色彩加以区分，可以使元素和主体在画面中具有一定的主次关系，让人在观看时产生一定的视觉层次和心理变化。
极富视觉层次感的界面不仅极具设计美感，能取悦用户，还可以建立起清晰直观地视觉层级，方便用户简单快速的识别和读取需要的界面内容，从而提升用户体验，降低跳出率。下面从五个角度分析如何在界面设计过程中营造层次感。
文字的层级区分
在界面设计中，文字部分的层级区分是决定一个界面是否具有层次感的重要因素。一般情况下，文字可以进行调整的属性有字体、字号、色相、明度等。其中字号的大小是拉开文字层级的首要因素。其次是调整文字的粗细，如果界面中文字层级过多，字号的大小和字重无法很好地处理文字信息层级，则再考虑颜色和明度的调整。
无论是海报还是包装设计，都要有主题文字来吸引读者的视线，界面设计也是如此。通过首级文字拉开对比，可以让用户快速注意到这个界面中所要传递的重点信息是什么。苹果手机的系统从iOS11开始，就采用了更大的标题和字号来进行层级的区分，增大了字号的可选择范围，强烈的对比更具有层次感。
由于人的习惯是由上而下，由左及右的浏览顺序，因此界面的信息浏览起点时在左上方，而左对齐有时界面设计中最常用的对齐方式。排版设计中，左上方一般防止信息流的主标题。如此就造就了上重下轻、左重右轻的布局方式。
大方向上统一，局部对比与调和，是在做界面设计时始终要遵循的原则。也就是说，界面中相同属性的板块要保持统一。如果在一个列表信息中，有多种不同的信息字段，并不一定每一个字段都要进行样式上的区分。一些不必要区分的字段可以保持统一，从而起到调和的作用。
元素的复杂程度
在做界面设计时，界面中的每一个元素的复杂程度时与钙元素的重要程度挂钩的。APP首页都会做的相对复杂一些，层级较多，有banner，推广，猜你喜欢等板块。而一些二级页则显得比较清爽直观，大多数是统一的feed流列表。如果在二级页中加入一些多样的运营入口或其他较复杂的板块，就会显得没有层次，较为混乱。
例如，图标的设计。在界面设计中，如果在非重要的层级使用了较为复杂的图标，而重要层级中的图标反而简单，界面的层次感就会出现问题。把握好图标的复杂程度，可以让用户更直观的感受到主要功能交互与非主要功能交互，从而使界面更具层次感。例如电商类的APP，通常在首页均使用了较为复杂的图标，而在个人中心等位置的图标，有的采用了最精简的单色线性图标，有的虽然为了保持产品的调性，也使用了彩色，但其复杂程度与首页图标差距很大。
此外，合理的使用插图也比较关键。前面文章有提到过，不是所有的空页面都需要进行精心设计。让产品内的弹窗和缺省页更具有层次，用户体验也会得到提升。
合理的间距
界面设计中需要遵循亲密性原则。有些时候设计师会纠结，什么时候该用分界线，什么时候该直接空出间距。其实，一个APP如果想要营造比较好的层次感，基础且正确的做法应该是根据信息的重要性进行区分。重要程度最弱的区域采用留白，其次是分割线。如果一个界面板块过多，板块之间的分割就可以使用粗分界线来处理。但一般来说，产品的主界面会通过较大面积的留白，清晰的布局让界面看起来更轻松且具有呼吸感。而一些二级甚至三级辅助界面如果在使用这种较大面积的留白就会显得过于追求形式。由于一级界面内容较为复杂，用户需要获取的信息较多，大面积的留白是有必要的。而对于一些以及、二级或者三级纯列表界面来说，用户获取信息的方式就比较明显了，往往只会关注列表内的几个关键词。这个时候，一屏所能承载的信息量就显得尤为重要了。
信息的归类
相同表意的信息归到一起。在浏览界面时，用户往往喜欢在某个板块中看到所有有关的东西，而不相关的东西要有明确的提示，否则视觉上没有层次感，很容易影响用户获取信息的效率。当界面中的一个大板块内有很多小功能入口时，就需要进行入口的信息归类了。
浏览界面时，“查看更多”经常会出现在综合性较强的界面中，代表着“进入二级页”。“查看更多”最基本的做法是跟随在当前版块的标题后面，这种处理方式可以让用户非常清晰的了解到这个命令指的是与标题内容相关的更多内容。有些设计师喜欢放置在板块的下方，但这会像一个功能按钮，让用户点击后可以去完成某一个有意义的行为。
合理的配色
色彩色运用在界面设计中是非常需要克制的，每一种色彩的使用都需要有缘由和目的，合理的颜色使用可以营造产品气氛。在界面的设计中，相比于黑白灰，有彩色层级更高。设计师在做APP界面时，都喜欢给导航条加入主色色相，使其可以在强调产品性格的同时，从视觉层级上压住整个界面，避免界面缺少重量感。并且无论界面中有多少颜色，由于导航条所占面积较大，都可以避免界面颜色看起来比较杂，这也是层次感的一种简单体现方式。而有些APP采用的白色导航条，是因为产品内的颜色并不是很多，饱和度也不是太高，采用白色的导航条会让界面看起来清爽干净。
界面设计中，通常彩色的元素一般都是可以点击的。有些层级较低的按钮一般会用彩色的文字来表示，但并不是所有的可点击的文字都是彩色的，例如常见的列表页。
此外，设计长篇幅的文本页时，可以适当地将文字颜色调灰，而不是采用纯黑色，这可以让阅读起来更轻松。长时间阅读也不会感觉到疲惫。
途傲科技为中小企业提供网站制作、网站建设、微信H5、微信小程序，多商户平台，多级分销系统，APP开发，手机网站，HTML5多端自适应网站，营销型企业站建设，及对技术人才的培养等都积累与沉淀了丰富的心得和实战经验。
如果您有想法，可以将需求提交给我们【免费提交需求，获取解决方案】
免责声明：文章部分内容收集于互联网，不代表本站的观点和立场，如有侵权请联系删除。
