写给新手的情感化UI设计简明指南

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

写给新手的情感化UI设计简明指南

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

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

情感化UI设计

写给新手的情感化UI设计简明指南

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

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

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

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

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

正确的情感

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

写给新手的情感化UI设计简明指南

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

对于Kazim 所创造的这个情感化色轮,她是这样说的:

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

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

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

设计情感

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

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

色彩

写给新手的情感化UI设计简明指南

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

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

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

表情

写给新手的情感化UI设计简明指南

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

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

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

文案

写给新手的情感化UI设计简明指南

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

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

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

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

结语

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

 

原文地址:designshack

原文作者:CARRIE COUSINS

译文:@陈子木

译文地址:http://www.uisdc.com/beginners-guide-to-emotive-ui

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27246/

(0)
CatherineCatherine
上一篇 2017-05-17 06:56
下一篇 2017-05-17 08:57

相关推荐

  • UED网站“新视界新体验”运营设计的思考

    2018年3月20号,我们UED网站(ued.z6.gldcg.com)开始首次运营,推送了我们的第一篇文章“新视界新体验——广联达集中采购平台新版设计”,在朋友圈,小火了一把。21号的时候,我对这个事情,又有了新的思考:第一次发文的目的是什么:1、推广我们产品全新界面,新体验;2、推广我们UED的网站;事实上,我们达到了我们的目的,微信群中得到了大家的认可,点赞;朋友圈大家转发和分享;朋友圈留言,要体验我们产品;老客户看到后要求升级产...

    2018-03-22
  • 一个精美的手机的原型怎么产生的第一集

    阿西录了下视屏尝试下最直接的方式 ,你看着我怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-1 在线播放! 第一集: 第一集下载地址:点我点我 第二集下载地址:点我点我

    交互设计 2014-09-05
  • 如何运用“交互式电子白板”,凸显英语课堂教学的“交互性”?

    今天小编带大家认识什么是交互式电子白板?以及它在教学中的应用。让我们一起来了解一下吧。 交互式电子白板整合了普通黑板这和现代多媒体教学的优势。随着社会科技的发展,多媒体技术早已进入了课堂,但传统教学中…

    2015-04-15
  • Axure基础

    目录(使用微信自带页面搜索功能)第一章 使用元件基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏基础11. 设置文本框输入为密码基础12. 设置打开选择文件窗口基础13. 限制文本框输入字符位数基础14. ...

    2018-03-15
  • 产品需求沟通出问题怎么办?

    产品制作的流程中,发现需求并定义需求是首要环节,假如产品需求沟通出现问题了怎么办?你需要解决三个问题,避免含糊性,定义需求和功能,明确功能和属性。  一:如何避免含混性出现 含混性,指的是不清晰的程度。…

    2014-11-14
  • Axure RP 7.0软件安装视频教程

    Axure RP 7.0下载地址:链接:https://pan.baidu.com/s/1eTf0W6Y密码:otr5安装中有问题请咨询私人微信:152374906801、找到AxureRP_Pro_Setup.1415607193.exe鼠标右击以管理员身份选择打开2、点击next3、勾选I Agree,然后点击Next4、点击Browse更改安装路径建议安装到除C盘以外的磁盘,可在D盘或者其他盘创建一个文件夹。然后点击Next5、名...

    2018-03-04
  • 用户体验,比一切事情都大

    一直想写一篇与用户体验相关的文章,因为这里面用很多误区,很多朋友认为用户体验很简单,只要高层强调和重视、把页面设计的好看就可以了。其实,用户体验是一门相当专业的跨学科综合科学。大概从2005年开始,笔者自己很有幸成为国内第一批的用户体验践行者,我们是国内第一批UCD(User Central Design)成员。当时,国际上流行的用户体验是一个五层框架模型,从底层到顶层分别是:战略、范围、结构、框架和表现。我非常清楚的记得我的第一个用户...

    2018-02-28
  • APP界面设计流程

    此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的。包括:1、交互流程设计;2、风格定位;3、功能icon设计;4、界面视效整体优化;5、应用icon设计。   来源:G-UIDEA

    2016-05-06
  • 用户体验是一门玄学秘籍

    Part 01 - 用户体验和用户体验设计关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。1.1 什么是用户体验?用户体验的定义有很多种,我比较倾向的解释是:“用户体验是人对于使用一个产品、系统、...

    2018-02-22
  • 深度解析!天猫双11宇宙 H5 的惊艳效果是如何实现的?

    来源:H5广告资讯站 作者:小呆 原创文章,转载请联系本人! 记得在上个月小站推荐万达的第一支一镜到底H5作品时,就有用户曾放下狠话:“你就等着我们的一镜到底吧!” 因为留言的人是圈内的技术大神,自然也就引起…

    2016-10-25