个原则为无聊的设计出情趣化的界面

　　本文分享了五个让用户界面更情感化的原则：游戏化、幽默感、动画、插图和吉祥物，来帮助大家如何为无聊的APP设计出情趣化的界面。
　　用户使用产品执行重复性的任务，很容易就会失去兴趣，而解决这一困境恰是UI的价值所在。接下来，将要探讨一些能够让界面更加情趣化的设计原则。
　　随着一连串的0和1消失在黄色管子后面，一只熊从管子中弹出，管子底部也出现了一行文字：Startyourbearowsing！。最后，一只熊掌出现在屏幕上，并指向我的浏览器工具栏上。
　　在一片惊讶声中，我完全忘记了想要浏览的内容。
　　像VPN这类服务产品很少会引起用户的情感波动，因为这不是它们的工作，它们也不需要这样做。但TunnelBear却做了，因此在众多的VPN中，我选择了它，并将其推荐给我的朋友，这样他们就可以在日常生活中感受到一些快乐。
　　众所周知，人们不能长时间地忍受枯燥、无聊的情绪，这也是那些不能引起情绪兴奋的、执行重复性任务的产品很容易被人遗忘的原因。
　　据心理学家研究：枯燥只不过是因为缺乏激励，一种本来应该在活动中得到满足却未得到满足的欲望。
　　那么，问题来了，如何通过界面设计给用户带来激励呢？
　　我和MacPaw的产品设计师在我们头脑还比较清醒的时候，一起设计了像重复查找器和加密APP等无趣的产品。同时也分享了五个让用户界面更情感化的原则：游戏化、幽默感、动画、插图和吉祥物。
　　人们在玩的游戏游戏化设计
　　在用户界面设计中应用游戏化设计还存在一些争议：曾经有24个案例来研究游戏化设计应用的效果，可结果却各不相同。但我想说，游戏化设计应用的效果取决于你将其应用的场景。
　　对于许多像AkarSumset的产品设计师而言，游戏化设计的关键不在于让用户本身获得乐趣，而是通过乐趣引导他们去采取某些行为。比如：成就、等级、排行榜就是利用了人们对自尊的基本需求，激发竞争力，并且敦促用户做你想让他们做的事情；比如：获得成就，用户就会不断的回到应用中或者在社交媒体上分享。
　　游戏化设计在产品中的使用可能成功也可能失败，但它最终所要达到的是一种情绪反应。我们的大脑充满了控制多巴胺含量的细胞，多巴胺是产生幸福感受的主要神经化学物质之一。
　　当愉快事件发生时，这些神经元就会发挥作用，触发细胞释放多巴胺进入血液。更进一步来说说，如果愉快事件是有规律可循并可预测的系列事件（如游戏中玩家等级），那么多巴胺就会在事件发生之前释放。
　　这对你的界面设计意味着什么呢？
　　这将使得用户在使用产品的过程中，会因为期待愉快事件（如获得新成就）发生而获得快乐。
　　游戏化设计案例：Gemini2和Duolingo
　　在设计Gemini2时（一款在Mac上的重复查找器优化版本），我们遇到了一个棘手的问题。查找大文件是件让人精神崩溃的事情，有用户抱怨到他们会在文件查找完成前结束任务。
　　因此，我们所做的就是尝试利用成就系统来强化用户划掉已完成事项的感受（拥有待做事项列表是繁琐任务处理过程中的唯一利好）。
　　对于游戏化设计来说，外太空相关主题是可以完美应用的，如将相关主题设置为app的名称，并在用户界面的设计中应用这些主题。我们的目标用户是看着星球大战和星际迷航等太空电影长大的，所以他们对科幻灵感的事物会很熟悉。
　　在Gemini2发布的几天后，我们开始收到来自用户的推文，要求在复活节彩蛋上提供线索，以解锁最终的成就。发布一年后，因为清晰而富有情感的设计，Gemini2获得红点奖。所以，尽管很难衡量成就系统对用户的激励程度，但它确实不会让人感到枯燥。
　　Duolingo是另一个成功案例，它是一款为用户提供在线学习语言服务的应用，是我见过的最具游戏化界面的产品。我们都知道，从零开始学习外语是多么困难的事情，尤其是在只有一台笔记本电脑却没有老师帮助的情况下。考虑到人们很容易失去学习外语的兴趣，Duolingo就想方设法地让你迷恋外语学习，当然它也做到了。
　　每当你在Duolingo中完成一个5分钟的课程时，你就可以获得10分，连续上课30天会获得一个成就等级，完成20节课且没有一个错字，就会解锁另一个成就。对于你迈出的每一步，你的感官会感受到欢呼声和绚丽图像的奖励，而这会触发释放快乐的多巴胺。
　　最终，你开始将Duolingo与成就感和自豪感联系起来，这会促使你继续学习。
　　你一定是在开玩笑幽默感设计
　　VictorYocco设计了一款有着幽默感的成功产品，创造了令人难忘的体验，并且能够让你的工作脱颖而出。幽默感最大的作用在于它们很情绪化。虽然我们还没有完全理解幽默的本质，但有一点很清楚：它会让人感到快乐。
　　根据脑成像研究：有趣的漫画会激活大脑边缘系统中的奖励神经网络（这是响应饮食、音乐、性和情绪改变药物的神经网络）。换句话说，一个好笑话会给人们一种情感上的升华。
　　你想让你的界面设计也能使用户产生这种反应吗？
　　答案是肯定的。但最棘手的问题不仅是主观的幽默感，而且是取决于场景的反馈方式。比如：在开机屏上放一个双关语，肯定会让人混淆。虽然所有人都享受着各种形式的幽默，但了解用户是件至关重要的事情：他们觉得什么是热闹的？什么看起来不合适？粗糙的或不适时的？这与现实生活中的笑话没有什么不同？
　　幽默感设计案例：AuthenticWeatherandSlack
　　AuthenticWeather是一款应用幽默感设计用户界面的app，它不是将幽默作为一种附加的戏剧性调剂，而是作为一个独特的卖点。天气类app是工具性产品，用来帮助用户获取天气信息。但通过使用AuthenticWeather，你获得远不止于此。
　　无论天气状况如何，AuthenticWeather都会以像低温冻结、回家过冬这样尖锐的语句来打击用户，而我个人最喜欢的一句话是：
　　没关系，向外看了解更多信息。
　　当你使用AuthenticWeather时，你不会因为想看天气信息而打开它，而是因为你想看看它接下来会发生什么，就像查看天气这样的日常任务一样成为了早晨期待的事情。
　　如今，app中的充斥着脏话的评论，不会对我父母那一代人有吸引力。但是，脾气暴躁的千禧一代，却觉得很搞笑，这也证明着如果你了解你的用户，那么幽默将会是很好的设计手段。
　　另一个兼具好玩和好用的app就是Slack。作为一款与工作紧急相关的app，Slack创造出了更加人性化的体验，不仅是因为它的妙语趣话，而且从屏幕加载到看到所有聊天内容的过程中，当你看不到它的时候，它就会开个玩笑。
　　对于不同的文化环境，同一个幽默可能是善意的，也可能是恶意的。所以，Slack采用稳妥的双关语和善意的对手的类型，这种笑话并不会使你高兴地在地上打滚，也不会惹恼或冒犯他人。最好的情况，用户会在他们的某个频道中窃笑并分享屏幕截图；最坏的情况，他们只会滚动眼睛。
　　让世界动起来动效设计
　　几乎每个界面都会用到动效，这是从一种状态过渡到另一种状态的自然方式。但界面设计中的动效可以达到更多效果，而不是仅表示状态的改变（比如：它们可以帮助你保持注意力并，传达比静态视觉更好的效果）。动效可以激励视觉和运动知觉的学习，这意味着用户更有可能保持专注并理解如何使用这些东西。
　　这些都是将动效融入到设计中的好理由，但为什么它会引发用户情感呢？
　　参与Encrypt和GeminiPhotos两款app设计的SimonGrozyan认为，这是因为在物理世界中，我们将动的事物理解为有生命的：
　　我们习惯于看运动中的事物，由于光线的原因，我们周围的一切都在移动或改变外观，静态等于死亡。
　　除了可靠和逼真的质量之外，动效能够给用户带来愉悦感，这种愉悦感是与惊喜相同的。因此，将动效用在非常规页面转场的地方，使得你的产品使用起来更有趣。
　　动效设计案例：EncryptoandShazam
　　Encrypto是一款小巧精致的Mac应用，它可以对您的文件进行加密、解密，以便您可以安全地将文件发送给别人。对于那些关心数据安全和隐私的人来说，这是一个不可缺少的但又不是时常想到的工具。
　　尽管如此，从设计方面来说，Encrypto是迄今为止我最喜爱的MacPaw应用，这要感谢矩阵式风格的动画栏：动画栏滑过文件，将其转换为新的安全体。
　　Encrypto模拟生活中的场景，它不再是你计算机上的一个沉闷的程序，它有着迷人的数字魔法。
　　Shazam是一款将动效，作为其界面设计中的核心工作的app。当你使用Shazam进行识别音乐时，点击开始按钮后，按钮开始向外发送同心圆。这种类似于跳动的音乐扬声器的设计，让界面看起来很有生命感，就像你在一个强大的声音系统中播放你最喜欢的专辑一样。
　　艺术无处不在插画设计
　　正如BlairCulbreth所言：对于界面而言，光漂亮是不够了。
　　Sleek，有着专业化的设计，但它的如微笑般的个性化、人性化的细节才是关键，自定义艺术才能成就这些细节。
　　与普通图形不同的是插图是有情感的，因为它传达的不仅仅是其所包含的意义。它与每个孩童时代看过漫画的人有着积极的关联性，以更有趣、更有想象力的方式展现了一些东西。最重要的是，它包含了艺术家的个性。
　　我们的产品设计师MaxKukurudziak说过：
　　我认为，当一位艺术家创作插图时，他们总会将他们的一些个人经历、背景和故事注入其中。
　　这个理论说明了人情味更有可能激发情感。
　　插画设计案例：GeminiPhotosandGoogleCalendar
　　我们最新的产品GeminiPhotos是一款iPhone应用，可以帮助您删除手机中一些不需要的照片。就像Gemini2的桌面版一样，有冗长的说明文字，所以即使有一个漂亮的的用户界面，我们也很难吸引的注意力，并且让他们感觉很好。
　　与我们之前许多app一样，我们使用动画和声音来激活界面，但自定义艺术已成为体验的亮点。如上所述，令人惊喜愉快的事物会导致一种快乐化学物质涌入我们的血液，所以在意想不到的地方使用搞怪的插图，不仅填满了空白的屏幕，也给单调的行为增加了一点乐趣。
　　另一个可以证明插图如何让产品更可爱的案例就是Google日历。直到最近，网络版和iOSapp之间还是有着明显的差别。虽然前者具有电子表格的吸引力，但后者以一个杀手级的细节，立即赢得了用户的芳心。
　　对于不同类型的事件，Google日历会根据从事件标题中提取的关键字，用插图进行说明。这样一来，即使你所要做的只是健身和牙医预约，但你本周的计划也会看起来非常令人兴奋。
　　但这还不是最好的。我注意到，无论何时我创建新事件，我都默默的希望Google日历能够创建它的插图，而当这一幕发生时，我会很开心。而且，很明显，插图实验并不单单适用于我，因为最近Google推出新版网页版的日历也同样采用了。
　　吉祥物
　　多年来，模仿产品的可爱角色，一直在网页设计和营销中使用（想想RonaldMcDonald和theMichelinMan）。在界面中，应用还不算多。用户界面中的吉祥物可能被视为侵入性的和烦人的，特别是当它们阻碍用户重要行为或阻断视线时。
　　微软的Clippy是应用吉祥物的失败案例：它引起的只是恐惧和厌恶（当然，这是情绪，而不是你想的那种）。
　　同时，研究表明：即使是简单的几何图形，人们也很容易将事物拟人化。栩栩如生的生物就更容易联系和理解其行为，并且通常对其有感觉。
　　此外，动画角色更容易将个性归因于个人，因此你可以通过该角色来表现产品的特征，使其变得俏皮和愚蠢、热心和乐于助人，或者任何你期望的特征。凭借这种未开发的潜力，吉祥物非常适合非情感的产品。
　　诀窍是时机。
　　Clippy非常邻人讨厌的原因，是因为他经常不请自来，打断了完全不相关的任务。但是，如果吉祥物在相对闲置的时间出现。例如：当用户刚刚完成了一项任务时，它做出可爱的动作。
　　吉祥物设计案例：RememBearandYelp
　　TunnelBear公司最近推出了形如按钮可爱的产品（不是双关语），RememBear是一个密码管理器，人们是不会拿密码开玩笑。RememBear中的卡通熊的聪明之处在于，当你正在做一些严肃、重要的事情时（比如创建一个新的记录时），它们就不会隐身。
　　相反，当您完成应用注册的第一阶段但还没有进入第二阶段时，您会得到熊的拥抱，这是保存你的第一个密码。RememBear通过这种方式，在我意想不到的地方搏我一笑。
　　就像RememBear一样，Yelp（一款广为人知的餐厅评论应用）祥物出现时机也非常完美。有趣的仓鼠首先出现在iOS应用设置的底部，这样用户就像发现复活节彩蛋一样发现它。
　　Yelp的产品设计经理YoniDeBeule说：
　　在Yelp，我们一直努力使我们的产品和品牌让人感到有趣和愉悦。我们要在每件事情上都要表现Yelp的个性，从我们有趣的海报设计、有趣的版本说明，到内部黑客马拉松项目和Yelp精英派对。当我们发现我们的iPhone设置页面在娱乐方面严重缺乏时，我们决定撸起袖子来完善它。
　　随后，仓鼠成为了公司app在iOS应用商店里的商标，因为在此之前，该团队为Android版本设计了一个迅猛龙，为网页版设计了一条狗。因此，无论何时何地，当你使用Yelp时，你几乎会看完所有的评论，这样你可以看到另一个令人愉快的角色版本。
　　总结
　　并非所有的产品都具有游戏或社交媒体app的天然乐趣，即使是公共事业也不一定只有实用的。处理重复性任务的app通常与留住用户相冲突，因为人们常常感到无聊而放弃它们，而无聊就是缺乏刺激。
　　通过使用像幽默、动效、插画、游戏化元素和可关联角色等正面激励，我们可以让用户感受到一种更加兴奋、更少分心、更加快乐的不同方式。
　　原文作者：AliceKotlyarenko
　　原文链接：https：www。smashingmagazine。com201804designingemotionalinterfacesboringapps