什么是情感化设计?聊聊它的底层逻辑和深层表达交互设计愉悦性产品设计

情感,是人所产生的一种态度体验。用户在日常的产品体验过程中,会产生一定的情感和喜好,相应的,产品也可以在设计层唤起用户的情感,影响用户认知,进而引导用户行为的发生,这就是情感化设计。那么,产品应该如何做好情感化设计呢?

▲图1情感化设计的3个层次

一、What|什么是情感化设计?

要了解情感化设计,我们需要先了解情感,以下是情感在《心理学大辞典》中的定义:

▲图2情感的定义

情感是人对客观事物是否满足自己需要而产生的态度体验。

通俗来讲,情感是人对外界客观事物的一种主观生理反应,由我们的需要和期望决定。当我们的需要和期望得到满足时,就会产生愉快、喜爱的情感,反之,就会觉得厌倦、甚至愤怒。

前面提到情感是一种态度体验,那态度又是什么呢?

▲图3态度的定义

态度是个体对特定对象(人、观念、情感或者事件等)所持有的稳定的心理倾向,这种心理倾向蕴含着个体的主观评价以及由此产生的行为倾向性。

心理学家迈尔斯提出态度涉及到3个维度,分别是:认知、情感和行为倾向。

▲图4态度的构成

认知因素就是指个人对态度对象的主观评价。情感因素就是指个人对态度对象的情感体验。行为倾向因素就是指个人对态度对象的默认行为反应。

我将三者的关系按照福格行为模型梳理如下:

▲图5态度与行为的关系

认知包含感觉,感觉中就有接收到的提示信息Prompt;情感包含好恶,而好恶是用户行为的重要动机Motivation。

认知产生情感,情感影响认知,二者密不可分,共同决定了用户的行为倾向,外加用户本身的执行能力Ability,就会导致行为Behavior的发生。

不管是颜值正义还是体验经济,都是在试图唤起用户的情感,因为我们人类多数时候的决策都是非理性的,所以情感的唤醒对于促进我们行为的发生非常有效。

这就是情感化设计的底层逻辑:通过唤起用户情感,影响和改变用户认知,形成特定的行为倾向,从而促进用户行为的发生。

▲图6情感影响行为的案例

比如:我想下载一个网页视频,找了好几个网页都没有下载功能,好不容易找到一个有下载功能的,点击了还没有反馈。最后用vivo浏览器打开,一键就完成了视频下载,下载成功的兴奋感(情感),让我觉得vivo浏览器实在是太方便了(认知),所以如果以后需要下载网页视频(场景),我都会直接用vivo浏览器来下载(行为)。

最后,我们给情感化设计下一个定义:

▲图7情感化设计的定义

所谓情感化设计,是一种顺应或唤起用户内心情感的设计方法,旨在让用户产生积极的用户体验和行为。

通过这种情感和积极的用户体验,作为用户记忆的钩子,很容易形成用户的内在触发,养成使用产品的内在动机和习惯。

二、Why|为什么要进行情感化设计?

前面我们讲了情感化设计会刺激用户行为的发生,从而促进产品目标的达成,那到底情感化设计是如何助力于目标的达成的呢?我们可以借助用户体验评价的五度模型和情感化设计的3个层次来综合阐释:

▲图8用户体验评价的五度模型

▲图9情感化设计的3个层次

之前我们讲无意识行为模型的时候讲过人的感知漏斗,人类每秒会接受400亿个感官信息输入,而我们的大脑只能处理40比特,这是一个非常狭小的漏斗。回想一下你上次走过琳琅满目的货架,到底你注意到了几个商品?

▲图10注意力的稀缺

▲图11提升产品吸引度的案例

如上图所示的香蕉牛奶的包装,锦鲤的酒,可爱的猫爪杯,对于第一次见到这些商品的新用户,很容易吸引他们的注意力。

其次,作用于行为层的产品设计和行动引导设计,可以借助用户对过往产品的熟悉感、操作经验和情感期待来操作产品,从而引导用户行为的发生和完成。

▲图12引导用户行为的设计案例

然后,在产品体验的过程中,能够唤起用户情感的设计细节,往往能够和用户的记忆产生一些摩擦,形成一些记忆隆起和节点,成为用户当下推荐产品的一些理由和题材,同时也成为用户满意度回顾时的峰值体验,同时提升产品的满意度和推荐度。

▲图13唤起用户情感的设计案例

比如:输入密码时捂眼睛的猫头鹰,选择金额时猴子的表情,发送生日快乐时的满屏蛋糕等。

最后,当产品能够吸引用户进行体验,帮助用户达成目标的同时唤起用户情感。在此基础之上,如果产品还具备情感化的品牌形象和口号,会让用户更加认同和喜爱产品,从而产生更具粘性的产品忠诚度。

▲图14激发用户认同的设计案例

比如咸鱼、考拉和美团的品牌形象设计和slogan设计,都直白的阐释了产品的价值观,而且通过拟人化的形象拉近了用户与产品的距离。

三、How|如何进行情感化设计

心理学家亚伦·瓦尔特根据马斯洛的需求层次论,把用户需求从下至上也划分成4个层次,分别是:有用的、可靠的、可用的、愉悦的。

▲图15用户需求层次

其中愉悦性设计就是典型的用户情感化设计。

在尼尔森的研究报告中,他们进一步把愉悦性设计分成了表层愉悦和深层愉悦:

▲图16用户需求层次

结合我对愉悦性设计的理解,我把它和用户体验的5个层次做了映射。不管是表层和深层,最终都要通过表现层来传递。如果是局部的、孤立的界面呈现,如:动效、微文案、高清美图、悦耳声音等,都只能算是表层愉悦。只有结合了产品的功能性、并在优良的产品性能和易用性的基础之上,所做的浑然一体的设计表达,才能绕让用户使用产品时进入心流状态,进而产生深层的愉悦。

作为设计师,我相信大家都非常熟悉情感化设计的界面表达,那到底如何才能够把表层的愉悦性设计转化成深层的愉悦性设计呢?

结合网络资料和个人理解,我把深层的情感化设计分成了5个步骤:

▲图17情感化的5个步骤

下面我将以ofo小黄车的情感化设计案例为例,按照这几个步骤为大家阐述他们的设计成果:

1)设计背景和目标

▲图18设计背景和目标

共享单车类App,功能简单、设计重合度高,设计团队希望可以打造差异化的设计心智。所以决定以情感化设计为切入口,提升用户产品感知度和满意度。

2)提取情感关键词

▲图19根据用户和场景提取情感关键词

考虑到ofo的用户特征及ofo使用场景:ofo诞生于校园,主要面向学生及年轻群体,由于ofo小黄车颜色亮丽,轻便舒适,女生骑行比较多。

▲图20情感关键词

结合典型的用户画像和使用场景,设计团队与产品、品牌多方讨论,得出了轻松、阳光、亲和力三个情感关键词作为情感化设计的战略目标。

3)发散情感意象

确定情感化关键词后,设计团队通常会通过工作坊的方式来集思广益,发散情感意象,以下是我从ofo的情感化设计中感受到的情感意象。

▲图21发散情感意象

4)定位设计场景

情感意象最终都要落在具体的产品界面和元素上,所以定位产品的设计场景非常重要,这也是交互设计师做深度情感化设计最需要下功夫的地方之一。以下是ofo设计团队找出来的设计场景:

▲图22ofo的设计场景

5)情感可视化

找到了情感化的意象和具体的设计场景,接下来就是发挥设计师创意和魔力的时刻了:把情感设计可视化。我们可以欣赏一下ofo在各个场景情感可视化的案例:

▲图23产品形象升级

①产品形象升级:包含了从logo到界面颜色、图形、质感的的全面改版。从明亮的黄色和有质感的光影呼应轻松、阳光,圆形表达亲和力。

▲图24增加产品趣味性的设计表达

②增加产品趣味性:通过将车辆包装成为特色物品、用不同形象启动扫码用车,采用重力感应摇动小黄人眼球、采用熊本熊多款表情、设计节日氛围图等方式来增加用户使用产品的乐趣。

▲图25有情感的运营设计表达

③有情感的运营设计

通过比较火的集卡活动配合七夕、国庆节日以及年终用户个人数据盘点激发用户情感。

▲图26ofo的设计场景

④有识别性的插画体系

结合用户偏好、人群特征和用车场景,打造有识别性的插画体系。

最后再给大家介绍9个情感化设计的方法:

▲图27情感化设计的9个方法

①采用吉祥物,为产品赋予鲜明的个性。比如盒马,无穷大嘴,很能吃。

②选择合适的色彩,增加情感属性。比如盒马蓝:生鲜来自大海,增强生鲜的大海联想。

③采用合适的字体设计,表达情感。比如盒马字体设计,盒字字型像一个房子(家),也像一个大厨,皿就像大厨的盘子,字体微微倾斜,想要传递快速送达的感觉,整个字体年轻但不幼稚,充满亲和力。

▲图28情感化设计的9个方法

④用UX文案传递产品个性:流口水、好好次、酸爽,外卖gg,你知道我在等你嘛,都体现出盒马又萌又馋的样子,让用户特别有代入感。

▲图29情感化设计的9个方法

⑤以角色形式来传递信息:用角色的装扮、表情、动作来传递信息。

▲图30ofo的设计场景

⑥为不同用户提供个性化信息:以头条、抖音、淘宝的个性化算法为例,通过个性化的内容,让用户感觉到“懂”我。

▲图31ofo的设计场景

⑦提供奖品或惊喜:比如滴滴送优惠券,高德西湖上的鸟飞船游,网易云音乐在播放哈利波特《海德薇变奏曲》时,黑胶唱片中会突然飞出一只叼着通知书的猫头鹰,重现海德薇送入学通知书的经典桥段。

▲图32ofo的设计场景

好了,到这里情感化设计的内容就结束了,最后借用诺曼的一句话再传达一下情感化设计的重要性:

每样东西都有个性,每样东西都发出情感信号。即使这不是设计师的意图,浏览网站的人也会推断出其个性并感受其情感。——唐纳德·诺曼

希望我们每一个设计师,都能够通过我们的设计,把我们希望用户感受到的情感传递到位,一起加油~

参考文献:

盒马-服务品牌设计的路上可风:APP界面:如何打造情感化设计?张鼎:设计师应该懂的情感化设计TarunKohli:TheWhyandHowofEmotionalDesign

专栏作家

本文原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

THE END
1.app设计Word模板app设计Word模板下载熊猫办公网站共为您提供855个app设计设计素材以及精品app设计Word模板下载,汇集全球精品流行的app设计Word完整版模板,下载后直接替换文字图片即可使用,方便快捷的不二选择。https://m.tukuppt.com/wordmuban/appsheji.html
2.ui界面设计参考文献最新ui界面设计参考文献近五年淘豆网为你提供ui界面设计参考文献最新、ui界面设计参考文献近五年和ui界面设计参考文献电子版PPT下载的服务,相当于ui界面设计参考文献大全,这里你可以找到所有关于ui界面设计参考文献的内容。https://m.taodocs.com/topdoc/202457-0-0-1.html
3.网站设计参考文献(最新范文105个).doc网站设计参考文献(最新范文105个).doc,学海无涯 网站设计参考文献(最新范文105个) 汇报人 汇报人:xxx PAGE PAGE 2 现在随着互联网的越渐强大,网站的建设就需要融入更多的功能、更丰富的内容和更美观更人性化的界面设计。如果一个网站既没有美观大方的界面设计也没有能够https://max.book118.com/html/2020/1024/7101106062003011.shtm
4.某教育类appUI界面设计说明书(论文)+任务书+PPT+PSD源文件4.2 IOS UI版式设计标准 5 设计内容 设计总结 参考文献 致谢 全套毕业设计论文现成成品资料请咨询微信号:biyezuopin QQ:2922748026 返回首页 如转载请注明来源于www.biyezuopin.vip 打印本页 | 关闭窗口 上一篇文章:某教育类appUI界面设计 任务书 下一篇文章:改造设计之多用途除尘器 任务书 本...http://www.biyezuopin.vip/onews.asp?id=14356
1.App优秀UI设计案例:视觉盛宴的背后设计技巧随着移动互联网的飞速发展,越来越多的App应用软件出现在我们的生活中,在这些应用软件中,优秀的UI设计能够给用户带来更好的使用体验,增强用户对产品的忠诚度,我们将分享一些优秀的App UI设计案例,这些案例不仅在设计上独具匠心,而且在实际使用中也得到了用户的广泛好评。 https://www.wenanmiao.com/22679.html
2.APP设计开发的参考文献(APP设计开发参考文献指南)摘要:本文旨在探讨APP设计开发的参考文献,通过对相关文献的分析和总结,旨在为读者提供背景信息和引发他们的兴趣。通过详细阐述四个方面的参考文献,包括用户界面设计、用户体验研究、移动端开发技术和市场分析,以期为APP设计开发提供有价值的参考和建议。 一、用户界面设计 ...https://www.appgongsi.cn/newsinfo.php?id=261
3.APP界面标注及切图注意事项4. 参考文献 友盟设备指数 APP切图流程和APP切图命名规范详细完整版 APP切图详细规范终极指南 iOS和Android的app界面设计规范 APP界面切图命名和文件整理规范 三、Android应用屏幕适配 1.用px作为基础单位的缺陷 对比上图可以知道,ppi越低图片显示的越大,ppi越高图片显示的越小,造成不同手机上显示图片布局不统一!https://www.jianshu.com/p/3ee1f5fdcbcf
4.APP界面设计(精选十篇)该App借助越来越快速的无线网络, 为更多的学习者带来良好的用户体验, 让学习者可以随时随地快乐学习。 参考文献 [1]李玉斌, 张爽.移动学习的内涵、方式及其对远程教育的研究意思[J].现代远程教育研究, 2005, 6 (2) :30-34. APP游戏设计毕业设计(论文) 篇2 超神学院毕业生 毕业设计 题目: APP游戏设计 分院:...https://www.360wenmi.com/f/cnkeydt25i5l.html
5.[精选]信息管理系统论文15篇林权IC卡管理和森林保险档案管理纳入林权管理信息系统平台,体现了系统设计的时效性。林权宗地数据库自动备份功能为保证宗地数据安全、实现空间数据的回溯提供了可能。 参考文献 [1]林显志。基于WebGIS的林权抵押管理系统研究[D].福州:福建农林大学,20xx. [2]李宏。基于。NET技术的林权管理信息系统的设计与实现[D]...https://www.yjbys.com/biyelunwen/fanwen/guanli/735643.html
6....ui设计原则的垃圾归类移动端app界面设计与实现参考文献对于本垃圾自动分类管理系统的设计来说,它主要是采用后台采用java语言、springboot框架,它是应用mysql数据库、Android等技术动态编程以及数据库进行努力学习和大量实践,并运用到了APP的建设中在整个系统的设计当中,具体根据垃圾自动分类管理系统的现状来进行开发的,具体根据用户需求实现垃圾自动分类管理系统网络化的管理,各类...https://blog.csdn.net/VXbishe/article/details/128705703
7.基于用户体验的中老年医疗降类APP交互界面设计二是对交互界面设计的定义进行概述,整理设计原则,为中老年人医疗健康类APP的交互界面设计提供理论支撑。然后,作前期的案例调研和市场研究,通过明确医疗健康类APP的定义及类别,选取两款典型的医疗健康类APP进行调研,从感官体验层面、交互体验层面、情感体验层面对其进行交互界面内容分析,为提出更具有目的性和实用性的设计...https://xuewen.cnki.net/CMFD-1021880309.nh.html
8.基于MobileNet4 基于 PyQt5 的功能封装与人机交互界面的设计与实现 5 主要参考文献 1 成品效果演示 1.1 图片成品效果演示 1.2 视频成品效果演示 2 基于 MobileNet-v3 的虫鼠识别功能的设计与实现 2.1 数据集的获取与整理 2.1.1 数据获取 众所周知,数据获取是深度学习领域一项必不可少的技能。数据获取方式多种多样,具体而言:...https://cloud.tencent.com/developer/article/1931641
9.智慧校园背景下校园APP的服务设计参考文献 [1]金霞,陈昱至,赵仁杰,等.大学校园易购平台商业模式构想与APP实现——以贵州大学为例[J].时代经贸,2019,(33). [2]艾瑞,超级课程表.[艾瑞咨询]消费行业:2018年大学生消费洞察报告[EB/OL].艾瑞网,2018. [3]2019-2025年中国智慧校园行业发展预测与前景展望研究报告[EB/OL].产业调研网,2015. ...https://www.fx361.com/page/2022/0628/10484756.shtml
10.delphi手机app开发(Delphi手机应用开发指南)技术大全Delphi是一种流行的编程语言,被广泛应用于手机app开发领域。本文将详细探讨Delphi手机app开发的四个方面。首先,我们将介绍Delphi的基本背景和优势,引出读者的兴趣。然后,我们将分别从界面设计、功能开发、性能优化和测试调试这四个方面进行阐述,通过详细的解释和实例说明Delphi的应用。最后,我们将总结文章的主要观点和结论...https://www.szappgs.cn/newsinfo.php?id=2916
11.app开发开题报告最后, App需要考虑用户数据的管理和维护,包括用户信息的输入、存储和读取,以及各种操作和功能的实现。 2、App开发的流程 App的开发流程从需求分析开始,经过原型设计、界面设计、代码编写、测试调试等多个阶段。每个阶段具有不同的目标和任务,都是开发App的必要步骤。 https://www.yimenapp.com/info/app-kai-fa-kai-ti-bao-gao-122575.html