二、提高视觉层次的方法
当然内容层级确定了显然不够,我们还需要考虑突出界面的视觉层次,这样用户才能够清晰舒适的浏览我们的界面。那么提高视觉层次的方法有哪些呢?在设计中,我们可以利用线、面、留白将模块进行分割;利用大小、投影、背景图等突出视觉层次;利用颜色对比提高视觉感受;利用文字对比提高界面的可阅读性。
1.利用线、面、留白将模块进行分割
大家记得在设计前我们已经对界面中相关联的元素进行了组合,组合之后就可以利用线、面、留白的方式,将不相关联的元素进行分割,提高界面的视觉层次,从而提高用户的浏览和操作效率。
线分割:是最为基础的分割方式,其优势是占用空间小、分割感弱,多用于列表、Feed流中。需要注意的是,分割线颜色设置需要非常浅,避免模块之间强烈的分割感,比如橘子娱乐的列表就是采用若隐若现的线,让列表中的内容更规整。
面分割:也可叫背景栏分割,其优势是占用空间小、可操作性高,同时能够更好的区分不同模块之间的关系,多用于模块和模块之间的分割,比如转转个人主页的模块采用面分割浏览性更强。
留白分割:是iOS11发布之后兴起的以留白或间距的方式进行分割,其优势是无强烈的分割感,界面清爽,多用于比较有规律或以大图为主的模块之间的分割,比如转转主页下方的卖二手还钱、买实惠好货等,其内容部分都较为规则,采用该方式较为合适。
2.利用投影、大小、背景图突出视觉层次
为了突出界面的视觉层次,我们还可以通过投影、大小、布局等增加界面的对比,从而突出重要信息。
投影:是界面对比较常用的一种方式,其优势是提升界面的空间感,改变视觉次序,通过投影大小的变化还可营造不同的空间关系,多用于卡片风格的设计中,比如Keep均是采用卡片风格的设计,添加投影后让界面视觉层次更突出了。
大小:是大众最为熟知的对比方式,其优势是通过大小对比能够很快的拉开视觉层次,同时能够很好的引导用户浏览路径,比如ofo黄色的大按钮远远都能看见,该页面就一个目的扫码用车。
背景图:往往不如投影和大小常用,但是它的使用可以将模块从其他样式中年凸现出来,多用于banner、推荐等重要模块中,比如美图秀秀的推荐模块,该模块可以说是美图的核心模块。
3.利用颜色对比提高视觉感受
颜色是最容易感知到的对比方式,通过颜色我们可以明确哪些是重要信息,在使用中我们可以通过色相、明暗、饱和度上进行对比,其多用在按钮、重要信息、导航、背景板中。
自如首页上的租房、服务、旅行采用对比色进行强调对比,进入页面用户就能够清楚这三块是是界面的核心功能,同时引导用户关注右侧的具体服务信息。
淘票票首页中的按钮、引导提示、标签栏选中均用了红色进行强调对比,很容易引起用户的注意,让用户看一眼就知道如何操作。
招商银行首页中的话题PK采用对比色进行强调对比,很容易引起用户操作的兴趣。
4.利用文字对比提高界面的可阅读性
文字的层次感往往和字体大小和明暗有关,其中字体大小是提高文字信息层级的重要手段,在文字排版中如果文字之间的层次不清晰,那么一定是大小的对比不够,在UI中字体大小对比往往在4-8px较为适合,如下图所示。
当字体大小对比适合之后就需要通过通过字体的明暗突出主要信息,弱化次要信息,从而提高界面的可阅读性,如下图所示。
在UI设计中我们往往都设定了字体规范,这样不仅能够达到设计统一,同时也有很好的对比性,常用字号为40, 36, 32,28,24, 22(px),比如优酷的星球页面,通过字体大小,颜色深浅的对比,让用户首先看到重要信息,弱化次要信息。
三、总结
在界面设计中为了降低用户的理解成本,突出重点内容,让用户使用起来舒适,就需要有个清晰的内容层次和视觉层次。
在设计前我们需要考虑将相关联的元素进行组合;确认内容优先级,将优先级高的放在前面;确认重要内容,将其差异化设计。
在设计中我们可以利用线、面、留白将模块进行分割;利用投影、大小、背景图突出视觉层次;利用颜色对比提高视觉感受;利用文字对比提高界面的可阅读性。
FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/
飞特游客
委托设计