header_v0.6.83

【译】墙外干货:谷歌设计师教你做情感化设计

36天前发布

原创文章 / UI / 教程
狐狸爱设计 原创,如需商业用途或转载请与狐狸爱设计联系,谢谢配合。

人是有感觉、思想和情感。优秀网站和app的体验都是为情感而设计。情感化设计不单单只展示一个任务,一路上也在引导用户反馈,激起用户的共鸣。


声明:如需转载,请申请本人授权并保留文章全部信息,严禁私自用于任何商业用途,请尊重作者权益。


人是有感觉、思想和情感。这些年我看到的一些优秀网站和app的体验都是为情感而设计——不单单只展示一个任务,一路上也在引导反馈。这种反应可以是一句简单的“好酷”,可以是“哇哦”。

当电影导演创造场景想要他们的观众感受到恐惧、悲伤、同情之类的情绪,他们会煞费苦心地选择正确的灯光、声音、地点、顺序和摄像镜头来创造创景。在电影的世界,我们叫这个为“场景设置”,它是电影美感的一个不可缺少的部分。

1aa9591d450ca801216a3ed04a53.jpg

左图:诺兰的《星际穿越》—— 黑洞场景,见证了Matthew McConaughey掉进黑洞的恐惧,惊讶和好奇。右图:Tony Scott’的《壮志凌云》——摩托车场景,看到了汤姆.克鲁斯和一驾F-14喷气式战斗机赛跑的兴奋感,刻画了他的动机和冒险精神

现在,你可能想知道情感化如何运用到互联网设计中。创造情感化的响应可能不是现代设计师首要考虑的问题,他们经常想要用户做A/B测试。当然,这依赖于我们正在设计的是什么以及设计的背景。然而,用户也是人,他们是我们的观众——不仅仅是一个用在你网站或app的人口统计数据。我们用UI元素、画像、手势和交互做我们自己的“场景设置”,我们创造氛围,制造出整个用户体验。


数字世界的运用实例


这里有一些很优秀的互联网设计,我觉得提供了很棒的体验给他们的用户。

一次海上旅行

http://sortieenmer.archives.grouek.com/

a86a591d44a6a801216a3e22ea3f.jpg

浸入式的交互体验让你身临其境

与以上不同的是,这一部分是以第一人称的角度来简述故事和经验。前提很简单,人物角色最终从船上落下,你放在了他的鞋子里——用你的滚轮停留在表面。你真实地感觉自己在用力挣扎以保持不沉,和这种简单的交互式力学的结合——累的感觉,声音,令人窒息,无情的大海。少量的UI元素暗示着人物的能量以及你和界面的关系。你感到恐惧,疲惫,绝望和悲伤。

这个网站是做什么的?它是为Guy Gotton宣传航海服的,通过一个宣传海上安全的镜头。他们本来可以做另一个宣传网站,去展示这个服装的特性和防水材料相关的技术数据。取而代之,他们讲了一个故事,一个在海上发生意外的故事,他们给用户一种浸入式的体验,让用户变得有参与感。它吸引了你,让你感受到情绪,变得更令人难忘而有意义。


Citymapper

https://citymapper.com/

安卓版(https://citymapper.com/android?referrer=topnav

IOS版(https://citymapper.com/ios?referrer=topnav

14d4591d4561a801216a3e6244e6.jpg

一些功能展示,不仅仅把用户带到他们想要的地方,与此同时也融入了自身的个性

这更是一个明智的例子,关于如何让app帮助人们导航他们所在的城市。市面上有大量的地理定位app,Citymapper脱颖而出是被大量用例驱动。Citymapper融入一些情感是通过一些有个性的优秀功能。比如,“带我去那”的功能就能让用户从A到B,当你应该在某一站下车时,会有像振动的小提示。略有变化的设计大大帮助了用户理解导航。

它能让用户很有信心地去探索一座城市,并且使用起来很方便——去处理这种未知的恐惧感。力量和个性匹配——比如当使用带我回家的功能——hoverboard是一个选项,会触发Marty McFly跳上他的悬浮滑板,这能让你在设备上控制使用的倾斜度。之前的版本是包括弹射器模式和火箭模式。当然这个并不是必要的,很多人可能会问为什么他们要花时间去用这些功能,但是这些小功能会让这个app变得有趣,用起来很快乐。与大功能匹配的一些小特性在很大程度上会引发情绪上的反馈。


24小时的快乐

http://24hoursofhappy.com/

7cfb591d458db5b3086ed4315d7e.jpg

24小时音乐视频

另一个很有想法的例子是和一个简单的力学匹配的。在其他的媒介上,你能看到一个24小时长的音乐视频吗?当用户登陆网站,音乐视频开始在它们所在的时区位置播放,舞者开始随着歌曲表演,几乎每隔几分钟舞者都会变化,不是像上面的这两个人。这个想法本身就是愉快的——24小时的快乐。

用户能拖动这个圆形的UI元素在24小时的视频上跳来跳去——这个UI元素代表了一个24小时的闹钟——很漂亮,或通过点击下一个。这个简单的交互模型鼓励用户探索,通过绕圈拖动,你可能会看到整个视频的预览。在小时的顶部,Pharrell出现了(或者你可以使用P按钮),有一大堆人在客串,像Magic Johnson会出现在他的战利品房间里,还有Jamie Foxx和他的女儿。这种体验很有代入感,能引导用户去探索和发觉内容——没有冗长的介绍来解释视频——每次你进入到这个网站,你可能都会看到新的东西。

他们本可以把整个24小时时长的视频上传到YouTube上,或者做一个常规的过滤器。但是他们创造了一种新的体验,在媒介上获得了影响力,融入了一种有趣而有探索性的体验——简而言之,整个的体验会使你微笑,甚至可能让你感到快乐。


Paper Planes

https://paperplanes.world/

6e54591d482aa801216a3e527bd2.jpg

基于手势交互和本地化设备行为把娱乐性带入体验中

这是谷歌的一个优秀示例, 在2016 I/O大会上让人们获得乐趣的一种方式。一个简单的预设是,允许从世界各地扔飞机和抓飞机,最好是在手机上看效果。在简短的介绍之后,你使用拖拽力学贴上一张邮票,折叠成飞机,然后立即旋转飞机,模仿扔出去。你要把它扔得恰到好处,当你在设备上操作时,你的设备会嗡嗡作响,你会听到一个“wheee”的声音——是不是很神奇?一旦你松开你的飞机,你就能抓到其他飞机,把你的邮票贴在它们身上——一个很小的网会出现,你猜对了,你必须晃动你的飞机去模仿在一张网里抓东西的情形。在你抓飞机的时候,你的设备会振动,你会得到这个飞机要去哪里的线索,然后贴上你的邮票,继续松开飞机。

我喜欢这种体验的原因是,交互优雅,用户设备得到了充分利用。你对这种让人意想不到的行为会忍不住想笑。基于手势的交互性,简洁性,以及一种趣味性。在它最初的版本中,在品牌层面,你感受不到这个,它为谷歌起到了积极的促进作用。这个体验是简洁,愉悦,技术先进的——我喜欢这个品牌代表的所有含义。我们都见过这类型的概念,用户能创造一些东西并把它传承下去。让它与众不同的是,它的个性和技术给了用户一种惊奇和愉悦的感受。


为什么情感化设计如此重要?

你可能会问,为什么它如此重要?我想推荐这个小图表,它是对马斯洛的需求层次的重新解释。你可能在之前有看过,在很多的情况下,无论是产品还是你工作的网站,基本上这个图表都可以作为一个指导。

8373591d4853a801216a3ebf9f84.jpg

在基准线的底部是功能性的特征——有没有用,能做到预想的那样吗?然后是可靠性——是不是运行起来可靠,快速,会不会出错?接着是可用性——是不是能用,易用,是不是用户驱动?——然后到了最后两个,也是最难达到的:有趣和有意义。我们的体验是不是好用,是不是让用户感到快乐,是不是可以操作而且有趣?最后,有意义是指,产品提供的服务是不是有意义,能否引起用户的情感共鸣?

有趣和有意义这是很多产品和网站难以达到的,经常是很让人挣扎的。做了MVP后,继续推进,让你提供的产品不仅仅是用起来有趣,而且有意义。这是一块很少人踏足的圣地:如果用户和你的设计、网站、体验或产品在情感层面上是相连接的,就会让用户想用它,记住它,甚至喜欢用。

总之,我喜欢交互式媒介的一个主要原因是,因为几乎任何事情都是有可能实现的。在我们指尖下有音频、可视化、虚拟现实、交互。如果你用心做,你几乎可以设计任何东西。日益增加的设计师走着容易走的路,设计可用的的体验。你没有必要变得疯狂,但是一些想法和视野会让你走得更远。

问问你自己:这个体验是不是用起来很愉快,有没有意义,能否引起用户的情感共鸣?

毕竟我们所谓的以人为本的设计是有原因的。如果你想要设计一些让人印象深刻的,能鼓励人心,并且有意义去点击的东西,那就激起用户强烈的情感反应,甚至能让人喜欢使用这种最简单的体验。

71
    意见
    反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功