用户体验情感化设计课件

1、用户体验情感化设计集团客服运营支撑中心用户体验管理部2019.5.1王立芳1目录2情绪、行为、人格维度交互情感色彩情感情感设计理论实操注意被描述为一种心理能量。一位著名的心理学家米哈里契克森米哈 Mihaly Csikszentmihalyi1990年提出流（flow）这个概念将我们的注意力完全集中在当前活动上的心理和情绪状态命名为“流（flow）”,流是一种高度投入的体验，强烈的情绪投入需要并窄化用户的注意。为了让用户完成他们的认为并达到流，我们需要通过影响他们外观、声音、交互三方面情绪体验的设计，来进行情绪体验的设计，来抓住并保持他们的注意。 情感化设计是指旨在抓住用户注意、诱发情绪反应（

2、有意识的或无意识的）以提高执行特定行为的可能性的设计。3情感化设计 我们可以用价值和唤醒度潜在的维度来描述所有的情绪或情感状态。也可以用无意识/生理,意识/认知维度描述所有的情绪或情感状态。无意识/生理，唤醒度（arousal），唤醒度是指身体、大脑或特定行为的无意识激活。人们使用焦虑（anxiety）(令人愉悦和不令人愉悦)对无聊（boredom）的水平来定义它。大尺寸的图片、明亮饱和的色彩、高对比度能够提高唤醒度。心跳速率、呼吸、血压等测试指标来测试唤醒度的情况。意识/认知，价值（value）价值判断是指对事物好坏的判断。我们通常会根据事物是否令我们感到愉悦来形成这些有意识的判断。 焦虑无

3、聊愉悦图：情感的环状模型(Van Gorp, 2019 adapted from Russell, 1980)唤醒度价值情绪状态痛苦情绪维度4图：行为和动机的环状模型(改编自Russell, 19803 ; van Gorp, 20194) 情绪的不同维度会影响行为的不同方面。价值维度会影响我们是趋近（即愉悦）还是回避（即痛苦）某一物体，而唤醒纬度会影响我们做事情的动机。低焦虑或无聊导致低动机，更高的焦虑导致更高的动机。行为维度动机低动机高动机焦虑水平最佳水平（即流）动机5行为维度焦虑水平会增加到最佳水平（即流），在这之后，动机和绩效又会较低，同时焦虑增加。 产品应该被看作是“人们与其建立关系

4、的有生命的物体。” 通过使用产品时建立的关系我们会根据物体，界面和网站运行的方式和它们对我们感官的吸引力来赋予产品人格。 人类是这样的社会性动物，我们能够从任何事物（包括产品、物体和网站）中知觉到情绪表达，会感到快乐或悲伤、愤怒或消极、放松或紧张、骄傲或羞辱、有动力或无动力由于产品通常是一样的，随着时间的推移这种知觉到的情绪会变成知觉到的人格特质。对人格和产品人格的第一印象形成是快速的和无意识的，长期情绪形成人格特质。 在人际关系和产品与人关系中，人格特质是吸引力和对话的重要组成部分。它们通过影响我们喜欢的人和我们期望从遇见的人那里得到什么来塑造我们的关系。它们也影响我们与他人相处的好坏。 特

5、别说明一下，产品的人格可以存在于虚拟的世界，并被设计者所掌控，这样它们就出现在特定的时间和地点。相比于真实的人格，它们可以更简单、一致和易于识别，从而降低不确定性、建立信任。人对他人的人格印象感官：即视觉、嗅觉、听觉、味觉和触觉。人对他人的印象形成长期用户对产品人格印象人对产品印象构成设计正式属性的语言、用户提示语、声音、导航、比例、布局、对比、颜色、图像和字体形成长期真实人格产品人格6情绪、人格、产品人格、人际关系和产品与人关系人格维度 尽管人类的人格特质是复杂的，心理学家将产品人格划分为少量的具有类似特点的类别。它们将准备赋予产品、电脑和界面的人格划分为两个主要的维度：支配对顺从（domi

6、nant vs. submissive），友好对不友好（friendly vs.unfriendly）。快乐与友好的神态、愉悦和趋近行为相关，而悲伤则与不友好、痛苦和回避行为相关。图：人格的环状模型（改编自Reeves & Nass, 20195; van Gorp, 2019）顺从支配友好不友好图：表现人格的物体7人格维度支配或顺从？ 支配性的视觉特点可以描述为有棱有角的、直接的、冷酷的、暗色的、银色的、黑色的并有一个厚重的基底。 顺从的视觉特点可以描述为圆的、温暖的、明亮而清晰简明的、柔软而精美的、金色的。 如果一种人格没有表现出明显的支配性的视觉或交互特征，人们倾向于认为它是更顺从的。一

7、般来讲，你可以通过呈现一个与用户人格类似的视觉人格来吸引用户。对于吸引来说，我们会被那些与我们或我们喜欢的看待自我的方式看起来类似的事物所吸引。友好还是不友好？ 友好取决于所说的话，说话的方式（即谈话的语调）。相似性和互补性？ 研究发现，在关系的早期，相似性会占据上风，在最初的吸引中发挥关键的作用。当关系随着时间的推移而深入时，互补性变得更加重要。 用户和系统之间的交互应该是互补的，其中用户占据主导地位，而产品、界面或服务占据服从的地位。在有导游的游览中，或者在一个由系统指明步骤或有权威气息的应用中，用户和系统的地位可能会互换。图：Martha Steward 和 WWE顺从的和支配性的设计8

8、设计人格：支配或顺从？友好还是不友好？相似性和互补性？ 情绪的价值维度能够影响我们的行为（即，趋近还是回避），而唤醒维度则影响我们做事情的动机。情绪影响行为的不同方面，而随着时间的推移人们会将情绪的表达知觉为不同的人格方面。价值影响友好性的知觉，唤醒则影响支配性的知觉。 客户会被那些他们觉得与自己有着类似人格的事物所吸引。然而随着时间的推移，他们喜欢和那些与自己互补的事物互动。有用、可用和愉悦的体验有利于关系的形成。价值行为友好唤醒度动机支配性焦虑顺从支配无聊回避趋近9情绪、行为、人格维度 红色 红玫瑰象征炽热的爱情，黄色总是与富丽，权利地位相连，白色纯洁，蓝色优雅平静，黑色肃穆，邪恶等。 它

9、由12种基本的颜色组成。包含三原色，即红、黄、蓝，原色混合产生了二次色，即橙、绿、紫，二次色混合产生了三次色。 黄色 蓝色10色彩情感1 这张是来自ColorLovers的整理,大部分网站以及互联网企业的商标色彩都分布在红色系以及蓝色系附近。因为橘红色带给人温暖、热情、主动的活力感，而蓝色则具有可靠、专业的形象感，可以说都是网路公司形象上致力想营造出的形象。 从一个客户网站分析公司KISSmetrics的调查报告图表中，我们清晰的看到，男性和女性都喜欢蓝色和绿色，或许这是自然中最常见的色彩；男性和女性都比较讨厌橙色和褐色。而不同的是男性喜欢黑色，而女性则讨厌灰色；女性则喜欢紫色，而男性则讨厌紫

10、色。因而得知男性和女性对于色彩的喜好度是有所偏差的。11色彩情感2色彩能够在理解和决策阶段起到决定性作用 美国流行色彩研究中心的一项调查表明，人们在挑选商品的时候存在一个”7秒钟定律”：面对琳琅满目的商品，人们只需7秒钟就可以确定对这些商品是否感兴趣。在这短暂而关键的7秒钟内，色彩的作用占到67 %，成为决定人们对商品好恶的重要因素，这就是20世纪80年代出现的”色彩营销”的理论依据。色彩能够决定转化率的差距 美国数字营销公司Hubspot曾经做过一场A/B Testing，用于测试不同颜色对于用户点击转化造成的差异。 在上图中，左右两个测试页面在内容上完全一致，唯一不同的是按钮的颜色，在超过

11、2000人次的样本测试中，最终红色方案的点击率超过绿色方案的点击率足足21%。 因为红色具有刺激心血的紧迫感，常出现在清仓场景，而橙色的呼叫意味浓厚，用于创建下订、购买、出售的行动，所以红色和橙色一般用于购物网站或App的购买和支付按钮。另外还会用于一些错误提示页面，表示警示提醒你注意。 因为绿色代表着安全、通行、准许的意思，可以让人感到轻松，缓解压力，所以绿色通常用于开始按钮和下载按钮，还有成功提示页面。12色彩情感3 随着情感计算（affective computing）等技术的不断发展，情感交互成为高级信息时代人机交互的主要发展趋势。（如图所示）情感交互就是使人机交互可以像人与人交互一样

12、自然、亲切、生动和富有情感。 人与人进行交流时，是通过人脸表情、语音情感、带有感情的肢体动作、文本情感信息等来感知对方的感情。因此情感交互可以从人脸表情交互、语音情感交互、肢体行为情感交互、生理信号情感识别、文本信息情感交互等方面进行探索。另外人与人的交流可以通过表情、语音、眼神、手势等方式进行，而机器没有人脸和躯体，那么仿生代理（lifelike agent）将是实现情感交互的重要媒介。13交互情感1 人脸表情交互是情感交互的一个重要方向，交互模型为：识别人脸表情既而感知人的情感和意图，再生成与之对应的表情与人进行交互。现在对于识别人脸表情既而感知人的情感和意图的技术已经有诸多的人脸表情数据

13、库及表情特征提取技术供设计参照。人脸表情的自然生成也在向着智能化的方向发展，将通过社交环境、上下文语境的来智能生成。现阶段人脸表情交互在移动应用产品设计中应用举例：1）“twikao”一款由Takuto Onishi开发的iOS应用程序“twikao”，可以帮用户把人物面部真实表情转化成“kaomoji”，即文字符号表情。打开应用，用户可以通过该应用读取自己或是朋友们的照片，或者干脆通过手机直接对着某人的脸咔嚓一张面部特写照，接下来它就能实时转化为有趣的颜文字表情。再通过电邮、推特或者信短信share给朋友们。2）Avatar, 英特尔则紧跟时代潮流，与时俱进，研究出“Avatar 人脸表情模

14、拟”这一最新技术成果。当用户面对摄像头的时候，可以看到用户的真实头像，通过Vedio算法，可以将人脸表情抽象化，呈现出一个虚拟的头像，这项技术对应的情感交互比如视频聊天的时候，某种时候不太想让对方看到自己的真实长相，可以通过这项技术，更好的保护隐私。联想K800手机应用了这项最新的Avatar技术。14交互情感21、人脸表情交互 语音中的情感信息可以影响人们的交流状态。所谓“听话听音”，说话人利用不同情感表达某语句时，听者可能会有不同的反应。语音情感交互就是通过语音情感识别技术对人类的情感进行获取、识别和响应，可以使用户在自然和谐的交互模式下高效地完成任务。 语音情感交互的支撑技术是语音情感识

15、别和情感语音合成。1）语音情感识别必须以一个高质量的情感语音数据库为基础，获取情感语料，进行情感特征参数的提取。2）情感语音合成是情感计算与语音合成的交叉课题，目前也取得了一定的研究成果。 现阶段语音情感交互在移动应用产品设计中应用：1） 信息查询类产品通过语音输入来查询信息的产品如交通票务查询、话费查询等，是语音情感交互应用的重要领域。2） 辅助教学类产品一些朗读类或者表达技巧类的学习产品中可以应用语音情感交互。3） 电子商务产品利用语音情感交互可以让购物网站摒弃繁琐的用户问卷调查4） 社交、娱乐目前产品加入了语音输入功能，但也是淡出的录音传话，无法判断社交对象的情感。如果在这些产品的设计中

16、应用语音情感交互就能构筑更加拟人化的风格和更加逼真的场景，给用户更全面的感官享受。5） 虚拟人物对话虚拟人物对话如siri等产品已经开始尝试，但尚未加入情感因素。由于大多数情况下是口语化的交流，因此虚拟的人物对话应该根据用户的情感状态来调整产品本身的语音输出，以适应对话环境。案例：Emotion电话本，根据分析通话人之间语音交流的情感信息，来智能将电话簿中的人进行情感化分类：哪些是亲密好友、哪些是较为疏远的关系。结合通话频率可以分析出哪些亲密的好友应该联络了，可以发出提醒，提醒用户注重对好友的联络。15交互情感32、语音情感交互 姿势运动不仅可以由物理上的时间、空间、加速度等描述，还可以由属于

17、心理学范畴的维度描述。肢体行为情感交互是重要的情感非语言交流方式，目前得到了越来越多的研究者的关注，并取得了一定的研究成果，但人的肢体行为在特征提取及情感分类方面仍面临较大困难，需要结合上下文才能获得较为准确的识别结果，且移动终端受本身硬件条件限制，肢体行为的提取本身就存在操作不便。因此目前应用较少。 虽然生理信号可以客观地反映人的情感状态，但是仅对不同唤醒度的情感具有较好的识别效果，若要进行多种情感的分类，则需要将生理信号同表情、语音等其他通道进行融合，实现多模情感识别。 3、肢体行为情感交互4、生理信号情感识别 现阶段生理信号情感识别在移动应用产品设计中应用案例：Heart Fitness

18、利用iPhone背后的补光灯感应皮下毛细血管的跳动来测心率，同时也能感知用户此时的情绪，非常有意思。 生理变化由人的自主神经系统和内分泌系统支配，很少受人的主观控制，因而应用生理信号的情感识别更具客观性。生理信号感知情感一般通过皮肤电反应、肌电反应、呼吸信号、心电信号等，需要借助物理设备。交互情感416交互情感4研究文本中蕴含的情感信息已成为人机交互领域的研究热点。本情感分析研究可以分为词语的情感分析、句子的情感分析、篇章的情感研究、海量信息的整体情感预测四个维度。 现阶段文本信息情感交互在移动应用产品设计中应用：1） 电子商务产品通过文本信息情感提取，分析用户在电子商务网站中针对产品、服务的

19、反馈评论，向其他用户推荐受到好评的产品、服务。同时可以帮助商家高效地利用用户的反馈信息2） 网络搜索产品的个性化检索目前的搜索引擎对互联网信息进行检索时，主要方式是查找与用户提交的查询主题词相关的网页，而在其中加入文本情感分类，则可以个性化展示根据网页内容褒贬性分类这个能力的搜索结果，提升用户体验及案例：苹果专利，文本消息过滤17交互情感55、文本信息中的情感搜索结果的信息价值。3） 网络社区或游戏产品的用户兴趣挖掘根据网络社区中的用户言论，对个体的喜好进行发掘，将有助于整个社会关系网络的分析，具有潜在的应用价值。 仿生代理是完全由计算生成的图形，用来模拟现实世界中真实的人或其他有生命物体的行

20、为和动作。仿生代理具有人脸和躯体，并能通过多种交流方式与人进行信息传递。在基于仿生代理的人机交互中，仿生代理被赋予情感能力。仿生代理能够通过各种传感器获取由人的情感所引起的生理及行为特征信号，从而感知、识别和理解人类情感，针对人类的情感做出智能、灵敏、友好的反应。 现阶段情感仿生代理在移动应用产品设计中应用案例： 双双是一款社交应用，有一个非常独特的全3D仿生代理”小双”，帮助用户实时沟通、传情达意！贴心提醒：起床、约会、记得想你爱的提醒就用“闹闹”情绪传递：随时唤出小双，让她把你的情绪表演给最亲密的人偷偷问：不懂彼此的小心思？匿名打听一下，然后给Ta惊喜“工作都很忙，闺蜜之间都很少联系，双双

21、提醒我和她们定期保持联络，真好”变声趣聊：在聊天时小双能把你们的话变成有趣的声音，各种卖萌，各种欢乐永久群组：姐妹淘、球队哥们在这里建立你和兄弟/闺蜜的小圈子，随身携带18交互情感66、情感仿生代理19情感设计 一切都是假象：按钮的安慰效果 安慰剂按钮 Placebo buttons ：是指一种放置在公共场合假装有效，但实际已经停止工作的按钮。情景一：你有没有猛按电梯关门键的经验。纽约客一篇文章曾提到，在90年代初，当地的电梯都还没有关门键，这都是后来添加上的，但实际上这并没有太大的用处，只是为给人们造成猛击此次，关闭电梯一个假象，同时也能缓解人们在等待电梯下楼时的烦闷。情景二：热得不行回家马

22、上把空调调到16C。但事实上气温不可能马上下降到16C情景三：电脑卡的时候狂点击鼠标右键内的“刷新”命令。事实上，“刷新”并不能解决卡的问题。情景四：BT下载的时候让任务暂停后马上继续，希望速度能加快。从精简的角度而言,很多的设计是过度的 例如一：现在邮箱的界面内为什么需要“收信”按钮？这是一个曾经在部门内部激烈讨论的问题，因为邮箱早已经实现了同步收取，邮件一发，对方无需点击收信按钮，即可收到邮件并看到提示。 从精简的角度上说，“收信”按钮对于网页端来说，这个按钮就显得多余了，因为网页能够做到实时的同步了。（所以Gmail与Hotmail就去掉收信的按钮） 例如二：古老的win98系统有个“我

23、的公文包”功能，他主要用于同步更新文件，每次更新时，你都得点击一次“更新”才可让文件更新。可是，Dropbox把这个功能也省了。从用户的需求来说,这些设计能够让用户发泄焦灼等待的情绪 从行为心理学来讲，用计时器测量出的时间与估计的时间不完全一致。人的时间知觉与活动内容、情绪、动机、态度有关。一般来说，对持续时间越注意，就越觉得时间长；对于预期性的估计要比追溯性的估计时间显得长些。 对于信息高速传递的网络来说，用户对于一秒的等待速度都是难以接受的。但用户处于焦灼的状态时，则会不由自主的找到一种最直接方式去缓解这种情绪。对于设计师而言，就要提供像“鼠标”这样一个最直接的缓解方式。去安慰你的用户。方

24、式1：延伸现实如图1、2，惯性滚动专利示意图是苹果的，下拉刷新是Twitter的方式2：触景生情方式3：小把戏图5 微信中的蛋糕雨，快捷酒店管家日房左侧的纸巾以及提示图片图3 香蕉汁包装设计 深泽直人图4 Google搜索结果页面转跳设计20情感设计1方式4：保持新鲜感方式5：充分利用声音方式6：游戏 人们往往会忽略身边所熟悉的事物，这是人本身的适应性所造成的，当在熟悉的状态当中出现新奇有趣的东西时，人们的注意力也会被集中过来。 游戏类的APP当中，增加新的装备、新的玩法、新的资料包、隐藏关卡和作弊码 令用户能够在现有游戏框架拥有不一样的游戏体验。 输入法产品的皮肤，输入相对是一个枯燥的过程，

25、为了令用户在这个过程中能投射入一些情感，会为其制作并不断推出新的皮肤。ps.不过更换皮肤是一种被动的选择过程。 Google Doodle涂鸦，用最好的方式展现科技与艺术，以及各种软件中的小彩蛋等等。 声音对于我们的情感有一些特殊的作用，节奏和旋律的变化都能够影响到用户的情感，有时可能只是一个单一的声音。 游戏本身就充满了交互的趣味性，做为设计师需要考虑的只是如何将游戏引入到产品设计当中，或将产品以游戏的方式展示。例如：Android解锁屏幕，以游戏、益智的方式实现加密以及解屏的功能，很优秀。情感设计221情感设计222情感设计3方式6：让等待变得缓慢化且可以打发 Ghost版的系统，他不仅让

26、安装系统变得更加快，更加重要的是，安装的时候，他还能提供空当接龙，扫雷这样的游戏打发时间。 同时，基于等待需时的长短，提供的进度反馈也不一样。短时间的采用简单的loading图标，鼠标的忙碌状态；中长时间采用的是进度条。方式7：降低挫败感,尤其是多次尝试的挫败感 设计时，让机器的出错反馈风趣而又具有人性化，表现出对用户的关怀，自然就容易被用户接受。采用的方法一般为：拟人化（如豆瓣开小差了），幽默（如煎蛋超载鸡，版本二），小游戏等。 但需注意的是，对于用户的多次尝试失败，应该给予更加具有关怀性的反馈，对于用户而言，这种反馈是能够让其“内牛满面”的。如QQ邮箱的中，多次点击收信按钮的温馨提示。23

27、情感设计4 Moodoscope是一款标记心情的应用。当你选择心情标签时，都会得到一个与之对应的声音，在你迅速切换心情标签的过程中，这些简单的声音反馈就变成一首简单轻快的曲子。 口袋体检是一个健康保健应用。启动和操作过程中的反馈声音配上其界面风格，就像在干净整洁的体检中心，让人觉得自然健康，充满了信任感。当然你也不会因为它像极了医院而变得紧张，它的声音是这么轻快。声音的确是非常奇妙的语言，让人们不自觉的被吸引被影响。当然只有清爽干净的界面和有好的声音反馈可能不足以让它成为打动人心的设计。它还可以通过摄像头帮助人测心率！在测心率页面，用户只需要将手指按住摄像头，就可以检测到心率的变化。 它不是一

28、种拟人或者拟物的情感化，但却是把摄像头功能延生的情感。Angry birds的拟人化角色、拟物化界面吸引了众多的用户。你看到的每一个小鸟、小猪、猴子他们的形象加上声音反馈，是活灵活现具有了人类的情感。每一个用户在使用的时候都会赋予每个角色一个人类的情感。当其表现越来越接近或者甚至是超越使用者设定的情感，就会被深深的吸引，甚至充当起维护其形象的角色。 方式8：感官设计 还有风靡一时的摇一摇，体感互动利用电子产品和虚拟世界进行互动，的确是一件生动有趣的事情。特别是这种互动与功能巧妙的结合，让用户不再使用枯燥的方式精准的完成任务。 类似这样的交互方式还有：吹一吹、利用摄像头测心跳、利用重力感应器喝啤

29、酒等等。将体感应用到产品中的好处显而易见，模拟或还原真实场景，得到真实场景的体验感。这种感知带给使用者使用产品时的情趣和惊喜，但是这份情感能维持多久，不仅仅只依靠体感优势。24情感设计5 方式9：反思设计 阅读空气这款应用的场景都是从特定时代文化中凝练出来，将大而复杂的场景抽离，给予一个简单而小的场景。在不同的场景中，让你去做出适当的行为，以此考查你在社会生活中解读别人行为的能力如何，几个场景后它就会告诉你在这几个场景中你解读的能力是什么样。它是一个很有文化特性的应用，引人思考。虽然操作和规则很简单，但回味无穷。现实生活中的我们经常处于“云深不知处，只缘身在此山中”的状态，对于文化我们似乎还欠缺很多解读。 The alarm app是这样去表现时间的流逝，每当闹钟跳动过一秒，这一秒的数字就会落下，过一会就消失。将抽象的时间用具体的视觉形式表现出来，十分形象生动。当我盯着它看一会后，感受到了紧迫感，时间的流逝就像有形的物体一样不再属于我。时间永恒的话题，这款应用对时间的解读直白犀利，能发人深省。同时也让我想起了达利记忆永恒对时间的表现。Tre