△ 点击上方蓝字关注“UX小学”,提升设计力!


本文来自 Ant Design 设计师:瑞含

更多精彩内容关注知乎专栏 @ Ant Design

今天跟大家聊聊插画在情感化设计中的运用 


什么是情感?

《心理学大词典》中认为:“情感是人对客观事物是否满足自己的需要而产生的态度体验”。


情感是人对外界事物作用于自身时的一种生理反应,是由需要和期望决定的。当这种需求和期望得到满足时会产生愉快、喜爱的情感,反之产生苦恼、厌恶。




什么是情感化设计?

情感化设计最早由唐纳德·诺曼在其同名书籍中提出,是一种着眼于人的内心情感需求和精神需求的设计理念,目标是在人格层面与用户建立关联,使用户在与产品互动的过程中产生积极正面的情绪。这种情绪会逐步使用户产生愉悦的记忆,从而更加乐于使用你的产品。


通过设计的手法将产品赋予情感,再通过情感去建立与用户长期稳定的愉悦关系,这就是情感化设计


But,情感化设计是基于产品的功能性和易用性后,追求的更高层次的目标。我们只有先了解产品的逻辑,全面理解分析后,才能做出不影响产品功能下的情感化设计。

并且,他将情感化设计拆分为三个层次



本能层次先于意识与思维的,它是外观要素和第一印象形成的基础,更多强调的是产品给人的初步印象,着重与产品的外观、触感


行为层次:与产品的使用及体验相关,优秀的行为层次设计有四个要素:即功能、易理解性、易用性和感受。其中优先考虑的是功能,不论是什么产品,都要首先弄明白它的功能是什么


反思层次:强调意识和更高级的感觉、情绪及知觉,用户会体验思想和情感的完全交融,反思层次的设计本质是:一切尽在




插画在情感设计中是如何应用?


插画在情感设计中的应用大多基于本能层次来满足用户的情感需求进而与之建立联系,合理地使用插画可以很好的帮助用户理解你的产品,实现差异化设计。

1、通过插画对用户进行情绪调动

产品的呈现往往是商业目的和用户需求的综合结果,除了满足用户的痛点,让用户用的爽之外,还需要用户去做一些产品期望用户去做的事情,而这些事情不一定是用户当前状态下会主动去做的。好的插画可以调动用户的情绪,能引导用户做到这一点。


带动情绪:引导用户完成你想要的流程


自如 app 的启动页

一般产品发布或迭代的时候,大部分用户没兴趣了解产品新功能,都是拿到手里就用,自如app在启动页中利用插画将产品的内容、功能、或者是升级的亮点简单高效地表现出来,通过纯度较高的撞色搭配,配以简短的文案,在第一时间抓住用户眼球,让用户更快的进入使用环境,带动用户情绪


Google Hangouts

通过极简的扁平感插画在短时间内吸引用户注意力,获得用户本能的好感。这类页面应该紧扣产品功能的痛点,表达时需要易于理解、符合产品调性且风格统一,可以通过一个个小场景、小故事、或者元素等方向来绘制



控制情绪:消灭产品中的负面情绪


这类情况多出现在一些出错页面中,如 404 、403、500等,插画在这种情况下可以减少用户的挫败感,通过其特有的可观赏性和趣味性,使产品更具有人情味,也能不断的增强品牌在用户心中的形象


Chrome Web Gam


当页面不能访问失败时,出现了一个类似于马里奥的网页小游戏,用户点击空格键,就可以前进跳跃,用户对访问失败感觉很不爽的,此种做法有效的做到了分心,消除不爽。

这种做法首先需要我们梳理产品所有流程、节点和可能出现的情况,并给每个情况打赏情绪标签,确认是正面还是负面的,最后对每个负面标签的节点进行情感设计优化,让用户在遇到这个节点的时候,是开心而非沮丧的。





2、影响用户感知

感知层面的情感设计指的是从用户的内心出发,通过美好的事物,触动用户。相比其他形式,插画更容易通过其特有的艺术感染力来达到触及用户内心的作用

感知层面一般通过两方面来影响,一种是认同,我有过类似的经历、我能体会类似的心情;另外一种是兴趣,我喜欢打篮球,我喜欢搞笑,所以类似的事情我会很关心。

建立认同:我也有这种感觉

uc浏览器劳动节闪屏

文案来源于《老子今天不上班》这首歌,现在劳动节的意义就是放假了,放假晚上会觉得不玩到凌晨2点就是浪费,所以画面通过「通宵游戏」的场景,加以「宵夜」「隐含寓意的卷纸」等元素来加深用户的认同,想到曾经自己好像也经历过的某个晚上

360浏览器汶川纪念日开屏

汶川八周年的开屏通过营造一家人搭积木的场景营造灾后重建的感觉

360手机浏览器520告白日开屏

发现兴趣:我喜欢这类东西

我们的目标用户喜欢什么?什么能让他开心?这也是从感知层面着手设计的一个方向。

比如我们都喜欢看美女,萌宠,通过引入这种人类天性中关注的点,最容易赢得消费者的注意和喜欢,一个典型的例子就是「杜蕾斯」

这类情感设计首先应该挖掘用户群或各个层面用户的情感认同点和兴趣点,寻找产品中可以将这些情感点落地的位置,可以是狭义的产品App,也可以是广义的产品宣传中,最后运用插画渲染描绘出趣味性的,能与用户产生共鸣的场景


3、拟人化

除了上面两个方向,情绪调动和感知的影响,还有一个方向,拟人化设计,通过插画将我们的产品化身为一个人,让他具备人的感情,当用户需要操作我们不希望的功能、或者希望调动用户去使用某些功能的时候,产品会像一个人一样提示用户,增进与用户的关系

闲鱼App

人设:

闲鱼家族有6个形象,其中主角就是这个胖胖的小黄鱼


从app图标-开机页-首页确立了对产品ui的第一印象——黑色描边+亮黄色


在后续的页面中也进一步加深这只小胖鱼的形象,在下拉刷新、引导用户登录、个人设置、空页面等情况下都使用这只胖胖的小黄鱼,十分有趣生动,增进用户对产品的好感,同时大大增加用户进一步操作的可能性


表情包

内置的聊天表情包,一方面将聊天变得有趣,一方面赋予这只鱼性格,加深用户对品牌的理解


bilibili

人设:

左-22娘(姐姐) 右-33娘(妹妹)

b站的拟人化形象就更加明显了,这两个萌娘不光被赋予了性格,甚至包括身高体重,妥妥的二次元产物,以及和她们住在一起的「小电视」


产品app


开机页

内页


下拉刷新时萌娘与小电视互动,让人会心一笑


弹窗

关于产品给用户发推送的这一请求,很多时候容易被用户拒绝,本质上其实是打扰用户的一种行为,b站则使用了萌萌的姐妹花形象,配合文案,抓住用户喜好,获得好感的同时提高通过率


下图是用户已经安装了bilibili客户端时的提示


PS:退出登陆时的二次元文案提示



这时候该系统地举个例子了

看到这里,具体怎么做呢?

这里以之前的ofo为例,简单说明如何通过插画来打造情感化设计 

(PS:这块的案例有些老了,不过现在看来,仍然不过时。其次ofo凉了本质上也跟App的体验没关系, 我们只需要借鉴其优秀的设计思路即可)

背景说明:ofo除了是一个开锁工具和代步自行车外和用户的现实生活也存在在很多关联性,用户骑车小黄车上下班出勤、和朋友爱人家人一起逛街或周末出游。ofo 对他们来说除了骑行外,也是连接情感和美好生活的一款工具。基于这种场景的考虑,ofo的设计团队开始了情感化设计的探索与尝试

1、打造情感化关键词

建立情感化设计体系的第一步就是打造情感关键词,找到有效的关键词对后面即将展开的工作有着强烈的指引性,所以这一步是不可或缺的

ofo从「用户」「场景」两个维度,找到了产品最明显的情感特征:

在街上骑ofo的年轻妹子看起来多一些

特别多的人骑小黄车的时候爱拍照

通过典型人物+典型场景的思考,ofo得出了「轻松」「阳光」「亲和力」三个关键词,这也是情感化设计的战略目标。


2、产品层面——通过主题皮肤增加趣味性

一直以来用户对于ofo固有的印象多是简单的开锁工具,这与产品的定位有一定出入

在此之后,ofo做了主题皮肤的尝试,通过替换地图上的小图标开始,到首页上扫码用车icon的包装,实现全面的皮肤化设计

百变的地图icon



皮卡丘主题


熊本熊主题

用户每次打开app,都可以随机看到一个熊本熊萌贱的表情,很多用户会为了多看一眼小黄人或有什么新的熊本表情而刻意骑一下小黄车


很应景的法国夺冠皮肤


3、运营层面——建立具有识别性的插画体系

ofo的运营需求爆炸源自17年夏天共享单车行业的激烈竞争,活动类型多以促销类为主,如免费、抽奖、充送、集卡、月卡等,这类的运营形式很容易做成电商感的花哨氛围,这不符合ofo的情感关键词

为此,设计师制定了关于ofo日常运营的 2 个准则:

保持简单

保持简单的基础上让设计元素更具有「亲和力」

目的是帮助设计师在应对紧急粗暴的运营需求时保持设计的品质

同时基于以上两点建立了具有ofo自己特点和识别性的插画风格——偏韩系的文艺小清新手绘风格,这种风格不仅轻薄简单,而且具有非常强的亲和力,会让人联想到年轻人真实汽车时的美好画面,在运营活动中通过此类插画去反复宣传周末户外的美好景象,从而鼓励用户在周末的时候带小黄车出门郊游


像星礼卡一样漂亮的ofo月卡

区别于手绘风格,ofo对「月卡」也做了精心的绘制,采用偏概念性简约的插画设计,创造出如同星巴克礼卡般漂亮的月卡,让用户非常想拥有,一定程度上提升了拉新效果


综上,ofo围绕「阳光」「轻松」「亲和力」三大情感关键词,打造了一系列情感化设计,为产品注入了新鲜的活力和血液,ps:虽然依旧不能改变开锁慢和频繁卡死的命运,但一定程度上给予了用户关怀,缓解了用户烦躁的情绪,也是值得学习和借鉴的

结语

在平时的日常迭代,产品设计中,我们往往过于专注产品的功能性和可用性,而把优化用户体验、增加情感要素向后推,殊不知情感化设计其实有助于实现我们重要的商业目标,甚至还能让用户接收并且谅解产品的某些缺陷。虽然情感化设计本身并不能带来直接的收益,但它有助于激发用户强烈的情感共勉,这种情感本身等同于高留存和好口碑

而插画在此扮演着重要的作用,可以帮助产品实现差异性,快速的脱颖而出,是值得我们重视并研究的一块领域。

一个好的插画,可以先从「本能层面」的美感出发,然后辐射到「行为层面」的操作,然后稍顿一后的一声 wow,用户在「反思层面」恍然大悟,原来这产品这么机智。



案例来源如有侵权,请联系作者删除。部分案例来源:

ofo小黄车是如何打造情感化设计的?
https://www.zcool.com.cn/work/ZMjYzNjc5MzY=.html
闪屏作品合集
https://www.zcool.com.cn/work/ZMjE1MDkzNTI=.html
【UC浏览器】2014闪屏情感化设计
https://www.zcool.com.cn/work/ZNjU1MzIxMg==.html



最后不得不再感叹句,小黄车的设计确实挺好,凉了挺可惜。

———–  我 是 分 割 线  ———–

延伸阅读  
阿里动物园又双叒叕添新丁,设计全过程曝光
在阿里做了十年设计的专家突然选择了离职,为什么?
陌陌设计年鉴大赏 | MOMO Design Almanac
重磅 | 蚂蚁设计师打造了个免费插画生成工具
当初的农村小伙,现在统管着阿里几千位设计精英
三轮面试后,我拿到了腾讯设计Offer
设计驱动 | 腾讯产品设计改版笔记
经验方法:如何有效描述设计改版的价值

   你点的每个“在看
我都认真当成了喜欢
 

本篇文章来源于微信公众号: UX小学