如何创造有生命力的动态效果?(上)

举报 2016-05-11

作者:Tony Tong

如何创造有生命力的动态效果(上)

几天前看了文章《花了7天看了上千个交互动效神作,我总结出5个技巧》,佩服它概括得非常到位。基于实际的用户体验考虑的出发点,和“去繁化简”的做法,我都非常赞同。尤其是它所指的“克制”,的确是非常多动态设计者会犯的毛 病。有时候看到那些动态设计的神作,就会“痴迷”其中,忘了全局。动态效果是为了流畅的用户体验而存在的,不是单纯的动画炫技。希望大家都能先看一下那篇文章。

我这里想要讨论的,是传统动画的设计思路如何运用于交互界面。换句话说,我们这里要先讨论如何“炫技”,然后再根据具体情况进行“收敛”。

标题中所谓“有生命力的动态效果”,即用符合有机体动力学特征的运动方式(Dynamic motions)去表现物体的动作。传统的游戏、动画等长期以来都有着力于创造这种由生命力的动态效果。随着技术的进步,越来越多的网站或 APP 也都倾向于借鉴游戏和动画的做法,用更为软性和拟人化的动态方式穿插或点缀。大到整体视觉表现,小到页面切换方式、互动反馈动画、动态 icon、loading 动画等等,都会涉及。它有效地淡化了一般概念里电子设备的“高科技”距离感。避免了僵硬机械化的动态,而选用更灵活、软性、有机、有弹性的运动方式。只要把 控得当,细节入微,适量的有生命力的动态更有助于贴近用户,使操作体验的好感度增加。


如何创造有生命力的动态效果(上)
Sergey Valiukh - GIF Animation of an App

如何创造有生命力的动态效果(上)
Hoang Nguyen - Pull down and refresh

更多的动效神作,直接可以移步以下这些文章:

《这有 36 个UI动效设计,也许能帮你从细节上提升产品逼格》

《灵感:31个Logo动画设计,好的创意总是令人惊叹!》

《灵感:31个Logo动画设计,好的创意总是令人惊叹!(第二期)》

每次看到这些动效神作,总会不自觉盯着研究几十次,细细体会设计师那种对于细节的追求。从动画的基础上来讲,还是可以总结出一定可循的规律的。1981年出版的《The Illusion of Life:Disney Animation》 一书中,动画制作人 Ollie Johnston 和 Frank Tomas 确立了迪斯尼经典的12条动画经典原则。这些原则因其实用性和可延展性,不断地被后来的动画制作人沿用至今。对于现在新媒体平台的动态设计而言,这些原则也有非常好的借鉴意义。

如何创造有生命力的动态效果(上)
The Illusion of Life:Disney Animation (Wikipedia)


1. 挤压与拉伸(Squash & Stretch)

任何物体在进行运动的过程中,多 少都会受到各种力的作用,被自身质量挤压或拉扯伸展而产生变形。加上动画独有的夸张表现方式,会使物体的动态看起来有弹性、有质量、更有“活物”的感觉。 拉伸效果有助于营造速度感,当用在交互界面时,可以参考此原则创造干脆、利落的视觉观感。

如何创造有生命力的动态效果(上)
Squash & Stretch


2. 期待(Anticipation)

让动画角色在进行主要动作前,先做一个让观众产生“预先 判断”的准备动作。比如说,冲刺动作前先弓起腰背,抬起腿部,弯曲手肘;或者发射炮弹前,炮管先微微鼓起。这么做,是为了让观众对接下来要发生的动作产生 “期待”,营造“蓄势待发”的感觉。同时,这也符合现实的视觉经验,有助于引导观众的注意力,让其集中在主要动作上。举例来说,不少实时资讯类 APP(如 新闻客户端)在页面顶端,都会设计用户主动刷新的功能,用于随时查看最新的消息。这时,相应的手势操作里就会包括“拖拽下拉”和“放开”这两步动作,动态 效果就可以巧妙借用期待的原则,让刷新操作变得更有趣。

02_Anticipation.gif
Anticipation


3. 登场(Staging)

Johnson 和 Thomas 在书中将这条定义为“将任何想法完整无误地、清晰地呈现”。跟 舞台戏剧一样,所有动画中的构图、运镜、动作、走位都需要经过仔细的设计安排,避免在同一时间点出现过多琐碎的动作变化。换句话说,要明确每个演出段落中的主次之分,尽力避免不必要的细节,让动画整体的观看流程更顺畅有序。在移动端设备里,适时出现的动态效果会有利于对用户视觉焦点的引导。

03_Staging.gif
Staging


4. 连续动作与姿态对应(Straight Ahead Action & Pose to Pose)

“连续动作”和“姿态对应”是绘制动画的两种不同的方法。“连续动作”是将动作从第一帧开始,按顺序逐帧绘制。“姿势对应”则是将动作拆解成多个重要的关键帧(定格动作),然后补上关键帧之间的“补间动画”,进而产生动态的效果。

04_Straight ahead action and pose to pose.gif

Straight Ahead Action & Pose to Pose


5. 跟随与重叠动作(Follow Through & Overlapping Action)

跟 随和重叠动作的技巧,是相互关联的,它们是基于现实去模拟真实物理动力学。利用诸如惯性等原则让角色的动作看起来更生动。“跟随动作”的意思是当角色的动 作停止时,其它与其相关联的部件仍然会保持动势而移动,用来模拟有弹性、有速度感的动作。比如,在模拟有机生命角色时,其动作停止越急骤,关联部件的跟随 动作幅度越大。“重叠动作”的意思则是将角色的各部件拆解,将主次动作的起止时间错开,以不同的速率移动,产生分离重叠的时间差和夸张的变形,增加动画戏 剧性与表现力。比如,突然启动奔跑的人物,他的假发会来不及反应,留在原地,慢半拍跟随人物飞走。同样的效果,也可以用于移动端,如网站页面上微小元素跟 随大面积元素做错时运动,在下拉浏览的过程中,会大大丰富视觉体验。

05_Follow through and overlapping action.gif
Follow Through & Overlapping Action


6. 动势渐进渐出(Slow In & Slow Out)

真实世界里,任何角色动作的起 止,从零速度到全速,都有一个缓冲的过程。普通生活中常见的物体动作,都需要时间来加速或减缓。动画的渐进渐出技巧也是顺应这一物理原则而出现的,可以让 动作更加真实可信。同样的,也是为了迎合观众的视觉习惯,引导视线焦点,在动势的起止点,都会创造不同程度的缓冲时间。举例来说,在移动端设备上,当对某 一元素进行点按,触发后的动态效果开头都可以适当加入缓动渐进,让用户的视觉有个短暂的适应时间。即便这个适应时间短到无法察觉,也会让人产生“恰到好 处”的贴切感觉。

06_Slow in and slow out.gif
Slow In & Slow Out


7. 弧形动作(Arcs)

除了机械运动之外,真实世界大部分的有机活物都不会遵循完全直线的运 动轨迹。动画中,角色的动势也要遵循这个原则,都要以不同程度的弧线的方式进行,可以让其看起来更加真实。有时候,即便是非活物的物体,也可以适当用到这 个原则,让其更有生命力。比如,伸出手臂指向远方的动作,都会划出浅弧线的运动轨迹。这里有例外是,如果要强调高速动作或者纯机械动作的话,直线运动轨迹 也许对塑造更有利。

07_Arcs.gif
Arcs


8. 次级动作(Secondary Action)

在主要动作之外,增加细微的次级动作,起到 支持主要动作的作用。次级动作会让画面更活泼,起到画龙点睛的效果。次级动作并非可忽略的不必要动作,而是用以强化主要动作,且不会把观众的注意力带走。 它的设计可以使角色更生动真实有生命。比如,奔跳的角色,每次跳跃时帽子都会微微弹起,营造轻盈活跃的动感。

08_Secondary action.gif
Secondary Action


9. 节奏(Timing)

控制运动的关键是动作的节奏。动作的节奏就是速度的快慢,过快或过慢 都会让该动作看起来不自然。优秀的节奏控制,在于通过模拟真实物理情境,创造速度和质量上的不同。正确的出现时机和速度,会使得物体更符合物理原则。移动 端的界面,尤其是扁平化设计大行其道的今天,轻量化的图形和色彩更会让用户产生好感。同时,动态的效果也要通过不同的节奏控制,符合这种轻量化视觉的预期 才行。比如,模拟纸张设计的APP界面,切换的速率也同样要柔和且轻盈。

09_Timing.gif
Timing


10. 夸张手法(Exaggeration)

前面叙述的几种技巧,都是以模拟物理世界为准则 的。但如果完全遵循现实来展现,会让动画变得很无趣呆板。动画的魅力在于,它本身就是偏夸张的表现方式。透过角色的夸张表现,强化剧情起伏,让观众更容易 融入且乐在其中。夸张不只是把动作幅度扩大,而是巧妙地将剧情所需要的情绪释放出来。在设计动作之初,动画师对角色夸张程度的拿捏,即是动画精彩与否的关 键。大部分的 APP 和网站,夸张的手法都不适合贯穿始终运用,技术上也不允许这么做。但适当在关键时间点运用这一原则,会和一般动态产生反差,让其体验更 为出色。

10_Exaggeration.gif
Exaggeration


11. 立体造型(Solid Drawing)

对立体造型的把握是每个动画师都应该掌握的技 巧。它代表了在三维的空间形态里,给予物体透视、体积、重量、光影等等,让其存在感可信。想要达成这点,需要对扎实的绘画功底,以及大量对现实物体的描摹 经验。比起当年需要逐帧描绘立体动态而言,现在电脑能计算生成大多数的立体形象,肯定是方便多了。但对动画师三维视觉经验的要求,依然很高。在移动端,虽 然现在都提倡扁平化的设计,但在很多地方仍然适用立体造型的设计思路,让细节更丰富耐看。

11_Solid drawing.gif
Solid Drawing


12. 吸引力(Appeal)

吸引力原则是任何一种艺术形式的最终准则。综合前面所述的所有技 巧,来创造一个富有生命力的、活泼有趣的角色,是吸引力原则的关键。动画有别于其他艺术形式的地方在于,它的自由度极高,所有内容都是由动画工作者一手创 造出来的,充满了想象力。因此,吸引力原则尤其倚仗于动画师对技巧的纯熟运用。正如一个网站或者 APP 的动态效果首先必须为它的功能服务的。因此外在表象 上,不能像一些动画片或舞台剧那样纯粹靠动作和表演去吸引观众。动态吸引力的运用,更多时候是“画龙点睛”,而非“抢戏”。

12_Appeal.gif
Appeal

上述12条经典动画原则的视觉化片段,由 Cento lodigiani 制作:Cento lodigiani - The illusion of life

了解了这些经典动画原则,相信会给创造有生命力的动态元素有了基本的概念。落实到实际的设计思路上,该如何考虑呢?

我们在下半期文章里会逐步展现如果运用这些原则进行动态设计 《创造有生命力的动态效果(下)》

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)