写给新手的情感化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

相关推荐

  • 总结了一套完整的设计分析思路

    本文主要是根据个人在各个大大小小的项目中总结而来的一套做设计分析的参考思路,应用于常规的项目场景基本是够用了。“需求是业务方的几句话描述,只能管中窥象的了解他们一些零零碎碎的想法,没理解到本质需求就开始画界面,然后不断的随着他们想法的转产而反复被动修改交互稿…”
    “PM已经画好完整的demo,交互看着似乎能做的只是根据demo做细节优化和完善,做着做着就迷茫了,设计的价值到底在哪呢?”“在公司中作为职能部门的UED团队,需要站在用户的角度思辨业务,通过服务内部客户进而服务我们的最终用户,用设计专业帮助业务成功,与业务一起成长”。Tips: 跟需求方沟通挖掘需求,最重要的注意点是需求方对我们来说是快速了解行业现状和市场需求的绝佳伙伴,所以要更多的聊这些,而不要很快就陷入页面具体细节的讨论。(如果需求方主动要说,可引导至挖掘背后目的是什么,为啥要这样做,具体表现形式可以后面在细化页面时再考虑)某家居用品商要制造一款家用钻孔机,继续往下深挖用户诉求:
    “用户需要的并不是一台钻孔机,他们需要的是墙上有几个孔”
    “用户需要的并不是墙上的几个孔,他们需要的是墙上显示家人照片”
    “用户需要的并不是挂了照片的墙,他们需要的是一个更温馨生动的家”
    ……通过「某策略」,帮助用户实现「某价值」,以完成「价值变现」。

    2017-05-02
  • 手机无线设计8个交互设计原则

    产品设计的原则有点太泛哈,这里想结合自己的工作心得来小结一下手机无线设计8原则: 原则1:用户界面应该是基于用户的心里模型,而不是基于工程实现模型 就是把后台本来很复杂的事情通过设计符合用户日常生活中常…

    2015-04-08
  • 用户体验入门:新人自学包之控件学习

    控件(或部件,widget或control)是一种图形用户界面元素,其显示的信息排列可由用户改变,例如视窗或文本框。控件定义的特点是为给定数据的直接操作(direct manipulation)提供单独的互动点。控件是一种基本的可视构件块,包含在应用程序中,控制着该程序处理的所有数据以及关于这些数据的交互操作。
    ——https://zh.wikipedia.org/wiki/控件

    2017-05-20
  • 与潘通CEO对话:合理的色彩运用,才能设计吸引人的产品包装

    年度流行色从何而来?潘通如何决定每年的流行色?你知道小黄人的颜色是潘通挑选的吗?以上问题在这篇对话中一一为你揭秘。“基于 Pantone 公司的核心业务,色卡销售,色彩咨询,以及色彩授权,中国目前是 Pantone 继美国后的全球第二大市场。按照中国的国际化趋势,不久后就有可能超越美国成为 Pantone 在全球的第一大市场。尤其,中国市场目前愈发突显了对设计的追求和重视。”Color defines our world. ——  Laurie Pressman  Vice-President of the Pantone Color Institute“For me it has always been such a calm color. Grey is like your favorite T- Shirt.” —— Jason Wu

    2017-05-11
  • 学而思网校UED部门招聘

    简介INTRODUCTION学而思网校,纽交所上市公司好未来集团旗下品牌,专为3-18岁孩子提供小初高全学科课外教学。UED负责K12在线教育全业务体验闭环的设计工作,我们的团队活力创新、勇往无前,真诚期待你的加入~UI设计师UI DESIGNERS岗位职责负责网校全平台产品体验设计工作;可以主导设计风格,参与设计规范和流程的制定。岗位要求3-5年视觉设计经验,美术、设计、艺术学等专业,本科及以上学历;有移动客户端设计经验更佳;熟悉用户...

    2018-02-16
  • BAT名师访谈,阿里交互设计专家的成长之路

    编者按:优设访谈第四期!今天这位设计师也是老朋友了,作为网易电子商务部UED团队的创建者,阿里现任交互设计专家,以及业内人士鼎力推荐的《破茧成蝶:用户体验设计师的成长之路》联合出版人,@刘津legene 老师的…

    2015-11-19
  • Fitbit:一份用户体验案例研究

    当谈论到锻炼时,这个世界上有三类人:每时每刻都在健身的健康达人;那些一天中全部锻炼内容就是从前门走到车里,每天在沙发看电视的人们;在这两者之间,想变的健康强壮但缺少一些动力去健身房的人(又称在屁股上踢一脚才行动的人)。 我,和我知道的大多数人一样,都是第三种类型的人。我们被称为是

    微信热点 2018-03-31
  • 如何有效的做产品迭代分析

    “ 做过这么多产品迭代分析,却依然找不到合适的方式表达。” 产品迭代分析对于交互设计师可以说是家常便饭了,隔壁的某某有了新功能,某某家的谁又更新了个大版本,都需要时时保持关注。但是,每当小珏吭哧吭哧的收…

    交互设计 2014-11-11
  • 准备入行交互设计之前,先来搞清楚这些基本概念

    一直以来,经常有学生来问我,“是该选产品设计好还是交互设计好?”或者“过去是做产品设计的可不可以转交互设计?”“是不是视觉设计转交互或者界面设计方便点?”等等诸如此类的问题。笔者注:“产品”既可以是物质化的…

    2017-08-03
  • 这样学Axure,效果更好,面试更容易拿高薪|1433人的经验贴

    众所周知,Axure是产品经理必备的工作软件。但为什么要学好Axure,仅仅是因为它是必备的软件?为了不错过更好的发展机会BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别等要用时,才发现自己没有!别让Axure阻碍你的高薪产品路。怎样学Axure,效果更好?想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没到一个周,就想放弃按教程操作,却出不了效果,又不知错在哪里难的知识内容看着费劲,...

    2018-04-20