UI设计中的情感化设计

编辑导语：如今用户一天要接触和使用非常多的软件，所以一个带有情感的软件很大程度上能满足用户的体验，让用户对你的产品有依赖感以及惊喜感；本文作者分享了关于UI设计中的情感化设计，我们一起来看一下。

心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验；只有当产品触及到用户的内心时，使他产生情感的变化，那么产品便不再冷冰冰；他透过眼前的东西，看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心琢磨，人们会产生愉快、喜爱和幸福的情感。

情感化设计并不是轰轰烈烈，有时候仅仅一句文案、一幅插图、一个动画就能打动人心，使用户获得愉悦的使用体验；让设计变得高级不仅仅是视觉层面，这些简单而美好的设计细节充满了积极情绪，它是满足产品的功能性和易用性之后，追求更高层次的目标。

一、提示性文字

语言是情感化设计最直接的利器，拟人化的对白相比冰冷的话语更能获得用户的好感，赋予产品的新的生命力；例如App那些push推送通知，因为用户每天收到的PUSH实在是太多了，早已心如止水！

这个时候，你就需要一条成本低、效率高的PUSH文案，去撩动用户主子们的心；将原本对用户的打扰变成一种逗趣，让人看到会心一笑。

二、下拉刷新

下拉刷新是用户在App使用中经常进行的操作，常见的下拉刷新设计是图标加文字的形式，这种设计简单、直观，但毫无设计感，不能引发用户任何的情绪。

下拉刷新是一种临时状态，丰富它的设计细节不会造成与产品界面的格格不入，相反，一个富有设计感的下拉刷新设计能让产品获得用户的好感；例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿，暗示正在快马加鞭的加载新内容，小鹿形象延续了品牌logo。

作为资讯类产品，内容更新速度至关重要，奔跑的小鹿正好隐喻了这一点；用户也在这种快乐的情绪中对产品产生好感，瞬间就让下拉刷新变得生动有趣。

三、头像设计

个人中心页与用户信息密切相关，用户的虚拟形象在这里得以展现，常见的设计是一个用户头像加登陆文字的形式，这种默认的头像设计无法得到用户的认同感。

现在很多的产品已经放弃了死板的默认头像，给用户更多的选择。

赋予产品一些人格魅力，可以让产品富有生命力，消除人机界面的冰冷交互，帮助用户和产品建立友好的联系；例如美团外卖和躺平，它们各自的身份都代表了产品的气质和用户的属性，让用户产生一种身份的认同感。

四、缺省页化解负面情绪

通常状态是当前页面没有内容或无网络状态下出现的页面。

常见的设计是图标加提示文字的形式，这种简陋的设计会给用户心理造成很大的落差，陷入负面情绪中；情感化设计在此时就可发挥巨大的作用，它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。

设计师可发挥的空间很大，根据产品属性和品牌延展图形，结合动效或插画等情感化设计，可以很好的丰富页面内容；例如躺平的空白页呈现出一种贱萌的场景，让用户会心一笑，使产品充满了趣味性。

五、标签栏微动效

情感化设计变得越来越丰富，图标设计上升至可以展示动画效果；通过动效的使用，标签栏切换变得不再死板。

用户在频繁切换页面时，不再觉得单调；精心设计的动态效果，能够缓解用户等待时焦躁的心情，从心理上缩短用户等待时长，让品牌更加深入人心。

六、模拟用户行为

如果一个产品可以模拟用户的行为，将用户代入真实的情境中，用户就会对产品产生深刻的认同感；例如「潮汐」会根据时间场景和季节变化，播放不同的背景音乐来营造氛围；雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。

情感化设计可以拉近用户与产品之间的距离，在更深的层面体现出对人性的关怀，为人们带去情感上的愉悦和感动。

洞悉用户的行为，换位思考去满足用户的需求，情感交流就产生了；例如当你截屏了一张图片，打开微信对话框时就会自动显示这张图片，提前预知了你发截图的需求。

再例如很多观众都习惯了在电影结尾等彩蛋的习惯，因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。

在「淘票票」上购买电影票时，你会发现影片详情页会有彩蛋提醒，告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置；有了这个提示信息，就不必再为了不确定的彩蛋期待浪费时间啦。

七、有趣的细节设计

俗话说：有趣的灵魂万里挑一，可见有趣是可以引发交流进而让人们产生积极的情绪。

在UI设计中，有些有趣的设计是隐形的，需要用户自己去发现，当用户找到这颗彩蛋时，就会获得一份喜悦和乐趣，增强用户对产品的探知欲；例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右，你会打开鬼畜区的新世界(⊙o⊙)（友情提示：记得戴上耳机或调小音量）其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母，发现鬼畜秘密」；按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕！

有些有趣的设计又是显性的，目的是让用户与产品引发交流从而产生积极的情绪；例如成为优酷视频会员，不仅可以尊享丰富的影视资源，还能让自己的ID在发弹幕时使用剧集相关角色的头像；带角色扮演头像的弹幕，让发言更有剧集代入感。

这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性，一方面也丰富了弹幕区的多样化，可谓一举两得了。

总的来说：UI设计的“高级感”意味着在视觉层面要从细微之处着手，创造出精致富有设计感的画面；而另一方面要从情感化设计出发，使用户与产品产生情感上的共鸣，获得更高层次的使用体验。

作者：Fyin印迹；公众号：印迹拾光

本文由 @Fyin印迹 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议