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

3顶
0踩

Web前端

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

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

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

  • qt5-qtmultimedia-5.9.7-1.el7.x64-86.rpm.tar.gz

    1、文件内容：qt5-qtmultimedia-5.9.7-1.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/qt5-qtmultimedia-5.9.7-1.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装

  • Java毕业设计-ssm-jsp-简易版营业厅宽带系统(源码+sql脚本+32页零基础部署图文详解+29页论文+环境工具+教程+视频+模板).zip

    资源说明： 1：csdn平台资源详情页的文档预览若发现'异常'，属平台多文档切片混合解析和叠加展示风格，请放心使用。 2：32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署，保姆级图文详解)，旨在为更多的人甚至零基础的人也能运行、使用和学习。 3：配套毕业论文，万字长文，word文档，支持二次编辑。 4：范例参考答辩ppt，pptx格式，支持二次编辑。 5：工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6：资源项目源码均已通过严格测试验证，保证能够正常运行，本项目仅用作交流学习参考，请切勿用于商业用途。 7：项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通。 内容概要： 本系统基于B/S网络结构，在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据，可靠性强。 能学到什么： 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。

  • Java毕业设计-ssm-vue-校医务系统(源码+sql脚本+32页零基础部署图文详解+环境工具+教程+视频+模板).zip

    资源说明： 1：csdn平台资源详情页的文档预览若发现'异常'，属平台多文档切片混合解析和叠加展示风格，请放心使用。 2：32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署，保姆级图文详解)，旨在为更多的人甚至零基础的人也能运行、使用和学习。 3：范例参考毕业论文，万字长文，word文档，支持二次编辑。 4：范例参考答辩ppt，pptx格式，支持二次编辑。 5：工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6：资源项目源码均已通过严格测试验证，保证能够正常运行，本项目仅用作交流学习参考，请切勿用于商业用途。 7：项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通。 内容概要： 本系统基于B/S网络结构，在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据，可靠性强。 能学到什么： 使用ssm搭建后台。VUE框架构建前端交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。

  • Self-supervised Equivariant Attention Mechanismfor Weakly Supervised Semantic Segmentation.zip

    Self-supervised Equivariant Attention Mechanismfor Weakly Supervised Semantic Segmentation，含有完整的代码和论文

  • 基于python深度学习识别猫的声音-含数据集和训练识别代码.zip

    本资源包含数据集有猫的三种声音-高音声、哈气声和喵呜声。 通过python、pytorch环境运行。 环境的安装可参考： https://blog.csdn.net/no_work/article/details/145416261 代码整体是非常简便的，总共三个py部分和一个数据集在data文件夹下。 运行python 01数据集文本生成制作.py 会在logs文件夹下生成2个txt文本，分别存放了wav音频的路径和对应的标签。 运行python 02train.py就会训练这个txt文本里面的数据，并将训练的模型与验证集里面的数据进行验证。 最后模型也是保存在logs文件夹下。 最后运行python 03pyqt.py即可加载训练好的模型，对输入的音频进行识别。

  • Java毕业设计-ssm-jsp-旅行社管理系统(源码+sql脚本+32页零基础部署图文详解+30页论文+环境工具+教程+视频+模板).zip

    资源说明： 1：csdn平台资源详情页的文档预览若发现'异常'，属平台多文档切片混合解析和叠加展示风格，请放心使用。 2：32页图文详解文档(从零开始项目全套环境工具安装搭建调试运行部署，保姆级图文详解)，旨在为更多的人甚至零基础的人也能运行、使用和学习。 3：配套毕业论文，万字长文，word文档，支持二次编辑。 4：范例参考答辩ppt，pptx格式，支持二次编辑。 5：工具环境、ppt参考模板、相关电子教程、视频教学资源分享。 6：资源项目源码均已通过严格测试验证，保证能够正常运行，本项目仅用作交流学习参考，请切勿用于商业用途。 7：项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通。 内容概要： 本系统基于B/S网络结构，在IDEA中开发。服务端用Java并借ssm框架(Spring+SpringMVC+MyBatis)搭建后台。用MySQL存储数据，可靠性强。 能学到什么： 使用ssm搭建后台。学习使用jsp、html构建交互界面、前后端数据交互、MySQL管理数据、从零开始环境搭建、调试、运行、打包、部署流程。

Global site tag (gtag.js) - Google Analytics