互联网产品情感化设计应用实例,APP产品和设计人员的工作

趣味性、愉悦度,这些都是针对用户情感化设计的领域。

      
情感化设计是一个很宽泛的概念,最早适用于日常生活中各种实物产品,自从互联网诞生以来,情感化设计也逐渐应用到互联网产品上,今天分享的主题介绍一些互联网产品在情感化设计上的应用实例,给大家提供一些灵感,后期可以更好地优化自己的产品。

(11)许多APP在首页的底部有个TAB栏,上有几个按钮,点击这几个按钮显示的界面属于一级界面,左上角是不需要有返回图标或按钮的。除了一级界面外,在每个页面都应该明确从当前界面可以返回到哪个界面。

功能、实用性,这些需要很强逻辑性的事物很难和情感产生关联,并不是指这些不重要,它们很重要,它们是基础,但缺少了情感的作用,很难产生一些东西,像:快乐、愉悦、悲伤、美…


(12)在登录和注册界面,建议设计用户需要手动输入验证码,这样可以防止恶意攻击。

花、大海、春天、小屋…
这些都是很普通的名词,但将它们富有诗意的组合在一起:我有一所房子,面朝大海,春暖花开。接受者会投入不同的情绪去理解这样一个组合。

一、什么是情感化设计?

(13)iPhone手机基本都使用系统自带的输入法,在用户点击搜索区域,弹出输入法软键盘时,软键盘上会显示搜索按钮;Android手机上使用的输入法各式各样,输入法软键盘上不一定会有搜索按钮。

上面这些名词就像我们在设计过程当中所遇到的各种元素,按键、菜单、icon、动态效果…
将它以诗意的方式组合在一起,由此用户产生了情绪上的波动。

什么是情感?

      
情感是人对外界事物作用于自身时的一种生理反应,是由需要和期望决定的。当这种需求和期望得到满足时会产生愉快、喜爱的情感,反之产生苦恼、厌恶。

在设计搜索界面时,iOS APP的右上角通常不需要有搜索按钮,但Android
APP的右上角最好要设计有搜索按钮。同时要设计搜索不到数据时的界面。

交互设计的本质是对用户行为的一种设计,直达内心的设计能够影响用户自身的情感,从而导致用户的行为。常会有设计师说将用户当成是一个易怒、情绪不定、不明理的人,为什么?因为人的本质是非理性的,逻辑是理性层面的考量,而面对情感这个潜藏在理性背后的东西,需要设计师有深厚的功力,这不是单纯技巧上的问题,而是一种时间、感觉、情绪等综合的圆熟。

什么是情感化设计?

      
情感化设计最早由唐纳德·诺曼在其同名书籍中提出,是一种着眼于人的内心情感需求和精神需求的设计理念,目标是在人格层面与用户建立关联,使用户在与产品互动的过程中产生积极正面的情绪。这种情绪会逐步使用户产生愉悦的记忆,从而更加乐于使用你的产品。

      
Aarron Walter将情感化设计与马斯洛需求层次理论联系起来,按照产品特质,将产品划分为功能性、可依赖性、可用性和愉悦性这四个层面,情感化设计则处于最顶层的“愉悦性”层面当中。但目前绝大部分产品都停留在可用性这个层级,很少有产品有精力去做到愉悦性,其中的原因可能与公司战略、目标有关系,也有可能是产品经理意识的缺失。

(14)原型应该完整体现各种操作流程,尤其是在出错的状况下的各种处理流程。

针对用户情感进行设计时需要考虑产品的用户群,情感设计的应用将会为产品塑造个性,需要明确产品个性是否与目标用户相符。所以题主需要考虑一下,所说的趣味性是否与产品所预期的个性相符,这很重要。

二、为什么做情感化设计?

       1.情感化设计的产品更能俘获用户芳心,提升产品满意度;

      
2.当前市面上相同类型产品越做越像,彼此之间的区别也越来越小,同行业的产品用户感知不到区别,因此情感化设计可以是差异化的一个重要因素,但不是决定因素。

      
3.随着社会的进步,用户更注重情感诉求和心理诉求,尤其以90后、95后为主,更注重个性化、更注重个体主观感受,所以情感化设计更符合用户心理诉求。

(15)重要的功能按钮,最好设计在屏幕底部或下半区域,这样方便用户使用大拇指操作。

扯回到正题,交互设计中的趣味性如果让我用一句话表达,我会说:「情理之中,意料之外」

三、情感化设计应用实例

(16)各种元素区域的尺寸要符合Apple和Google的设计规范要求,尤其是最小点击区域大小为7-10毫米。

btw:自己对有趣的定义可能会与大家不太一样。

       调动用户情绪:

      
调动用户情绪又可以分为两方面,一是带动用户情绪,二是转化用户情绪。

      
带动用户情绪:完成产品期望用户做的事情、例如产品希望用户体验新功能,此时就需要一些引导来帮助用户完成操作(例如产品的引导页,游戏的引导页);

      1.全民K歌-引导页:

      
很多用户安装APP后根本不会看引导页,直接跳过引导页使用产品,产品在引导页上介绍的一些产品功能特性也就被忽略了。为了抓住用户的注意力,部分APP开始采用短视频来介绍产品特性,相比较于简单的文案+图片形式,视频更容易让用户接受,吸引力也更大。让用户在体验产品的第一步就能对产品产生好感。

      此引导页是个视频,所以我截了几张图让大家感受一下。

      2.哔哩哔哩APP-引导登录:

      
登录本来是一件用户本身就不喜欢的事情,直接弹出登录窗口甚至会增加用户的进一步反感。(例如左图)

      
blibli引导登录时有趣的配图可以分散用户注意力,减轻反感情绪;文案又告诉用户两个信息,一是你没有登录,所以会出现提示你登录的页面;二是登录后可以打开新世界的大门,让用户产生一种好奇,新世界里有什么东西?让用户理解登录的目的。

      3.哔哩哔哩APP-新功能引导

      
采用和登录页相同的方法,有趣的配图+俏皮的文案,提高引导过程的趣味性。当然文案的风格要和目标受众的口味、喜好一致,如果哔哩哔哩的受众不是95后,而是大爷大妈,用此种风格的文案就不合适了。

      
转化用户情绪:转化用户在使用产品中出现的负面情绪(例如淡化加载失败时的沮丧、烦躁情绪或转化为喜欢、开心的正面情绪);

      
在用户使用产品的过程中,最容易出现负面的情绪的情况当然是加载失败、加载中、下拉刷新和空页面四个状态了。

      1.Chrome浏览器-加载失败

      
页面加载失败时出现一只恐龙,点击空格键就可以玩类似于超级马里奥的游戏(强烈建议大家尝试一下呦~),以此来分散用户注意力,转化沮丧、烦躁的负面情绪。我尝试过,等玩了几把游戏之后,完全忘记了之前加载失败的事情。可惜的是交互做的很委婉,很少有用户发现。

      2.美团外卖APP-加载失败

     
通过诙谐的图片和文案向用户解释加载失败的原因,获取用户理解,减轻焦虑感。

      3.去哪儿APP-加载失败、加载中

      
加载失败时,骆驼表现出沮丧的表情,正好也体现了用户的此时的心情,获取同理心,拉近与用户的距离;加载中的时候,骆驼走动,增加等待时的趣味性。都可以转化用户的负面情绪。

      4.美团外卖APP-加载中

      
在减少用户等待加载或刷新时焦虑感方面,采用一只萌萌哒袋鼠,是一个外卖小哥的形象,很好地传达了产品的调性。

      5.网易蜗牛读书APP-下拉刷新

      充满趣味的文案,可以分散用户等待的注意力,减少焦虑感。

      6.腾讯体育APP-下拉刷新

      
篮球是腾讯体育APP标志性的运动项目,篮球运动中表示正在刷新,进球表示刷新成功。刷新动画符合app的产品定位,并且增加了极大的趣味性

      7.全民K歌APP-空页面

      
大部分产品的空页面设计平平淡淡,放一个毫无关联的图标,冷冰冰的文案就草草了事,例如“暂无数据”,给用户的感觉就是在和一台毫无感情的服务器进行交流。(例如左图,好在文案上还有一个语气词,没那么生硬。)

      
全民K歌:图片用吉祥物表达空数据时的愤怒、焦躁心情;俏皮的文案,指引用户去唱歌,点击可直接进入录制歌曲模块,快捷入口又可以提升唱歌模块的活跃度。

对于iOS
APP,就是在iPhone3手机上,也就是@1x分辨率下,最小点击区域不能小于44x44px;对于Android
APP,就是在屏幕像素密度为MDPI时,最小点击区域不能小于44x44px。

方式一:「延伸现实」

影响用户感知:

      
从用户角度而言,指用户能够感受、体会到产品的服务、理念、人文气息等因素;

      
从产品角度而言,产品通过刻意强化某些元素,向用户传达某种认知,以此来加强用户对产品或服务的认识。

      
为方便大家理解,此处给大家举个栗子,之前市场上有商家推出无线路由器,信号比有线路由器更强,但却发现用户不买账,因为在用户的固有认知里有线路由器信号就是比无线的强。因此商家利用用户的这种心理,在路由器上加了越来越多的天线,从最初的2根变为现在的4根、5根,以此来让用户感知到这款路由器信号很强,这就是一个典型的影响用户感知的栗子。

      1.微信-启动页

     
背景图名字叫蓝色弹珠,拍摄于1972年12月7日,一位宇航员在阿波罗17号飞船上用一台80毫米镜头的哈苏照相机,拍下了完整的地球照片。

      
张小龙也有一句名言:每个人都是孤独的,这张图中的小人代表用户,孤单的背影望着一颗硕大的星球,透露出孤单、寂寞的心境,传达出每个人都渴望交流,渴望被关注的需求,用这张图来做启动页可以加深用户对微信的产品认知,了解产品的特性。微信伟大的原因,体现在细节之中,再回想一下其他的产品,哪里这种情怀和视野。

      2.Google-logo

      
Google在每个重要节日logo都会做出相应的调整,点击进入之后会有相关的介绍和信息,其作用除了渲染节日气氛,也担负了一定的社会责任,同时也给用户传达人文主义信息,加深用户对企业的认知。

      3.QQ邮箱-文案

     
通过讲述一些故事,突出产品特质,引发用户共鸣,提升品牌形象,也是增强感知的形式。

      4.Readme-登录页

     
在Readme的登陆页面上,为了加强让用户在输入密码时感受到安全感,再输入email时猫头鹰睁着眼睛,输入密码时猫头鹰会遮住自己的眼睛,国内哔哩哔哩APP也采用了相同的做法。

戳这个链接体验一下:https://dash.readme.io/login

      5.百度搜索彩蛋

       搜索关键词“Duang”

搜索关键词“黑洞”

      
搜索关键词就会出现对应的效果,加强用户对相关词汇的感知,也增加了营销元素,让产品具备可传播属性。

在@2x分辨率和像素密度为XHDPI时,最小点击区域不能小于的逻辑像素为:88x88px。

最知名的例子莫过于,iOS的惯性滑动效果(或许有同学会不同意,但这真的是我认为很有趣的设计),这样的一个设计,在我眼中可以用两个字来形容–惊艳,什么样的设计师才能够对周围世界的观察敏锐到如此境界呢?让我们记住这个人的名字吧
— Bas Ording,可以说没有这个设计可能就没有iPhone的诞生吧

产品拟人化:

      
将产品赋予人的性格,让它具备人的感情。让产品中的文案、UI和交互拥有人的情感和性格与用户进行对话。

     
当用户在使用产品时,其实就是用户在和产品沟通,进行信息的交流。没有人愿意和冷冰冰的机器人交流,所以很多产品采用拟人化的手法,让产品具备人的性格,和用户面对面交流。

      
所以微软和苹果在语音助手时尽最大可能让Siri和小娜越来越聪明,越来越接近人类,具备人的性格和智力,更好地为我们服务。

      
此处插入一个梗:之前网上有一个很火的测试,测试者使用Siri和一款某国产手机的语音助手,说“我想吃shi”,结果Siri只是调侃了一下(类似于上图中的Cortana),某国产手机却找到了周围的厕所。

      
于是我做了一个优雅版的测试,使用Siri和Cortana,说“我想上厕所”,测试结果就是上图所示,哪个更聪明想必大家心里已经有了答案。

      1.哔哩哔哩APP-下拉刷新文案

      
产品拟人化最简单的方法就是从文案入手,实现成本最小;哔哩哔哩典型的二次元风格,符合目标受众的特征,拟人化的运用让用户对产品感到更亲切。

      2.网易云音乐-卸载页面图标

      
另外一种方式就是从各种提示的图片入手,通过拟人化的手法赋予图片性格、情绪。例如网易云音乐被卸载时图片体现出委屈、伤心,博取用户的同情心,降低卸载的风险。

(17)因为Apple的产品只有一个Home键,且触摸屏性能比较好,在设计iOS
APP时,滑动操作运用的比较多;但Android产品通常会比Apple产品多个菜单键和返回键,相对于iOS
APP,滑动操作使用的比较少,且Android产品的触摸屏性能千差万别,在设计Android
APP时,尽量少使用滑动操作。

图片 1

四、情感化设计的作用

      另外补充几个观点分享给大家:

     
1.一个优秀的产品应该是有人格魅力且让人愉悦的,这种让人愉悦的积极的情绪便是由产品中那些多多少少的情感化细节来表现出的。

     
2.产品的情感化设计是基于可用性之上的,要先做好功能,满足用户需求之后再进行情感化设计。

     
3.情感化设计开发量并不大,只需要产品在设计原型的时候多留出几分钟时间稍加思索,便可以让我们的产品不再是一个冷冰冰的工具。

文/Kris

(18)Apple产品没有返回键,但Android产品通常用返回键,用户可以直接按返回键退出,需要明确采用以下哪种退出方案:

(惯性滚动专利示意图,专利传送门
:)

A用户按返回键时,弹出提示框,让用户确认是否要退出应用

这样的设计见微知著,简单、有力、充满乐趣,看似微不足道,但影响巨大,乃至整个iOS的框架就建立在类似这样的设计之上(多点触摸,惯性滑动),即便是刚接触的用户,也能轻易理解这项设计,同时,对于用户进行操作时情感影响也很大。ps.由于工作需要多在两个系统间切换,当从iOS切换至Android时,生硬的边界反馈常令我索然乏味。

(用户需要在点击返回键后,把手指从手机的右下区域,移动到中间区域,点击提示框上的按钮)

时常在想,如果换成是我,将如何进行设计才能达到与iOS惯性滑动同等的效果?

B用户第一次按返回键时,弹出Toast提示,让用户再次点击返回键,则退出应用

之后,设计师Loren
Brichter在惯性滑动的基础上延伸了它的功能性及趣味性,下拉刷新,被Twitter收购后最近正在申请这项专利。

(用户手指一直放在右下区域就可完成退出操作,不需移动手指,用户体验更好)

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website