用情感化交互为你的产品注入灵魂

张恒的爱心救助

张恒的爱心救助

2016-02-17 02:22

想要天天向上,就要懂得享受学习。图老师为大家推荐用情感化交互为你的产品注入灵魂,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

什么使我们成为网站和app的忠实用户?思考这个问题时,我们发现那些令人喜爱的网站和app都拥有一样东西:灵魂。它们是有灵性的,它们的用户体验中被置入了情感化智能,并且这种情感化智能通过交互设计和反馈机制得以体现。

这些要素将个性赋予了网站或app产品,并让产品最终在用户心中留下深刻的印象。不得不说,在赢得忠实用户这件事上,产品的灵魂确实扮演了一个挺重要的角色。本文中,我们将通过一些优秀的例子来了解情感化交互,以及个性和灵魂是如何灌注进产品的。

什么是情感化交互?

情感化交互设计是一种状态,指在网站或app在显示信息或实现功能时,包含了能产生人性化用户体验的种种细节。这些交互可能是大的体验(例如网站整个宕掉时),或者是小的体验(例如在表单元素旁显示的错误信息)。它可以体现在不同的要素中,例如提示信息、颜色、设计、对用户输入的响应,以及系统信息输出。将这每一种体验混合起来,就为网站创造了灵魂和个性,这种和用户间的情感联系能带来忠诚持久的狂热粉丝。

情感化交互范例

以下部分范例来自Little Big Details这个天才的网站,我强烈推荐你上去看看,一定有收获。

1.  Bottlenose

 

用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



这是一个基于Web的Twitter客户端,它给用户提供了一种新的探索和使用Twitter的方式。这家网站在用户初次使用时的引导方面做得很出色,用清晰而幽默的方式向用户介绍它的功能。网站在确认按钮上使用了诸如Make senese、Got it一类的词句,让用户感到有个性,和产品自身的自信感,这比简单的Next强多了。

2.  Wufoo

 

用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



Wufoo混合了俏皮的提示信息和触动人心的UI元素,为用户营造了一种友好和私人化的体验。例如:

 

每个页面的标题里会包含一句诗。虽然是随机显示的,但诗句强化了Wufoo典雅的产品形象,让枯燥的任务(创建表单)变得个性生动。
用情感化交互为你的产品注入灵魂,PS教程,图老师教程网
 注意New Form后面的感叹号。提到form,人们总是联想到无尽的填写,但Wufoo放了一个感叹号在这里,让这个元素充满了能量和乐趣。
用情感化交互为你的产品注入灵魂,PS教程,图老师教程网
 表单报告界面没有数据时,Wufoo并没有简单给出一个空白界面,而是通过提示信息传递出真正有个性的东西,并且鼓励和督促你创建第一份报告。用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



3.  MailChimp

作为最好的情感化交互的范例之一,MailChimp从不放过每一个可以向产品注入灵魂的机会。

 

404页:MailChimp的404页面很有才,准确的告诉用户目前发生了什么,并积极号召用户采取下一步行动,继续先前的流程体验。这招很聪明、有效,并且化解了404的尴尬。
用情感化交互为你的产品注入灵魂,PS教程,图老师教程网
 发送邮件活动(Email Campaign):用户发送了一个邮件活动后,MailChimp总是会给予用户庆祝和鼓励。This is your moment of glory这句文案很好的缓解了用户在创建邮件活动时的恐惧和期待。
用情感化交互为你的产品注入灵魂,PS教程,图老师教程网
 Twitter页面:如果MailChimp宕机了,他们的Twitter页就会换上一个特别的背景图:一只悲伤的黑猩猩正在努力修复问题。现在人们习惯去Twitter了解到底出了什么事,而这张背景图正好强化了这个Twitter账号的个性,给用户带来情感化交互体验。

4.  Pinterest

 

用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



这个当下火热的社交媒体网站在注册账号时,使用了一种有深度的交互设计。不同于传统的即时表单验证信息,当用户输入合法的邮箱和密码时,网站会给出Looks good!的提示信息。虽然这只是一个很小的触动,但足以使注册流程显得人性化。

5.  Path

 

用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



Path的注册按钮上有一个向右的箭头,而当鼠标点上去后,箭头会变成笑脸。这样,当用户与网站第一次产生交互时,就获得了一个亲切而个性的欢迎。这是一个有深度的细节,一般设计者和用户都会忽略这个地方,而当它真的出现了,就为接下来的体验定下了良好的基调。

6.  Hootsuite

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



这只友好的猫头鹰是Hootsuite的吉祥物,吉祥物不仅仅是一张可爱的脸,它甚至代表了服务本身,如同MailChimp的那只黑猩猩。Hootsuite调用Twitter的API把数据拉到自己的应用上,由于Twitter有API调用次数限制,Hootsuite会在用户长时间不活动时停止向Twitter请求数据。此时,猫头鹰会出现,告诉你它正在休息,如果你需要它的话,可以让它立刻醒来。这招巧妙的把负面体验变成了正面体验,塑造了品牌形象,并为产品带来了个性和灵魂。

7.  Feedburner

 

用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



在Feedburner中,新创建的RSS Feeds由于数据积累不够,状态页中没有东西显示。大部分网站不会在意这个情形,因为出现这种状况这并不是网站的错,而Feedburner则抓住了这个机会,因为他们知道虽然状态页还没有数据,但大多数新用户非常想立刻看到当前的Feed状态。于是他们创造了这段文案,告诉用户状态页还没准备好,在这一过程中和用户建立了情感联系,让用户觉得安心。相对于一个毫无生气的、没有任何数据的空白页面,Feedburner的这个做法是一种巨大的进步。

8.  OS X

 

用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



在关注细节这个问题上,Apple一直有着良好的声誉,并且会精细到你想不到、甚至似乎没必要的地方。例如Text Edit的小图标,放大后看,上面密密麻麻的文字其实真的是有意义的(彩蛋)笔记本上写的是Think Different宣言。这是向他们传奇创始人的致敬,同时也提醒人们他们为什么爱Apple。

9.  Highrise iOS

 

用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



在安装37Signal的Highris应用时,你可以和电脑玩一把九宫棋。用户体验设计师常常考虑如何用一些心理学原理去解决等待时间过长这个问题,而事实上,在等待的过程中给他们一个好玩的东西,谁还在乎等待呢?37Signals的这个方法非常简单和有效,在用户体验的死局上展示出了高超的情感化智能。

10.  Mint.com

 

用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



Mint的网站维护界面在本应该倍感压力的时候为用户创造了迷人的体验。不能访问财务信息会让你焦虑,而Mint借用这个机会,以一种搞笑的方式告诉你,虽然网站不能访问了,但你的钱和信息都是安全的。

11.  Deviant Art

 

用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



Deviant Art用肖像画框作为用户个人信息设置的交互背景。这么做不仅贴合了网站的主题(美术家社区),同时对新用户用户完成个人信息有鼓励作用。

12.  Tumblr

 

用情感化交互为你的产品注入灵魂,PS教程,图老师教程网



当你在Tumblr里听音频文件时,URL里会包含请不要下载这个音频文件,不然Tumblr就没法继续在网站放音频文件了的字样。不得不说,这是一种更聪明的与用户交流的方式,而不像js弹窗那么冷冰冰。

为你的网站注入灵魂

产品设计人员需要关注那些通常被忽视的用户体验小细节,通过对这些细节的优化,app将产生个性,同时建立稳定的忠实用户群。重温一下上面提到的案例,或许能帮你在未来的项目中举一反三。细节确实能决定网站或app的成败。努力创造良好的体验是我们所知的赢得用户的最佳方式,并且能为你的网站带来生命和灵魂。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)
展开更多 50%)
分享

猜你喜欢

用情感化交互为你的产品注入灵魂

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
用情感化交互为你的产品注入灵魂

产品的情感化设计

设计 情感
产品的情感化设计

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

情感交互之移动应用产品交互趋势

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
情感交互之移动应用产品交互趋势

浅谈产品细节设计中的情感化设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈产品细节设计中的情感化设计

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

巧用情感对付孩子的哭闹

分娩
巧用情感对付孩子的哭闹

详细解析网页设计中的情感化设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页设计中的情感化设计

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

Indesign设计教程:解析杂志设计的新的技巧

Indesign设计教程:解析杂志设计的新的技巧

浅谈ipad阅读类应用设计技巧

浅谈ipad阅读类应用设计技巧
下拉加载更多内容 ↓