微信扫码登录 | 方便安全省心
Light12
2021年11月08日 发布 / 1390 次阅读
“动画唯一的局限就是动画师本人”。这是著名动画家理查德·威廉姆斯（Richard Williams）在其著作《原动画基础教程》中所阐述的一个观点。
我们所见到的动画普遍是由人所制作的，但它却不是由人所创作的。创作动画的是我们所在的这个自然世界，因此，如何把自然带给我们的动画更好地还原并加以优化，就取决于每个动画师的能力。
于是，动画师们在经过漫长岁月努力，摸索出了一套可以更好地制作动画的法则。这套法则最终由迪士尼动画师奥利·约翰斯顿（Ollie Johnston）与 弗兰克·托马斯（Frank Thomas）将其归纳总结为十二个动画的基本法则。
动画的十二基本法则几乎可以运用于所有动画之上，这其中自然也包含了UI动画，即我们常说的UI动效设计。因此本文将结合动画的十二基本法则，来探索它在UI动效设计中的指导作用。
————————
How to use dynamic effect design?
在探索动画的十二基本法则如何指导UI动效设计之前，我们可以先了解一下什么是UI动效设计，它存在怎样的运用方式。
众所周知，动态效果设计种类繁多，一般是泛指影视特效、栏目包装、动画CG、视频广告、UI动画等图形图像的艺术设计。是基于一定的静态基本视觉元素，通过动画软件将其再设计成一种在特定时间内，会发生运动和变化的图形结果。
而在UI设计中，动效设计一般是指UI动画设计，也叫UI动效。它在UI设计中同样得到了较为广泛的应用，我们可以在各种使用场景上看到UI动效：包括但不限于交互转场与过渡、视觉核心与情感化动画展示、场景与功能引导、加载与操作反馈等等场景。
转场过渡类的UI动效常用于页面间的跳转、页面层级的变化或使用场景的切换等。它能够帮助用户更清晰地了解页面间的转换关系与变化路径，同时使应用产品更还原现实世界的使用习惯，减轻用户的认知成本。简单来说就是在页面切换时让用户得到一个心理预期，看到哪些内容变了，怎么变的，又有哪些内容是新增需要注意的。通常会用到的手势为单双击、滑动、拖拽、双指缩放等等，而动效上则会配合位移、缩放、透明度、旋转等效果，加之丝滑的过渡动画来搭建层级与层级间的转化与切换。
视觉展示类的UI动效，其目的是能够在第一时间吸引到用户的视觉，更好地突出产品的核心功能和特点，引导用户的视觉流向，去帮助用户理解产品。主要运用在KV头图、缺省页、引导页、开屏动画、注册登录页等场景中。
场景与功能引导类的UI动效，是通过页面中某些元素或模块的变化来拉开与不同层级之间的视差，从而引导用户进行下一步操作。其目的是为了使用户将注意力聚焦在某个元素或模块上，降低其他元素或模块对主要元素的干扰，吸引和引导用户对主要元素进行操作。较为常见的如呼吸动效按钮，新功能引导浮层，悬浮球等等。
加载与操作反馈类的UI动效都属于反馈动效，区别是加载反馈动效是由于网络、数据读取、缓存等原因导致页面元素无法及时做出反应，因此需要加载动效作为过渡；而操作反馈动效是一种即时性的反馈变化，通过动效变化呈现出符合用户心理预期的内容。
————————
What is dynamic effect design?
在了解了UI动效的运用方式之后，我们不难看出，动效设计单从字面含义可以理解为动态效果设计，而当我们结合动效的运用场景来理解时，则可以大致总结出UI动效的定义，即：根据不同的使用场景，运用适合的动态效果和适当的运动节奏，给使用者传递出某种信息的表达方式。
其中使用场景与传递信息这两部分的含义，其实就是上述UI动效的运用中所提及到的内容。结合起来理解的话，即使用场景可分为交互场景、展示场景、引导场景及反馈场景。而传递信息则是交互场景传递页面跳转与层级变化等信息、展示场景传递产品特点与核心功能等信息、引导场景传递突出元素与进一步操作等信息，最后反馈场景传递的是操作反应或缓冲等待等信息。
————————
The effect and rhythm of dynamic effect design?
通过以上内容，我们可以大致清楚UI动效究竟是什么。最后也是我们本次探索的重要模块，即如何结合动画的十二基本法则来指导UI动效设计。
1981年，迪士尼动画师奥利·约翰斯顿（Ollie Johnston）与 弗兰克·托马斯（Frank Thomas）在《TheIllusionofLife:DisneyAnimation》一书中提到「动画的十二项基本法则」，这由累积数十年的动画制作经验所整理出来的指导原则，至今仍然受到许多动画师的尊从与采用。
「动画的十二项基本法则」虽然是基于二维动画制作所衍生出来的原则，但却适用于绝大多数的动画制作，UI动画自然也包括其中。因此我们可以结合这「动画的十二项基本法则」来解析一下UI动效的效果与节奏。
挤压与拉伸（Squash and Stretch）是指物体受到力的挤压，产生拉长或者压扁的形变效果，再加上夸张的表现方式，使得物体本身看起来更富有弹性、质量和生命力，也使其更加真实。
在使用挤压与拉伸原则时需注意以下几点：
① 物体所受到的力不一定是非常明显的力，如空中落下时，物体也会受到空气阻力的影响，因此加上夸张化也可以使物体产生形变；
② 物体形变的程度与本身的质量相关，形变越大的物体给人以越柔软的感受，相反的，形变越小的物体则给人越刚硬的感受；
③ 物体在产生形变时，总体积（或面积）应保持一致；
④ 夸张化要注意范围程度，无需过度夸张。
因此当我们在做拖拽、放大或缩小元素、下落、弹出等动效时，对于会产生形变的元素，可以根据使用场景适当加入挤压与拉伸的效果，使整体更加生动。如下图所示，人物在放大时会被挤压得稍微扁短一点，缩小时会被拉伸得稍微窄长一点。使动画整体更富有活力。
预备动作（Anticipation）是指在做某一个动作之前会加入一个反向的动作，这样做可以加强正向动作的张力，还能预示正要发生的这个动作，给予用户一定的心理预期。例如一个人起跳之前，会有下蹲的动作用以借力（类似弹簧），如果没有这个预备动作，动画看起来就会显得生硬违和。
因此当我们在元素被按压、被放大等节点时，可以适当加入一些反向动作，使动画更富有张力。如下图所示，选中的图片在放大前会有一个微缩的动作，使得图片展开时的力道更加充足。
呈像阶段性（Staging）是指在同一时间阶段或场景中，动画的画面构图、先后次序、位置信息、表意内容等都需要有明确的安排，如同剧本一样运行。同时需要去除多余的干扰元素，使表达的主体更加突出可见。
同样的，在使用呈现阶段性原则时，我们有以下几点需要注意：
① 同一时间段运动的主体只有一个，多个主体会对用户造成干扰；
② 元素的呈现顺序需遵循一定规律，如自上而下、左上至右下等等，切忌无视规则分散运动；
③ 运动主体一般处于视线中心或有效阅读范围内，其他元素的运动则跟随在运动主体之后，即我们所说的从属动画；
④ 去除多余的干扰元素，主体元素运动时，其他元素尽可能保持静止；
⑤ 动画表意明确，不同形式动画可结合展示（如移动的过程中放大），切忌在运动过程过程中出现反向动画（如向左移动的物体突然向右移动又向左移动）。
因此当我们在安排主体元素的动画时，需合理安排避免出现动画紊乱的情况。如下图所示，主卡片最先开始变化，其他元素退场及位移，次卡片再进行变化。合理的次序安排不仅引导了用户的视线，同时能让转场的表意更加清晰。
连贯法与关键法（Straight-ahead and Pose-to-pose）指的是，连贯法即逐帧动画法，是一帧一帧去描绘元素的变化，最终结合起来形成动画。而关键法是指将元素动画的变化拆解成一些重要的定格动作并描绘出这些关键的动作点的帧，然后再由软件或手动补充中间的帧。
这两种方式在平时的动画制作中都会使用到。一般来说，使用较多的是关键法，即关键帧动画法，因为它可以帮助我们确定元素的起始变化，然后由软件自动进行补帧。如果过程中需要插入某种变化，只需在关键变化处插入即可，非常的方便。
而逐帧动画法则更多运用于火焰、闪电、爆炸、灰尘等不规则元素的变化。此类型的变化由于没有太多规律可言，较难通过固定的帧让软件进行补帧，所以需要手动去完成中间帧的补充。
因此当我们在做规律性的动画时，可以使用关键帧动画法来做，这也是最常用的方式。在制作一些不规则元素时，则可以使用连贯（逐帧动画）法。关键帧动画法非常常见，因此不做举例说明。如下图所示，如果排除代码动画实现方式，要落地实现球形烟雾变化时，需要使用逐帧动画法的方式来输出。
惯性跟随和重叠（Follow-through and Overlapping Action）是指元素的运动会受到惯性的影响而产生惯性跟随。比如做投篮的动作，投球出去后胳膊会因为惯性没有停止下来而是继续向前运动一小段距离，所谓的动作惯性跟随就是发生在这个时刻，胳膊没有停在本应该停止的位置上，而是靠惯性继续前移一段距离后反方向收回再前行静止。这个时候，停止的顺序为上臂-前臂-手掌-手指，中间重复的位置就是动画的重叠。
在UI动效中较为常见使用惯性跟随与重叠原则的效果为跟随回弹，也叫弹性动画。某个元素跟随某个指令运动之后，在停止时给予一定的回弹效果，会使动画更加真实与舒适。
在使用跟随回弹时需注意以下几点：
① 并非所有的动态变化都需要加入弹性动画。在某种强大的力的作用下产生动态变化时，可以加入适当的弹性动画，如弹出动画（缩放弹出或位移弹出）、强力滑动等；
② 在做跟随回弹时，需要注意幅度与频率，切忌过度夸张的动画效果；
③ 回弹动画的幅度与频率跟物体的质量相关，大幅的回弹效果给人柔软Q弹的感受，小幅的回弹效果给人微软的感受；
如下图所示，卡片弹出时的作用力更大，因此会有跟随回弹的效果，而其他元素在位移或缩放时，由于作用力较小，因此可以不加入跟随回弹的效果。这样做使得元素运动更符合物理逻辑，也让动画呈现更加生动自然。
缓入与缓出（Slow-in and Slow-out）指的是一般来说，动作在开始与结束时速度会比较慢，而中间过程的速度较会快一些。由于空气阻力、摩擦力等因素存在，一般元素不会产生匀速运动的现象。静止的物体开始移动时由慢而快，将要停止的物体则会由快变慢，若以匀速方式开始或者结束动作，则会给人一种唐突不自然的感受。
缓入缓出是极为重要的动画属性，它是决定动画是否自然的关键所在。在制作时，我们可以通过调节贝塞尔曲线来达到想要的效果。至于如何调节贝塞尔曲线，有非常多的文章有详细的说明，因此在这里我们不做具体展开。
在使用缓入缓出原则时我们需注意以下几点：
① 线性曲线（匀速运动）亦会运用到UI动画上，一般在改变元素的颜色或透明度、特殊情况的下拉加载动画时使用；
② 缓入曲线（加速运动）元素运动由慢到快，一般运用在元素移除界面时，缓出曲线（减速运动）元素运动由快到慢，一般运用在元素进入界面时；
③ 缓入缓出曲线（标准曲线）元素运动由慢到快再到由快到慢，十分常用的曲线，适用于大部分情况；
④ 在使用曲线时，可根据实际情况调节曲率参数，无需死记硬背。
如下图所示，卡片的位移变化和自行车的轮胎旋转都是一直存在于界面中的，因此使用的是缓入缓出曲线，由慢到快再到慢，元素从静止到运动再到静止。
弧形运动轨迹（Arcs）是指在生物运动过程中，几乎不会有直来直去的情况，这种运动轨迹只会出现在机械上。但凡所有会动的生物，其组成的任何部分的运动轨迹皆为平滑的弧形曲线。
UI元素的运动严格上来说并不属于生物运动，但为了使UI的运动更加自然，我们需要去遵循一些生物运动的规律。
因此，当我们在UI运动上使用弧形运动轨迹原则时，需注意以下几点：
① 当运动元素的大小变化不成比例地时，应遵循弧形原则，沿着弧线而不是直线运动，这有助于使动画更自然。这里的「不成比例」是指物体的宽高的增减是不对称地进行的，即变化的速度不同。如一个正方形变成一个长方形；
② 当元素的大小变化成比例时，则沿直线运动可能会更好。当然也可按照弧线运动，这时我们需要视具体情况而定。一般来说，当等比变化范围大、速度快时，我们可以沿直线运动，因为此时人眼的反应时间极短，很难感受出太大变化，因此沿直线运动即可。相对的，当变化范围小、速度慢时，可沿曲线运动，使动画更多变生动；
③ 元素沿曲线移动的路径需要与界面滚动的方向一致。如界面如果是上下滚动的，元素的从上往下的曲线运动应该是先水平后垂直，即形成先向右再向下的运动曲线。
如下图所示，粉色书本移动放大虽然为等比放大，但由于元素放大幅度较小，速度较慢，因此会沿曲线运动。并且因为界面可上下滚动，因此曲线路径与滚动方向一致，即先水平后垂直，形成先向右再向上的运动曲线。
附属动作（Secondary Action）是指依附在主要动作之下的细微动作。附属动作是依靠比较微小的动作，为主要动作带来画龙点睛的效果。因此附属动作并非不重要的动作，而是强化主要动作的关键，给动画带来生机感。
因此，当我们在制作主要元素的动画时，可以时刻考虑是否可以加入某些动画，在不影响主要元素动画表意的前提下，起到画龙点睛的效果。
如下图所示，在切换至输入框时，会有一个环绕输入框的蓝色线圈动画，它属于主体弹出卡片切换过程中的一个附属动画，但却能让用户一眼注意到输入框位置，无疑是一个优秀的附属动作。
时间控制（Timing）也叫节奏控制，指的是元素运动的时间与频率。优秀的节奏控制能让动画的持续时间以用户能注意到而又不用等待的方式进行，这也是动画的灵魂所在。
UI中动画的节奏也取决于时间的控制，过快或者过慢的时间都会让动作看起来不自然。而不同的元素变化也会有不同的节奏，它会影响到画面给予用户的反馈，也会影响到动画的自然与否。
在业界前辈们的大量研究与总结中，我们可以发现，界面中最优的时间是200-500毫秒（ms）。一个动态变化如果小于100ms时，动画的效果很难被感知到，而大于1秒时，又会让用户觉得有些延迟不够流畅。
那么我们在控制UI动画时间时需注意以下几点：
① 在移动设备中，屏幕大小会影响元素的运动路径，因此手机界面的动画节奏可以控制在200-300ms，平板界面的动画节奏控制在400-450ms，可穿戴设备的动画节奏控制在150-200ms；
② 在固定大屏设备中（如台式电脑、智能电视等），由于屏幕较大需要更快的响应速度，避免给用户造成延迟的感受，因此这类界面的动画的节奏可以控制在150-200ms；
③ 在展示场景中，动画是用于装饰与丰富场景，吸引用户注意，那么可以适当加长时间，无需遵循以上节奏规律；
④ 在任何平台中，动画的节奏不仅跟它的移动距离有关，还与它本身的质量相关联。小元素或变化较小的动画，应移动起来更快。大元素或变化较大的动画，移动时间应稍长一些。若为大小相同的元素对比，时间相同，因此移动距离短的物体先停止。若为大小不同的元素对比，时间相同的情况下，小元素的变化速度相对较慢。
动画节奏控制的优劣与否跟人的感受息息相关，优秀的节奏控制会使整体动画更加自然流畅，用户可无感知完成操作。而不符合控制规律的动画，则会显得别扭。如下图所示，桌子卡片在展开时持续时间较长，给人卡顿延迟的感受，相对的切换颜色时则要自然许多。
夸张（Exaggeration）是指利用挤压与伸展的效果来夸大的肢体动作，或是利用加快或放慢的动作来加强角色的情绪及反应，这是也是动画有别于其他表演的重要因素。
在UI元素的运动中，过度的夸张显示是不合适的，因此我们可以在一些展示场景中运用到夸张的动画原则。如下图所示，在加载时动画可以有极其夸张的动态变化和流畅的转换，使动画富有趣味性，也能缓解加载时带来的等待焦虑。
视觉科学（Solid drawing）是指在动画中为了使物体看起来更具有体积感、质量感和平衡感，会更加注重物体的透视和呈现姿态，使其看起来更生动立体。
在UI界面中，视觉科学的运用也相当广泛。我们会利用投影、遮罩、透视等“障眼法”赋予元素视差的感受，使其在平面中营造出体积感、质量感和空间感。例如当我们在移动同一层级的某个元素时，会将其抬高至另一层级，之后该才能在其他元素之上移动。若不将其抬高，只在本层级移动的话，则会和其他元素产生碰撞推移。
如下图所示，界面中心利用视觉科学，营造出一种立方体交互的感受，使得平面的元素瞬间拥有体积感，也让交互的方式变得更多样化。
吸引力（Appeale）是指在动画中无论角色的设计或是角色动画的呈现，它们虽然来源于生活但高于生活。这些内容都是人为所创作的，因此可以更加的灵动有趣，更能吸引人们的关注。
相同的，当我们在构思UI动画的时候，无须一开始便拘束于条条框框之内。创意的海洋是无穷无尽的，我们可以更放肆地去发挥我们的想象，之后再根据法则一步一步落地使用。这样才能使我们的动画创意更具有吸引力。
如下图所示，饮料选择杯子大小时，用动画的方式给予反馈，会比冷冰冰的文字看起来更加具有吸引力。
————————
Final end?
动画在我们的日常生活中已随处可见，随着5G时代的到来，动画也会以越来越多的方式呈现在我们面前，这对于热爱动画制作的设计师来说将会变得十分有趣。但不管技术如何改变，动画的十二基本法则仍然可以指导绝大部分的动画制作，因此值得我们花费更多的时间和精力去学习贯彻。
总而言之，动画是一种感性大于理性的感受，也无须太过刻意地去表现。我们可以遵循一定的法则，但更多的是我们要积极发挥自身的想象力。同时，以上法则是需要结合使用的，例如做预备动作时加入挤压与拉伸，张开时加入缓入缓出等等。希望我们能开阔思维，创造出更多更有趣的动画。
参考书籍：
《原动画基础教程》 - 理查德·威廉姆斯 ；
《TheIllusionofLife:DisneyAnimation》 - 奥利·约翰斯顿 & 弗兰克·托马斯。
@Light12 授权黑马家族发布，同步更新51学设计网
