沪ICP备06058754号-1
文学修辞与用户体验动效设计层次理论的应用研究

骆伟雄

2019-09-16

用户体验 文集

2018年学术论文欣赏

本文段落精选

 

本文尝试通过对文学修辞与用户体验动效设计的借鉴及联系和区别构建一套新颖的动效设计思维。通过传统文学修辞手法在产品用户体验动效设计中运用,提升用户体验的立体层次。

 

传统的文学修辞能够很好的指导我们在产品用户体验设计过程中的动效设计灵感,我们可以将常用的修辞手法以卡片的形式进行组合,通过多维的穷举组合形成不同的创作手法,在这之中寻找动效设计的创意和适于表达用户体验的手法。这将更好的帮助我们提升产品的用户体验。

 

 

 

文学修辞与用户体验动效设计层次理论的应用研究

 

骆伟雄

福建网龙计算机网络信息技术有限公司,福州,中国,350000

 

 

摘要:

 

通过传统文学修辞手法在产品用户体验动效设计中运用,提升用户体验的立体层次。

借用本题的文学修辞,如果把产品比喻成一个人,界面就是她的衣着发型,交互就是她的气质和内涵,而动效则赋予了她形体动作的美感,如同美妙的舞蹈的作用一般。

文学修辞手法在文学作品中的运用,使得文学产品更加生动形象和富有创造力的同时,也实现了在纯文字化的语境里传递丰富的五感;同样的,在用户体验设计中运用动效设计的手法传递产品的情感使得产品的品牌形象深入人心的过程中;本文尝试通过二者的借鉴及联系和区别构建一套新颖的动效设计思维。

动效设计的运用是最近几年才开始被用户体验设计师所重视,并无体系化成熟的理论研究,我们通过本文构建一个立体丰富且明确的理论架构,使得产品在交互逻辑、视觉渲染和创新实践上能更有章法可循,继而产生更大的突破。

用户体验设计中的动效设计包含多种维度的设计、如技术性、节奏感、落地性能、情感化等、本文仅挑选其一情感化的角度研究其与文学修辞的联系及技法运用,将抽象的概念转化为具象的动效表现。

提升产品用户体验,为当下互联网线上产品的动效设计的发展提供理论指导。

 

关键词:用户体验,文学修辞,交互设计,动效设计,情感化设计

 

一 绪论

随着互联网的飞速发展,产品同质化现象逐渐严重,如何在同类型产品的功能、体验、界面操作都同质化类似的情况下脱颖而出是目前产品设计中的一个重要研究问题。

动效设计,似乎是近几年来随之兴起的一个职业领域。不过其实在传统文学写作过程中,早就有了类似的设计手法。在文本化时代,我们无法面对面的通过类似语音、直播或者短视频的方式向用户展示我们的想法、概念和实物,我们通过修辞手法的方式将我们的思维与用户的思维进行沟通,并且使之立体真实,提供一种新颖的动效设计思维;而如今,我们通过动效设计的方式,使得我们产品的体验更加有趣——并且不同于同类的产品,这是最为重要的。美好的实物都是共通的,我们发现在二者之间存在一些类似的联系。

但在目前的设计教育乃至设计思维中,对于动效设计的体系化理论都偏少,所以作为一个创新型的研究而言,我们更多考虑动效体系层次理论的建立。限于作者的知识范围和论述的篇幅,本文更侧重于设计思维和方法的研究,故本论述定难免有所缺陷,还请读者见谅。

 

二 动效设计的层次模型

在论述的起始,还是先将动效在产品用户体验设计中的结构进行阐述,基于这个结构再提出动效设计内部的层次理论。

 

2.1 动效外部层次结构

 

 

图 1  动效外部层次结构

 

信息的传递模型至下而上触发。产品设计师通过信息架构指导操作界面的布局形成,用户通过操作界面和交互方式的输入与产品进行互动,而产品通过界面操作的动效反馈为用户带来系统的感知,从而形成了用户体验操作的闭环。

在这里我们主要针对最上层的动效层级进行拓展理论体系构建。可以看到它主要侧重于用户体验中重要的环节——反馈,这是产品与用户互动沟通的渠道和最直接的方式,在这个环节的设计质量的高低直接决定了产品整体用户体验的好坏。

 

2.2 动效内部层次结构——金字塔原则

动效在产品设计中的使用并不是越多越好,也不是越复杂越好;同样的,它不是越少越好,也不是越简单越好。这是一个基于“量”和“度”双重维度的对动效层次的再次构建。在这里,我先把我在多年来诸多产品动效整体规划设计工作经验中总结的动效设计层级理论以金字塔的形式展示出来。

 

 

图 2  动效设计金字塔原则

 

整体的产品动效层级至下而上进行逐层构建,进而形成立体化的动效理论——金字塔原则。

 

2.2.1 基础层动效——高频不可感知(可用性)

基础层动效设计,顾名思义,它是一些常见的基础动态效果,如鼠标悬浮时候按钮文字的变化、或者按钮的外发光反馈等等,它是普遍的,清晰简洁的,让人感知不到的。不可感知性是这个层级动效设计最为重要的点,因为它对应的都是一些高频次的操作,太多太复杂就容易遍地都是,让用户眼花缭乱产生烦躁的情绪。这个层级的动效主要是起到一个引导和流畅整体产品体验环节的作用,使得产品的操作更加便捷和易于使用。

 

2.2.2 表现层动效——招牌、品牌形象差异化(易用性)

表现层动效设计,是对于基础层诸多动效维度与同类产品对比并确定本产品品牌调性的基础下的选择性差异化和多维度的复合实现。例如,我们在一个普通的文本加粗按钮的动效设计中会让它产生文字上的颜色变化这一单一维度的设计——点状设计,它属于基础层动效设计;而对于一个重要按钮,举例如PowerPoint中的新建PPT文档按钮的设计,我们可能会让用户在使用它的时候会有不同的反馈效果,例如加以音效、加以立体的翻转,同时由于这个按钮的重要性,点击完成后展开新建页面的过程,也会以例如纸飞机飞过并摊开成一张完整的纸张的动效过程加以演绎,类似于连锁反应一般层层推进前后联系,表现层控件的动效设计是一个持续的而非单点的设计——线性设计。

从这里可以看出,同属于一类交互控件——按钮,基于它的所处的语境和它自身体验和功能的重要性,我们将它定义为不同层次的动效设计。表现层不同于基础层的动效设计在于,它是多维度的而非单一维度的、它是持续连贯的而非点状结束的。

 

2.2.3 品牌层动效——高难度复杂、强化品牌形象、短期不变(品牌情感)

来到这一层的动效设计,区别于表现层,品牌层在每个产品中都至多只会有一个,它是高度复杂,并富有表现力的一个动效综合体。举例的说,例如很多安卓手机里的手机内存清理软件的动效设计,它是一个产品的最核心功能和最酷炫的表现动效,从而强化品牌形象(例如清理的更干净更快速)等。并且它是在短期内不会改变的,可以把它当做品牌VI设计在新的互联网产品时代的一个增项——品牌动效VI。这一层级的动效设计是基于表现层和基础层的深化和总结,作为三者共同形成的核心设计——面性设计。

 

三 动效立体层级建构——五维分析法

既然用户体验内产品的动效维度有金字塔式的三层结构,通过点线面三个层次的深化设计实现,那我们通过哪些方式来区分和建构单一动效呢。

 

3.1 五维分析法

以下我将从复杂度、频率、关注度、时长、情感四个维度进行产品用户体验动效设计体系解构。我们先看以下的图示。

 

 

图 3  动效设计五维分析法

 

3.1.1 动效复杂度

首先是它实现的复杂程度,动效的构建目前在线上产品设计过程中,主要有以下五个维度的二十五种设计手法。(接下页)

 

 

图 4  动效设计手法

 

每个动效都是有其中的单一或者复合属性构建而成的,所谓的动效由基础层到品牌层复杂度的变化,指的就是运用的动效设计手法的复合程度的多寡。基础层动效一般只有一到两种设计手法,表现层和品牌层则更多更复杂,视具体情况不一而是。

 

3.1.2 动效频率

所谓动效的频率就是该动效在产品使用过程中出现的频次,在单位时间内,从基础层到品牌层这个频率是由高到低的。结合基础层动效不可感知的特点,我们可以发现,基础层动效虽然出现频率高,而它的不可感知性决定了它动效复杂度是最简单的。

 

3.1.3 动效关注度

我们在一开始提到基础层较之表现层它的主要特点是不可感知性,而这个不可感知即用户的关注度,整个动效层次体系至下而上的感知层度也是由低到高的,通过立体化的关注度的诠释让用户在使用产品的过程中实现劳逸结合,而非审美疲劳。

 

3.1.4 动效时长

动效的时长直接影响了它的感知度,因此可以发现从基础层到品牌层,整体产品的动效的时长变化是由短到长的;越简单的动效时长越短,越复杂的动效基于多重复合和延迟等等,时长越长;

 

3.1.5 动效情感

在开题处我们提到动效的作用是赋予产品动态的美感如同美妙的舞蹈一般,因此动效主要的作用也是在交互反馈过程中提供用户情感上的交流,形成“流动设计”。从基础层到品牌层的动效演变,她给予用户的情感也是逐层递增的,由不可感知逐渐递增到惊艳和记忆深刻,从而产生美好的体验,深刻品牌形象。

 

3.2 动效层级的立体层次

我们已经从纵向金字塔原则(基础层、表现层、品牌层)的深入,以及横向五维分析法(复杂度、关注度、频率、时长、情感)的对比,建构出一个多维立体的产品用户体验动效设计理论层级架构。它可以更好的指导我们在产品设计的过程中,对于产品动效设计的理解。避免我们不知为产品赋予怎样的动效,以及赋予多少的动效表现。

我们可以通过金字塔式的立体动效理论使得我们的产品也变得更加立体和富有层次,通过良好的动效运作使得产品如同一个气质外形俱佳的少年一般与我们的用户产生良好的交流,进而强化品牌形象形成美誉度。那么如何去“教育一个少年的气质和动作呢”——正是我们接下来所要探讨的通过文学修辞手法的运用来提升动效设计的质量。

 

四 文学修辞在动效层级中的运用

首先我们看下二者分别的定义。

修辞是使用语言的过程中,利用多种语言手段收到尽可能好的表达效果的一种语言活动。

动效是产品设计过程中,利用多种动效手法对交互体验和操作界面作一个统一的动态表现,为用户提供便捷的操作并使得操作的反馈富有情感和趣味,提升产品用户体验的过程。

我们可以发现,二者都是为了使得它们各自所属的主体活动达到更好的效果而应运而生的装饰性的手法。这里我们分开阐述二者,再作出结合示例。

 

4.1 常用的文学修辞手法

修辞手法一共有六十三大类,七十八小类,限于篇幅,我们这边主要以常用的六种修辞手法中的几种来进行表现。它们主要是比喻、拟人、排比、对偶、借代、夸张、拟物、象征。

在我们通过业务和用户双方面对产品本身进行分析后得出动效设计的目的,继而形成它所需要承担的作用与功能,进而我们就可以通过修辞手法的运用来开展我们产品的动效设计。

 

4.2 修辞手法的运用

佛洛依德的精神分析法提到,真正影响用户的显性人格的并非理性,而是在各个生理时期形成的潜意识因子。如果界面的设计元素可以与这些现实世界中的潜意识因子相呼应,勾起用户的回忆,引起用户的共鸣,那当用户操作界面时,就能够产生认同的情感体验,与界面产生互动从而引导用户积极操作。

 

4.2.1 修辞-比喻运用

首先是比喻,其即根据不同事物的相似之处,用浅显、具体、生动的事物代替抽象、难理解的事物。通过形象化的比喻提升用户的理解力和感知力。

对于我们经常进行的Mobile端到PC端文件互传这一过程的动效设计,在我司产品设计过程中也碰到了如何让教育从业者(我司主要目标受众,相对互联网经验较少)感知虚拟的文件传输的过程的问题。我们通过寻找日常生活中与传输运输相关的形象事物进行抽象,最终选取了时光隧道、纸飞机、碎片重现三种与传输相关的元素展开设计。并且经过最终的用户调研和测试,最终选取了纸飞机的设计方案。通过利用儿时课堂利用纸飞机传递信息这一形象化过程对抽象化的文件互传进行提现,即满足了用户的愉悦感,又提升了体验设计的反馈效率。

 

 

图 5  101教育PPT 文件传输-纸飞机动效

 

 

图 6  101教育PPT 文件传输-时光隧道动效

 

4.2.2 修辞-拟物运用

以拟物为例,我们可以发现谷歌提出的原质化设计(Material Design)的核心概念就是——材质隐喻。实体的表面和边缘是基于真实效果的视觉体验,熟悉的触感让用户可以快速的理解和认知。实体的多样性可以让我们呈现出更多反应真实世界的设计效果,但又绝对不会脱离客观的物理规律。

安卓系统Material Design里按钮点击的模拟水波扩散的质感即为拟物在动效设计中的运用。例如以下的按钮点击水波效果的比喻本体就是按钮,喻体就是水波,从而通过浅显熟悉的事物来说明抽象生疏的事物,缩短了用户和界面之间的认知代沟。

 

 

图 7  Material Design 水波纹效果

 

4.2.3 修辞-拟人运用

拟人,这就更好理解了,我们会发现,早在十几年前的金山杀毒软件的小狮子,乃至迪士尼动画设计都在使用的,就是通过赋予人物的性格给产品,使得它是易于亲近的、生动形象的,并且可以自主表达情感,与用户形成沟通互动的,这个就是很多产品里面的小助手动态形象的运用。

例如我们在以下图片里看到的登录框暗文输入时候猫头鹰的双手遮蔽眼睛的动效就新奇有趣,它模拟了现实世界中我们让旁边的人遮住眼睛不要看秘密的情景。通过UI的排版和动效的结合实现了枯燥的密码输入也变得好像有个人在陪伴你一般有趣。

 

 

图 8 登录框拟人运用

 

以及下图404界面一双发抖拟人的眼睛所传递出来遇到404页面找不到时的心情,也是恰如其分的将拟人的手法赋予了产品动效设计,使得产品具有人物般鲜明的性格,从而更加亲近用户,帮助用户从错误和意外中恢复不沮丧。

 

 

图 9 404页面 眼睛发抖拟人运用

 

4.2.4 修辞-排比运用

排比在动效设计中的运用就更多了。我们首先分析下,排比的修辞手法是由三个或者三个以上结构相同或者相似、内容相关、意义相近、语气一致的短语或者句子排列起来,借以增强表达效果。使得行文更有节奏感和说服力,增强表达效果和语气,深化中心。那我们在产品的动效设计中,什么情况下会遇到结构相同的模块呢?列表元素的依次出现展示,或者是一二三级菜单的联动展示。通过第一个物体带动其他物体结合一定的延迟来强化元素的逻辑性和他们结构上的一致性。

 

 

图 10  列表元素排比运用

 

另外抖音或者各大直播间的各种点赞动效,也是运用了排比的手法,通过长按点赞持续发送点赞符号,进而强化支持主播的氛围,可见在手法的运用上它们达到了和排比修辞手法类似的文学作用。

 

图 11  直播间长按点赞排比运用

 

4.2.5 修辞-象征运用

象征,即根据事物之间的某种联系,借助某人某物的具体形象来表现某种抽象的概念、思想和情感。这在动效设计中也经常被运用来增强某类反馈的强度。

例如密码错误的提示,除了常规的文本内容提示,我司设计师在“101教育PPT”产品设计过程中赋予其“左右摇头”的动效,“摇头”的象征语义即为“错误,请重新尝试”,通过形象化的象征手法将反馈信息增加,提升用户对系统反馈信息的获取效率。

 

 

图 12  101教育PPT 密码错误反馈摇头动效

 

4.3 设计验证研究

我选取了以上4.2.1的纸飞机文件传输、时空隧道文件传输、常规无动效文件传输等三种设计进行用户调查,通过让用户传输一份300M的文件进行用户观察和访谈。调查结果显示高达68.6%的用户认为纸飞机传输过程时间最短,22.9%的用户认为时空隧道方案传输时间最短,仅有8.6%的用户认为无动效传输方案时间最短。事实证明了利用比喻手法进行的动效设计方案对于消除等待烦躁的效果明显,提升了用户体验效率。

 

 

图 13  101教育PPT 文件传输动效用户调研

 

同时,对于4.2.5的象征手法的运用,我们也针对性的进行了A/B测试(密码错误提示摇头动效方案,密码错误提示透明度渐现式动效方案,无动效方案)三组用户进行了测试:分别告知他们三组密码随机密码,仅有一个密码正确,让他们尝试登录。通过后台数据显示这三组用户从开始登录到成功,摇头动效组平均用时7.7秒,透明度渐现动效组平均用时9.9秒,无动效组平均用时11.8秒。可见针对性的使用修辞手法进行动效设计对用户感知力提升具有重要的作用。

 

 

图 14  101教育PPT 登录动效用户调研

 

至于其他更多的修辞手法在动效设计中的运用,我们可以从中国传统文学里得到诸多灵感借鉴,如“枯藤老树昏鸦小桥流水人家”的排比和借景抒情渲染氛围;如“楚山秦山皆白云,白云处处长随君”将上句结尾作为下句开头的连珠手法在动效设计中为了体现转场连贯性消除屏幕的跳跃也经常运用;“烟笼寒水月笼沙”的互文手法在动效设计中体现的耐人寻味给人思考的空间;“通感”修辞在动效设计中通过不止一个视觉维度增加听觉音效维度来提升动效用户体验;“Mac OS”下窗口最小化的夸张动效等等例子。

由于篇幅的限制,在这里就不一一对所有的修辞手法在动效设计中的运用进行分析,修辞手法在动效设计中的运用还需要更多手法的运用组合,不断深化,从而进一步提升用户体验,而这其中的核心就是找准设计机会点进行动效和修辞的融合设计。

我们已经可以通过金字塔理论和五维度分析法结合修辞手法的运用来提升我们用户体验设计师在产品设计过程中对于动效手法的运用,从而提升产品整体用户体验,真正做到设计驱动产品。

 

4.4 动效设计修辞运用流程

根据多年来在实际工作中对于修辞手法运用到动效设计中的经验终结沉淀,我归纳了如下的动效修辞手法运用流程,通过四步骤实现动效设计与传统文学修辞的理性碰撞。

首先是通过用户旅程图寻找动效设计的价值点,其次通过修辞手法卡片及设计点所要达到的体验目的进行融合选取适合手法并组合,再次通过设计DNA提炼视觉元素和定义交互手法(修辞再现),最后通过分镜和高保真DEMO进行用户测试直到落地发布。

 

 

图 15  动效设计修辞运用流程

 

五 结论与展望

动效设计在交互设计乃至用户体验设计中的重要性已经广泛达成共识,如何通过理论化体系化的方式来构建成熟有效的动效,比如通过传统修辞手法的运用来提升动效设计在产品中发挥的作用等等。然而除此之外,我们还需要关注动效设计的其他层面,例如技术手法、节奏感、落地性能等等。

传统的文学修辞能够很好的指导我们在产品用户体验设计过程中的动效设计灵感,当然这是基于我们对产品的动效目的、所处场景、用户群体等深入分析的情况下制定的,它必须符合上述的动效设计金字塔原则以及五维分析法。我们可以将常用的修辞手法以卡片的形式进行组合,通过多维的穷举组合形成不同的创作手法,这也是我可能在UPA工作坊中开展的设计活动之一,在这之中寻找动效设计的创意和适于表达用户体验的手法。这将更好的帮助我们提升产品的用户体验。

艺术是相通的,在完善动效设计理论体系化的研究的同时,我们需要更加积极的开展文学手法以及其他理论在动效设计中的研究和讨论,尽管动效设计刚刚起步不久,用户体验设计师真正能够成熟的掌握它的还是比较少,但是作为互联网产品异质化和品牌特性化的实现手段之一,相信在将来动效设计理论的发展使得它可以被更加优雅和成熟的运用于产品设计过程中。作为用户体验设计师,我们需要不断学习和运用更多的修辞手法进行动效设计,我们要开始思考动效设计、交互设计、用户体验设计、服务设计等的内在联系和将之运用到日常的产品设计工作中,从而设计出更加符合用户预期及超越用户预期的产品。并为动效设计这一新领域带来新的思维、新的角度、新的可能。

 

 

参考文献

[1] 阿里巴巴 1688用户体验设计部, U一点料.,北京:机械工业出版社,2016.7.P155.

[2] 郭矜持,浅析用户体验在APP界面设计中的表现及应用,2016

[3] Nick Babich ,

7 WAYS TO DELIGHT USERS WITH ANIMATION, https://www.webdesignerdepot.com/

[4] 刘津 李月,破茧成蝶 用户体验设计师的成长之路,北京:人民邮电出版社,2016.7.P136.

[5] Donald Arthur Norman ,设计心理学 3:情感化设计,北京:中信出版社,2015.6

[6] Jesse James Garrett ,用户体验要素,北京:机械工业出版社,2011.

[7] Alan Cooper,About Face 4 交互设计精髓,北京:电子工业出版社,2015.

 

 

UXPA中国会员登录

记住我

第三方登录

×

微信登录

×
请使用微信扫描二维码登录 “UXPA中国官网”

下雨的春天

已使用微信登录(更换账号)

×

会员密码找回

×