资讯频道 → Web前端
阅读更多

3顶
0踩

Web前端

转载新闻 用情感化交互为你的产品注入灵魂

2012-05-09 16:54 by 副主编 MnouW 评论(1) 有4089人浏览
交互 设计 UI 用户体验
什么使我们成为网站和app的忠实用户？思考这个问题时，我们发现那些令人喜爱的网站和app都拥有一样东西：灵魂。它们是有灵性的，它们的用户体验中被置入了情感化智能，并且这种情感化智能通过交互设计和反馈机制得以体现。

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

什么是情感化交互？

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

情感化交互范例

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

1.  Bottlenose



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

2.  Wufoo



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

  • 每个页面的标题里会包含一句诗。虽然是随机显示的，但诗句强化了Wufoo典雅的产品形象，让枯燥的任务（创建表单）变得个性生动。


  • 注意“New Form”后面的感叹号。提到“form”，人们总是联想到无尽的填写，但Wufoo放了一个感叹号在这里，让这个元素充满了能量和乐趣。


  • 表单报告界面没有数据时，Wufoo并没有简单给出一个空白界面，而是通过提示信息传递出真正有个性的东西，并且鼓励和督促你创建第一份报告。


3.  MailChimp

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

  • 404页：MailChimp的404页面很有才，准确的告诉用户目前发生了什么，并积极号召用户采取下一步行动，继续先前的流程体验。这招很聪明、有效，并且化解了404的尴尬。


  • 发送邮件活动（Email Campaign）：用户发送了一个邮件活动后，MailChimp总是会给予用户庆祝和鼓励。“This is your moment of glory”这句文案很好的缓解了用户在创建邮件活动时的恐惧和期待。


  • Twitter页面：如果MailChimp宕机了，他们的Twitter页就会换上一个特别的背景图：一只悲伤的黑猩猩正在努力修复问题。现在人们习惯去Twitter了解到底出了什么事，而这张背景图正好强化了这个Twitter账号的个性，给用户带来情感化交互体验。
4.  Pinterest



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

5.  Path



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

6.  Hootsuite



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

7.  Feedburner



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

8.  OS X



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

9.  Highrise iOS



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

10.  Mint.com



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

11.  Deviant Art



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

12.  Tumblr



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

为你的网站注入灵魂

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

原文：Give Your Website Soul With Emotionally Intelligent Interactions    译者：Ven
  • 大小: 166.4 KB
  • 大小: 164.7 KB
  • 大小: 164.7 KB
  • 大小: 52.2 KB
  • 大小: 97.1 KB
  • 大小: 145 KB
  • 大小: 20.5 KB
  • 大小: 99.5 KB
  • 大小: 111.1 KB
  • 大小: 33.4 KB
  • 大小: 52.8 KB
  • 大小: 89 KB
  • 大小: 45.6 KB
  • 大小: 199 KB
  • 大小: 213.7 KB
  • 大小: 16.2 KB
3
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 illinna 2012-05-15 13:55
非常好！ 

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Professional JavaScript for Web Developers 2nd Edition

    JavaScript最新经典教程 * Amazon超级畅销书 * AJAX程序员必备 　随着国内的计算机图书市场越来越细化，各类引进版和原创图书在各自领域内如雨后春笋般展露头角，各类“经典”和“圣经”横空出世。但是有一个领域内...

  • 25+本来自亚马逊的JavaScript & jQuery畅销书籍

    今天给大家介绍一些亚马逊上畅销的JavaScript & jQuery方面的书籍。它们固然都来自国外的作者之笔， 不过这些技术对于对于我们来说并不陌生，想学习JavaScript & jQuery的朋友，如果英文不是问题，不妨看看。 它们...

  • 算法学习之路和程序员(技术)学习必读书籍

    严格来说，本文题目应该是我的数据结构和算法学习之路，但这个写法实在太绕口——况且CS中的算法往往暗指数据结构和算法（例如算法导论指的实际上是数据结构和算法导论），所以我认为本文题目是合理的。 这篇文章...

  • JavaScript高级程序设计:第2版(china-pub首发)

    JavaScript高级程序设计:第2版(china-pub首发) 基本信息 原书名： Professional JavaScript for Web Developers 原出版社： Wrox 作者： (美)Nicholas C. Zakas 译者： 李松峰 曹力 丛书名： 图灵程序设计丛书...

  • 成为编程大牛很简单，把这些书看个八成就OK

    自从开博以来，经常会有朋友在论坛，微博，和QQ上提问学习X技术读什么书合适（例如：学习Java读什么书合适？如何学习程序设计？）所以我在这里列出了一个“快速通道”——把常见的问题集中在一起，点击问题，即可...

  • 程序员必读书籍

    自从开博以来，经常会有朋友在论坛，微博，和QQ上提问学习X技术读什么书合适（例如：学习Java读什么书合适？如何学习程序设计？）所以我在这里列出了一个“快速通道”——把常见的问题集中在一起，点击问题，即可...

  • 程序员学习必备书单汇总，超全！

    其实，最近这段时间，真的很适合阅读，相信很多小伙伴在之前的阅读都是碎片式的，所以这段待在家的时间，真的建议小伙伴们可以好好读一本书，或者认真地钻研一件事。 今天的分享主要分为程序设计、软件开发、以及...

  • 《JavaScript高级程序设计》即日称王

    前面预告了JavaScript高级程序设计一书即将出版的信息，目前这本书在专业社区和网站的宣传活动已开始，内容主要是以本书与所有出版社同类书进行PK，对比他们的优势，证集读者点评意见。本书一周后即9月15左右到货。...

  • 编程学习好书推介

    编程学习好书推介一、WEB应用开发人员必修功课类1、XHTML 教程（XHTML） 作者：Chelsea Valentine, Chris Minnick New Riders 原版，人民邮电出版社中文版 是的，今天你最应该学习的是 XHTML，而不是 HTML。...

  • Web前端开发推荐阅读书籍-精华

    读书吧~相对于在网上学习，在项目中学习和跟着有经验的同事学习，书中有着相对完整的知识体系，每读一本好书都会带来一次全面的提高。而如果深一脚浅一脚的学习，写出代码的质量会参差不齐。初学者的首要任务是成为...

  • 转载--程序员最喜欢的技术书大都出自这 20 家出版社

    我的评论：程序员买书的重要参考，搬砖5年了，没能早看到这篇文章，分享给大家。 下一行开始是原文====================================== 你好，这是“程序员阅读指北”公众号的第一篇文章，我是 IT 出版行业老...

  • Web前端开发推荐阅读书籍

    大部分技术，熟读下列四类书籍，就是一个很好的学习提升 入门，用浅显的语言和方式讲述正确的道理和方法 全面，巨细无遗地探讨每个细节，遇到疑难问题时往往可以在这里得到理论解答 实践，结合实际中经常遇到的...

  • 编程好书推荐

    Valentine, Chris Minnick New Riders 原版，人民邮电出版社中文版 是的，今天你最应该学习的是 XHTML，而不是 HTML。HTML 4.x 已经是一个被废弃了的标准，今天的标准是 XHTML 1.0。XHTML 1.0 也不是 XHTML ...

  • Web前端开发书籍推荐

    读书吧~相对于在网上学习，在项目中学习和跟着有经验的同事学习，书中有着相对完整的知识体系，每读一本好书都会带来一次全面的提高。而如果深一脚浅一脚的学习，写出代码的质量会参差不齐。初学者的首要任务是成为...

  • java+sql server项目之科帮网计算机配件报价系统源代码.zip

    sql server+java项目之科帮网计算机配件报价系统源代码

  • 【java毕业设计】智慧社区老人健康监测门户.zip

    有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。 环境说明： 开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7及以上 数据库工具：Navicat11及以上 开发软件：eclipse/idea Maven包：Maven3.3及以上

  • 【java毕业设计】智慧社区心理咨询平台（源代码+论文+PPT模板）.zip

    zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明： 文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展，智慧社区门户网站的建设成为了可能，并被视为21世纪信息产业的主要发展方向之一 强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。 指出了智慧社区门户网站系统的编程语言为Java，数据库为MYSQL，并实现了新闻资讯、社区共享、在线影院等功能。 系统设计与功能： 文档详细描述了系统的后台管理功能，包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块：允许管理员重新设置密码，记录登录日志，确保系统安全。 新闻资讯管理模块：实现新闻资讯的添加、删除、修改，确保主页新闻部分始终显示最新的文章。 公告管理模块：类似于新闻资讯管理，但专注于主页公告的后台管理。 社区影院管理模块：管理所有视频的添加、删除、修改，包括影片名、导演、主演、片长等信息。 会员上传下载管理模块：审核与删除会员上传的文件。 留言管理模块：回复与删除所有留言，确保系统内的留言得到及时处理。

  • 计算机系统基础实验LinkLab实验及解答：深入理解ELF文件与链接过程

    内容概要：本文档详细介绍了LinkLab实验的五个阶段，涵盖了ELF文件的组成、符号表的理解、代码节与重定位位置的修改等内容。每个阶段都有具体的实验要求和步骤，帮助学生理解链接的基本概念和链接过程中涉及的各项技术细节。 适合人群：计算机科学专业的本科生，特别是正在修读《计算机系统基础》课程的学生。 使用场景及目标：① 通过实际操作加深对链接过程和ELF文件的理解；② 掌握使用readelf、objdump和hexedit等工具的技巧；③ 实现特定输出以验证实验结果。 阅读建议：实验过程中的每个阶段都有明确的目标和提示，学生应按照步骤逐步操作，并结合反汇编代码和二进制编辑工具进行实践。在完成每个阶段的实验后，应及时记录实验结果和遇到的问题，以便于总结和反思。

  • 基于关键词的历时百度搜索指数自动采集资料齐全+详细文档+高分项目+源码.zip

    【资源说明】 基于关键词的历时百度搜索指数自动采集资料齐全+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！

  • 用C语言写出一个简单的圣诞树，让你的朋友们体验一下程序员的浪漫，点开即令哦！

    第一次发文的小白，解释的不好，各位大佬勿怪哦

Global site tag (gtag.js) - Google Analytics