从这4个角度,做出情感化设计的产品

2018/01/01 5103

情感是我们生活中不可割舍的元素,UI设计师也开始在设计时添加「情感化元素」,但是我们忽略掉了一个最基本的问题,为什么要做情感化设计?产品能在情感化设计中得到什么?

解决问题之前,我们需要了解一下情感化设计的概念。

情感化设计是基于产品的功能性和易用性后,追求的更高层次的目标。我们只有先了解产品的逻辑,全面理解分析后,才能做出不影响产品功能下的情感化设计。

早在2002年,美国认知心理学家Donald Norman就提出了这一概念,他将产品特质划分为功能性、有用性、易用性和愉悦性四个层面,由低到高,而情感化设计则处于顶端位置。

好了,现在大家已经有了一个初步的认知,下面我来为大家解答刚才的问题。

一. 向用户传递情感心流

心流,也就是沉浸式体验。E Sherman在《Flow:the psychology of optimal experience》中提到了沉浸式体验,沉浸就是让人专注在当前的目标(由设计者营造)情境下感到愉悦和满足,产生共鸣,忘记真实世界的情境。

设计师会通过画面、氛围、图形、文案、动效和音乐等方式,以营造出符合当前环境的情景,帮助用户快速融入其中。

沉浸式体验最常见的方式是向用户讲故事。故事是处理信息的一种方式,将某些操作、信息通过故事的方法传递给用户,让用户产生相同的情感共鸣,进而被吸引,对它的印象更加深刻。

我们以Sortie En Mer为例。Sortie En Mer是一个模拟溺水的网站,是为Guy Gotton宣传航海服的,游戏宗旨是教育人们出海一定要穿救生衣。在交互上与其它同类网站不同,这一部分是以第一人称的角度来简述故事和经验。

故事很简单,主人公在航海的过程中从船上落下后挣扎到死亡的过程,加上音乐的烘托,会感到更加绝望。画面由明亮到暗沉,也暗喻来主人公体力不支。

同类主题的网站,大多只单纯的展示服装的特性和防水材料相关的技术数据。Sortie En Mer在普通的交互逻辑上进行了情感化设计,将一个海上发生意外的故事,通过诉说传递给用户,让用户有身临其境的参与感,营造融入其中的感觉。

二. 塑造友好的形象

通常我们认为产品是冷冰冰的,但是优秀的产品,并不是冷冰冰的毫无情感,它仿佛就是一个活生生的生命,具有个性,人们更愿意与有情感有温度的生命交朋友。

那怎样才能做有温度的朋友呢?我们可以通过下面两个案例来分析。

1. 融360

现在很多产品都有自己的吉祥物,通过吉祥物去提升产品温度。那么吉祥物是基于什么设计出来的呢?我们以融360的吉祥物设计为例。

首先,我们先分析一下其产品的构成:融360是一款移动金融智选平台(核心定位),用户大都为有贷款、办理信用卡需求的中青年群体(使用人群),交互和视觉偏向于简单,具有普适性。

在进行产品的情感化设计时,我们应该从产品特质和用户本身出发,在研究的过程中,这两者间有什么关系,是我们需要深入探讨的问题。这种情感化设计是产品特征的一个展现,需要与其「性格、气质、腔调」相符。

A. 吉祥物以人形宝宝的样子出现,将产品拟人化,消除了人机间的冰冷交互,帮助用户和产品间建立友好的联系;

B. 它为什么会是一只牛?因为金融总是与牛相伴,华尔街金融街靠牛守护,用户也会get到这点。

C. 牛大宝可靠、聪明,分别对应着产品的安全感和智能性,与产品性格相符。

那具体在App中是怎样应用的呢?

情绪是情感有意识的体验,它有目标性,通常也有原因,比如当用户在输入信息时,会产生烦躁心理,为了降低这种反感,我们用一个有情绪感的icon来缓解。或者当用户在退出时,用一个卖萌的表情去挽留用户。

情感化设计可以加强用户对产品气质的定位。就是由于牛大宝与产品极其相似,更能够被大众所接受,才一跃成为了「金融网红」。

2. same

Same是一款针对年轻人的、去中心化的社交平台,类似于豆瓣、微博等,但又不完全相同。因为用户人群的年轻化,所以整体以轻快、简洁为主。

我真的超级喜欢Same的小人icon,每一个icon都感觉「活了」。在加入情感化设计的同时,也考虑到了核心元素在每个环节的延展性,进一步加强了用户对产品性格的认知。

当然,same的情感化设计并不仅体现在icon上,还体现在各种地方。比如说话题、banner设计。

缺省页设计。

向用户数树立友好的形象,不单指icon多么精美、界面样式多么流行、配色多么好看。而是通过情感元素所传达出来的信息和气质,与整个视觉设计保持一致,且区别于竞品,可以帮助用户对产品有正面认知的设计。

所以,首先要想好进行情感化设计是想传达什么,产品的立场、强调、气质和形象分别是什么。简单的说,就是你希望用户怎样去认知你的产品。

三. 成为理解用户的朋友

从产品的细节出发,悉心观察,换位思考,满足各形各色的用户需求和偏好。为他们带来愉悦的体验,帮他们解决问题,帮他们提高效率,甚至帮了解他们的一切,成为他们最可靠的小伙伴。

隐藏的细节设计是营造惊喜,和体现产品设计逼格的地方。在产品某些点上进行微交互和动画设计,可以为用户带来较高的愉悦感。

大家有没有厌倦千篇一律的、点了只会傻乎乎变色的「赞」?而Twitter是怎么做的呢?在普通的赞的基础上添加了微交互,用户在点赞后会得到一个动态的情感反馈,愉悦感会成倍的增加。

情感化的细节设计是为了创造出一个有趣的瞬间,并可以把用户的注意力吸引到正确的位置,让用户在不知不觉间养成对产品的使用习惯,也可以培养用户粘性。用户在尝试过之后,对于这种交互会有「哎呦,不错哦」的感觉。

设计细节,并不是单纯的从UI角度去说它好不好看,而是从分析其是否可以在大的视觉体系下,将情感融入其中,辅助塑造产品的性格与定位。

将产品的细节融入情感,一是赋予了产品本身的调性和趣味;二是充分体现产品的定位和特点。它的发生并非让用户刻意的体会些什么,而是希望用户可以感知到它本来就是产品里的一部分,从而体现产品的价值。

总结

现在,产品类型趋近,情感化设计也在趋于相同。大家应该根据具体产品性质的不同,具体问题具体分析,避免随波逐流。

为了让产品功能与用户情感的承接,更好的满足人们情感的诉求,我们应该在情感化设计上持续探索与挖掘,并为之努力。

欢迎关注微信公众号:「 融360RUX」

「让你的设计更有温度」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/emotional-product-design

素材 界面设计 好文 交互设计师 UI 转场动效 设计流程 用户体验设计 设计师专访 设计师 排版布局 扁平化设计 素材下载 视觉设计 职场 设计规范 产品设计 配色 web前端开发 设计趋势 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里