干货有点多...

1、简述为什么着重从情感化设计角度分析，说明情感化设计的重要性。

2、情感化设计的基本定义、分类。

3、多个网页、UI案例分析。

      情感是人格的核心，根据大多数现代人的生活状况，结合马斯洛夫需求层次理论，感受到一个现象：就是很多优秀的产品是可以通过满足人们的情感需求来体现其重大价值的。“随着人们消费需求的提高以及市场竞争的日益激烈，人的感性心理需求得到了前所未有的关注，人们已经不在满足单纯的物质需求，人的需求正向着情感互动层面的方向发展。” 个人认为，情感化设计是与用户体验是否优秀关联最紧密的一点。所以借着这次设计心理学作业的机会，想要整理一些关于在APP和网页中的情感化设计的案例并分析。

首先通过网络和书籍，算是比较全面地找到了情感化设计定义：“情感化设计是指旨在抓住用户注意力、诱发情绪反应（有意识或无意识的）以提高执行特定行为的可能性设计。”可能有点不太好懂...也有其他描述：“情感化设计只是一种创意工具，表达和发挥设计师的思想和设计目的，随着时代的发展，这种创意工具将变得日益锐利。”

    《情感化设计》一书中大致描述了情感和情绪对于日常生活做决策的重要性，分为三种水平的设计与产品特点的对应关系：本能水平、行为水平、反思水平。而在“反思水平”的解释里面，最能体现情感化设计：反思水平的设计与物品的意义有关，受到环境、文化、身份、认同等的影响，会比较复杂，变化也较快。这一层次，事实上与顾客长期感受有关，需要建立品牌或者产品长期的价值。只有在产品/服务和用户之间建立起情感的纽带，通过互动影响了自我形象、满意度、记忆等，才能形成对品牌的认知，培养对品牌的忠诚度，品牌成了情感的代表或者载体。

在感受案例之前，根据自己的想法以及广大设计师对情感化设计的几个讨论点总结如下。

情感化设计重要性：社会发展，情感诉求愈发强烈、我们喜欢和人交谈，而不是机器、打动用户才可能成功...

情感化设计的组成：正能量的传达、积极合理富有感情的交互回应、惊喜彩蛋、吸引力（鼓励引导用户愿意尝试）...

情感化设计点：登录界面、引导页、吐槽反馈、客服、刷新加载、404、游戏场景、微交互与用户互动....

---------------------------------一条放轻松的分割线--------------------------------

APP和网页中的情感化设计案例赏析：

1、一直以来印象很深刻的一个小例子就是，在Readme的登录界面中，当用户输入密码时，上面可爱的猫头鹰就遮住自己的眼睛，在输入密码的过程中给用户传递了安全感和趣味。

在注册时，猫头鹰的手和眼睛还会一同指向我所选中的输入框。让用户感受到关怀，用“卖萌”的形象化解用户登录时的负面情绪。

体验链接：https://dash.readme.io/login

2、很多情感化设计即便体现在极其微小的细节里面，也有可能打动用户；比如Betterment的注册流程中，用户输入完出生年月日之后会在时间下面显示还剩多少天过生日，一个小小的关怀立马让注册的流程有了惊喜。

体验链接：https://www.betterment.com/

注册之后的信息采集也是与用户亲切对话的方式，拟人化交互。

3、石墨文档一直是我非常钟爱的一款在线协作工具，它的设计里面也存在着很多类似的小细节：

虽然只是个工具类应用，但是工作时间里客服基本一直在线，随时接待解答用户的问题，而且我遇到的都是秒回的情况。在我以前的日记里有过一段内容：

打开石墨回收站：”你一定有洁癖“，仿佛产品随时在跟我积极交流。

4、bilibili是国内最大的年轻人潮流文化娱乐社区，在它的APP设计中也存在许多情感化设计的细节：

下拉刷新：人设之间的趣味性互动，产品“诙谐有趣”的气质便从这些隐秘于界面细节之中的设计传递给了用户。 

弹窗：图案采用姐妹花形象，文案牢牢抓住用户喜好，获得好感并提高通过率。

功能包装：打赏功能经过二次元术语包装，变得趣味十足，并让用户从中获得参与感。

空状态：姐妹花出现的地方文案相应都会变成可爱风。

5、闲鱼APP的情感化设计。

闲鱼中巧妙的插画不仅刺激眼球，而且增进用户对产品的好感，大大增加进一步操作的可能性。 

内置可爱表情包，不仅使聊天变得有趣，同时表情包会变成一种形象资源，方便设计师运用在APP的各个角落，加深形象印象。

品牌形象是一只鱼，品牌与衍生物形成一个生态，呼应强化品牌印象。根据鱼的特性衍生出很多别的设定，比如： 

空白页插画师空鱼缸； 

商品（鱼）很多的地方，称为鱼塘； 

围绕鱼塘产生的积分，好比是在鱼塘边捡贝壳（鱼贝积分）； 

因为商品是鱼，用户设定为爱吃鱼的猫咪； 

虽然这些角色设定可以帮助产品和用户快速建立情感联系，但是反思设计的核心并不只停留在表面。有设计师提醒说：“吉祥物是建立情感联系的捷径，但不是最终目的，重要的是做有温度的产品”。

      6、一些充满情感化设计的网页404页面。

推特的404

这个404界面里面的星空 可以根据鼠标的移动而移动，减少用户瞬间的失落感。

给人清新放轻松的感觉，图片寓意也很形象。

设计师通过情感化的图形设计，以及充满人文关怀和社会责任的设计，让原本冷冰冰的服务器反馈变得充满人情味。

       7、包括我们每天常见的，微信的启动界面：孤独望天的人。

      8、说到社交，想起一个由歌手许嵩官方团队运营的APP：vae+。无意间发现了这个APP之后赶紧下载体验， 主要用户为许嵩的歌迷粉丝。APP包含：首页的动态（许嵩最新发布日常、新闻专访图集和视频等记录内容）、许嵩的工作行程、举办的活动、除此之外则是其他用户之间的各种形式的互动（社交广场做任务商城等）...融入这个大家庭的时候APP已经运营地有声有色了，明显感受到用户非常活跃，刚加入也很轻易就能与其他用户频繁互动，个人情感上极大欣慰和满足。仔细品味之后，不仅仅是作为粉丝的私心，从设计角度来看，对这个APP也深感喜爱。借此机会从情感化设计的角度来分享下这个产品：

APP的LOGO从许嵩的英文名vae出发，"+"意思为“家”，与目标用户之间默契传达：“这里是vae的家，来了就是一家人”，使人倍感亲切。

简单启动的第一印象细腻，清新，撩人。启动页的字句很贴切APP的本质，就是由一群喜爱许嵩的人聚集亲密互动的平台。完善资料时一个情绪化的进度条使人不忍直接跳过，小心翼翼填完信息。

APP用户黏性由许嵩本人紧紧维系，首页悬浮的一个半藏半露的圆形按钮就暗藏“玄机”，点进去是许嵩为原型的如下插画场景，初次进入的时候对话内容大致是：“hello，我是你们的许老师，欢迎来到这个大家庭，今后我会每天在这里等你...”伴随许嵩自己风格的背景音乐和亲自录音的语音对话，每天智能匹配不同对话内容，也可以亲自输入想说的话，好像爱豆就在身边，非常贴心的设计了。

在动态互动里面也有一些“小心思”，因为每一位用户都有建立一个“账户”，账户里面有“松果”、“松子”、“积分”。账户积累的方式有：每日完成任务（登录、评论帖子、被赞、赞他人主页、看排行榜、分享、听歌、在线时长）或与许老师对话、免费抽奖；购买松果；连续签到、参加线下活动、线上活动、提升等级、上热门等。账户积累可用于更好玩的操作：比如拿松子找许老师开礼盒、投喂其他用户松果、购买补签卡、提升关注数量、获得积分奖励、积累人气报名会优先被考虑见到许嵩本人、积分可以在商城兑换实物、神秘道具神秘礼包等等。总结来说就是几乎用户的每一种参与互动都会被系统记录，奖励回馈机制很妥帖，让用户知道自己的每一次操作都是可积累价值的，极大增加用户黏性。整个体系设计把用户紧紧包围，又不至于像游戏一样费心沉迷，产品和用户的相处恰到好处。

vae+ APP本身在”本能水平、行为水平“这些层面的设计虽然没有具体说到，但其实也很贴心，”反思设计“里面的情感化体现使产品更加增添了万分精彩。下图中的数据和内容可以轻易感受到每一位普通用户的热情和爱意（APP store里的评论），而这是产品本身有温度才能换来的。

9、游戏APP更是以情感化设计为主要设计手法的对象，几乎所有游戏都喜欢以讲故事的方式，用生动的故事情节带动用户积极性，并使其展开想象。这种案例举不胜举，简单取一个阐述：

纪念碑谷：游戏每个小关卡开头都会说一句，充满神秘含义的话，暗喻整个故事。

10、对于情感化设计这一块，支付宝也一直在努力下功夫。印象比较深刻的是从”蚂蚁森林“到”蚂蚁庄园“，支付宝这个应用在我和身边的朋友生活中存在感越来越高，相信大家对此也都不陌生。细想蚂蚁森林的体系是一个很简单却也很巧妙的设计，以”在沙漠种树“为由，用行为方式和支付方式获取能量，吸引了很多用户的注意力，还建立了好友之间紧密的互动关系。比如身边很多人愿意在大清早还没睡醒的时候抓起手机收取森林里的能量，所谓早期的鸟儿有虫吃，越早的人收到的能量越多，种的树越多，做的贡献也越多。不仅是清晨，平时的空闲时间里也是时不时打开支付宝偷下能量，眼看着自己种的小树苗一天天长大，最终形成一片森林。过程中参与感强烈，成就感也很多，内心想着能靠自己的行为在沙漠种些树也是很酷的，乐此不疲，用户黏性可以说是很强了。不仅如此，支付宝紧跟着又推出新的类似的功能：蚂蚁庄园，也是爱心慈善活动，喂鸡养鸡捐赠爱心，也是凭靠每个人的行为方式和支付方式。简单有趣的游戏规则，可爱的小树苗和小胖鸡，每个普通用户都能轻易参与进来，也愿意形成习惯坚持下去。

森林和庄园的背景都会随着一天时间的变化而发生变化，树苗和小鸡也有成长变化，它们随机和用户对话互动，排行榜激励用户行为。小鸡可爱的言语、俏皮的动作、幽默的表情、还会互相偷食吃，帮别人赶鸡获得奖励...很多细节都尽情利用情感化设计这张牌抓住用户的小心思。 

11、最后想集中搜集讨论一下在APP中使用情感化设计的重点对象：启动页、引导页、空状态、刷新加载..

“想去”APP里面的向下刷新加载，是一条简单的线条在动，却勾勒出一只鲨鱼不停追着一只小鱼跑的活泼场景，同时也与LOGO和品牌形象相互呼应，加深印象。

喜马拉雅、网易新闻、支付宝、网易美学、MONO。不难发现许多APP会在刷新加载这个产品和用户尴尬相处的瞬间，试图用各种方式与用户愉快交流，以此优化体验。

启动页和引导页作为用户产生第一印象的重要角色，在设计的时候同样需要多花心思，不仅要靠视觉的美感带来愉悦，还要准确表达情感主题深入人心。网络上有很多启动页或是引导页喜欢以节日为主题、以二十四节气为主题，我觉得这些都是很好的情感化切入点，给人关怀的同时也带来新鲜感。

还有很多好例子举不完。

总结到最后愈发感受到互联网产品中，情感化设计的魅力和重要性。就像刚进入大学的时候，班主任老师跟我们说的：好的设计师必定首先是一个有爱，懂得热爱生活和感悟生活的人。今后在做设计的时候也会考虑处处融入情感，让理性和感性完美融合，期待自己在这方面的进步。

注：封面中的动图截取自

dribbble设计师：Denis Sazhin

behance设计师：Jonas Mosesson

本文转自：UI中国 au小鹿