聊聊doodle的情感化设计

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

当情感化设计碰上doodle,会发生点什么样的碰撞呢,我们今天就来聊一聊这个话题…

doodle

情感化设计,设计师都明白是怎么一回事,但doodle是什么呢,可能有些设计师童靴不太了解。从字面上解释,doodle本意为涂鸦,现在多指由谷歌先发起的谷歌涂鸦。主要是在logo基础上进行一些装饰设计,来纪念特定的节日和事件,现在已经有越来越多的公司加入到doodle的创作阵营中来,也不单单是一张jpg,现在越来越多的公司开始进行交互上的尝试,比如嵌入视频、游戏等。

下图是互联网史上第一个doodle,据现在有接近20年的历史了,可能现在看起来很粗糙,但是它作为doodle的开山之作,还是很有纪念价值的。

01

那doodle为什么会发展起来呢,我简单总结了一下doodle的5个主要作用:

第一,slogan。它其实是品牌的一种情感化输出。有了它,用户更能感觉到这个品牌的活力,帮助品牌拉近与用户之间的距离。

第二,special。它是在节日和一些重大事件的时候推出的,更能提醒用户去关注当前热点。

第三,surprise,给用户制造彩蛋。平时logo都是一成不变的,突然有一天,logo它会动,它还能发出声音,甚至还能做小游戏,这对用户来说,就是意料之外的惊喜。

第四,sale,达到促销目的。对电商而言,doodle的位置是首页重要广告位,除了渲染气氛,刺激用户买买买的心理,也能带来一定的流量和转化。

第五,share,分享的功能。这其实是个有趣的问题,究竟什么样的doodle才算是个优秀的doodle呢,这个问题仁者见仁智者见智,毫无疑问的是,doodle的设计能够传达出品牌的一些价值观和设计水准的,特别是在各大品牌的doodle的较量中,用户的感知更加明显,甚至可能影响到用户对品牌的口碑。

比如下面,百度和谷歌今年3月8号推出的doodle,大家觉得哪个更有趣呢?

02

03

注:谷歌完整版doodle请自备翻墙梯子移步:

http://www.google.com/doodles/international-womens-day-2016

那我们看一下doodle会在什么场景下应用:

首先是搜索引擎类的网站,他们首页比较简单,有充足空间来进行doodle情感化设计,用户能看到的不仅仅是一张图片,还有可能是一段视频,一个小游戏。比如百度这张图片,搜索栏下面其实是个互动类的小游戏。

04

电商类将doodle应用得出神入化的当属阿里系。淘宝和天猫一般都将顶通、logo位和首页两侧空白区域进行统一的整体设计,这样更能让用户感受到节日和促销的氛围。

05

06

最后看下我们途牛的情况,我们现在的首页利用顶部工具栏和导航栏中间空白区域进行doodle的设计来渲染氛围。

07

如何做出一个吸引用户的doodle

那怎样才能做出一个吸引用户的doodle呢,我这里分享几个小方法。

第一招,主打感情牌

人都是感情动物,以情动人是百试不爽的方法。

比如下面这个logo,是谷歌父亲节推出的。从动物的父子关系入手,慢慢演化为人类之间的父子关系,用户在看到时候不由会想到自己的父亲,让用户看到后产生强烈情感共鸣。

08

第二张图是夏至推出的,几个小孩在水中纳凉玩耍,是不是会让你想起你的童年呢,并且,这个doodle的巧妙之处是在于它没有强行将品牌logo插入其中,而是将品牌色和谷歌英文字母融入到小孩的泳帽里,使得画面更加美观和谐。

09

第二招,拟人化

将logo赋予人格,让品牌更加接地气,也能让用户在看到动画的时候,将自己带入情境中。

这个是谷歌在世界杯期间推出的,将几个字母做成办公室职员的形象,在boss来之前他们兴高采烈的看球赛,当boss走来的时候,立刻切入到会议模式,面对如此熟悉的场景,是不是会让你会心一笑呢?

10

淘宝这个就是将我们购物常接触到的鞋子、购物袋拟人化,增加了趣味性。

11

第三招,抄现实

将现实投影到doodle创作中。

下图看到的是YouTube的一个doodle,它展示的是几秒钟内女性妆容的变化,与人气视频《百年之美》遥相呼应,很能激发用户在YouTube搜索观看这个视频的兴趣。

12

这个是谷歌在女作家奈欧•马许诞辰纪念日推出的doodle,中间的窗户是女作家写作时的场景,两边的窗户是她小说中的桥段。她的书迷在看到这个doodle的时候,一定会觉得很亲切。

13

第四招,出奇

使用一些天马行空的视角,出奇招,往往能收到意想不到的效果。

下面看到的是淘宝可劲造的doodle,它是个火锅侠模样,脑袋不停往外面迸发出各种各样的好货,这样新奇的脑洞,大大刺激了用户的好奇心。

14

百度的这个选用了俯视的视角,有别于常见的平视视角,就会让人印象深刻。

15

第五招,制造游戏感

游戏往往让人乐在其中,往往制造出游戏的紧张氛围就能抓人眼球。

淘宝这个采用了老虎机的样式,给用户带来更强烈的感官刺激。

16

这个是纪念图灵的doodle,通过模拟图灵机运算,让用户一步步通过计算,点亮谷歌logo。

17

这个是谷歌万圣节的doodle,模拟了鬼屋的游戏,当用户打开一扇门的时候,伴随着呜呜的声音,就会冒出一个幽灵,节日气氛更加浓厚。

18

需要注意哪些细节

除了以上的创意招数,在制作中细节也同样重要,细节决定成败,那么都需要注意哪些细节呢?

第一,切忌复杂

如果过于复杂的话,用户的视觉重心就会集中在logo位,那么整个网站首屏其他广告位的点击和转化率就会受到一些影响,出现下图的尴尬症状:

19

第二,避免呆板的匀速运动

下面两幅图,那一张显得更加舒服一点呢?第一张用匀速运动描述了一个弹吉他的青年,但是显得过于木讷,对比看,第二张就显得更加动感。

20

21

所以适当加入变速运动,会让动画效果更耐看。

第三,控制时长和kb数

减少画面的动作,是最直接控制kb数的方法。并且画面太长的doodle不仅会让用户觉得拖沓,而且文件量容易超标,影响网站加载速度。

22

第四,开启无限循环模式

让画面循环起来,不仅让画面看起来更加流畅,也更能有效缩短动画时长,控制kb数。看到这个筛子,就是一个无限循环的动画,不仅看起来很简洁和谐,更能套用一句前段时间很流行的网络用语,这画面有毒啊 ,我能盯着看一整天啊,根本停不下来啊~~

23

附上几枚小牛家的doodle,献丑了:

24

25 26

最后的思考

互联网能走到今天,是它比现实更能满足我们内心的需要,让我们从现实的压力中解脱出来,感受到轻松、愉悦。做为设计师,也需要与时俱进,尽可能多地去感受生活,捕捉瞬间,不断创造出有情怀的作品,给我们的用户带去更多快乐体验。

关于doodle的设计理论和设计方法肯定非常多,水平所限,这里只是介绍几种。欢迎大家随时拍砖~~

 

本文由 @途牛用户体验中心(微信公众号:途牛用户体验中心) 授权发布于人人都是产品经理。未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 2

登录后参与评论
  1. 不错不错,学习了

    回复
  2. 刚才以为标题写错了

    回复
加载中