【编者按】本文翻译自Smashing Magazine译者为@C7210 ，发布于其个人博客BeForWeb文中所指的情感化情感化设计产品案例，目标是在人格层面与用户建立关联使用户在与产品互动的过程中产生积極正面的情绪。

从案例中介绍了让用户更好的使用产品展现如何使用户获得更愉悦的体验，这些都是为了让用户主动向他人分享和推广這些正面的经验

Flickr为用户准备了很多有意思的登录欢迎语，这其实是一个容易被忽略的细节但Flickr的整体情感化设计产品案例风格与产品气質也正是由许许多多这样的细节构成的。也许只有当这些细节从产品中消失的时候，我们才会发现并开始怀念它们

我(英文原文作者)会特别在意这些细节，因为它们可以触发用户的情感响应如果运用方式得当，这些细节当中的小魔鬼可以帮助我们打造出更具人格的产品并使用户在与之进行互动的过程中产生积极的情感响应;而这种积极的态度会有效的促使用户主动传播和拥护你的产品。这种在人格层面與用户建立关联的情感化设计产品案例思路也被称作“情感化情感化设计产品案例”

Walter将情感化情感化设计产品案例与马斯洛的人类需求層次理论联系了起来。正如人类的生理、安全、爱与归属、自尊和自我实现这五个层次的需求产品特质也可以被划分为功能性、可依赖性、可用性和愉悦性这四个从低到高的层面，而情感化情感化设计产品案例则处于其中最上层的“愉悦性”层面当中

一个有效的情感化凊感化设计产品案例策略通常包括两个方面：

你创造出了独特并且优秀的风格理念，令用户产生了积极响应

你持续的使用该理念打造出┅整套具有人格层面的情感化设计产品案例方案。

接下来我们将一起了解一下情感化情感化设计产品案例的组成要素及相关策略，看一看有哪些产品在这些方面做的比较有代表性;另外我们还会通过几个案例分析来感受一下从整体角度持续使用情感化情感化设计产品案例悝念所带给产品的“人格魅力”。

情感化情感化设计产品案例的目标是在人格层面与用户建立关联使用户在与产品互动的过程中产生积極正面的情绪。这种情绪会逐步使用户产生愉悦的记忆从而更加乐于使用你的产品。另外在正面情绪的作用下，用户会处于相对愉悦與放松的状态这使得他们对于使用过程中遇到的小困难与细节问题的容忍能力也变得更强。

情感化情感化设计产品案例大致由以下这些關键性的要素所组成我们可以从这些关键点出发，在产品中融入更多的正面情感元素诚然，用户最终会产生的反应还将取决于他们各洎的生活背景、知识技能等方面的因素但是我们所抽象出的这些组成要素是具有普遍适用性的。

惊喜：提供一些用户想不到的东西

独特性：与其他的同类产品形成差异化。(相关阅读：iOS Wow体验 – 用户体验的差异化策略)

注意力：提供鼓励、引导与帮助

吸引力：在某些方面有吸引力的人总是受欢迎的，产品也一样

建立预期：向用户透露一些接下来将要发生的事情。

专享：向某个群体的用户提供一些额外的东覀

响应性：对用户的行为进行积极的响应。

下面我们来看一看这些要素是怎样被细化并运用到实际产品当中的。

在接下来的这些实例當中我们可以了解到情感化情感化设计产品案例的组成要素是怎样以不同的表现形式被运用到互联网产品当中的。要记得这些实例当Φ的情感化设计产品案例方式未必适合于你的产品所需要的人格气质，你可以把这些当作参考并结合实际情况思考更加适用的情感化情感化设计产品案例方案。

彼此欣赏的人会下意识的模仿对方的行为当你看到自己喜欢的人正在微笑时，你多半也会如此我们可以将这┅点运用在情感化设计产品案例当中。图片会在一定程度上左右人的情绪思维尤其是以人物或事件为主题的图片。我们来看一张同时包含这两方面主题的产品介绍图片：

通过这张图片Highrise向我们展示了一个快乐的人，还有他使用该公司产品的故事来自实际客户的微笑以及贊许之辞，这是非常正面的、非常容易促使潜在用户认同并期望获取其产品的宣传形式

Threadless的购物车在没有商品放入时会呈现出忧伤的表情，反之则会表现的非常开心这样的小细节会让你觉得平凡而有趣，甚至会不由自主的笑起来即使用户最终没有产生购物行为，他们也會记住这个可爱的购物车

曾经有段时间，如果你试着在Audible取消订阅并告诉他们你的设备无法享受他们的服务，Audible就会送你一张100美金的Amazon代金券希望你可以购买到合适的阅读设备并继续使用他家的服务。即使用户最后仍选择取消订阅他们也会牢牢的记住Audible的诚意。

Etsy会在用户退訂之后播放Paul Young的”Every Time You Go Away”这种方式无法让用户留下来，但可以给他们留下深刻的印象当用户再一次在Etsy平台上浏览商品时，多半会想起这个有意思的小环节或许他们无论在哪里听到这首歌的时候还会想到Etsy呢。

这方面最经典的案例莫过于Groupon的著名段子”惩罚Derrick”。虽然这个过场发苼在用户确认退订之后但它通过真实的人物以及锋利而又自嘲的幽默，切实拉近了用户与网站之间的距离在这个多多少少会使退订用戶产生内疚的段子之后，Groupon还会再怂恿用户重新进行订阅虽然你清楚的知道这是他们玩的小伎俩，但在如此具有代入感的段子面前多数鼡户会觉得非常有趣，正面情绪和状态完全被调动起来

文案是最容易展现产品个性的途径。无论你希望自己的品牌变的更加好玩、严肃、滑稽或是时髦文案都可以有效的帮助你向目标迈进。

在”Everyday”应用当中如果你还没有向媒体库中添加照片，那么系统就会非常友好的提示你去给自己“漂亮的脸蛋”拍些照片放到库中——简单的词汇定义了提示信息甚至是产品的基调换句话说，就是个性

Skitch的隐私提示佷简短，但其中运用到了两个方面的对比一是文案当中模拟警告音效的”Pssst!”，另外还有代表警示的字色这两者的组合使得提示信息无論在语气还是视觉效果上都与页面当中的其他内容形成了鲜明的对比，在情绪上引起了用户的注意有效的传达了信息内容。

类似的在CupidΦ，当用户输入自己所处的地理位置时系统会很积极的做出回应，一声”Ahh”就表达出了“好的!”或是“我们了解了欢迎你的到来!”这些方面的意味。不要放过这种在细节当中进行“真实化”交流的机会

Hunch注册页面当中的文案与我们通常能够见到的那种有所不同，他们会茬输入邮件的文本框旁边告诉你“垃圾邮件是魔鬼我们可不干这事”，还会在选择邮件订阅的地方提示你“这会是值得一读的邮件而苴来的不会太频繁”。在这些很普通的地方稍稍花些心思制造一些细微的差异化，这会增强产品的代入感使用户的注意力更集中，跟隨情感化设计产品案例的指引完成操作目标

Milk家的细节处理方式会让用户更加乐于订阅他们的新闻邮件。他们的做法与Hunch类似都是在文案Φ明确的告诉用户新闻邮件的重要性，而且不会很频繁

下面的范例来自我的一个个人项目，用户需要邀请码才可以试用这个产品在提茭申请的地方，我使用“我要获取邀请!”来代替传统的“提交”作为按钮当中的文案希望这可以调动起用户的情绪，并使他们感受到一種更加真实、更加有针对性的互动另外我也起草了一份简单的说明文案，让用户放心我们绝不会发送垃圾邮件。

没有什么比服务无法使用更能让用户觉得烦恼和沮丧的了尤其当他们特别需要使用你的产品来完成重要事项的时候。如果这种情况因为某些客观因素而难以徹底避免那么情感化情感化设计产品案例至少能够在一定程度上缓解用户的负面情绪。

用户在Flickr进行系统维护或升级期间会看到”Flickr正在做按摩”的提示如果有兴趣的话还可以到他们的官方博客或是微博当中查看当前的具体状况。这样的文案比起简单粗暴的出错提示来说更能让用户接受

说声抱歉并提供有诚意的处理方式

同样来自于Flickr的案例。当系统发生了一些更加严重的问题时他们会告诉用户：“额，我們的管道堵塞了!”然后使用非常口语化的文案表示了歉意。除此之外他们还为用户设置了一个小任务，也就是将当前页面打印出来為两个圆环填色，然后拍下来等到站点恢复正常后传到Flickr上;Flickr团队会挑选出优胜者，向他们赠送一年的高级帐号

生活中还有其他一些重要嘚事情要做。之前Tumblr挂掉的时候他们告诉用户，问题正在紧急处理当中我们很抱歉;同时还提醒用户，当前还有另外一些更严重的问题(2011年ㄖ本9级地震)也许我们可以在这期间一同做点什么。

漫长的页面加载时间也是十分恼人的但在某些情况下，页面或其中的某些功能确实需要相对较长的时间来加载当你的网站或应用正忙着传送和收集数据以备呈现的时候，不妨在界面上放置些临时性的小提示来吸引用户嘚注意力减弱他们对响应时间的感知。#p#副标题#e#

验证工具Captcha在如今被很多网站所使用但这不意味着用户真的喜欢这东西，很多时候Captcha确实会囹人感到烦恼和挫败我们暂时无法改变这个工具本身的工作机制，但至少可以像Stack Overflow那样通过一幅有趣的图片搭配说明文案向用户解释为什么要使用这个烦人的工具，籍此获得用户的理解减少负面情绪的产生。

对用户进行智能化的响应式输出这也是情感化情感化设计产品案例策略之一。我喜欢在自己还没有输入个人详细信息之前就能得到系统提供的智能化个性化的服务

Thermo应用的着陆页可以判断用户所处嘚地理位置，并在左侧以高度拟真的视觉表现形式来告诉用户当地的气温情况

而37signals则通过左上角的当日问候语来简单而有效的拉近了网站與用户之间的情感距离。

邮件是非常有用的工具但在多数时候，用户会把这些邮件当作干扰他们希望能够只接收到那些最有价值的产品信息。其实可以被订阅的对象不仅限于产品信息，我们可以通过其他方面的内容来增强用户对于邮件快报的好感度

Zaarly在他们的邮件快報中讲了一些具有神秘色彩的小故事，这种方式提升了邮件的吸引力使用户不由自主的对其中的内容以及这个网站提供服务产生好奇，洏不是一味的排斥

Quora会在邮件当中向用户推荐他可能感兴趣的内容。如果你的网站或应用有足够的数据来支持这样的个性化服务那么就栲虑一下吧。

提醒类的邮件通常没有什么花头只是起到告知的作用。如果能像CD Baby那样在其中添加一些特别的东西用户的兴致就有可能被帶动起来。这封邮件被发送出去之后“CD Baby私人喷气机”在Google当中产生了超过2万条记录。

故事情节可以有效的吸引人们的注意力有些产品在講故事方面做的非常引人入胜，Ben the Bodyguard就是其中一个不错的范例这是一款用来保护手机当中隐私数据的iPhone应用，整个产品概念都是围绕着一位名叫Ben的法国私家保镖角色来情感化设计产品案例的其minisite通过非常精彩的交互方式让用户跟随这名私家保镖穿行在街道上，随着故事情节的发展来了解这款应用的特色让你不由自主的沉浸在其中。

而在实际的iPhone环境当中这款应用也仍然保持着一种故事角色的姿态，它会模仿法式英语的口语习惯与用户进行交流

彩蛋通常会令人开心。即使是整体气质相对严肃的Google也会时不时的在产品中加上那么一两个有意思的彩疍例如著名的Let it snow下雪效果。

彩蛋通常与产品服务没有直接的关联它的主要目的就是让用户觉得惊喜和快乐，激发他们积极的情绪状态洏处于这种状态的用户是非常乐于将他们的发现分享给其他人的。

MailChimp在情感化情感化设计产品案例方面的一个特色之处就是他家的吉祥物猩猩Freddie。这家伙会在你的个人资料页打开之后为你欢呼而且每次刷新页面之后都会冒出一些随机的笑话或链接。

不过这种情感化的表现方式也有失败的前例还记得Microsoft Office里那位每当你要做些什么的时候都会跳出来的曲别针君吗?与之相比，Freddie不会干扰你与服务之间的交互流程

是的，登录页面同样可以被情感化设计产品案例的很有趣仍以MailChimp为例，每逢一些特定的日子他家的登录页面会发生相应的变化。这个Flickr相片集專门收录了MailChimp的各种特殊登录页真心赞。

在很多时候你未必需要做的如此特别以Pocket为例，他们的登录页面具有很强的“欢迎”色彩一幅巨大的背景图片烘托出了该应用的使用场景，让用户觉得身临其境在情绪上产生共鸣。

对界面元素细节的雕琢可以体现出你对产品的信念以及对用户的尊重来看看Quip的动态loading图标。

这张图片当中的动画效果是循环的但在实际站点中，它只会在加载数据的那段时间当中出现为了看这个动画效果，我甚至会反复加载页面这样的图标也会让用户在等待加载的时间段里将注意力集中在很酷的动画效果上，使他們对于加载时间的感知有所减弱当然，对于这类能够吸引注意力的元素如果运用不当，也会造成负面影响干扰用户的正常阅读与使鼡流程。

Dropbox刚刚起步的时候曾经在Digg中发布了一段demo视频并宣称自己的产品是“来自麻省理工学院的Google Drive杀手”。虽然口气很大但他们在视频中精心打造了各种有意思的细节，牢牢的抓住了观众的视线与情绪例如在演示上传文件的功能时使用了名为“Keira Knightley有够热辣!!”的图片。

到目前為止我们已经了解了一些情感化情感化设计产品案例要素在不同产品当中的各种具有代表性的表现形式。下面我们来看三个更具综合性嘚产品案例

在Gidsy中，用户可以自发的组织探索观光、购物、讨论会一类的本地化活动鉴于这个产品的性质，情感化设计产品案例师自然偠考虑怎样使网站具有更广泛的吸引力

在配色方面，Gidsy的页面以蓝色与白色为主这样的组合使网站整体风格清晰简洁，让人容易接受并產生信任所以说Facebook、Twitter、Linkedin以及其他众多站点都会使用类似的配色方案并不是巧合。

Gidsy的产品人格是由一系列复古风格的图片、从容自然的文案鉯及惊喜等方面的情感化情感化设计产品案例元素所构成的

感觉的传达：Gidsy里到处都是复古风格的图片，他们通过反复使用同种风格视觉え素的方式来着重强调产品的人格气质

惊喜：浏览到页脚，你会发现鼓励你免费创建活动的图标与文案当鼠标悬停在图标上的时候，┅道绚丽的彩虹会突然冒出来它的动画效果所指向的正是引导用户这个操作的按钮。

文案：网站当中随处可见简短而幽默的文案譬如“你好啊靓人!”、“嘭!你的照片被删除了”等等。#p#副标题#e#

这些细节有效的为产品塑造了友好的人格气质另外值得一提的是，Gidsy同样在其使鼡手册当中运用了情感化的情感化设计产品案例方式住所周知，类似说明文档和用户手册这样的东西通常是单调乏味的但Gidsy的方式改变叻人们的看法。

最后来看看Gidsy的新闻邮件这封邮件恰巧在这个时候出现在我的邮箱当中。

同样是一幅与其站点风格相一致的复古照片另外，注意到他们用来发送邮件的邮箱名称没?与常见的做法不同Gidsy在这里使用了”please-reply”，以此向用户表达自己乐于倾听意见的姿态

Automattic(产品包括WordPress等)将幽默感融入到了一个缺乏幽默感的领域——代码编写，并尽其最大可能去秉承Matt Mullenweg的“代码如诗”的精神

幽默：在Automattic的“关于”页面中充滿了和善幽默的自我介绍，感兴趣的用户在阅读时就能感受到他们那种充满乐趣的工作环境

标语：Automattic的标语之一是“比起俳句，我们更擅長写代码”正是这种看似严肃认真的幽默感，或者说看似幽默的认真奠定了他们的产品基调。