信息杂乱无章?教你构建合理的视觉层次!

好文转载 分类: 教程 版权: 原作者: 融360-NY
250 1 1 0
2018-05-17
1.3

UI设计理念

每天打开手机,各式各样的信息纷至沓来,每个 App 每个页面都有好多话要说。当信息汇集在一起的时候,如何能让用户一打开页面就能轻松理解各个信息元素之间的关系与差异呢?这就要靠我们设计师在设计之初构建合理的视觉层次了。一个页面的信息层级是不是清晰明了,很大程度上影响到用户的信息获取效率和使用体验。

在平面和网页设计中,视觉层次一般分为三层:主层(Primary)、副层(Secondary)和三层(Tertiary)。其中主层一般是指头条标题等核心信息,也是要让用户第一眼就注意到的信息。副层可以是小标题等信息,展示出主要内容与提纲。最后的三层一般由正文或其他额外信息构成,展示全部的内容,可以用较小的字号。

△ 图片来自网络

不过当我们在设计移动端页面的时候,因为屏幕尺寸的限制,有时候需要酌情减少页面的层级,这样才能让信息不会过于繁杂。

一般一个页面会根据功能分为多个模块,下面我们就从「模块内」和「模块之间」两个角度来谈谈如何构建合理的视觉层次。

一、一个模块中的层次感

我们所说的「模块」指的是什么呢?可以是一张卡片里面的内容,也可以是一个信息列表等等,总而言之是一个信息组。当我们拿到需求的时候,应该理解每个信息组里面的每条信息的价值,并且给他们分一个类。

比如有时候,PM 同学跑过来说:「我想加个大按钮」,「不想让用户注意到删除功能,但是一定要有」 ,或者「这次就想试一试,展示了这条信息点击率会不会涨」 ,又或是「这条信息展不展示都行,你设计的时候自己看吧……」 好好好,需求我都懂,那么该如何分类呢?

四象限法则相信大家都听说过,那么我们就改编一下这个法则,给每个信息组中的信息按「重要——不重要」「必要——不必要」来分个类吧。

面对又重要又必要的信息还等什么,一定要大要明显,让用户第一眼看到。

重要却不必要的信息,一般是从产品或流程本身来讲不是一定要有的信息,但是因为某种原因想要突显给用户,比如在信用卡的产品列表中加入每张卡的推荐理由,或者在餐厅列表中展示某某名人去过这家店……这些信息在列表中不是必须有的,但是对于引导用户判断又十分的重要,所以我们可以次一级的来展示,要让用户可以注意到,但也不能抢了风头。

哪种信息是必要但不重要的呢?比如一个活动弹窗的关闭按钮,一个订单的删除功能,一条免责声明等等,我们不希望用户注意到他们,但是这些功能又不得不存在,那么就要弱化展示这些信息。

不必要又不重要的信息,一般情况是要去掉的,除非在设计中信息太少了空荡荡的,为了排版美观才会把这种边缘信息留下占位。

接下来,当我们整理好信息层级之后,要靠什么手段来展示这些层级呢?答案是加大对比。

1. 大小

对比的第一步就是大小的对比,在大家的认知中,大的东西比小的东西更显眼、更重要。用户会自然而然地关注到尺寸较大的文本和尺寸较大的图,比如下图中一张足够大的信用卡卡面图片,一秒吸引目光。再比如页面中的大标题,都是这样的效果。

△ 截图来自查查公积金

在内容列表中,标题名字类的信息一般会使用14-17dp左右,补充说明内容一般使用11-12dp左右,具体的使用情况要根据信息的多少、信息的重要程度、上下对比等情况来进行具体的设计。

△ 图片来自融360、微信

2. 重量

有时候由于空间的限制,字号不能再大了?字号大了也没拉开层次?试试增加字重量吧。iOS&Android 由于字体不同,加粗的效果也不同,请酌情增减。

3. 颜色

颜色对于用户的感知有着巨大的影响。所以在进行视觉层次构建的时候,不同的颜色可以轻松构成层次结构,强烈的颜色比如红色、橙色都很容易引人注意。白色和浅灰通常可以用来作为大面积的背景色,和其他的颜色构成对比。在设计的时候可以运用 App 的主色和辅助色来拉开视觉层次。

△ 图片来自查查公积金、融360视觉规范

4. 对比

我们以上图这个贷款列表举一个综合的例子,四条信息从最突出到最弱化分别标为了1、2、3、4,这几条信息中的字号以至少6px的差值进行递减,并且只有前两条信息进行了加粗处理,同时颜色的选择上也是从强到弱:

大小、重量、颜色的运用,归根结底就是制造对比,这也是创建层次结构依靠的核心。一个元素和另外一个元素构成对比,才能有层次的展示他们之间重要程度上的差异,让用户更加容易获取到信息。

BANNERQ

UI设计交流:202145541

3粉丝/0关注

PS教程!合成超现实主义海报AI+PS教程!教你绘制斑驳质感的火箭起飞插画

BANNERQ

BANNERQ

UI设计交流:202145541

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN