UI动效设计之设计原则

小编：动效已经成为UI行业里流行的趋势了，特别是游戏APP、短视频分享和直播类的APP或多或少都会有动效这样的元素。本文将来分享一些作者过往在动效设计过程中的基础知识沉淀，主要集中于探讨动效设计原则和运用的内容。

前言

前人已经总结了让动画生动的技巧，早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则，该法则也是受用至今。法则虽是针对传统动画而制定，但对于我们日常需求中所接触的动效/动画需求也同样受用。

【1】动画设计技巧

如上图；动画的十二大原则又可以拆分为两类，动画设计技巧和动画表现技巧。

第一部分设计技巧是增添动画细节的方法，可以用这些原则让动画更有细节更生动。

第二部分表现技巧是提升整个动画在画面中全局表现力的，这个主要是多用在动画里。

在产品动效设计中还是常用到设计技巧，所以这次着重分享设计技巧这一部分。

01 挤压和拉伸

【挤压和拉伸】是动效设计中最常用到的设计技巧。使用挤压和拉伸来强调物体的质感、重量、速度。我们可以根据物体的质感去决定挤压伸展的具体幅度。可以很好的表达出不同物体的不同质感。这里需要注意的是，物体挤压拉伸的面积尽可能保持视觉统一。以免动画前后造成不协调。

02 预期动作

【预期动作】可让用户感知到该物体即将发生运动，以及具体运动的方式和方向。让用户对动画效果有一个提前的预判不会太突兀。也可以根据预期动作去引导用户的视线。比如起跳时双腿先要弯曲，踢球向前射门时腿要向后摆动。所以在动效设计中我们运用好预期动作会让用户做好心理准备，让这个动画更加真实。

03 跟随与重叠动作

【跟随与重叠动作】这个技巧也是表达运动速度和物体质感的重要技巧之一。

跟随简单说举个例子就是挥棒球棒，棒球棒是手带动棒球棒转动，当手停止发力时，棒球棒不会立刻停止，会随着发力的方向摆动减幅，直到完全停止。摆动的幅度和持续时间会根据不同的力量及速度进行相应的调整。

重叠动作就是想象棒球棒如果是橡胶材质的，那么挥舞棒球的时候就会有一定程度的弯曲，所以速度越快，材质越软，弯曲程度也会越大。

04 缓动速度曲线

【缓动速度曲线】动效设计中最离不开的参数。不同的速度曲线也会给人不一样的感受，运动曲线较陡会感觉元素的质量更重冲击感更强，比如适用于我们竞争向的场景中。反之较平缓的曲线元素运动则较为轻盈。更适用于我们关系向的场景。

05 控制时间偏差

【控制时间偏差】运动物体的主要运动和附属运动不会同时发生，用时间偏差，会让动画更加真实自然。也可避免动效过程出现空档期，或者一次性出现过多的元素，增加认知负荷。信息离场时则需要快速高效，不需要人为的制造信息偏差。

06 弧形运动轨迹

【弧形运动轨迹】当自然运动的物体运动时都会受到引力的影响，简单解释就是速度越快弧线越平滑，移动距离越远。速度越慢弧线越弯曲，移动距离也越近。

【2】结合案例应用

下面就举几个案例，这些原则在具体工作中的应用。

01福袋：短触区引导动画

这个是直播间福袋倒计时五秒开奖时播放的动画，目标是为了告诉用户福袋即将开奖，同时在这五秒内拉升福袋的价值感，提高福袋的参与率。

确定好动效的目标后，就要围绕这个目标对动画进行拆解。

【第一步】是预备动作，在进行主要的动画之前需要有一个较强的视觉引导，让用户提前注意到福袋接下来会会有动作发生，这里采用的方式是抖动。
【第二步】是体现价值感，这里采用的是金色粒子加发光的效果。
【第三步】倒计时结束福袋准备离场。

动画步骤拆解完后就分析每一步动画需要用到的动画原则。比如第一步的抖动引起用户注意的同时下一步就需要喷出粒子，所以在抖动的这一步就要增加一个预期动作。在这里设计了两个预期动作：一个是粒子向右上角喷出，所以预期动作设计成向左下角提前移动收起，同时给下一步的粒子动画留出足够的空间出现。第二个是收紧口袋，为下一步的打开做准备。

然后福袋的绳子也会跟着福袋运动，这里用到了“跟随与重叠动作”和“附属运动”，因为绳子材质比较软，所以抖动频率和幅度设计的时候都会相应的增加一些。

第二步动画当福袋打开时有一个“挤压和拉伸”的效果，一个是为了表现福袋的材质，再一个是为了体现福袋突然打开的速度感。

最后一步就是喷完粒子后的消失动画，这里加了一个位置移动的‘预期动作。然后在配合速率较快的缓动曲线最后完成消失。

可以看一下运用动画原则之前和之后的对比，这个没有用动画原则的案例会有明显的顿挫感，整体动画不够自然，就会显得动画呆呆的。嗯。那这个用了动画原则之后整体动画会显得比较流畅，中间也没有空档期。这里说一下，基本上每个动画都会用到前面说的时间偏差控制来调整节奏，所以就没有在案例里单独列出来。