0.0°

情感化在产品中的设计体现

经验类型经验/观点
经验属性原创文章
经验版权署名-非商业性使用-相同方式共享

章三疯

关注

12899 16 230 2020-03-04

文字阅读时间大概为10分钟

插图来自作者Muriel：https://dribbble.com/M64

文章前言：

什么是情感化设计？

情感化设计是一种设计方法，用于创建可为用户带来良好且积极的产品体验。我们设计师使用这种设计方法来设计创意界面，以达到触发用户积极的情感共鸣。

产品产生的情绪可能会对用户对产品的感知产生很大影响。积极的经历会引起人们的好奇心和喜好，而消极的经历会保护我们避免重复犯错...

而我将从情感化设计说起，通过分享相关案例并结合文字，让更多设计师了解一些情感化设计的基础同时掌握相关理论知识点，同时在文章底部也会推荐相关的书让大家去了解。

谁推导了情感化设计？

那我们就来先来介绍一下

情感化设计的先行者

唐纳德·A·诺曼（Donald Arthur Norman，1935- ）

一位享誉全球的认知心理学家，认知心理学学科创始人，工业设计界领袖。加州大学圣地亚哥分校教授，《大英百科全书》编委，为惠普、摩托罗拉等公司提供过咨询服务，担任过苹果公司先进技术部门的副总裁。《设计心理学》、《情感化设计》等著作至今都是设计专业必读书目。他所阐明的以人为本的设计原则已深入人心。

在他的《情感化设计》一书中，一开始他用他收藏的三个茶壶来举例：

而每一个代表着不同的含义和作用。

一个是代表他的过去-对缺少实用性的产品的抗议

另一个是代表了他的未来-我对美的不懈追求

最后一个则代表了实用性和魅力的完美结合

...

这则茶壶的故事，间接阐述了产品设计的三个组成要素：可用性（或缺乏美学）、美学、和实用性。

情感化设计的细分

同时在书中他将情感化分为三层

即：本能层行为层反思层

情感化设计的三层其实在广义上的比较接近（除了划分不一）与马斯洛人类需求五层次理论(Maslow's Hierarchy of Needs)，都是从基础本能/生理需求，到反思/自我实现的同一方向。

所以，基于两个理论，我们在做好一款产品的体验和可用性时，产品必须为用户提供价值。它需要功能，可用和好用。好的设计是“锦上添花”的，其中功能方面是处于优先级，但是为了提供给用户在使用过产品过程中的满足感，也必须考虑情感方面。

我们分别来说说三个层面的案例

1.本能层设计

本能层是基于我们最天生的情感，而做出自然的潜意识反应，

它通过外观和感觉以及感官参与来设计把控产品外在的优秀品质。

良好的本能层设计会让用户感到愉悦和兴奋。

生活中的范例：

当刺猬被其他动物攻击时，它们会本能的把自己卷曲起来防御外界将会带来的伤害，而婴儿看到奶嘴会本能的想去允吸，我们看到彩虹会觉得很漂亮...

互联网产品范例：

1.富有吸引力的微交互

最右新版本的话题态度点赞

在最右新版本App上，话题板块的点赞做的很新颖，模拟思考用户在当前话题会产生的情绪，用动态emoji的方式，准确生动的表达情感含义，同时让产品更加活泼有趣，让人眼前一亮，符合产品独特的风格调性。

来自作者TMATM：https://www.zcool.com.cn/work/ZNDI1NzUxNzY=.html

2.基于现实的联系参考

苹果闹钟的时间设置

像我们早前都是靠实体闹钟调整后面的齿轮转动时针分针来叫醒自己的，而苹果利用真实的钟表盘的转动手势，结合设计体现来可视化的调整你的作息时间，较为真实的将生活中的小场景融入到产品当中，形成了现实与虚拟产品之间的联系。

Yahoo天气应用的当前天气显示

像雅虎天气/苹果天气等其他软件的天气都会实时更新地区当前的天气情况并动态拟真的显示，这样从产品角度出发，用眼睛所看到的现实场景，产品更加真实的显示了目前的天气状况，比需要理解的icon更加有识别度。

百度搜索的小彩蛋之一

你在百度中搜索“黑洞”两个关键字，在网页中心真的会出现一个仿真“黑洞”，它会把你的网页上的图片和整个网页一层一层全部吞噬掉，让你在搜索黑洞相关的文章时，先给你一个更加逼真的体验，让你知道黑洞的原理。

3.有趣的微交互

京东购物车微交互

首先呢，在现实生活中，我们会把商场里购买的商品放进购物车，我们不想要的，可以在购物车里拿出来放回去，而在互联网产品上呢？

购物车功能是在电商产品内一个很常见的功能，它需要视觉设计和标准语言。同时，试想我们把他当作一个现实中“容器”的概念模型，而这个“容器”，我们可以“放商品”进去“推车（购物车）里”，以及可以把商品从推车里“拿出来”。而我们可以在动作上花心思，让它可“动”，比如说京东在加入购物车的时候，会把商品缩小成一个“圆球”，然后会掉进购物车的按钮里，从而生动形象的完成了对商品的加入动作。而这种简单而有趣的交互，会加深用户对产品的体验好感和让人心情愉悦。

4.引导你的正向情绪

追波404页面设计

当我们在Dribbble上浏览作品的时候，当前作品突然出现故障，导致了404，追波就会在这个页面上把同颜色的一个个作品拼成404数字，让人眼前一亮，消除了用户不愉快的心情，引导用户查看其他作品。

5.设计传递品牌意味

google主页品牌logo的设计

你有没有注意到，偶尔在google的搜索主页上，它的logo不定期都会传达出各种各样的主题，同时进行个性化但不会脱离本身品牌logo插画设计，让公司一成不变的logo变得趣味性和企业形象有了重新的认识。

6.不同场景的情感关怀

高德地图的天气提醒

设想一个场景，此刻你在地铁里，过两分钟准备下地铁去面试，你从地铁口要走去那家没去过的公司，此刻提前打开了高德地图App，而你发现，此刻App首页上，有当前区域外面正在下雨的提示，它间接让你注意下雨天路滑，雨天要注意安全... 是的，就一个细节的天气显示，会提醒你要注意天气注意安全，产品在设计的过程中，充分考虑到你会面临诸多的一些比如天气/路段维修等一些真实的使用环境，恰好在合适的时间，给予你帮助，让你感到暖心。

7.使用产品的愉悦感

Nomo相机让人惊喜的风格

nomo相机设计看起来像把手机变成了拍立得，设计就十分独特，另外也会模拟拍立得洗照片出来的等待时长，以拍立得的风格调性和微质感，满足人们对专业和仿真拍立得拍照体验的愉悦与渴望，也同时让人一眼就喜欢这款产品。

2.行为层设计

行为层设计区别本能层设计，不以外观为主要设计途径，重要的是功能的实现，同时注重易用性/易理解性的实践主义，经过行为层设计过的产品，结合产品内涵的主要原理带来不一样的真实感受。

生活中的范例：

登山冲锋衣的防水科技

无印良品雨伞把上设计的小凹槽可以提供挂东西和袋子

公共场所里的各类指示牌

一次性垃圾袋子上方便人们拎的提绳

......

互联网产品中的范例：

1.安全有效的体验

滴滴打车司机端的语音输入目的地

设想一下：当你下班打滴滴回家时，你中途要修改前往的地点，司机会问你路，然后你大概率在打车的时候观察到这样一个细节，他会对着应用来进行语音输入，然后带你前往目的地，是的，而我们在用软件打车的时候大部分都是手动输入地点或修改，而司机这边，由于处于一个驾驶状态，需要高度集中，所以语音输入位置相比于打字输入，减少了他对屏幕的操作步骤和避免驾驶途中分心的不安全感，从而高效便捷且安全的使用产品。

2.节省成本准确高效

腾讯视频网页端封面的快速预览

腾讯视频在封面每个视频上有一个功能，就是你可以在还没点开这视频封面进去观看的时候，你只需在封面上左右移动下光标，它就可以在外部封面缩略查看视频的进度情况，很方便的让用户知道里面大致讲的是什么内容，让用户都不用点进去，避免浪费用户打开时间。其次也就是视频网站体量内容过大，降低了用户打开浏览的成本同时，也间接稳定了产品的留存。

同理之下，bbilibili视频下方的波动幅度条（高能进度条）也是类似的功能，B站的做法是波峰值越高，表示当前视频节点弹幕越多，也同样是让B站用户能够快速的看到“高能时刻”。这样的微交互，更方便的考虑用户的真实使用场景。

3.功能的可拓展性

微信的相机新功能

9.2版本的微信的扫一扫，比之前更加好用了，不光可以扫码，还可以支持识别当前拍摄的物体，并展示物品相对应的信息和价格，让我们不用切到其他程序就能知道一些价格等信息（另外还支持翻译功能），十分的方便。

4.能够准确传达信息

微信的公众号文章“点赞” 到“在看”的文案转变，为什么就单单改变了文案，这个文案大家有没有思考过改变的原因。

首先：点赞是一种现代社交网络孵化而出的一种社交行为当别人在公众号或者朋友圈等社交媒体上po出的社会发生故事新闻和自己的生活大家觉得好就会自发的点赞，出发点是没错的。

但公众号的在看和点赞有什么本质上的区别吗？其实这就是中国博大精深的文字语言艺术了，点赞是一种正向的积极的操作，用肢体来表达就是我竖起了大拇指，表示支持和觉得你厉害，而在看它代表的是一种状态，在公众号里发布内容，假如说是关于一些负面的一些新闻，或者是存在伤心悲观的一些文字，这样我们如果还是去点赞，心里是十分别扭的，其实这个文案是有问题的，而“在看”就很好的解决了这个问题，我在看，代表的是我在关注，我同时也愿意更多人能看到。

它用在这里是一个中性的词汇，不会导致用户想分享出一些负面的东西而显示的却是点赞，解决了用户的心里的疑虑纠结。同时也会让产品语言更加严谨科学。

5.服从用户正向心理

美团让用户填写外卖评价的文案细节

当我们点外卖后，打开外卖很多都能收到红包返现的小卡片，商户想让我们进行评价打分，增加商铺的分数级别，但有很多因为需要凑够字数才能给你一个返现红包，而美团的评价做的十分用心，一个小小的提示“还差10字即可发布！”，比“评论不能低于10个字”的文案改变，带给用户感受就不一样了，用户心理活动会想“原来10个字就可以评论”，一方面会让用户觉得很简单，而去开心的评论。第二增加评论功能的完成率与活跃度，第三是提高了对每个店家评论次数和真实评论度，同时以便让用户更为真实的知道评论。

而“不低于10个字”带给我们的，更像是一种考试写作文不低于多少字一样的“压迫感”，语言不够友好，在没有外力(红包)辅助的情况下，让用户从心里就不想去评论，而减少了评论的几率。

同样是评论10个字，换个文案就给人语气和心理大不同了。

6.营造产品的使用氛围

知乎App底部标签栏按钮按压时发出的声音反馈

当你手机是响铃模式下，知乎App的底部标签栏按钮，你按下按钮就会发出类似“de de 或 du du”的声音反馈，这种声音首先会让人觉得很有趣，并且它的声音像是你在进行某种手工/文字创作的敲打声或制作声，会有一种很专业的感觉...

同样的，其他一些产品例如输入法的敲击键盘声、消息发送成功的反馈声、解锁屏幕的声音...等都是为了用户提出了声音和操作的同步反馈，也带来了更好的用户体验。

在爱彼迎的个人资料中，关于你的昵称资料，会只显示你的名字，而不会显示姓氏，这样的做法是信息的不准确性吗？

其实在我理解看来，首先我们要知道爱彼迎是一个在全世界范围内都有服务的产品，在中国或者很多国家，人们总是喜欢称呼亲切熟悉的人不会带上姓氏，会让人觉得很“见外”，而亲切的称呼你的名字，并且以介绍自己的语气，来展示自己的身份信息。在同类型的产品内，是拉近了产品与“我们”之间的距离，让人觉得格外亲切。这样的细节难免会让用户对产品产生温度和情感，让产品不再是冷冰冰的工具而已。

7.真实感与智能化的联系

得物（毒）App的球鞋预览

得物App作为一个潮流物品交易展示社区，球鞋展示这块有一个3D空间，可以方便你360度全方位查看这双球鞋的细节，让你可以省去实体店或者看其他人评论图，同时也间接提升购买产品的转化率。

让天猫精灵“放个屁”

其实谈到这个话题大家都会觉得很搞笑+有趣，是没错，即使你没有买过天猫精灵等同系列的产品，你也听过让“天猫精灵”放个屁的段子，是的，首先产品这个行为就足够搞有趣，我们在使用提出这个响应对话出于什么需求？有用吗？大部分可觉得没用，没用吗？不其实它带来的是对于语音交互产品的更加拟人化，更加去思考人的真实行为，让我们产生共情，也同时更加像和朋友同事之间的打趣一样，让人觉得很有笑点，发自内心的笑点。虽然目前做的还不够好一些诸如人机对话的僵硬感，对话回答不上来....，而当产品更加像人一样去对话，在AI技术还没很成熟的今天，一些小小的情感对话响应，也许这就是在进步。

3.反思层设计

反思层是我们在行为层和本能层上通过感官肢体产生的某种行为，而去反思思考意义所在，它可能是正向的也可能是相反的，可以增强你对自身行为（或产品）的肯定和升华其在后面隐藏的意义，或者是反作用抑制它。

生活中的范例：

因看了一些纪录片而脑海中时常想起画面

获得别很多人没有的东西而骄傲开心

坐过山车的刺激感而后带来的征服愉悦感

欣赏博物馆收藏的具有诸多历史/人文价值的作品并回到家反思...

互联网产品范例：

1.满足荣誉（令人骄傲等）的复杂心理因素

星巴克的会员星级就是一个很好的例子，将会员等级拆分为数个级别，每次消费一杯就能提升半颗星，增加难度的同时，也抓住用户的心智，让用户乐于提升自己的星级（同类用户群体下的互相比较），同时还能享受其他单品的折扣等优惠活动，积极的带动了产品的消费，也满足的用户之间比较（Pan bi）或是累积的心理需求。

产品的每日打卡分享

在keep健身App里，很多用户每天的运动都可以打卡的形式来积累，一方面是让你保持锻炼（产品粘性），其二就是一个累计的过程，会让你增强对自身行为的肯定，增强愉悦感和满足感。同时也会在朋友圈之类的社交产品上，分享自己的每日打卡，向其他的人展示自身的一些良好的习惯和自我形象的塑造。

2.艺术传播学习与文化共情

每日故宫App作为艺术作品集合的各类博物馆，它综合的包含了太多的方方面面的价值，而每日故宫App也是如此，作为每日分享故宫博物院的一件珍品or艺术品的产品来说，当人们在欣赏的同时，它是令人深思的，会思考这件珍品后面的历史故事和人文价值、它所处在的时代与之前所拥有者信息等等...

所以诸如此类的产品或网站都是体现出反思层设计的深层所在。

高考倒计时App的每日一句

专为正奋战在高考的学生们设计的一款倒计时应用，除了距离高考还剩多少天的字样，另外就是会每天精选一句激励性的文字语言，和相对应的“学子说”板块，这个简单的程序充满情感的交织，让他们都能激发自己的斗志和勇气去积极面对。

利器-灵感生成器的语录分享

利器-灵感生成器是一个在Chrome上的拓展程序（插件）你安装上了它，除了它的一些功能，还有每次新建网页都能够看一句很随心的话，这些话来自生活和工作乃至技术等方方面面，总有一条会让你产生共鸣而去联想思考为什么/怎样做... 或者教会你一些你之前不懂的知识等... 让你可能是愉悦、或者让你思考回味...

3.社会责任与人文价值

百度百科里搜索结果网页悼念逝者的黑白风格

我们总是在惋惜很多为人类社会做出贡献的逝者，有人会在家里哭泣，有些人会去街上聚齐起来进行吊唁... 而在百度百科里，近期（近几天）逝去的人件，或者是一些较为严重的事故事件，搜索结果整个网页将都是黑白的（通过颜色来传达情绪），结合人们对于葬礼的黑白认知和严肃感，也传达出企业悼念逝者、尊重逝者的社会责任和引发人们反思共情的深度意味。

支付宝蚂蚁森林的种树功能

这个想必身边很多人都有大半夜“偷”别人能量的事情啦，支付宝蚂蚁森林的种树功能，首先挖掘了我们用户对做公益的积极态度，以网上来种树，耗费较少的时间和点点手指就能做到的事，让我们不停积攒收集能量，是让自己能够即使在网上，也能帮助祖国的沙漠地区，“种出”属于自己的一份力量，同时还能看到自己种下的树...让用户对公益事业有真实的参与感，也活跃了整个产品。

疫情地图/辟谣科普查询等

丁香园、今日头条、高德、微信等各大平台都在进行提供现今新冠肺炎疫情的各类帮助，不论是实时动态还是咨询等各种帮助服务，对于企业都是需要花大量人力物力撑起来，这些公司的行为都是体现出来对人文设计、和企业价值观对社会的助力了！

4.传承纪念、传递品牌深度

京东/支付宝等App的节日主题首页

京东和支付宝在正值传统节日的同时，首页从图标到背景颜色和插画都进行节日风格的创意设计，这样设计的出发点一方面纪念比较有意义的传统节日，其二就是让平时比较呆板的界面偶尔传播些有趣味性的设计，也能提升公司品牌形象的内涵，另外就是让用户感受到了节日的气氛，同时谨记我们中国文化的传统节日。

（启动页/节日海报等也类似）

以上三类的情感化设计的互联网产品十分多，大家可以自己去体验思考很多类似的。

这三个层次在很大程度上相互作用互相联系影响，并不会单单的存在一层里面。（起码是俩层以上）

举个生活上的例子来说：

我们在买衣服的时候，不可能从一方面就考虑买下它，你第一眼觉得这衣服很好看，

但是你或许还是要看下它的价格、或它适合什么场合穿...等等，以上如果没有，也是需要看合适的尺码的。

举个产品的例子来说：

我们常用的Emoji表情来说，本能层，第一眼，我们确实会被它的颜色和拟人化的表情所吸引，而在反思层呢？

我们发送给别人，其实是一种情绪的传达，各类表情表达开心、生气、无语等等，而收到的人就会反思，我做什么让她很开心/很生气。

所以，这三个层次都是互相紧密联系影响的。

划个重点，那我们应该怎么去做好情感化设计呢？

情感化设计现阶段并没有做到大范围使用在产品里，但它又是不可或缺的，而我们需要拿捏一个度，不能滥用它，因为过度情感化会让产品失去对用户，但也同时不能轻视它带来的积极作用。合理的利用用户的情感化情绪，使一些有价值的情绪带来产品上的一些成功，在实际挖掘当中，我们可以利用一些技术型+设计方法去进行，例如：眼睛跟踪（眼动测试）等技术，问卷调查反馈和前期数据分析等方法。

实际工作中个人的一些理解：

1.同团队沟通明确方案

阐述我们为什么要这样做，这方面需要同公司团队一起探讨确认目标。

通过ROI（投入产出比）来商谈可实施的步骤，是全面进行推动，还是部分实验进行等。

定好对应的方案，做到团队内成员的互相配合、有序的实现这些目标，从而高效的产出优秀的方案，进而达成目标。

2.提炼诉求关键字

我们可以通过产品原本的数据反馈或调查问卷来得知用户反馈的数据，然后去分析，提炼用户的情感化诉求，更为准确的可以通过关键词去概括。

例如：感觉缺少品牌感、看上去没什么活力、感觉使用起来很僵硬...这些就可以归纳为关键字：品牌感、活泼、微交互...

3.由点到面优化全局

当我们得到了很多情感化诉求的方向，我们着手一个出发点去实验推展。

例如：通过后台数据反馈，某外卖App的评论很少，转化一直很低下，结合问卷调查的诸多方式，细分到（按钮问题、文案问题、系统状态问题等），假设得知是文案问题，我们展开优化文案的几个点（例如：文案过长/文案难理解/文案过于严谨）并具体的进行校正。

然后可映射到其他点的功能文案，并以这种方式找到产品的全部可优化的方向面，逐个击破，完成全局的情感化设计。

4.后期验证方案成果

验收这一步其实很重要，很多设计师即使做了前面的步骤，觉得我已经设计完了，应该就会达成预期目标。其实我们应该理性的看待各类方案，即使你认为好，但用户恰巧不是这样认为的... 所以需要后期去跟进反馈的情况，是否还存在可优化的点。通过前期的数据埋点/后期的调查问卷（方法很多种定性or定量）去得知用户的转化情况，从而验证整体情感化设计方案是否能提升产品的各个层面。