赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.3K 0 0

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

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

平面网页设中,视觉层次一般分三层:主层(Primary)、副层(Secondary)三层(Tertiary)。其中主层一般指条标题核信息,也让用户第一眼就注意到的信息。副层可以小标题信息,展示出主内与提纲。后的三层一般由文或其他额外信息构,展示全部的内,可以用较小的字。

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

△ 图片自网络

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

一般一个页面根据功能分为个模块,下面我们就从「模块内」和「模块之间」两个角度来谈谈何构建合理的视次。

一、一个模块中的层次感

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

比如有候,PM 同学跑过来说:「想加个大按钮」,「不想让用户注删除功能,但是一定要有」 ,或者「这次就想一,展示了这条息点击率会不会涨」 ,或是「这条息展不展示都行,你计的候吧……」 好好好,需求都懂,那该如何类呢?

四象限法则相信大家都听说过,那么我们改编下这个法则,个信息组信息按「要——不要」「必要——不必要」来分个类吧。

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

又要又必要信息等什么,定要大要明显,让用户第眼看到。

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

哪种信息是必要但重要的呢?如一个弹的闭按钮,一个订单的删除功,一条免责声明等等,我们希望户注意到他们,但是这些功又得存在,那么就要弱展示这些信息。

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

下来,当整理好息层之后,要靠什段来展示这些层呢?答案是加大对比。

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

1. 大小

对比的一步就是大小的对比,在大家的认中,大的东西比小的东西更显眼、更重要。用户自而地关注到尺寸大的文和尺寸大的图,比下图中一够大的信用卡卡面图,一秒吸引目光。比页面中的大标题,是样的效果。

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

△ 截图来自查查积金

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

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

△ 图片来融360、

2. 重量

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

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

3. 颜

颜对用户的感有着巨大的影响。所以在进行视次构建的时,不同的颜以轻松构成次结构,强烈的颜比红、橙很容易引人注意。白和浅灰通常以用来为大面积的背,和其他的颜构成对比。在设计的时以运用 App 的主和辅助来拉开视次。

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

△ 图来自查查积金、融360视规范

4. 对比

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

我们上图这个贷款列表举一个综合的例子,条信息从最突到最弱分别标为了1、2、3、4,这几条信息中的字号至6px的差值进行递减,并且只有前两条信息进行了粗处,同时颜色的择上是从强到弱:

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

大小、重量、颜色的,归根结就是制对,这是创建层次结构依靠的核心。一个元素和另外一个元素构成对,才有层次的展示他们之间重要程上的差异,户更容易获取到信息。

二、模块之间的层次感

当我们已经合的布了一个模的视觉层次,接来要做的就是把多个模组合起来。

心理学家基格式塔原理来检测户对于元素之间系的视觉感知,发现人们倾向于将视觉系靠的元素群视作为有系的一组。值得说明的是,位置接的元素,即使色彩形状大小都一致,但只要他们足够靠,都会被人们视为一组。

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

△ 图片来自络

视次的建立很大程度上是基式塔原理,所以我们要关注 UI 元素之间的靠近。

基于这种认知,即使每个模块之中的内容有对比有弱,但是只要每个息组之间的素的距离较近,并其息组之间的距离拉远,留下足够的留空间,就可以清晰的将整个页面的层次拉开。留和素本身之间构成的疏密对比,会更好的让用户注留包围下的内容。

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

△ 图片来网络

现在很多 App 都是过比与留白来进页「形分割」,减少了很多线和块运用,让页更为简洁。基本上原则为:文与图片齐,与相关内容距要小于其他内容,标题要大。

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

△ 图片来自 Airbnb

当字体足够的时候,会比小字符「图形感」,加突出,可以明确的告诉用户从这里始下一段了,字一般20-24dp之间,根据内整体风格决,颜色一般选择比较深的颜色 ,必的时候可以加粗。当其他内都比较小的文字的时候,栏目标题也控制一下小。如果图片较多,标题就可以再一些。

具体多大,就要在页面和谐的基础上多试几次……

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

△ 图片来自查查公积金

上图,在查查积金 App 中,当我们设计信用卡详情页的时,由整个页面里图形比突出,看来用加粗的「办卡礼」、「享特权」标题更合适一。是在同个 App 的积金详情页里面,整个页面用比清淡,内容是一文字信息,果内容标题加粗的显得比突兀。所以综合整个 App 的页面风权衡之,还是选择左没有加粗字的设计。

总体来讲,UI 计是没有公式的,只能有经验之谈和大体上的建议,多候都要计一次次的去尝、去对比、去受,才能给出针对当下页面需求最理的层次构建解决方案。

欢迎关注微信公众号:「融360RUX」

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

图片素材作者:Tubik

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在上篇的分享《Banner设计宝典系列!玩转9种最常见的设计风格》中有提到一个名词:情绪板(Mood Board)。有不少小伙伴来问:...
情绪板
本文分享国际化司机端首页改版完整思考过程,化繁为简提升司机使用效率,提升产品用户体验。 关于国际化司机端 随着滴滴国际...
改版设计
十、始,事物之极致也。大众点评在经历九个版本的迭代之后,重新站在变革的十字路口。 V10,一次新的品牌蜕变开始了……. 一...
品牌
我们正式走入下一个10年。在设计和开发之间,在体验和功能之间,我们将会使用不同的工具和服务来协调、弥合、融汇。在这次推...
干货合集
如何构建一个完整的解决方案呢?学会提问,学会多角度看问题,可以帮助我们构建一个完整的方案。 Airbnb Design与News Deepl...
经验分享
幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比...
幽灵按钮
自从界面扁平化风格来到之时,「形式服从功能」就变成了一个时常被提起的法则,包括二手在设计总结中也时常提到该法则,但是...
交互设计
2018年,智能手机依然是我们主要的信息承载工具,更为有效且颇具趣味的响应式图标必将得到关注。同时,鲜艳丰富的色彩,精彩...
2018设计趋势