如何创造有生命力的动态效果？（上）
作者：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动画设计，好的创意总是令人惊叹！（第二期）》
每次看到这些动效神作，总会不自觉盯着研究几十次，细细体会设计师那种对于细节的追求。从动画的基础上来讲，还是可以总结出一定可循的规律的。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（如 新闻客户端）在页面顶端，都会设计用户主动刷新的功能，用于随时查看最新的消息。这时，相应的手势操作里就会包括“拖拽下拉”和“放开”这两步动作，动态 效果就可以巧妙借用期待的原则，让刷新操作变得更有趣。
Anticipation
3. 登场（Staging）
Johnson 和 Thomas 在书中将这条定义为“将任何想法完整无误地、清晰地呈现”。跟 舞台戏剧一样，所有动画中的构图、运镜、动作、走位都需要经过仔细的设计安排，避免在同一时间点出现过多琐碎的动作变化。换句话说，要明确每个演出段落中的主次之分，尽力避免不必要的细节，让动画整体的观看流程更顺畅有序。在移动端设备里，适时出现的动态效果会有利于对用户视觉焦点的引导。
Staging
4. 连续动作与姿态对应（Straight Ahead Action & Pose to Pose）
“连续动作”和“姿态对应”是绘制动画的两种不同的方法。“连续动作”是将动作从第一帧开始，按顺序逐帧绘制。“姿势对应”则是将动作拆解成多个重要的关键帧（定格动作），然后补上关键帧之间的“补间动画”，进而产生动态的效果。
Straight Ahead Action & Pose to Pose
5. 跟随与重叠动作（Follow Through & Overlapping Action）
跟 随和重叠动作的技巧，是相互关联的，它们是基于现实去模拟真实物理动力学。利用诸如惯性等原则让角色的动作看起来更生动。“跟随动作”的意思是当角色的动 作停止时，其它与其相关联的部件仍然会保持动势而移动，用来模拟有弹性、有速度感的动作。比如，在模拟有机生命角色时，其动作停止越急骤，关联部件的跟随 动作幅度越大。“重叠动作”的意思则是将角色的各部件拆解，将主次动作的起止时间错开，以不同的速率移动，产生分离重叠的时间差和夸张的变形，增加动画戏 剧性与表现力。比如，突然启动奔跑的人物，他的假发会来不及反应，留在原地，慢半拍跟随人物飞走。同样的效果，也可以用于移动端，如网站页面上微小元素跟 随大面积元素做错时运动，在下拉浏览的过程中，会大大丰富视觉体验。
Follow Through & Overlapping Action
6. 动势渐进渐出（Slow In & Slow Out）
真实世界里，任何角色动作的起 止，从零速度到全速，都有一个缓冲的过程。普通生活中常见的物体动作，都需要时间来加速或减缓。动画的渐进渐出技巧也是顺应这一物理原则而出现的，可以让 动作更加真实可信。同样的，也是为了迎合观众的视觉习惯，引导视线焦点，在动势的起止点，都会创造不同程度的缓冲时间。举例来说，在移动端设备上，当对某 一元素进行点按，触发后的动态效果开头都可以适当加入缓动渐进，让用户的视觉有个短暂的适应时间。即便这个适应时间短到无法察觉，也会让人产生“恰到好 处”的贴切感觉。
Slow In & Slow Out
7. 弧形动作（Arcs）
除了机械运动之外，真实世界大部分的有机活物都不会遵循完全直线的运 动轨迹。动画中，角色的动势也要遵循这个原则，都要以不同程度的弧线的方式进行，可以让其看起来更加真实。有时候，即便是非活物的物体，也可以适当用到这 个原则，让其更有生命力。比如，伸出手臂指向远方的动作，都会划出浅弧线的运动轨迹。这里有例外是，如果要强调高速动作或者纯机械动作的话，直线运动轨迹 也许对塑造更有利。
Arcs
8. 次级动作（Secondary Action）
在主要动作之外，增加细微的次级动作，起到 支持主要动作的作用。次级动作会让画面更活泼，起到画龙点睛的效果。次级动作并非可忽略的不必要动作，而是用以强化主要动作，且不会把观众的注意力带走。 它的设计可以使角色更生动真实有生命。比如，奔跳的角色，每次跳跃时帽子都会微微弹起，营造轻盈活跃的动感。
Secondary Action
9. 节奏（Timing）
控制运动的关键是动作的节奏。动作的节奏就是速度的快慢，过快或过慢 都会让该动作看起来不自然。优秀的节奏控制，在于通过模拟真实物理情境，创造速度和质量上的不同。正确的出现时机和速度，会使得物体更符合物理原则。移动 端的界面，尤其是扁平化设计大行其道的今天，轻量化的图形和色彩更会让用户产生好感。同时，动态的效果也要通过不同的节奏控制，符合这种轻量化视觉的预期 才行。比如，模拟纸张设计的APP界面，切换的速率也同样要柔和且轻盈。
Timing
10. 夸张手法（Exaggeration）
前面叙述的几种技巧，都是以模拟物理世界为准则 的。但如果完全遵循现实来展现，会让动画变得很无趣呆板。动画的魅力在于，它本身就是偏夸张的表现方式。透过角色的夸张表现，强化剧情起伏，让观众更容易 融入且乐在其中。夸张不只是把动作幅度扩大，而是巧妙地将剧情所需要的情绪释放出来。在设计动作之初，动画师对角色夸张程度的拿捏，即是动画精彩与否的关 键。大部分的 APP 和网站，夸张的手法都不适合贯穿始终运用，技术上也不允许这么做。但适当在关键时间点运用这一原则，会和一般动态产生反差，让其体验更 为出色。
Exaggeration
11. 立体造型（Solid Drawing）
对立体造型的把握是每个动画师都应该掌握的技 巧。它代表了在三维的空间形态里，给予物体透视、体积、重量、光影等等，让其存在感可信。想要达成这点，需要对扎实的绘画功底，以及大量对现实物体的描摹 经验。比起当年需要逐帧描绘立体动态而言，现在电脑能计算生成大多数的立体形象，肯定是方便多了。但对动画师三维视觉经验的要求，依然很高。在移动端，虽 然现在都提倡扁平化的设计，但在很多地方仍然适用立体造型的设计思路，让细节更丰富耐看。
Solid Drawing
12. 吸引力（Appeal）
吸引力原则是任何一种艺术形式的最终准则。综合前面所述的所有技 巧，来创造一个富有生命力的、活泼有趣的角色，是吸引力原则的关键。动画有别于其他艺术形式的地方在于，它的自由度极高，所有内容都是由动画工作者一手创 造出来的，充满了想象力。因此，吸引力原则尤其倚仗于动画师对技巧的纯熟运用。正如一个网站或者 APP 的动态效果首先必须为它的功能服务的。因此外在表象 上，不能像一些动画片或舞台剧那样纯粹靠动作和表演去吸引观众。动态吸引力的运用，更多时候是“画龙点睛”，而非“抢戏”。
Appeal
上述12条经典动画原则的视觉化片段，由 Cento lodigiani 制作：Cento lodigiani - The illusion of life
了解了这些经典动画原则，相信会给创造有生命力的动态元素有了基本的概念。落实到实际的设计思路上，该如何考虑呢？
我们在下半期文章里会逐步展现如果运用这些原则进行动态设计 《创造有生命力的动态效果（下）》
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）