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

3顶
0踩

Web前端

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

2012-05-09 16:54 by 副主编 MnouW 评论(1) 有4117人浏览
交互 设计 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前端开发书籍推荐

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

  • 网络编程Netty框架深度解析：NIO核心技术、线程模型与高性能网络应用设计

    内容概要：本文档详细介绍了Netty框架的核心概念、特点、线程模型、序列化协议选择及其实现细节。首先对比了BIO、NIO和AIO的区别，重点阐述了NIO的非阻塞特性及其基于事件驱动的工作原理。接着深入讲解了Netty的高性能表现，包括零拷贝技术、心跳机制、内存管理、流量整形等方面。文档还探讨了Netty的线程模型，包括单线程、多线程和主从多线程模型，并解释了NIOEventLoopGroup的源码实现。此外，文档讨论了TCP粘包/拆包问题及其解决方案，以及常见的序列化协议（如JSON、Protobuf、Thrift等）的特点和适用场景。 适合人群：具备一定网络编程基础，特别是对Java NIO和Netty框架有一定了解的研发人员和技术专家。 使用场景及目标：①理解NIO与传统BIO的区别，掌握NIO的非阻塞特性和事件驱动模型；②深入了解Netty的高性能设计原则，包括零拷贝、心跳检测、内存管理和线程模型；③掌握TCP粘包/拆包的原理及解决方案；④根据具体应用场景选择合适的序列化协议。 阅读建议：本文档内容较为深入，建议读者在阅读过程中结合实际代码和应用场景进行理解。对于Netty的线程模型和序列化协议部分，可以通过实际编程练习加深理解。特别地，理解NIOEventLoopGroup的源码实现需要有一定的Java多线程编程基础。

  • 美高森美提供的SmartFusion2 SoC FPGA双轴电机控制套件带有模块化电机控制IP集和参考设计.doc

    美高森美提供的SmartFusion2 SoC FPGA双轴电机控制套件带有模块化电机控制IP集和参考设计.doc

  • 基于三菱FX1S PLC和威纶通触摸屏的双伺服打孔机控制系统开发详解

    内容概要：本文详细介绍了使用三菱FX1S系列PLC和威纶通触摸屏构建双伺服打孔机控制系统的开发过程。主要内容涵盖系统架构、PLC程序设计、触摸屏配置以及开发中常见的注意事项。系统的核心在于通过PLC控制伺服电机完成精确的打孔动作，触摸屏则用于参数设置和运行监控。文中还讨论了伺服电机的参数配置、循环控制逻辑、MODBUS通信配置、界面设计及实时数据更新等方面的内容。此外，作者分享了一些实际开发中的经验和教训，如伺服电机的过冲和欠冲问题、程序稳定性的保障措施以及触摸屏响应速度的优化。 适合人群：从事自动化控制领域的工程师和技术人员，尤其是对PLC编程和伺服控制有一定基础的人群。 使用场景及目标：适用于需要高精度定位和控制的工业应用场景，如钣金加工车间。目标是帮助读者掌握双伺服打孔机的开发流程，提高系统的稳定性和效率。 其他说明：文中提到的技术细节和实践经验对于理解和解决类似项目的难题非常有帮助。建议读者在实践中结合具体情况进行调整和优化。

  • 太远市-小店区-街道行政区划_140105_Shp数据-wgs84坐标系 (1).rar

    街道级行政区划shp矢量数据，wgs84坐标系，下载直接使用

  • 乌兰察布市-乌兰察布市-街道行政区划_150900_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据，wgs84坐标系，下载直接使用

  • 呼伦贝尔市-满洲里市-街道行政区划_150781_Shp数据-wgs84坐标系.rar

    呼伦贝尔市-满洲里市-街道行政区划_150781_Shp数据-wgs84坐标系.rar

Global site tag (gtag.js) - Google Analytics