情感化设计:从零开始

你是否曾经考虑过怎样让一个东西变得更美或更糟糕?为什么人们喜欢她而不是你?Aarron Walter 在他的书籍“情感化设计”中回答了这个问题。

接下来,我们将分享一些秘密武器教你如何把情感化设计运用到你网站产品或服务上。为了更好的理解这个问题,你可以先看看该领域的专家唐诺德·诺曼在TED上演讲的《设计使人快乐的3种方式》

我们每天面对巨大雷同和重复的网站,单调并不是吸引客户的最佳工具。

通常网站创造者都应该使网站脱颖而出,来吸引客户,所以设计师和开发者需要创作一个像磁铁一样吸引客户的网站。

号外推荐:30个快速的方法使你的网站越漂亮

情感化设计的关键因素

有很多书籍和网上教程教你如何创建一个正确的网站:使用漂亮的图片,字体和颜色的组合,有趣的内容文字,关注最新的设计趋势等。但没有人会告诉你如何创建一个令用户印象深刻的网站,且有回头客。

答案很简单(大道至简),唤起用户积极的情绪即可,如:

  • 快乐的
  • 高兴的
  • 惊喜的(一些意想不到和令人愉快的事情)
  • 关心的(帮助的建议,没有义务?也需要这么做)
  • 期望的(在发布前告诉用户一些有趣的事)
  • 独占权(寻找利基市场,如家庭主妇)
  • 结合强烈的个性

所有这些因素是情感化设计的基础。然而,应当为每个特定的品牌和目标受众选择适当的策略。让我们来看看运用情感化设计极佳的网站。

人之初,人类本性

父母都非常爱他们的孩子,即便孩子们整天哭闹和挑战你感官的便便,但是为什么父母能忍受这个呢?我们的头脑能直接感知孩子脸庞的面积(大大的眼睛和小小的鼻子),天真脆弱的表情。

婴儿给人信任感和爱。看一个孩子手无寸铁的脸,你就别无所求了。相同的逻辑可以运用在卡通上,这里是些例子:

MailChimp

1-emotional-design-how-to-make-things-work-better

Netbluez

2-emotional-design-how-to-make-things-work-better

OurBabyBox

3-emotional-design-how-to-make-things-work-better

我们敢肯定,你知道很多这样类似运用情感化设计的网站。

笑一笑,保持住

大众甲壳虫汽车被公认为历史上最成功的汽车设计。圆圆的前照灯像是对你发出微笑的眼睛,这是人性化的设计,让众多拥有者感觉是和一个人在联系。

4-emotional-design-how-to-make-things-work-better

如果一个人对你笑,你也会回应。运用到网站中也是如此:

Your Karma

5-emotional-design-how-to-make-things-work-better

GOEasy Cloud

6-emotional-design-how-to-make-things-work-better

你也想笑是不是?你会感觉到这些产品或服务使你快乐,作为回应,你也会购买。这是聪明的营销策略。

幽默一下,快乐至上

如前文提到的,当访客遭遇意想不到的情况发生时,你应该做出积极的情感回应。比如 Freakify 的404错误页面:

7-emotional-design-how-to-make-things-work-better

你看到什么了?”你想射我?”“来吧,枪毙我吧!”然后,你会看到惊喜的一面:

8-emotional-design-how-to-make-things-work-better

还有如Apartment Home Living网站的404页面:

9-emotional-design-how-to-make-things-work-better

然后你移动鼠标到马桶那里,你看到了什么:

10-emotional-design-how-to-make-things-work-better

这类型的网站足够使你回味无穷的大笑,甚至想病毒一样传播,你会把它分享给你的朋友。

注意了,看这里

如果你做些事情来显示你关心你的每一位访客,他或她肯定知道也会记住你。比如Xixi网站

11-emotional-design-how-to-make-things-work-better

一个吉祥物在问:你希望我做你的英语翻译吗?选择yes,输入你的姓名,当你鼠标划过单词时吉祥物就会为你翻译。知道如何设计个性化的注意力了么?

小更美,关注细节

photojojo网站那样,靠细节吸引注意力。当你没购物时,购物车是灰色和不开心的。

12-emotional-design-how-to-make-things-work-better

当你增加到购物车时,购物车变成绿色和开心了,多么令人惊奇的情感化设计。

13-emotional-design-how-to-make-things-work-better

此外,还有更酷的页面细节设计。打开产品详细页,在展示图片的旁边有个杠杆:别拽。好奇的顾客总会拉一拉。试试然后和你的商店对比一下。

14-emotional-design-how-to-make-things-work-better

另外一个运用情感化设计的网站是Threadless,加入购物车将显示快乐。

16-emotional-design-how-to-make-things-work-better

如果移去商品,将显示“悲伤由孤独的”。

17-emotional-design-how-to-make-things-work-better

噢,麻烦来了,别急

你可以把遇到的麻烦处理像Tumblr一样变成一种优势,一个大轻博客平台也不是没有休息的时候,宕个机也是有的。这里两个页面看他们是怎么有效解决问题的。

Tumblr – 我们很快就回来了

一个有趣和与众不同的“Tumblr宕机页面”会安抚你的愤怒。

18-emotional-design-how-to-make-things-work-better

Tumblr – 我们非常抱歉

这是个提醒,比起Tumblr页面不工作,生活中还有更严重的麻烦。

19-emotional-design-how-to-make-things-work-better

总结了

我们收集了这些例子显示如何将个性化的情感设计融入到你的品牌。你是如何处理情感化设计的呢?在评论下面与我们分享。

2 条评论

发表评论

您的电子邮箱地址不会被公开。