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

9顶
0踩

Web前端

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

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



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

  • 利用Simulink实现混合储能系统在直流微网中的下垂控制策略研究：保持直流母线电压稳定的实践与探究,Simulink仿真下的光储直流微网混合储能系统下垂控制策略优化研究（注意版本要求为2021A以上

    利用Simulink实现混合储能系统在直流微网中的下垂控制策略研究：保持直流母线电压稳定的实践与探究,Simulink仿真下的光储直流微网混合储能系统下垂控制策略优化研究（注意版本要求为2021A以上）,混合储能系统 光储微网 下垂控制 Simulink仿真 注意版本2021A以上 由光伏发电系统和混合储能系统构成直流微网。 混合储能系统由超级电容器和蓄电池构成，通过控制混合储能系统来维持直流母线电压稳定。 混合储能系统采用下垂控制来实现超级电容和蓄电池的功率分配，蓄电池响应低频量，超级电容响应高频量。 通过改变光照来影响光伏出力，控制混合储能系统保持微网直流母线电压稳定在380V，不受光伏出力变化影响。 ,混合储能系统; 光储微网; 下垂控制; Simulink仿真; 版本2021A; 直流母线电压稳定; 光伏出力变化; 超级电容器; 蓄电池。,2021A+混合储能系统：光储微网下垂控制Simulink仿真研究

  • JavaScript入门到精通: 全栈编程语言的基础与进阶学习指南

    内容概要：本文档是针对JavaScript这一跨平台解释型语言的详尽入门手册，首先概述了JavaScript的概念及其重要特性，强调它不仅适用于前端同时也活跃于Node.js的服务器环境之中，从而成为全栈开发的重要技能。紧接着文档阐述了JavaScript的基本语法元素如变量声明、数据类型、运算符及控制结构，让新手理解JavaScript的语法规则，并通过函数与对象操作加深印象。之后介绍了一些常见的实用工具和高级用法，例如模板字符串、解构赋值以及异步编程手段（比如Promise）。对于想要深入探索的应用场景给出了广泛的指引，无论是传统的web开发还是新兴领域的IoT或自动化脚本编写皆有所涉猎。 适合人群：对于那些没有编程背景或有其他编程经验但仍希望了解并擅长运用JavaScript的个人来说非常适合。 使用场景及目标：目的是向初学者提供足够的理论指导和技术实践机会，使他们能够在不同平台上利用JavaScript创造出有意义的作品；不论是想要从事专业软件开发或是业余项目爱好者都能够从中受益。 其他说明：文档还提供了大量权威且有用的外部链接供进一步深造学习，包括但不限于主流的在线课程、权威的技术参考资料及充满活力的支持社区。

  • 2D3D 中弗里德里希常数和庞加莱常数的计算 附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均

    级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均衡管理,不平衡电网下的svg无功补偿，级联H桥svg无功补偿statcom，采用三层控制策略。 （1）第一层采用电压电流双闭环pi控制，电压电流正负序分离，电压外环通过产生基波正序有功电流三相所有H桥模块直流侧平均电压恒定，电流内环采用前馈解耦控制； （2）第二层相间电压均衡控制，注入零序电压，控制通过注入零序电压维持相间电压平衡； （3）第三层相内电压均衡控制，使其所有子模块吸收的有功功率与其损耗补，从而保证所有H桥子模块直流侧电压值等于给定值。 有参考资料。 639,核心关键词： 1. 不平衡电网下的SVG无功补偿 2. 级联H桥SVG无功补偿STATCOM 3. 三层控制策略 4. 电压电流双闭环PI控制 5. 电压电流正负序分离 6. 直流侧平均电压恒定 7. 前馈解耦控制 8. 相间电压均衡控制 9. 零序电压注入 10. 相内电压均衡控制 以上十个关键词用分号分隔的格式为：不

  • 基于时空RBF-NN的混沌时间序列预测 附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 基于主从博弈的动态定价策略与电动汽车充电管理优化在智能小区的实践（MATLAB+CPLEX gurobi实现）,基于主从博弈理论的智能小区电动汽车充电与代理商动态定价策略优化研究,MATLAB代码：基

    基于主从博弈的动态定价策略与电动汽车充电管理优化在智能小区的实践（MATLAB+CPLEX gurobi实现）,基于主从博弈理论的智能小区电动汽车充电与代理商动态定价策略优化研究,MATLAB代码：基于主从博弈的智能小区代理商定价策略及电动汽车充电管理 关键词：电动汽车 主从博弈 动态定价 智能小区 充放电优化 参考文档：《基于主从博弈的智能小区代理商定价策略及电动汽车充电管理》基本复现 仿真平台：MATLAB+CPLEX gurobi平台 主要内容：代码主要做的是一个电动汽车充电管理和智能小区代理商动态定价的问题，将代理商和车主各自追求利益最大化建模为主从博弈，上层以代理商的充电电价作为优化变量，下层以电动汽车的充电策略作为优化变量，通过优化得出最优电价策略以及动态充电策略。 ,电动汽车; 主从博弈; 动态定价; 智能小区; 充放电优化; MATLAB; CPLEX; gurobi平台。,基于主从博弈的电动汽车充电管理与定价策略优化MATLAB代码实现

Global site tag (gtag.js) - Google Analytics