产品细节中的情感化设计

本文来自互联网,114PS教程网仅作学习交流使用。发布时间:2016-04-28
本栏目刊载的经验技巧仅为提供更多信息,部分来源于网络,由本站整理发布,转载本文请注明本文地址。
教程所属栏目:
首页 > ps教程网 > 经验技巧
小编(追梦–不悔好久没跟大家分享文章了,因为互联网是变化多端的,我们需要不断的学习,这样才能进步!我也是一样的。之前跟大家分享的“移动端设计——第三节:视觉设计”和“移动端设计——第二节:交互设计”都已经看过了吧!今天我在分享一篇 视觉设计的文章{产品细节中的情感化设计}说的情感,我们每个人都有,什么爱情、亲情、友情…..等等!但是什么是情感化设计呢?一句话:就是你的设计是否能给用户带来惊喜,温暖…等等!下面让我们一起来看看这些大神情感化的设计吧!
未标题-2

原研哉在他的《设计中的设计》中有介绍过这样一个案例:日本机场原来是用一个圆圈和一个方块表示出入的区别,形式简单并且好用,但设计师佐藤雅彦却用一个更温暖的方式来重新设计了出入境的印章:入境章是一架向的飞机,出境章则是个向右的飞机。

产品细节中的情感化设计

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

产品细节中的情感化设计

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

结语

一个优秀的产品应该是有人格魅力且让人愉悦的,这种让人愉悦的积极的情绪便是由产品中那些多多少少的情感化细节来表现出的。那些让用户“啊哈”的细节,都将会成为积极的情绪所传递下去,影响的将可以能千千万万用户的体验与口碑。

作者:danker
原文来自:腾讯ISUX (http://isux.tencent.com/emotional-design-details.html)

转载请注明:114教程网



Yelp再设计:以实用性为核心的设计方
0 点击  / 0 评论
产品细节中的情感化设计
0 点击  / 0 评论
王刚—计划下一步(萌芽ing第二十五
0 点击  / 0 评论
奶片儿_好好玩耍你的兴趣(萌芽ing第
0 点击  / 0 评论
创意秘诀这么偷你知道吗?
0 点击  / 0 评论
APP引导页设计经验分享
0 点击  / 0 评论
2015年不容错过的UI设计导航网
0 点击  / 0 评论
问卷调查之设计师被骗稿后如何对待
0 点击  / 0 评论
拳拳加油(萌芽ing第二十八期)
0 点击  / 0 评论
教你写一份合格的简历
0 点击  / 0 评论
说到心坎了!聊聊设计师的六大瓶颈期
0 点击  / 0 评论
于磊_腾讯设计师(高手之路访谈)
0 点击  / 0 评论
告别8种设计元素,接下来是谁的时代
0 点击  / 0 评论
小花_春季里绽放(萌芽ing第三十期)
0 点击  / 0 评论
想求职加薪?先设计好你的邮件让人有
0 点击  / 0 评论
相关文章:


国内非常有设计感的10个APP  设计师简历怎么写?  《五行·素》的故事–手机主题设计思  

觉得不错?顶一下!
PUSH UP
复制本文地址
COPY
最近更新:

人物皮肤修饰完全自学教程(视频教程)
9 点击  / 0 评论
所属栏目:[美容]
修图师分享 五分钟完成皮肤处理的伪商业修
3 点击  / 0 评论
所属栏目:[美容]
核心技术 教你人像后期面部精修
1 点击  / 0 评论
所属栏目:[美容]
利用计算及修复画笔快速给人像祛斑及磨皮
0 点击  / 0 评论
所属栏目:[美容]
Photoshop高低频磨皮教程
0 点击  / 0 评论
所属栏目:[美容]
商业人像大片中的发丝精细美化
1 点击  / 0 评论
所属栏目:[美容]
新手必学 用Lighroom5分钟快速编辑人像照片
7 点击  / 0 评论
所属栏目:[美容]
运用中性灰给商用人像大图精细磨皮
2 点击  / 0 评论
所属栏目:[美容]
本页全部评论共计()条    【点击查看全部评论】
您的昵称:(10个汉字以内)                      匿名
评论中不要带有网址,并且不要发布违禁词汇。字数限制在300汉字以内。
           验证码:(注意大小写) 看不清楚?请点击刷新
网友最新评论:          
  关于 栏目 栏目 联系 帮助 综合
  关于本站 入门基础 图片合成 在线留言 如何投稿 范文
  版权声明 鼠绘教程 抠图操作 联系方式 常见问题 软件资讯
  免责声明 调色方法 视频教程 本站微博   推荐问题
  本站地图 人物美容 相关素材     已解决
  Sitemap 照片处理 资源下载     待解决
    字体效果 相关经验      
    图标按钮 CS6专题      
  声明  
  114PS教程网(114ps.com)发布的所有教程信息版权归原作者所有,由本站转载的内容仅为提供更多信息,并不代表本站同意其观点。
  所有图片信息均来自网络,本站仅作学习使用,若无意冒犯,请联系本站。
  黑ICP备15009090号-1
  Copyright © 2011-2014