最有生命力的动态效果,都遵循这 12 条经典原则(上)

举报 2016-05-12

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

原标题:《创造有生命力的动态效果(上)》
数英网用户原创文章,转载请联系本人

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

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


Sergey Valiukh - GIF Animation of an App

最有生命力的动态效果,都遵循这 12 条经典原则(上)


Hoang Nguyen - Pull down and refresh

最有生命力的动态效果,都遵循这 12 条经典原则(上)


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

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

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

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


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


The Illusion of Life:Disney Animation (Wikipedia)

最有生命力的动态效果,都遵循这 12 条经典原则(上)



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

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


Squash & Stretch

最有生命力的动态效果,都遵循这 12 条经典原则(上)



2、期待(Anticipation)

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


Anticipation

最有生命力的动态效果,都遵循这 12 条经典原则(上)



3、登场(Staging)

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


Staging

最有生命力的动态效果,都遵循这 12 条经典原则(上)



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

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


Straight Ahead Action and Pose to Pose

最有生命力的动态效果,都遵循这 12 条经典原则(上)



5、跟随与重叠动作(Follow Through and Overlapping Action)

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


Follow Through and Overlapping Action

最有生命力的动态效果,都遵循这 12 条经典原则(上)



6、动势渐进渐出(Slow In and Slow Out)

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


Slow In and Slow Out

最有生命力的动态效果,都遵循这 12 条经典原则(上)



7、弧形动作(Arcs)

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


Arcs

最有生命力的动态效果,都遵循这 12 条经典原则(上)



8、次级动作(Secondary Action)

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


Secondary Action

最有生命力的动态效果,都遵循这 12 条经典原则(上)



9、节奏(Timing)

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


Timing

最有生命力的动态效果,都遵循这 12 条经典原则(上)



10、夸张手法(Exaggeration)

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


Exaggeration

最有生命力的动态效果,都遵循这 12 条经典原则(上)



11、立体造型(Solid Drawing)

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


Solid Drawing

最有生命力的动态效果,都遵循这 12 条经典原则(上)



12、吸引力(Appeal)

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


Appeal

最有生命力的动态效果,都遵循这 12 条经典原则(上)


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

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

我们在下半期文章里会逐步展现如何运用这些原则进行动态设计:

最有生命力的动态效果,都遵循这 12 条经典原则(下)

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

    参与评论

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

    参与评论

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

    推荐评论

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

    全部评论(0条)