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

9顶
0踩

Web前端

转载新闻 产品细节中的情感化设计

2014-12-18 11:08 by 正式编辑 cao345657340 评论(3) 有3839人浏览
产品设计 前端开发
原研哉在他的《设计中的设计》中有介绍过这样一个案例：日本机场原来是用一个圆圈和一个方块表示出入的区别，形式简单并且好用，但设计师佐藤雅彦却用一个更“温暖”的方式来重新设计了出入境的印章：入境章是一架向左的飞机，出境章则是个向右的飞机。



通过一次次的盖章，将这种“温暖”的情绪传递给每一位进关的旅行者们。在他们的视线与印章相交的那一刻，会将这种温暖转化为小小的惊喜，而不由自主且充满善意的『啊哈』一下。一千一万次的『啊哈』就会伴随着这一千一万次对旅行者的善意与好客。这便是产品中的细节与用户直接情感化传递的结果。一兰拉面是在日本非常受欢迎的拉面店，在顾客吃完面并把汤喝完会看下碗底有这样几个字“この一滴が 最高喜びです（你最后一口是对我们最大的肯定）”，他们用这种简单的细节打通了产品与顾客感情的传递，顾客在喝完最后一口面汤是对店主的肯定，并也因为对店主的肯定同时获得了店主的感谢。产品中的情感化的细节经常会成为产品与用户之间情感传递的桥梁，这种传递情感的细节不仅可以增加用户对产品的好感度，更可以让产品更加深入人心，利于产品口碑的传播，有时候可能仅仅一句文案，一个动画，一个彩蛋都可以打动用户，使其与产品产生情感上的共鸣，这便是产品细节中的情感化设计的作用。以下便是情感化设计在网页或者App上的实际运用：

情感化设计可以加强用户对产品气质的定位

Timehop是一款让你回顾那年今日的App，它可以帮你把去年今日写过的Twitter，Facebook状态和拍过Instagram照片翻出来，帮你回顾过去的自己。Timehop为自己的产品塑造了一个蓝色小恐龙的吉祥物形象。许多小恐龙贯穿于界面之中，用吉祥物+幽默文案的方式来将品牌形象的性格特点和产品气质传达出来。 用户在打开App时就能感受到小恐龙的存在，闪屏中一个小恐龙坐在地上说了句“Let’s time travel”，立马将用户从情感上带入了App的主题——时间之旅。



有趣的地方还有很多，类似下图，在默认情况下是露出一半的恐龙在向你招手，小恐龙边上是一句不明意义的文案“My mom buys my underwear（我妈妈给我买了我的内衣）”，当你继续向上拖动时，会发现一只穿着内裤的恐龙，用户就会马上明白上面这句幽默文案的含义。



类似的地方还有下图，在设置页面顶部向下拖动会有一只摇动的小恐龙，在用户顺着他的引导不断下拉，拉到头，会发现这是一个对话的气泡，蓝色的小恐龙说了句“You made it to the top!（你拉到了最顶端！）”，产品“诙谐有趣”的气质便从这些隐秘于界面细节之中的设计传递给了用户。



一个产品能获得用户的青睐不仅要有强烈的需求、优秀的体验，更主要的是让产品与用户之间有情感上的交流，有时对细节的巧妙设计将会极大的加强用户对产品气质的定位，产品不再是一个由代码组成的冷冰冰的应用程序，拉近了与用户的情感距离。

情感化设计帮助用户化解负面的情绪

情感化设计的目标是让产品与用户在情感上产生交流从而产生积极的情绪。这种积极的情绪可以加强用户对产品的认同感甚至还可以提高用户对使用产品困难时的容忍能力。注册登录是让用户很头疼的流程，它的出现让用户不能直接的使用产品，所以在注册和登录的过程中很容易造成用户的流失。巧妙的运用情感化设计可以缓解用户的负面情绪。

在Betterment的注册流程中，在用户输入完出生年月日后会在时间下面显示下次生日的日期，一个小小的关怀马上就让枯燥的注册流程有了惊喜。



在Readme的登陆页面上，当你输入密码时，上面萌萌的猫头鹰会遮住自己的眼睛，在输入密码的过程中给用户传递了安全感。让这个阻挡用户直接体验产品的“墙”变得更有关怀感，用“卖萌”的形象来减少用户在登录时的负面情绪。



Virgin America 的注册流程非常的“拟人化”，在你输入First name以后你会收到“Hey There”的打招呼，当你在把Middle name输入好后会出现“Nice name”的提示，好像有一个人在指示你完成注册步骤一样。亲切友好的文案相比冷冰冰的话语更能得到用户的好感与共鸣，人机的对话变得更加情感化。



Basecamp则运用了一个更拟人的情感化方式在注册之中，当你在表单中输入文字是正确的时候，边上的卡通人物会开心的指着输入内容，当表单中输入错误时，小人的脸将变成一脸惊讶状。



注册和登录对于一个互联网产品来说都是相当繁琐但又缺失不了的部分，这些流程阻碍的用户不能直接使用产品。对用户来说这便是在使用产品时候的“墙”，在这些枯燥的流程中赋予情感化的元素，将大大减少“墙”给用户带来的负面情绪，同时加强用户对产品的认同感，并感受到产品给用户传递的善意与友好。

情感化设计可以帮助产品引导用户的情绪

在产品的一些流程中，使用一些情感化的表现形式能对用户的操作提供鼓励、引导与帮助。用这些情感化设计抓住用户的注意，诱发那些有意识或者无意识的行为。 在Turntable.fm中的订阅模式中有一个滑块，你付多少钱决定了猴子欣喜若狂的程度。在涉及到真金白银的操作中，给用户卖个萌也许有奇效。



在Chrome浏览器的Android版中，当你打开了太多的标签卡，标签卡图标上的数字会变成一个笑脸。使用细微的变化友善的对用户的操作进行引导。



在用户将要流失前，给予用户情感化的元素也许能挽留下一部分的用户。当你想取消订阅Spotify时，Spotify会在取消订阅的网页上为用户播放Jackson 5的“Want you back”。



有趣的文案有时比醒目的视觉元素更具有引导用户作用，当你在使用InVision切换到别的标签时，标题的标签会改成“ Don’t forget to read this…”。



人类是地球上最具情感的动物，人类的行为也常常受到情感的驱动。在界面上融入情感化元素，引导用户的情绪，使其更有效的引发用户那些有意识无意思的行为，这种情感化的引导比单纯的使用视觉引导会来的更有效果。

结语

一个优秀的产品应该是有人格魅力且让人愉悦的，这种让人愉悦的积极的情绪便是由产品中那些多多少少的情感化细节来表现出的。那些让用户“啊哈”的细节，都将会成为积极的情绪所传递下去，影响的将可以能千千万万用户的体验与口碑。
  • 大小: 35.3 KB
  • 大小: 75.1 KB
  • 大小: 73.5 KB
  • 大小: 26.9 KB
  • 大小: 7.4 KB
  • 大小: 30.6 KB
  • 大小: 17.1 KB
  • 大小: 66.3 KB
  • 大小: 47.5 KB
  • 大小: 9.2 KB
  • 大小: 48.6 KB
  • 大小: 272.5 KB
来自: 腾讯ISUX
9
顶
0
踩
评论 共 3 条 请登录后发表评论
3 楼 fengzhaoyang 2014-12-21 10:53
Good design,Warm feel
2 楼 骨之灵魂 2014-12-18 17:12
1 楼 jerry1985 2014-12-18 13:00
好文章！！！

发表评论

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

相关推荐

  • 情感化设计的组成要素及实践案例

    文中所指的情感化设计，目标是在人格层面与用户建立关联，使用户在与产品互动的过程中产生积极正面的情绪。从案例中介绍了让用户更好的使用产品，展现如何使用户获得更愉悦的体验，这些都是为了让用户主动向他人分享...

  • 设计心理学3-情感化设计【读书笔记】

    总结：本书主要讲解了 情感元素在设计领域扮演的角色，情感元素的三个层面：本能 行为 反思 并提出不同层面的设计原则。 第一部分：物品的意义 一：情感的作用 1，情感改变人脑解决问题的方式 -- 改变着认知系统...

  • 电子商务搜索引擎的细节设计

    针对suggestion的情感化设计细节处理:EBAY.COM当用户觉得不想使用suggestion,或认为suggestion会给他带来干扰的时候,用户可以选择关闭suggestion.(suggestion有的时候可能会切断用户的心流,对用户的心智模型造成影响...

  • 2018界面情感化设计，拒绝冷冰冰的人机交流

    Donald Arthur Norman， 作为享誉全球的认知心理学家和尼尔森·诺曼集团的联合创办人之一，也在其名为《情感化设计》的书籍中，从本能，行为和反思三个设计维度，讲述 了情感在界面设计的重要地位和作用，强调web或...

  • 产品场景化设计

    本文围绕什么是场景化设计，有哪些场景化设计的例子，为什么要进行场景化设计和场景化设计的具体方法，展开解读。 什么是场景化设计 生活中，场景就像戏剧、电影中的场面，泛指情景。在戏剧或影视剧里，场景由人物，...

  • 为产品赋予人格 - 情感化设计的组成要素及实践案例

    又一个宁静的周日。周末的娱乐活动无非就是这些，做做博客，看看书，捣鼓点儿小代码，玩玩琴。最近在准备一些软硬件设备(见我的微博)以及素材段子，接...一个个在情感化设计方面具有代表性的产品罗列在一起，看着这些又

  • 互联网产品设计思路参考

    互联网产品设计思路参考 产品开发流程 产品开发流程 产品研发产物 主要分为五个阶段：项目启动，需求阶段，产品设计，开发上线，版本迭代 立项 启动 评估 立项：确定要做一个什么产品 启动：确定项目相关人员，项目...

  • python实现中文情感分析与可视化

    目录 一、导入原始数据 二、结巴分词/绘制词云图 三、计算情感值，情感分析 # 方法一、SnowNLP计算情感得分 # 方法二、使用字典计算情感得分 四、# 数据可视化展示 五、绘制相关系数热力图 一、导入原始数据 #导入...

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

    它们是有灵性的，它们的用户体验中被置入了情感化智能，并且这种情感化智能通过交互设计和反馈机制得以体现。 　这些要素将“个性”赋予了网站或 app 产品，并让产品最终在用户心中留下深刻的印象。不得不说，在...

  • 产品设计 | App功能设计的21条注意事项

    1、不要在没有流程图之就前开始设计或者画线框图 即便一个简单的 APP 也要有一个思虑周全的流程图，以确保在 APP 有合乎逻辑的、合理的导航结构。另一点值得关注的是确保核心功能...设计师创建的每一个细节都要经过...

  • 读书笔记-情感化设计

    1. “美观的物品更好用” 这是一句不那么好理解的大白话——一眼看过去好像没有办法反驳，但是一下子又想不清楚为什么。...人的情感、行为和认知是相互影响的，上面的两句话这应该是心理学领域一个很直白

  • 产品读书《交互设计沉思录》

    交互设计是人与产品、系统、服务之间创建的一系列对话。对话随着第四维度（时间）而推进，因此要针对对话进行设计，就要理解自然对话的易变性和流动性。同时，可用性并不是衡量交互设计的唯一重要指标，其内核更应是...

  • 数据可视化设计规范与应用

    5. 可视化云服务：如IBM Watson Studio、Microsoft Azure、Google Cloud Platform等，它们是基于云计算的数据处理和数据可视化服务，需求可弹性调整，更有弹性的数据隔离、数据存储和可视化自定义性。3. 可视化软件...

  • node-v0.8.10-sunos-x64.tar.gz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

  • 【课程设计】实现的金融风控贷款违约预测python源码.zip

    【课程设计】实现的金融风控贷款违约预测python源码.zip

  • node-v0.10.27-x86.msi

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

  • 课设毕设基于SSM的高校二手交易平台-LW+PPT+源码可运行.zip

    课设毕设基于SSM的高校二手交易平台--LW+PPT+源码可运行

  • c++,冒险游戏，可供学习

    冒险游戏，可供学习

  • node-v0.11.7-sunos-x64.tar.gz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

Global site tag (gtag.js) - Google Analytics