当前位置：首页 >教程首页 > U I 设计 > AI+UX设计大师班 >牢记这6点，你也能做出极具感染力的UI设计！

牢记这6点，你也能做出极具感染力的UI设计！

发布时间：2018-11-17 19:57:24

今天来聊一下情感化的UI设计。在用户和UI之间建立情感联系是构建用户信任和依赖关系的关键因素，而实际上要做的事情比听起来麻烦得多，因为需要考虑的因素更多。情绪是广泛的、复杂的，它容易受到影响，但是也很难改变。

而这也是我们今天要思考的事情，什么是情感化的UI设计？如何创建一个能够唤起用户情感波动，构建情感纽带的UI界面？这应该就是你的下一个设计项目中应该仔细考虑的事情。

情感化UI设计

其实，从电子邮件、短信和社交媒体帐号当中，我们可以窥见情感化UI设计的影子。我们日常交流中，每天发出去的那么多表情符号，可以让别人清楚得了解我们的感受，而这就是情感化UI的一种呈现形式。

情感化UI 是网页设计领域的新圣杯。它是高度可用的界面和内化情感联系的结合，无论是快乐还是悲伤，是愤怒还是愉悦，当用户同一个设计精妙的情感化UI界面交互的时候，就能第一时刻感受到。

让用户从界面中感受到情感和情绪，总好过什么都感受不到的设计。

用户在同界面进行连续交互的过程中，逐步的变化可能会牵涉到一系列不同的情感情绪，而这些是你需要考量的。当然，其中最重要的事情在于，真正触发情感的是你的内容与相应的设计，它们也是你所讲述的故事的核心部件。用户所产生的情绪最好不要来源于你的网站或者APP本身——比如不要用户因为糟糕的体验和不可用的模块而感到沮丧。

正如你所知，人是一种颇为复杂的生物，用户很少能够清晰地判断自己的感受并准确的表达出来，不过好在还有一些理论和方法能够帮你完成这项工作。

正确的情感

Huge 的用户体验主管 Sherine Kazim曾经设计了一个基于emoji 表情符的情感轮，它将我们所熟知的色轮和情绪、emoji 表情结合到了一起，并加入了相应的关联。如果你想知道色彩是如何影响设计，不妨从这个色轮开始着手了解。

不过随着时代的变迁，Kazim 的这个图中的 emoji 表情符似乎比色彩更能阐明UI的情感化设计。

对于Kazim 所创造的这个情感化色轮，她是这样说的：“仔细看这个情感色轮，你会发现，距离中心越远，情感的强度越弱，但是在进行色彩的设计之时，几乎没人探讨这个问题。我们在做设计的时候，常常会探讨如何传递或者影响基本的情绪，但是我们从未探讨过用户的情绪是否会被强化或者逐步减淡。”

那么她到底要表达什么呢？很简单，情绪是复杂的，它并不是我们日常所面对的非此即彼的设计模式。许多设计师试图使用红色来营造愤怒和躁动的情绪，但是实际的情况并非如此。

能够让人产生情感关联的不仅仅是色彩，它和其他的因素、设计元素都有关联，单纯的色彩做不到这一点。

设计情感

再仔细看看这个情感化设计的色轮，你会发现它并不单纯是一个设计漂亮的信息图。它帮你梳理出了情感化的UI设计应当遵循的三个过程，而这些过程则指明了你应该给予用户的感受。

作为情感化UI设计中最引人注意的部分，色彩、图像、表情和正确的语言文字是关键。

色彩

先说色彩。色彩是大家都已经熟知的情感化UI设计的关键元素，仔细回想一下 Kazim 的建议，并思考一下用户和情感之间的关系，你会发现一种色彩确实没法建立起完整的情感关联。

但是反过来思考，你会发现色彩是构建一套完整情感关联体系的良好框架。值得注意的是，你对于色彩的认知和用户同色彩之间的情感联系是有所差异的。

当你看到上面的图片的时候，你是怎样的感受？明亮的色彩能否触发出你的某些情绪么？又或者你刚刚看到色彩的时候，并没有明确的情感变化，直到看到其他的部分？

表情

从视觉上来看，使用面部表情来创造你所需要的情感是最好的方法。人的面部所能承载的情绪和情感但对于用户而言更容易判断也更容易被接受，所以这样的图片也有着更为明显的效力。

上面的图片源自于名为 Elegant Seagulls 的网站，拓扑中的男人所展现出的是某种程度上的快乐和惊喜，那么你能否体验到相似的情绪呢？当你看到他的表情的时候，是否会微微一笑呢？

这是一个相当有效的情感化UI设计，尤其是当你需要在此基础上进行下一步设计的时候。如果你继续查看下一个图片表情的话，那么你觉得会发生什么？

文案

最后，文案和内容也很重要。从你的文本内容选取到字体的选择，最终都会对访客产生情感上的影响。

文案和字体会作为最终的线索，让色彩和图片向着特定的方向，最终固化成为确定的含义，传递出明确的情绪。是的，你需要明确地“阐述”出来。

语言是柔和是直接，是兴奋还是焦躁，这些情绪都能够为用户所感受到。借助这些文案，你可以同用户进行沟通，结合行为召唤按钮和辅助性的叙述，最终将情绪传递给用户。你能否营造出场景，达到你想要的目标？

看看 Draper James 的服装网站吧。首页大图中最吸引人的大概是妹子脸上的微笑吧？明亮的色彩给用户愉悦的体验，而随后的文案内容“Happy Fall，Y’all”它将秋季的愉悦情绪毫不掩饰地表露出来，用户在这个时候可以直接地体会到设计师的情感。当然，这样的设计针对性很明显，有一部分用户可能会因此离开，但是你需要针对这个进行判断。

结语

情感化的UI设计并不是新鲜的内容，但是由于技术的发展，不断有新的技巧和思路涌现，虚拟现实和现实增强以及人工智能的出现，让情感化UI设计的未来有了更多的可能性和疑问，用户可能会越来越追逐“真实”的情感体验，那么作为设计师的你，能做的事情会更多，而所需的思考也必须越来越深入。

上一篇 2011年网页设计趋势全面分析

下一篇国外干货：如何利用动画效果来提升用户体验？

返回列表

学员作品赏析

2101期学员李思庭作品
2104期学员林雪茹作品
2107期学员赵凌作品
2107期学员赵燃作品
2106期学员徐正浩作品
2106期学员弓莉作品
2105期学员白羽新作品
2107期学员王佳蕊作品

热门课程

专业讲师指导快速摆脱技能困惑

多种教程总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

知道了这17种剪辑技巧，做短视频博主上热门洒洒水啦！

电影剪辑通常被称为“隐形的艺术”，尽管剪辑师的名号不如导演的名号响，但是如果缺少了剪辑师对拍摄素材的二次加工，电影作品将缺少其......
迪士尼如何使用Maya制作《海洋奇缘2》

今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！

增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
短视频怎么剪能上推荐？这10个概念请记牢！

在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
探秘皮克斯！《头脑特工队》的幕后制作

今天，我们聊聊皮克斯的《头脑特工队》系列
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？

中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......