如何提高网站制作中的层次感

做了很久的设计，有时候真的还是会遇到这样的情况，做完后发现还是少了些什么？想改都不知道从哪里入手，反正就是页面太平淡无奇了，没什么起伏感层次感。
什么是页面的层次感？层次感是在符合视觉合理性的基础上，把要强调或要突出的重点部分与画面中其它的元素区分开来，让页面有重点，有次要。可以通过一些小元素的大小，远近，前后，色彩对比等多种
方法让人区分开来主次关系。让用户在浏览时有明显得变化和思考的自由空间和时间 。有自由的时间才能更好的选择与思考。
再讲直白一点就是以用户的角度去看一个页面，给用户轻松愉快的感，既能提升阅读效率，又能让页面主次分明。
那么如何提高网站制作中的层次感？
 
一、用文字来区分
文字应该算是区分主次层级的重要因素，通过调节字体的字号、大小、字重、色彩等来拉开文字的层级。比如标题使用大号字体，再加粗。如果加粗让页面感厚重了就可以通过改变色彩来调节。
在很多海报中大家看到过通过首级文字拉开对比，让用户一眼就看到这个是重点。区分层级的案例给大家看看。下图是大家熟悉的饿了么APP，店铺名称最重要放在一级，大字，纯黑，加粗，相对于第二第三层，文字颜色和大小都有减弱。这样形成对比，大家不自觉的都会先看店铺名。
 
二、上重下轻，左重右轻
这个是考虑人的视觉习惯是从下至下，从左至右的，所以先看的都是重点。主流的布局都是上方 是信息标题，下面是补充说明 。这是迎合用户浏览习惯的一种习惯。
 
三、文字层次中的统一、对比与调和
文字也要讲究大方向上的统一，局部对比与调和。什么叫大方向的统一？就是页面中相同属性板块，要保持板块上的统一。比如列表这种通过的样式，只要出现类似FEED列表就需要套用产品内能过的规范组件，而调和是指如果在一个列表信息中
有N种不同的信息字段，并不一定每一种字段都要进行样式上的区分，一些不必要做区分的字段可以保持统一，这就是调和的作用。看以下这个APP案例，标题是一级，简介是二级，用户名、点赞、评论则是三级，他们的功能和用途在是差不多的，没必要再分级，可以同级。级分太多会容易造成混乱。
 
四、图标的复杂程度体现页面层次感
 
比如在不太重要的层级使用复杂的图标或者图片，而在重要的页面则使用简单的图片和图标，则让页面的层次感乱了。如图这个APP,左边是重要的页面首页，功能性的图标，有引导性的重要图标则使用了线条粗颜色亮的图标。而进入个人中心全部是功能的页面，就使用的单色细线条的图标，让页面主次分明，层次感加强。
记住主要的重要的页面使用图标要复杂一点，丰富一点。次要的页面则要简单。

五、插图要使用在重要的场景
现在越来越多的APP使用了插图，插图能页面情感化，但是插图也不能乱用，我们常见的插图出现在启动页、空白提示页、断网页、等一些需要补充说明的地方。什么时候不能用插画，比如层级很深的页面为空，或者较长的详情页某一板发起人为空时，就没必要用插画了，会显得
层级高，有点乱了。只能用在层级本来就高的页面中。
 
六、间距大小体现页面层次感
 
一般大家见得比较多的是首页等几个主要功能页面大量留白的比较多，因为清晰的布局让页面看起来更轻松，呼吸感更强，但是二级三级页面，如果
再大量的留白就显得太单调了，因为主页是内容太多，为了让用户浏览轻松一点才大量留白，二级页面一般内容不会太多，适当留白就好了。

小二CMS介绍

我们立足合肥，业务覆盖安徽、全国及全球市场。我们凭借一支经验丰富、富有创意、协作无间的专业技术团队，专注于将前沿技术通过高效简捷的途径呈现给客户，量身打造优质解决方案。我们致力于通过持续努力，成为客户在信息化领域值得托付、共创价值的长期战略合作伙伴，协助客户在新经济时代敏锐捕捉商机，拓展发展空间，构筑强大竞争力。小二CMS专注企业数字化转型的智能建站与营销系统，提供从官网搭建、品牌推广到运营增长的一站式服务，助力中小企业低门槛拥有专业级互联网阵地。

网站建设 移动相关开发 营销推广与优化 域名主机邮箱 产品与技术 企业服务

了解全部业务

扫码咨询 · 关注微信