提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
“设计”除了众所周知的美观效果外,最重要的意义其实是对所要表达的信息进行层级的划分,以达到有效的传达效果。
我们在描述一个长相良好的人时往往会有“五官立体、五官精致”之类的评价。设计同样如此,信息层级划分清晰的页面,不仅看起来舒适整齐,而且使用户更易于理解内容信息。因此,好的设计肯定是信息层级划分准确、主次清晰的。
在绘画中,层级一般可分为近景、中景与远景(背景),主体往往置于中景进行细致地描绘,近景与远景(背景)则起到营造空间感和对比的作用,进而更加强调突出中景的主体元素。设计是同样的道理,主体元素一样需要前景和背景的衬托才能更加突出。
△ 绘画中前、中、后层级的划分
△ 海报设计的前、中、后信息层级的划分
△ UI设计的前、中、后信息层级的划分
设计中信息层级的划分一般会用到以下几种方法,可单独使用,也可多个方法结合使用。
1 大小对比
很好理解,通过视觉元素体量上的对比进行层级的划分,体量越大则层级越高,也就越突出。Appstore的页面中,利用字号大小和图片大小来区分信息层级,一目了然。iOS11中去除了以往的背景和装饰元素,很多页面均利用文字大小来区分层级,使整体页面看上去层级更加清晰易懂。
△ AppStore中的大小对比
2 明暗对比
明暗对比即通过颜色的明度来进行对比。一般在处理文字信息层级时较为常用,通过使用不同明度或灰度的文字来划分层级。知乎的信息流中,标题用较深的颜色作为第一层级,用于让用户快速判断核心信息,简介用略浅的颜色可以使用户清晰阅读,其余文字信息则作为辅助信息置灰处理为第三层级。
△ 知乎APP中的文字的明暗对比
3 色彩对比
重点信息除了可以用较大体量的元素和明暗对比表达外,往往受限于页面尺寸,则可以考虑使用添加背景底色来进行突出。代表性的是支付宝头部的蓝色,不仅强调了“扫一扫”等主要功能,而且大面积使用品牌色更能向用户有效传达了品牌信息。天猫APP首页为了突出限时抢购的模块,也使用了非常亮的黄色来吸引眼球,与黑色文字形成强烈反差,进而突出了有效信息。
△ 支付宝中的色彩对比
△ 天猫APP中的色彩对比
4 虚实对比
虚实对比在背景信息中较为常用,使用虚化的背景来突出前景,借鉴于摄影中的景深效果。书旗小说详情页头部的背景处理,不仅能突出重点信息,而且能够较好营造氛围感、场景感和立体感。
△ 书旗小说APP中的虚实对比
5 前后对比
前后对比类似于虚实对比,但层级划分更加明显,往往应用于两类完全不同的信息之间,一般情况下,弹窗、浮层等均属于这一对比范围。ofo、各类地图产品等为了以更大区域展示背景中的地图信息,往往会采用这一形式。在信息量巨大的地图上利用浮层形式进行前后对比,进而突出操作信息。
△ ofo中的前后对比
6 动静对比
在信息较多,色彩较丰富的页面中,大小与色彩对比往往就不能派上用场了。此时如果向再突出某个元素,则可以考虑使用动态图形。如抖音的新手引导、咸鱼的二级入口icon。不过使用动态元素需要节制,不仅在数量上要严格控制,在动画频率上也需要谨慎。过多或过快的动态元素不仅起不到突出信息的作用,反而容易令页面失去焦点,激发用户急躁和烦乱的情绪。
△ 抖音的动态新手引导
△ 咸鱼APP中的动态二级icon
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册