马上注册，加入CGJOY，让你轻松玩转CGJOY。
您需要 登录 才可以下载或查看，没有帐号？立即注册
×
导读： 迪士尼动画经久不衰，动效设计作为一个年轻的设计门类可以从中吸取到哪些经验？本文将对迪士尼动画设计的原则进行解读，总结归纳其中的规律，从全新的角度来看待动效设计这件事。
生命的幻象 动画具有神奇的力量，它通过营造一个虚拟世界，让观众沉溺其中，与卡通人物产生情感共鸣。动画跨越了语言的障碍，可与任何地域的人们进行交流，直抵人心。这其中有什么奥秘?我们可以通过迪士尼动画一探究竟。
伟大的艺术都是由人创造的。动画设计师是卡通人物的塑造者，他们赋予了卡通人物生命力，让角色自身具有思想，并让梦幻变成现实。在迪斯尼早期有9位重要的动画委员会成员，史称「迪士尼九老」（Disney's Nine Old Men）。作为核心创作人员他们影响着迪士尼动画的发展趋势以及娱乐风格，他们经验丰富，技法精湛，让「移动的画面变成了令人感动的画面」。 ▲ 迪士尼九老 9位元老把原始的动画理论进行了提炼、完善和延伸，并由弗兰克·托马斯（Frank Thomas）和奥利·琼斯顿（Ollie Johnston）将这些宝贵的经验集结成了《生命的幻象》一书，由于其崇高的地位，这本书被称为「动画艺术的圣经」。书中提出了12条动画设计师在创作时需要遵循的基本原理，指出动画要提供必要的视觉线索，让观众了解某个动作的前因后果；在动画中要进行真实但不寻常的形变，动画要足够的有吸引力并引发共鸣，这就是著名的迪士尼动画十二原则。
迪士尼动画十二原则 1. 挤压与拉伸 Squash and Stretch 当力作用于物体时，它们将产生一定的变形。挤压表现为物体形状的压缩，拉伸变现为物体形状的延长。挤压与拉伸可用于表现物体的速度、动量、重量与体积，使得物体本身看起来有弹性、有质量、富有生命力。在运用此条原则时要注意保持物体体积的一致性，物体可能被拉长或压缩，但是物体的体积保持不变。当用于表现卡通人物的表情时，可以使其更加生动。
例：在UI设计中挤压和拉伸用来描述目标对象的刚性和质量，定义对象的物理属性。特定元素的形态变化会带给人更加生动的感受。例如，Path首页下拉时，小水滴发生的挤压与拉伸变化成为了Path重要的品牌元素。
2、预备动作 Anticipation
预备动作是指为即将发生的动作提供线索和信息，让观众知道什么即将发生，从而更好的融入到剧情之中。例如一个人在起跳时会通过下蹲来积蓄能量，这时下蹲就成了起跳的预备动作。没有预兆的动作会让观众不知所措，充满疑惑。没有预备动作铺垫的任何动作都会失去活力。
例：在UI设计中可以对一些要动的对象以及编排场景的部件提供引导与暗示。最有代表性的案例就是iPhone相机打开时的对焦动画：
1) 对焦框由外向内出现，表明相机正在努力聚焦中 2) 聚焦框闪烁，表明锁定聚焦和曝光 3) 聚焦框消失，提示用户可以拍摄 这个预备动作提醒用户相机做了什么，以及用户什么时候可以进行拍照。
在DU Battery Saver的页面设计中，也融入了此设计原则。在手机出现问题时，通过背景变色，展示问题项的方式将问题暴露，同时主动提供解决方案，简单易懂易于操作。
3、演出布局 Staging 布局是指以一种观众容易理解的方式展示动作或对象。动画中的每一个镜头的构图、运镜、动作、走位都需要仔细的设计与安排，让动作简单明了的表现出来。 在进行布局设计时需要避免两种常见的错误： 1) 出场顺序错乱 ▲ 正确的出场顺序
2) 干扰元素过多 ▲ 去除干扰元素 例：在进行UI设计时，需要将有层次、有顺序的展示设计元素，通过过渡动效将用户的注意力引导到正确的位置（重要的内容或交互重点），避免偏离主线。
4、顺画法与定点画法 Straight Ahead Action and Pose to Pose 在动画设计中，有两种重要的设计方法：顺画法和定点画法。 顺画法是将动作从第一张开始，依照顺序画到最后一张，通常是制作较简易的动态。顺画法的优点可以充分发挥动画设计师的想象力，缺点是具有很大的不确定性，只有完成最后一个动作后才能了解最终效果如何，通常用于符合物理、运动规律的场景表现。 ▲ 缺点是具有很大的不确定性，只有完成最后一个动作后才能了解最终效果如何 ▲ 优点可以充分发挥动画设计师的想象力 （通常用于符合物理、运动规律的场景表现）
定点画法是将动作拆解成一些重要的定格动作，然后补上中间的间补动画，产生动态的效果，通常用于表现较复杂的动作，适用场景更加广泛。
在UI设计中，大部分的移动端动效都可以用户定点画法绘制，少数复杂且不常规的运动动效可以选择顺画法进行表现，例如Siri的使用动画。
5、跟随动作与重叠动作 Follow Through and Overlapping Action 没有任何一个物体会突然停止，物体的运动是一个部分连着一个部分的。运动的动作大致可分为跟随动作和重叠动作两类。
跟随动作是指物体因为惯性，在突然停止时会围绕质心呈现出不同幅度的振动，例如《猫和老鼠》中Tom踩到拖把被击中时的振颤。跟随动作可以让物体运动更真实。
UI设计中跟随动作可以使动画保持一致并在可控范围内协调运动。
重叠动作是指身体的关节按照不同的速率运动，产生分离重叠的时间差与夸张的造型。例如，卡通人物高速运动时，身体其他部分的「拖动」效果。重叠动作可以让物体运动轻松有趣。
重叠动作可以体现UI控件之间的层级关系，并为动画设置优先级。
在唤出DU Battery Saver的侧边栏时，运用跟随和重叠的效果，使页面切换更加真实、柔和。
6、缓入与缓出 Slow In and Slow Out 物体从静止到移动是渐进加速，移动到静止则是渐进减速。若以等速度方式开始或者结束动作，会给人一种机械感，缺乏活力，例如机器人总是以匀速运动。在动画中遵循物理规律可以让用户更加舒适。
由于不断减速的物体会吸引人们的注意力，不断加速的对象会让人失去注意力，因此UI设计中进入动画要先快后慢，离开动画要先慢后快。
7、弧形轨迹 Arc 具有生命的物体会以自然的弧形方式呈现运动，机械式的物体则会呈现出僵硬的直线运动。给卡通人物的动作增加弧度，可以让整个动作更加流畅自然。
在UI设计中除了X轴，Y轴方向的弧形轨迹，Z轴上的弧线运动有助于不同层级的区分，例如翻页效果。
DU Battery Saver 手机降温动画中雪花的降落方式，也应用了Y轴方向的弧形运动，通过模拟雪花随风飘落的效果，让整个降温动画更加生动形象。
8、次要动作 Secondary Action 次要动作是依附在主要动作之下的细微动作，可以使角色更加生动真实，具有生命力。次要动作是强化主要动作的关键，具有画龙点睛的效果。
例如，如果想表现食物的美味，除了在吃这个主要动作，我们还可以增加舔嘴唇，闭上眼睛慢慢品味这些次要动作，通过更加形象的动作来表现主题。
在UI设计中，要选择对用户理解最重要的动画优先展示，并用辅助动画进行润色，需要注意的是不要让辅助动画盖过主要动画。
DU Battery Saver的手机充电动画，为了形象的表现出整个充电过程，添加了很多的细节，比如水波纹运动时溅起的小水滴，让整个充电动画充满活力。
9、时间节奏 Timing
时间节奏是指完成一个动作的速度，是动画的灵魂。同一动作的速度变化会呈现出不同的效果。 例如用两个镜头来表现摆头这个动作，如果无中间帧，动画效果为动画角色的头部瞬间切换，似乎受到了巨大的冲击； 如果有五个中间帧，动画效果动画角色轻摇一下头，似乎在说，「快！」 如果有十个中间帧，动画效果为动画角色缓缓地摇头，似乎睡觉落枕，脖子酸痛。
在UI设计中，时间节奏的控制主要是速度曲线，不同的速度曲线会赋予元素完全不同的效果。
10、夸张 Exaggeration 夸张是指用具有想象力的形式来展示真实的内容，通过真实但不寻常的幅度变化，可以加强角色的动作、姿势和表情的视觉效果。 在动画中可通过延长时间和增大幅度的方式进行夸张，例如通过增大击球的幅度和延长击球的时间可以让整个击球动作表现得更有张力。
在UI设计中，夸张可以让动画表现得活泼有趣。例如macOS的窗口最小化动画，夸张且生动地表现了整个形变过程。
11. 实体绘图 Solid Drawing 实体绘图是指通过体积感、重量、平衡、光影等手段创造一个具有三维感觉的动画角色，并使其具有个性魅力。体积，重量和平衡是立体三维设计的基本所在。动画设计中通常通过360°绘制、透视画法、增加细节和增加不对称性的方法来塑造饱满生动的造型。
实体绘图这一原则在UI设计领域的绝佳体现就是Material Design。Material Design通过光影效果来表现三维空间的层级关系，引导用户建立起对数字产品的使用逻辑。
DU Battery Saver作为一个工具类产品，有很多抽象功能，为了便于用户理解，设计师把这些抽象概念转换为用户常见的具体形象，运用实体绘图这一原则，拉近和用户之间的距离，降低了理解成本。
12、吸引力 Appeal 吸引力是指通过表现出角色的个性，让用户产生心灵上的愉悦。具有吸引力的角色总能够吸引观众的眼球，在其和观众之间建立某种联系。有吸引力的角色不一定是好看的，但一定是有趣的。
在动画设计中有三种方法可以角色形象更加鲜明，提升吸引力： 1) 让形状更鲜明
2) 让比例更突出
3) 让形象更简洁
吸引力是一个综合性的概念，需要从多方面进行满足。在UI设计中则可以通过有趣、有爱的形象或者动效来调用用户情绪，通过鲜明的品牌元素或情感故事给用户留下深刻印象。
DU Battery Saver桌面快捷清理功能的设计，通过飞舞的绿色小叶子，给人一种清新、洁净的感觉，引人注目。
以上就是迪士尼动画十二原则： 1.挤压与拉伸 2.预备动作 3.演出布局 4.顺画法与定点画法 5.跟随动作与重叠动作 6.缓入与缓出 7.弧形轨迹 8.次要动作 9.时间节奏 10.夸张 11.实体绘图 12.吸引力
PAE动效设计模型 通过上面的介绍，可以看出上述的十二条原则适用于动画的不同阶段，因此我们可以按照时间维度，将这12条原则分为运动前、运动中和运动后三部分。
由此我们可以提炼出PAE动效设计模型。 一个好动效设计需要从展现、动作、情感三个方面满足，这三方面紧密联系，互为补充。在进行动效设计时需要注意展现可感知、动作合规律以及情感有共鸣，每一方面可以运用相关规则进行恰当表现。
动效非卡通 卡通和动效有着很大的区别。卡通是被动式的享受和娱乐，以让观众产生情感共鸣为主要目标，对娱乐性的要求高于实用性。用户界面是用户主动用来完成工作的媒介，需要用户的互动式参与，动效以帮助用户达到使用目的为主要目标，实用性重于娱乐性，因此好的动效设计不应以炫酷作为目的。
在进行动效设计时，需要做到： 1.足够清晰，帮助用户理解界面、元素之间的关系。 2.足够简洁，减少用户执行和理解的时间。 3.足够吸引，让产品使用体验更加愉快。
后记 要做出一个完美的动效设计，仅仅记住这些原则是不够的。你要深刻理解了解物理、自然规律，人的感受，而不是机械地运用。这些原则很重要，但你要做的是理解并忘掉它们。 [/hide]
参考资料： 图书： 1.Ollie Johnston, Frank Thomas. The Illusion of Life. Disney Editions, 1995-10-19 2.弗兰克·托马斯, 奥利·约翰斯顿著. 生命的幻象[M]. 方丽译. 北京：中国青年出版社, 2011-4-1
网页：
视频（需翻墙）：
| 
加载中...
搜索
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
