设计必读经典《情感化交互设计指南》的超全读书笔记来了！

这几天看了一本书，书名是《怦然心动：情感化交互设计指南》。最开始了解交互是在优设网的细节猎人栏目，里边有很多产品的设计细节，通过这些细节，你会记住一款产品，当时我把这些小的细节看成产品的交互行为。

直到看到这本「怦然心动」，我才发现交互是一棵根扎到很深很深的大树。

这本书主要讲了什么呢？用作者的话说就是──如何通过有趣好玩的活动来影响人类的行为。更具体的说，就是将如何吸引异性的策略运用到人和交互设备的交互中去。

交互如何让人怦然心动

1. 为什么要做交互？

每天都有很多网络公司成立，各式各样的产品让人眼花缭乱，如何在众多产品中脱颖而出？那就需要让产品吸引用户。

2. 交互行为为什么会有效？

学习柔道的时候，你会在取得黑带的过程中获得各种色带，这就是一种吸引用户的方法。试想一下，如果教练对你说：「坚持吧，十年之后你就会获得黑带。」要是这样，那黑带目标对你来说真的很渺茫了，你会有随时放弃的可能。

就像很多学习类产品，通过设置关卡，给你传达了一个信息：看，我在不断进步！

那它为什么这么有效呢？是因为这个行为牵扯到了心理学：

• 行为拆分：当把复杂的任务分解成较简单的任务时，我们更容易采取行动。
• 适度的挑战：挑战才有乐趣，特别是难度适中，不会困难到无从下手，也不会简单到无聊透顶的的挑战。
• 地位：我们常常评估，相对于他人和自己的最佳纪录，交互是如何加强或削弱我们的地位。
• 成就：我们更趋于参加各种有意义的活动，受到大家认可的成就。

所以你应该明白了，为什么同样的学习 app，设置关卡等级类的学习 app 更受青睐。

3. 产品进化模式图

如上图，是一个基本的产品进化模式图。看完这个层级后，我想了想平时使用的 app 有哪些做到了意义深远，发现「微信读书」「哔哩哔哩」光荣上榜。

前五点就不具体阐述，光说最高级别的意义深远一点。微信读书让我养成了看书的好习惯，每年完成对应的书单。哔哩哔哩让我养成了看纪录片的习惯，关于艺术关于历史等等，都让我看到哔哩哔哩的闪光点。一款产品，如果做到让用户意义深远，我想这就很成功了吧。

在互联网的浪潮中，如果你已经拥有了稳定可用的产品，如果想让它发展到下一级别，意味着你要专注于更感性的东西，比如情感、表达和美学。

4. 美学·美的三种模式

设计师 Cennydd Bowles 在他的博客中阐述道，美具有三种模式：公认的、文化的和主观的。

• 公认的美与基本的设计美学原则有关，如对称、协调、三分法则和黄金比例。这些是美观设计的传统基础。心理学和进化生物学为这些公认的原则提供了许多解释。我们的视觉系统趋于在事物中组织信息、寻找模式和建立秩序。
• 文化的美指的是在某个时刻从某种方面我们发现某种文化的迷人之处。玛丽莲·梦露是世界上最有名的人物之一。不过，如果她现在还活着，她会不会成为美的典范就很难说了。在网上，思考点在于不同时代流行于不同群体间的各种文体风格。
• 主观的美就是你个人觉得对象具有美，这与你个人的品味和偏好有关。也许你觉得 Quora 的斯巴达美学很对你的胃口，或者你觉得相当无趣。

Bowles 继续暗示这三种模式具有等级关系：主观的美压倒文化的美，文化的美胜过公认的美。

可以这样理解：

• 公认的美：平时做设计使用的一些设计规范，比如黄金分割、斐波那契数列等等；
• 文化的美：前几年流行拟物化风格，最近几年是扁平化风格......关于某个时间段的「美」；
• 主观的美：每个人对设计的主观感受。

5. 小结

最后作者的结论让我惊呆了：现实真的是这样。平时的设计稿，领导主观的美压倒一切，不管你用了什么流行的风格，用了什么法则，统统被领导主观的美打败。其次是关于公认的美和文化的美，两个设计稿，同样运用了黄金分割法则，最后现在流行的扁平化风格一定会完胜拟物化风格，这就是作者的结论。

交互设计该如何展开诱惑

1. 你的设计有趣吗？

要试着在设计中使用幽默，通过交互设计中的一点儿幽默，可以使设计更加人性化，引导用户产生积极的心理效应。当人们心情好的时候，解决问题就会更加有创造力，而且还能有效地理顺思维。

但是你需要考虑到这样一个问题：你不知道面对的是什么样的用户群体，你的幽默可能被用户当真，可能会冒犯到用户，所以这也迫使你去了解你的用户。

举个例子，某国外网站的邮件预览效果的交互设计。人们预览邮件的时候，会有一只猴子张开双臂。如果邮件预览窗口太宽，猴子的手臂就会突然断裂，而且喷出鲜血，可能现在我们觉得好恐怖啊，其实这样的设计似乎很迎合英国人的口味。

所以要记住一点：要正确的使用幽默，不是看运用在何种行业，而是看运用在何种情况下。

不过倘若你使用了幽默的交互设计，用户没有发现，也并不是一件坏事，因为相比起别人告诉它某个幽默的设计小细节，用户更青睐于自己发现它。

2. 你的设计令人惊喜吗？

说到惊喜，可能你会想到很多惊喜的设计细节。这里作者将惊喜与奖励结合了起来。

可预知的可变奖励

当你准备放弃的时候，又赢回一点点。不管赢回的多么少，也暗示着你还有机会，只要继续玩下去。这种奖励可能看上去很随机，但实际上它们已经被计算好了，能让你不断往机器投入硬币。如果奖励太多，你就会渴望赢，一旦几次没有赢，你便容易退出。如果奖励太少，你就会放弃。这种手法通常被训犬师用来训狗，或被父母用来培养孩子。

如果你每次进行这项行为，都能得到奖励，你就会变得对它有所期待；如果得到奖励完全是随机的，你就会对它上瘾。

对于「老虎机」奖励，你可以知道最终结果不是输就是赢，但是你不知道下一次是输还是赢，所以把它称作可预知的可变奖励。

不可预知的可变奖励

这种类型的奖励真的是随处可见，比如你入住某个酒店，酒店为你提供了一场免费电影，或者赠送你一块绒布纸巾。当你去地下仓库搬东西，上楼梯时候看到台阶上写了一行能量满满的字：

相信这个时候，你一定会不由自主地嘴角上扬：一切真的都会好起来。

这一系列的奖励相当于这款产品给予用户的赠礼，说到赠礼，这里要提到一个名词──「互惠主义」。

所谓互惠主义就是赠予他人礼物，但是不期望得到回报。但是有些公司会把它延伸一点，暗示了回馈网站的方式：收藏或者分享该网页。这种行为没有不对，但是需要处理好，不然用户会觉得你在强迫他。

当你不求回报付出时，通常会得到一些很有意义的回报。

比如某款产品的惊喜奖励会让用户四处宣传这款产品。但是如果别的公司也给予了用户相同的奖励，那它将不再是给予用户的赠礼，因为它已经是一种期望，它希望用户收礼后也去宣传他们的产品。

生活中这样的例子太多了：「亲，好评给五元红包哦」「亲，送你一个小礼物，请扫一下二维码哦」......所以这些场景是不是可以换一种赠予方式去实施这些行为呢？

3. 你的设计令人兴奋吗？

以 Dopplr 网站为例，创始人为世界上每个城市指定了一种颜色。

为防止大家对这么多颜色是怎么取出来的感到好奇，给大家解释一下：以「MD5」算出城市的名称，转换为十六进制，然后将前六个字母作为 CSS RGB 的值。具体我也不懂，你只需要知道是可以取出这么多颜色的就对了。

这样的话，用户头像的边缘颜色就会反映你的旅行进程，当你换一个城市的时候，头像边缘就会更换不同的颜色。

和上边说到的一样，当用户自己发现这一独特设计后，体验会更好。

4. 你的设计有神秘感吗？

这个问题的基础──人的好奇心。因为人好奇，所以才让对象显得更加神秘，说到好奇，就需要了解一个理论──「信息差理论」。

当某些事情从已知（或者我们认为的已知）变为未知状态时，我们便会好奇。通俗一点，当我们发觉有知识空缺时，便会开始好奇。

案例1

当我们离开某个酒店的时候，对方送给我们一张包起来的礼品卡：「您下次入住我们酒店的时候，我们会为您拆开，里边有大礼呦。」相信你会对此充满好奇。

另外，保管一件有价值的东西是激发人们好奇心的关键部分。

案例2

脉脉app，它会在用户主页向你透露某大厂的某人查看了你的资料，若想知道是哪个大厂查看的，就需要付费成为会员。很多产品将用户的好奇心运用到了这一交互设计中去。

5. 你的设计能让人们表现自己吗？

看到这一章节的时候，满脑子都是支付宝的小鸡和蚂蚁森林这两款产品设计。

人们想要在某个事物上留下自己的标记，证明自己来过；想要在笔记本上贴满各种贴纸......这便是人的自我表现力，人们想要通过这些行为表现自己的个性与感受。

网络身份表现力

常见的便是微博、QQ、微信朋友圈可以自己设置背景图。除此之外，QQ 还可以让用户展示自己最近在玩的游戏、听的歌曲。微博会在首页展示用户最近参与的一些话题。这一些功能构成了你的网络身份，并将它反映给别人。

控制表现力

当人们被允许控制某些事物时，便会体现出自我表现力。以支付宝小鸡为例，人们会在蚂蚁庄园场景中拥有一只属于自己的虚拟小鸡，可以对它进行装饰打扮，小鸡的外在形象其实就是用户的理想形象。

驱动表现力

以支付宝蚂蚁森林为例，用户会通过收集能量来种植自己喜欢的树，他们希望种越来越多的树，而且也希望别的用户看到自己成果──在好友列表排前几名。

6. 小结

通过有趣、惊喜感、兴奋感、神秘感、表现力这五个方面的阐述，让我们把交互设计与生活中和我们贴近的产品联系起来。是不是觉得交互设计诱惑力很强大？既然逐渐了解了交互设计的诱惑，那就要细心发现更多诱惑了，然后去深入了解它们，这应该是每个设计师应该重视的问题。

「诱惑」这种含蓄的艺术

之所以选择阐述诱惑这个话题，是因为通过这种艺术，我们可以改变界面的一些小细节，当然是可以立刻实现的那种，然后就会产生很大的影响。

1. 第一小步

行为引导

案例：注册界面同意用户协议前边的默认勾选按钮。

通过这个默认选项设计，推动人们迈出第一步，增加了人们注册以及了解某产品的可能性。

分享地点

案例：鼓励人们拍摄、上传照片。

某服务鼓励人们拍摄上传照片到平台，当你在注册过程中，它会提出一些问题：你最喜欢去哪三个地方吃饭、你周末经常去什么地方等等问题。

注册完毕，当你首次打开平台，它会给你第一个拍摄任务，它不会说：「现在，请去拍你最喜欢的地方吧。」而是说：「听说XXX是你最喜欢的地方之一，为什么不去拍下来呢？」

平台通过这样一个微小的语言表达方式让用户迈出了第一步。

赋予进度效果

案例：某洗车店会给每次洗完车的客户发一张洗车卡片，卡片上有八个章，盖满八个章将会得到一次免费洗车的服务。

但是区别是：A 卡片有八个章，B 卡片有十个章，但是前两个已经盖上。你认为哪种卡片拥有者得到免费洗车服务比较多呢？

最后结果表明，B 卡片用户是 A 卡片用户的近二倍人数，得到了免费洗车服务，而且时间更短。这种行为便是「赋予进度效果」。

通过已经完成的两个章，让人们走出了第一小步，而且章盖得越多，越接近盖满，人们完成任务的欲望就会越强烈，这被称为目标实现。

行为拆分

和赋予进度效果联系很紧密的还有一个原则──行为拆分，上面已经具体分析过这一原则，是说要把一个行为拆分成多个行为，这次我们分享一个有力支持这一原则的案例。

案例：下图是两个不同的网站关于鼓励用户完善个人资料的方式，最后结果显示图二的完善进度大于图一。

△ 图一

△ 图二

为什么会这样呢？

你需要了解一种设计方法，这种方法称为内关联行为：不要向人们展示四个选项，而只展示出两个。仅当人们犹豫着是否点击「不感兴趣」的选项时，再显示另外三个明确的选项。你将一系列可能的常见选择简化为一个简单的选择，再展示出来。就像一本「模拟历险情境」的书籍，你对操作进行了拆分。

2. 避免展示过多信息

以上边的两张图片案例为例，图二设计师将众多的列表框隐藏起来，让界面更加简洁，其实并没有缩小人们的选择范围。

有时候即使列表不能隐藏，你也可以迷惑视觉系统：

△ 图一

△ 图二

这个案例把四个问题变成了两个，从视觉上将姓名合二为一，将邮件和电话集合到联系方式标签下，其实实质没有变，还是四个问题，但是这种视觉效果，会让用户觉得这种方式更自然。

那是不是任何情况都要保证避免展示过多信息呢？不是的。

某理财机构网站有一个调查服务，调查人们的理财行为，但是其中的问题竟然涉及到了你喜欢的音乐风格。这和理财有什么关系呢？

一种解释是，网站实际上具有某种非常巧妙的算法，可以根据个人的娱乐偏好来推断人们的性格特点。在这样的前提下，网站通过间接的问题来了解重要的理财信息。这是可能的。另一种（更可能的）推断是，问问题是假，真正的目的是让你更投入整个调查过程。真正的理财问题可能只有四个，但是通过添加这些「仅供娱乐」的问题，也许真的能令更多人完成表格。无论是哪种原因，这是一个值得借鉴的案例，也是另一种运用细节的方式，十分具有诱惑力。

3. 吸引注意力

我们会通过设计合适的按钮、运用合适的字体字号、鼠标悬停在按钮上的效果等方式去吸引人们的注意，关于这些就不做分析。这里我想提另一种吸引注意力的方式。

案例：每天早上打开电脑，固定时间固定位置会出现某牙科医院的广告，关闭一个弹出另一个，而且还是视频播放，确实吸引了工作中的我的注意力，但是一个又一个的广告视频简直让人崩溃，而且我对该医院的印象已经很差。

像这样的吸引注意力方式用户当然不会买单，如果变一下，结果可能会不一样。

该医院其实可以运用对比来吸引人们的注意：通过改变广告发送频率，不再让人厌烦。这属于对比中的时间对比，当然还有动画对比，比如页面中可以添加一个闪烁的按钮来吸引注意力。

4. 建立最省力的途径

在两个选择之间，我们更倾向于选择无需付出任何代价的那个，这种行为被称为「现状偏见」。

以我们生活中的案例为例：中午到了饭点，A 说我们去哪里吃饭？B 说我们要不要去XXX地吃饭？如果是你，你会接受哪个吃饭建议？大多数会选择 B，因为这个建议更直接：把「去哪里吃饭」变为了「我们要不要去哪里吃饭。」

案例：某茶叶网站开发了一个茶叶评级系统，系统中设计了一个小小的刻度线，重点就是这条刻度线，当你把鼠标放在某个刻度上时，就会显示你曾经评价过的茶叶名称以及等级，这样是不是更有助于你在两种茶叶间进行比较呢？

所以这个评价系统就在人们对茶叶评价不一致的问题上建立了一条捷径。

5. 语言的魅力

印象比较深刻的是「你」的问题，以每次公众号标题为例，我会尽量把「你」加进去，因为这样能够证明我写的这篇文章是和你有关的，会让你觉得自己看完有所收获。而数据也显示，标题中有「你」字的文章，点击率明显比没有「你」的高，当然也不能勉强添加，要视内容而定。

关于语言的魅力，除了设计，和我们的生活也息息相关，比如一个洗衣机的广告：我们的洗衣机很实惠，究竟有多实惠呢？节省的水电费可以让你再买一台洗衣机！购买人群：太好了，一两年之内我可以再节省出一台洗衣机，当然买买买了。

6. 商业目标与行为目标

平时设计，你会不会想出很多好的点子？当然会，但是公司会采纳吗？这就不一定了，那怎样让公司为你的这些想法投资呢？

要将行为目标和商业目标结合起来。

案例：假设我们确定了一个商业目标是提高油管的视频上传质量，高层领导已经确定了这一目标。但是面临的问题是油管逐渐发展成了让越来越多人群上传各种视频的大众平台。那么我们该怎么办？

这时候就需要你把商业目标翻译成行为目标了：提高视频上传质量，是某些行为进行改变后的结果。所以真正的行为目标是：鼓励人们对视频进行选择。

我们可以通过限制视频上传数来达成这一行为目标，比如每个人只能上传两个视频，这样是否就能让用户在上传之前思考一下视频质量呢？

我们也可以给予高质量视频上传者更多的特权；可以给用户发送一些权威人士的视频制作技巧......通过这些方法，是不是将行为目标转化成了商业目标呢？

情感化交互设计 ── 游戏篇

交互设计指南最后讨论的是「游戏」。

说到游戏，你脑海里会浮现出什么？王者荣耀？英雄联盟？开心消消乐？或许还有很多，但是浮现之后呢？你有没有想过这些你脱口而出的游戏为什么会让你如此着迷？我们就来扒一扒究竟是什么让人们对游戏有源源不断的热情。

1. 游戏设计原理

一个游戏好不好玩，取决于该游戏的玩法。玩耍也是一种游戏，但是它和游戏是不同的，玩耍可以没有任何规则，可以随时展开，而游戏是有规则有目标的。所以正是这些元素引发了人们的焦虑、兴奋与喜悦等感情。

所以一些网站为了挽留用户，设计了用户积分、领取徽章的游戏模式，但是这并不能将它变成一种游戏，至少不能变成一个值得长期玩的游戏，当然，更不能带来乐趣。

作者罗列了一系列游戏，然后总结出了多数游戏所属的类别：

• 玩耍和挑战
• 矛盾和选择
• 反馈回应
• 目标和奖励
• 虚构的世界

这些便是作者的「游戏设计原理」模型的基础。

2. 教学态度与游戏的激励手段

自我激励

老师：「这个课程很无聊，我会尽力去讲，但是你必须自己努力去学一些知识。」

我们把它称为「自我激励」态度，你必须自己学习这些内容，当然没有了乐趣，学习已然成为了一项枯燥的任务。这正是现在部分软件的真实写照：你购买了某产品，如果你不懂怎么操作，那你就只能去看说明书。如果你不想看，那就不懂怎么操作。所以这部分产品只是满足了用户产品起作用的需求。

「裹糖衣」

老师：「这节课不太有趣，但是我加入了某些小活动，让它变得有趣。」

课程本身没有兴趣，但是通过给它裹上一层糖衣，让学生更容易接受。市场上也有这样的产品，通过一层趣味拉拢了用户，但是这样的用户不长久，因为用户感兴趣的是那层糖衣，而不是这个产品。所以现在很多产品：（玩耍+挑战）+（奖励+目标）=游戏，你越是强调奖励，用户对产品本身会更没兴趣。

真实的挑战

老师：「这节课非常有趣，我会给大家展示它为什么重要。首先我为大家准备了一道题目。」

这种教学态度，将无聊的课程以一种启发人的形式展示出来，前边的这道题目会有一定挑战性，但是一旦成功，学生会对这一课程产生强烈的兴趣。

学习如此，游戏亦是这样，我们需要了解用户想提升的能力，然后找到核心挑战，最后设法用一种有趣的方式（游戏）来展现它。这样，挑战伴随的奖励所带来的兴趣将会持续下去。

3. 如何让挑战更令人兴奋？

稀缺

伴随着稀缺产生的是压力，但是它也带来了不少乐趣。某票务网站提示你某某演出的门票只剩下三张、某艺术家的现存售卖作品只剩下了两份......最杰出的还是域名注册，通过利用每个域名的稀缺性，从而鼓励人们注册域名。

稀缺性通过限制时间和权力表现出来。

以支付宝能量为例，如果超过了一定时间，能量就会消失，通过时间的稀缺性来督促用户及时打开支付宝收取能量。

权利的稀缺性很多产品都有利用：只有会员才拥有某项特权，从而促使用户注册会员。

及时反馈

我们希望我们的行为能够以某种形式影响着世界──因果效应。

以新浪微博为例，你被多少人关注，通过粉丝数向别的用户及时反馈，这就让用户树立了一个目标：获取更多粉丝。

行为与积分（等级、排行榜、徽章）联系起来

• 行为目标：一封邮件只允许打开一次。
• 游戏设计：第一次打开奖励十个积分；第二次打开，扣掉十个积分；第三次打开，积分数量变为负十。

添加社交暗示

挑战自己的记录会让你有动力，但是和社交联系起来，你会更有动力──我的记录和朋友们比起来怎么样？他们是不是比我更厉害还是不如我？

4. 这些机制为何能激发人的积极性？

• 心理原则：目标实现原则
• 娱乐性：故事、美感

除了以上那些原则，一个游戏让人着迷的还包括它的叙事性、音乐以及界面设计。正是这些娱乐性的元素，吸引我们，带我们进入了游戏的世界。

5. 如何维持人们的兴趣？

很多人列举了自己使用多年的产品，这些产品都很枯燥，但是用户使用它们的理由更吸引人：

• 它有用，并不断地更新应用
• 它工作得当
• 非常可靠，并且买得起
• 具有可信度，易使用
• 不复杂
• 可以进行管理，自定义和排版
• 做某件特别的事做得很好
• 我的朋友也在用
• 其应用很实用
• 没有别的选择

忽然想到有些产品，在不断的升级更新中，添加了新功能，但是忽视了基本功能，这就会让用户不满，因为它不再满足基本需求。

6. 如何运用以上内容？

以上提到的这些内容，如果你想运用到生活工作中，要挑选而且要互相搭配，就好比做饭，你只需挑选自己需要的食材即可。

总结

所有这一切：诱惑也好，游戏也罢，我们是为了让用户长久喜欢，而不是一次性买卖──通过欺骗来拉拢用户。

《怦然心动：情感化交互设计指南》这本书到这里就结束了，看了很久，也看了多遍，把我的理解写了这篇读书笔记。之所以选择这种方式是因为刚开始书中的「诱惑」内容比较新鲜，所以陆陆续续就开始了。关于交互设计，这本书不会教你怎么去画某个产品的逻辑框架图，而是从生活行为到行为设计到产品设计，循序渐进去讲解，运用起来还是很难的。

欢迎关注作者的微信公众号：「Pony欧尼的日常」