视觉设计中的AIDMA法则

早在1898年,美国广告学家——E.S.刘易斯就提出了AIDMA广告法则,该法则包含了以下5块内容:

AIDMA漏斗模型-01.png

所谓AIDMA法则,是指在消费者从看到广告,到发生购物行为之间,能动式的引导其心理过程,并将其顺序模式化的一种法则。

——引用自MBA智库百科

 

AIDMA法则与视觉设计的联系

从世界上最早的商品文字广告,到宋朝早期的商标广告,到民国时期的油画广告,再到如今的互联网广告,广告形式大致经历了由文字→图形→色彩→动效的综合演化

2222-已压缩.jpg

无论是早期的线下实体产品还是如今的互联网产品,视觉设计都发挥着重要的作用。线下实体产品通过视觉设计承担大部分的广告行为;互联网产品则通过视觉设计来达到聚拢用户视觉焦点的目的,进而为服务售卖/广告点击/点击率提升等搭桥。

因此,视觉设计绝不仅仅只是填色/盲目的美观,而是结合产品特性对色彩、文字、排版、图形进行优化组合,在实现基本信息传递的同时,聚拢用户焦点,从而提升用户视觉体验,最终实现我们的目的。

 

如何聚拢用户视觉焦点

在实际情况中,产品或多或少都会收到一些抱怨,诸如功能难找、信息传递弱等(尽管它已经处在很明显的位置了)。为什么会有这种情况呢?主要是其他大量信息的存在,干扰了用户的视觉焦点,从而导致信息未能有效传递,尤其是当每个区块信息分布以均衡的方式呈现时。

那么视觉设计师应该如何聚拢用户视觉焦点呢?

试试看你能不能很快速地在下面找到4个特别的符号呢(水平翻转180°的数字2)? 

5.jpg

根据孤立效应,无论是文字还是图像,只要它有区别于其他信息的特征,那么人们很容易就能识别出。而想要实现“视觉孤立”,大致可以从以下三个方面入手:

色彩搭配

色彩是对人眼刺激最直接有效的方式。在一项名为“Impact of color on marketing”的研究中,研究人员发现,绝大多数人可以仅凭颜色就能对产品实现快速判断,可见色彩对视觉设计的重要性。

在艾体验曾经合作过的一个产品案例中,客户反馈说他们遇上了这样一个问题:许多用户进入产品后,找不到开始课程的按钮。

0.jpg

分析原因,其实不是因为用户是小白,而是在视觉设计中,上下颜色采用同色设计,并且在底部栏上没有对按钮进行突出设计,导致用户在进入这个页面的时候会下意识地认为上下都是界面的边界区域,并不包含按钮操作区域。因此,一些重要的操作区域,都要尽量避免使用与主色调相撞。

当然,根据场景的不同,色彩搭配也需要采用不同的方法。比如在引导页,我们用少的颜色,将重点传达给用户。而在产品的首页,希望用户关注到产品推的活动时,这时候可以搭配多色以吸引用户的关注。

在美居的引导页中,就使用了大面积的无彩色叠加少量的彩色,从而让用户快速聚焦到你的重点。

点缀色.jpg

而在马蜂窝APP首页的活动推广区,就用了更加丰富的色彩,一方面通过视觉效果营造了一种热闹的氛围,另一方面更加丰富的色彩又将用户的注意力从其他模块吸引到活动区块进而让用户关注到活动本身以此提升转化率。 

画板.jpg

 

信息层次

信息层次的处理能够更好的让用户获得关键信息,即你想让用户了解什么?

在视觉设计中适当地调节远近虚实,可以增加画面的空间感,例如明暗、投影、大小、叠加等方式。这也是为什么别人的设计比你更耐看的原因之一。

以飞猪预定往返航班为例,在整个航班预定的过程中,用户在不同阶段的的信息关注点都有所变化。

在录入基础信息时,用户关心的是【我在XX日要从XX地点前往XX目的地】,因此在视觉处理中,刻意增大了【出行时间】、【出发地】、【目的地】的区域;

搜索.jpg

而在航班选择时,因为已经确定了出行时间及地点,此刻用户的重心转移到了【出发到达时刻】、【航班价格】上,而其他信息相对参考价值弱,所以选择页的信息更多地聚焦在时间和价格上;

价格.jpg

最后到了选择舱位,一般来说如果没有特定的要求,当前场景大致会选择最优惠的价格,并且相比起买贵了,用户更担心买错了。所以这个页面增大了航班信息区的内容,以便让用户快速聚焦视线,核对航班信息。

核对.jpg

再举一个例子,打车时用户大部分时间处于【等待接驾】和【行程中】这2种状态。在不同状态下,其实用户想要获取的信息也是不一样的。

画板 copy.jpg

在等待接驾时,用户会关心司机的车牌号是多少,这样可以方便快速定位到正确的车辆。注意到这一点,滴滴也特意将【车牌号】信息做了放大处理,便于用户快速定位到【车牌号信息】。

当然,行程中我们可能会也查看APP,但主要信息就变成了——是否按导航路径行走、还有多远、还有多久等等。

 

表现形式

中规中矩的设计如何进一步提升?不同的表现形式能够带来意想不到的效果

可以试试增加各种元素活跃氛围,例如各种辅助元素、几何、线条等。透过一定规律或非规律的排列,带动画面的视觉中心,让你的画面运动起来。曲线、直线以及倾斜的物体都具有一定的指向性和画面切割的作用。底纹的衬托和线条的指向增加了画面的趣味性,使人不由自主的观看其中的细节。 

元素-已压缩.jpg

当然,你也可以更改最初的排版方式,从构图留白、文字对齐方式,图形构成形式寻找更适合的形式。当画面固定的排版框架限定你的思维时,不妨越过这个框架重新思考,强迫自己进行一个不一样的排版,也许能够发现新大陆。图中对文字以及表现排版进行了重构,选取了和主题更加契合的方式展现。

 

总结

总结一下设计师应该如何聚拢用户视觉焦点,实现产品目的。

通过【色彩搭配】、【信息层次】、【表现形式】等手法营造出【孤立信息】状态,从而突出你的关键信息。

在色彩搭配方面要尽量避免关键信息与画面主色调相撞,否则会让敏感度降低,当然也可以考虑使用无彩色点缀少量彩色,达到突出关键信息的目的。

在信息层次方面,要适当地调节远近虚实,增加画面的空间感,例如明暗、投影、大小、叠加等方式。

在表现形式方面,可以适当增加元素活跃氛围,当画面固定的排版框架限定你的思维时,不妨越过这个框架重新思考,强迫自己进行一个不一样的排版,也许能够发现新大陆。

 

视觉设计之于互联网产品,就如同广告之于商品,都承担着Attention(引起注意)、Interest(产生兴趣)、Desire(培养欲望)、Memory(形成记忆)、Action(促成行动)的作用。

也因此视觉设计绝不是独立于产品的存在,而是结合产品特性,对色彩、文字、排版、图形进行优化组合,在实现基本信息传递的同时,聚拢用户焦点,从而提升用户视觉体验,最终实现我们的目的。 

 

正在热招

产品体验设计师  Product UX Designer

智能设计算法工程师  Algorithm Designer

创意工程师   Creative Technologist

简历和作品集投递:hr@aiux.cc

联系我们

Copyright © 2019 艾体验 AIUX