动效设计原理:从卡通动画到UI动效

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

630-360头图

概要

UI是基于静态页面来设计的,页面之间通过跳转切换。在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理。这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑。与此相反,在卡通领域,由于使用了足够的动画效果,用户可以非常容易理解某个动作,即使夸张的动作也没问题。

尽管UI设计和卡通动效之间存在差异:卡通更侧重于娱乐,而用户界面却是严谨的互动式工具。但是我们还是可以借鉴卡通动效的优点,从情感和认知层面上将两者的优势相结合。

Keywords

UI、动画效果、卡通

1,UI界面 VS 卡通

大家都知道,UI界面一般都是基于静态页面来设计 – 无数个页面组成了一个软件。通常情况下,视觉设计师直接开始设计静态页面,几乎不考虑它们之间如何切换。由于用户对界面之间的关联没有预期,所以他们经常会受到惊吓。用户苦思冥想,想了解界面之间到底发生了什么。

动效设计原理:从卡通动画到UI动效

(我们的app都是由很多页面组成的,由于用户对界面之间的关联没有预期,所以经常会受到惊吓或者感到困惑。图片来自:http://designbeep.com/2014/06/19/mobile-app-design-inspiration-as-shoe/ )

当用户感知不到页面之间的关系时,就说明页面之间的因果关系不够清晰。让用户理解页面之间的关系至关重要,这直接关系到操作效率。在没有辅助解释的的情况下,用户只能通过经验去理解。这是一个非常有挫折感的体验。

举例来说,在Windows中,如果我们的任务是:打开“我的电脑”中的D盘,那流程是这样的:

  1. 双击“计算机”图标;
  2. 图标扩展成一个窗口;
  3. 在窗口中选择D盘。

在这种情况下,第一步的元素是图标,第二步元素是扩展的窗口。界面之间的跳转是非常突然且直接,且没有前后关联。如果用户第一次使用Windows,这样的界面跳转需要理解一阵子。

动效设计原理:从卡通动画到UI动效

(在Windows中,图标和窗口之间的跳转十分直接,如果第一次Windows使用会让用户很困惑)

用户往往通过经验来克服这些问题。前几次的体验是最糟糕的; 最终用户学习了“机器的行为“才能有效地与它进行交互。尽管这些界面的认知可以通过反复使用来提高,但认知负担依然沉重。例如,用户知道点击图标将打开一个窗口,但是突然的变化(突然从图标变成窗口)也会让用户迟疑。

卡通中的动画效果,非常擅长于提供足够的信息让观众理解。动画中一些令人费解的行为没有让用户感到困惑;动画人物并不会突然消失,突然出现;动画在发生形状变化时非常自然。

动画提供了必要的视觉线索,让人理解某个动作前后发生了什么。不像UI一样认知沉重并非常依赖经验,且还将理解界面的责任的归咎于用户。动画利用真实的动作来展示对象变形,让人更加容易理解。

从认知和情感两个角度来说,将动画融入到界面切换中是有好处的。通过对系统的解释,动画允许用户持续的思考一个任务,而无需回想之前的操作。由于没有突然的视觉变化,动画降低了用户被UI界面吓到的机会,从而减少了不安全感。因此,使用动画不仅有助于用户理解界面,提高使用效率。而且还使界面的体验更愉快更舒适。

2,在UI界面中使用动画的几个方法

多年来,动画师们已经研究出了很多动画设计的方法。这里选择一些同时符合UI和动画的设计原则,同时展示了如何在UI设计中应用。

我们从3个维度来讨论,分别是:拟物化夸张和增强现实。本节提到的所有动画设计原则都来自Disney 《Animation: The Illusion of Life》。

2.1 拟物化

把UI中的元素当作真实的,有重量的物体。在动画片中,人物和元素都是真实的,有重量的物体。他们每次走动都好像是生活在真实世界中一样,这种感觉非常真实。这种拟物感不仅仅是填充一个像素区域那么简单,这些物件的运动是通过增加惯性来实现的。动画的所有的原则,例如:慢进慢出,跟随,和弧形运动,其随后所有的讨论,都是基于这个原则,他们是有质量的物体。

  (所有元素是有重量的物体。这是所有的运动的基础。图片查看:https://medium.com/@druchtie/animation-interfaces-design-2f039da75eeb )

把UI界面中的元素变成独立的,区别于背景的物体,并让其拥有动作惯性是非常重要的。在UI界面中,元素应该被绘制为一个在三维中的对象,用户可以连续并稳定的操作他们。

光是把一个元素拟物化还远远不够,性能优化也是必须的。为了保持移动的假象,对象在运动时,帧速率必须够高(当动画达到每秒24帧时,人眼看到是正常速度的运动)。由于性能下降可能导致移动延迟,从而造成卡顿的现象。这样用户容易分心,体验就会折损。

2.1.1 拟物化的方法一:运动模糊

拟物化和无卡顿只是最基本的需求。如果用户大幅移动一个对象,例如从屏幕左侧跨越到右侧。由于视觉停留效应,用户在屏幕上会看到2个以上的对象。眼睛呈现两个短暂对象也被称为视觉暂留效应。

动画设计师面临这个问题时,使用了一个经验法则:如果一个物体移动超过物体本身一半的大小(或者更大)的任何两帧之间,加入运动模糊效果。使用运动模糊填补旧新位置之间的间隙,让眼睛更能接受物体的移动。虽然涉及到抗锯齿的问题,但运动模糊确实是一个低成本的解决方案。

动效设计原理:从卡通动画到UI动效

(在Windows中,鼠标指针可以设置成运动模糊,方便用户去追踪鼠标指针)

动画师发现,有两种不同的运动模糊方式可以使用。最简单的就是使用半透明的条纹。这种条纹就像尾巴一样跟随在图标后,使用透明条纹来模拟现实的物理作用,并产生非常逼真的效果。另一方式是在单个帧中插入多个图像。例如,手臂迅速来回摆动时,单个帧显示多个手臂,每个手臂在不同的位置呈现。这种技术可以有效提高帧速率,并且很有说服力。

动效设计原理:从卡通动画到UI动效

(运动模糊的全部帧效果,可以通过每帧展示多个竖线来达到提高帧数的效果)

运动模糊的效果表明:运动不仅是一系列的静止图像的集合。它会给用户一个模糊的线索。这种感知来源于人的视觉系统的工作原理。卡通动画师经常使用运动模糊,即使只是粗略进行运动模糊的渲染,也足以打造一种快速运动的幻觉。在App设计中,由于手机尺寸的限制,一般不会出现超远距离的拖动,但是在大屏幕的电脑上就会遇到这个问题。

2.1.2 拟物化的方法二:出现和消失

除了移动,元素无规则的出现和消失也会造成用户困惑。在UI设计中,有三种方式展示出现消失的效果:移入,擦除,和模糊消失。他们的动作是快而连续的,给用户必要的视觉线索来理解发生了什么。

动效设计原理:从卡通动画到UI动效

(从左到右动效依次是移入,擦除和模糊消失)

2.2 夸张

通过“夸张现实”的手法,往往可以让设计达到事倍功半的效果。经过夸张手法处理的卡通表现的更现实。

例如在迪斯尼的《白雪公主的小矮人》中,小矮人是非常不写实的:他们的脸和身体都很大,他们的动作大而夸张。相比之下,只有白雪公主的比例是逼真的。相比于矮人,她更像一个真实的人。所以白雪公主这个角色,却因为更接近于现实,所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。矮人反而看起来更逼真。这种夸张的方式更加的突出了动画本身。这样的原理说明,无论是物理特征,动作特征,或四肢特征,可以通过强化某些方面,让其更显著。

通过这种方式,观众可以更好的去理解这些特征和动作。例如,每个小矮人和白雪公主都有一个特征,往往是和他们的名字(迟钝,脾气暴躁,打喷嚏)遥相呼应的。这些特征非常强烈,即使没有这个名字作为一个额外的线索,人们也能通过每个矮人的身体特征,动作和行为等夸张行为来记住某个角色。

动效设计原理:从卡通动画到UI动效

(白雪公主因为更接近于现实,所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。每个小矮人都有一个特征,往往是和他们的名字(迟钝,脾气暴躁,打喷嚏)遥相呼应的,而白雪公主则特征不明显。图片来自:Disney.com )

所以,夸张的表现手法可以突出某些受到忽视的细节。在卡通中,动画师可以通过夸大某个细节来引起更多的注意力。可能这些细节原本很难背察觉。

和卡通一样,UI界面必须让用户理解,并在必要时突出一些细节。采用夸张的方式,使UI界面中的某些对象可以更容易理解,更加“现实”,从而使UI界面更吸引人。

(在图片社区项目中,我们对通知使用了动效。因为通知入口属于细节,在没有通知时,只保留一个icon,不吸引用户注意。当有新消息来时,用动效来吸引用户注意。)

2.2.1夸张方法一:给用户足够的预期

在动作发生之前,最好给给观众一些提示。当动作发生时,观众已经准备好,而不必对所发生的动作所惊讶。

( Tumblr中,当鼠标移动到某一功能时,icon会跳动一下,提醒用户点击之后会有变化)

像类似预期一样的的夸张技巧,它们可以让用户更容易理解界面。他们不断的为用户解释或者暗示界面之间的继承关系。如果没有这样的线索,用户会非常难以理解这些界面。

2.3 增强现实(Reinforcement)

所有的动画技术都会增强某个现实。有些会非常极端-就像在某些动画中,角色高速移动,变成了一道光线,快速的穿过屏幕。实际上这是非常隐蔽的手法。观众不会感知到这些效果很夸张。他们只是感觉超现实。这些夸张的效果已经被精心处理,所以观众不会被这些夸张效果所困惑。本节就是探讨,通过增强现实技术,用来弥补卡通与观众之间的关系,亦或者UI与使用者之间的关系。

2.3.1 增强现实方法一:缓进缓出

如前文描述,当卡通人物移动时,是非常拟物化的。 然而,这种移动并不是简单的在纸上画一些等距的角色。动画师在绘制动作时经常使用缓进缓出效果:角色缓慢的走出屏幕,接着一个快速的动作,最后的收尾动作很缓慢。这种方式有助于让角色在移动中看起来更有物理质量。此外,缓进缓出效果出现在某一个快速动作之前,有助于观看时更加舒适。如果没有它,动画中的移动会感觉很假,类似缓进缓出这种细节效果可以极大的影响一个动画的质量。

(使用缓进缓出的效果后,界面感觉更加舒适。图片查看:https://medium.com/@pasql/transitional-interfaces-926eb80d64e3 )

2.3.2 增强现实方法二:弧形运动

另一个原理也是经常运行在人的潜意识中,那就是弧形运动。相比于直线运动,对象沿在弧形运动时,他们是非直接式运动。类似于卡通中的角色。圆弧路径的运动给人一种更吸引人,更活泼的感觉,而直线运动则比较简单。
动效设计原理:从卡通动画到UI动效

(Mac OS X中,最小化窗口使用了弧线,显得更加活泼)

2.3.3 增强现实方法三:跟随运动

增强现实的最后一个方法是跟随运动。 在现实世界中,当主物体发成运动时,与其关联的物体会做出跟随运动。 动画师们将这种观察使用在动画中,当动画中的主体物停止后,其他部分细节依然可以运动。包括了身体,衣服,和一些局部的动作处理,让其动效变的更加极致。

动效设计原理:从卡通动画到UI动效

(iOS中,移动app位置是典型的跟随运动效果,当App插入一个新位置时,其他app位置跟着位移)

构建一个假象是一件非常脆弱的事。 一些动画的细节对最后的效果影响非常大。虽然这些动画效果如果不在卡通中使用,其实并不会破坏整体的世界观。但是加入这些效果会让动画更生动,更逼真。 最终可以让故事更容易被说服,人们也更容易理解,也更容易让用户参与其中。

3.为什么使用动画

为什么要在UI中使用动画?动画有2个特点可以解释其在UI设计中的价值。

首先,由于卡通是艺术性的,他们有超越现实的能力。这个能力可以更有效的传达信息。UI界面同样也需要明确,清晰,简洁的沟通。

其次,卡通创造了一个虚拟的世界,它非常容易让观众沉浸其中。通过此方法,UI也能变的引人入胜。通过动画,充分吸引用户来到它们的世界。然后让他们的注意力可以完全投入到工作中去。 让用户不要觉得他们在操作一个界面,而让他们更直接的触达任务。

4.使用UI动效的注意点

在UI界面中使用动效是有益的。但是UI并不是卡通。它们之间最重要的一个区别是:卡通是一种被动介质,而用户界面是互动式的。界面中的动效应该设计成不让用户感知到的状态(足够快,足够引人入胜,足够干净利落。使用户无意识的认识到这一点)用户可能希望在前一个动画结束之前就进行下一个操作。在这些情况下,应该给予用户最直接的控制。但是界面设计的原则仍应该利用动画技术来支持。

卡通和UI的另一个区别是他们的使用目标:卡通纯粹是享受和娱乐,而用户界面是用来完成工作的。由于工作的严谨性,需要排除漫画中的娱乐元素。卡通往往古怪且愚蠢,如果这种古怪足以让用户理解用户界面的功能,那这种古怪则可以保留。例如,动画可以用在第一次打开软件时,给用户一个惊喜。通过预期暗示用户操作,通过这个动作给用户一些惊喜是可取的。

UI是用来完成任务的工具,动画应该尽可能的快,同时也保持其清晰度。例如把动画当作一个时尚元素使用时,动画必须要快,通过快来减少用户执行和理解的时间。

5.总结

在UI中使用动效有以下几个优点:

  • 由于动画让用户更容易理解界面之间的关系,所以减轻了很多认知负担。
  • 通过消除屏幕上的跳变,让界面不让用户吃惊并费解,从而让体验更加愉快。
  • 将物理世界的运动用在动画中,缩短了用户和界面之间的鸿沟,让用户更专注于任务而不是理解界面。

动画展示效果远远超过了静态展示,甚至比静态展示更直接的阐释了界面。动画并不一定是缓慢的,或者会分散用户注意力的东西。通过悉心调整,动画可以让界面可理解,有魅力的。同时使用起来的体验是愉快的。

参考资料:

Animation: From Cartoons to the User Interface. Published in UIST’93: User Interface Software and Technology, Atlanta, GA, November 3-5, 1993. pp. 45-55.

A New Mobile UX Design Material. By Rachel Hinman.

Transitional Interfaces. By Pasquale D’Silva.

Animation Principles in UI Design: Understanding Easing. By Suresh V. Selvaraj

Youtube Video: Designing with animation. By Pasquale D’Silva.

Animation & Interfaces Design. By Danny Ruchtie.

Animation: The Illusion of Life. By Disney.

来源:腾讯ISUX (http://isux.tencent.com/20122.html)

祝给予赞赏的伙伴,2017年发大财!

评论( 1

写下你的想法
  1. 说白了就是项目赶着上线。开发很忙。没有资源做这部分功能

    回复

推荐阅读