高手都在用！9个实用小技巧提升你的动效设计功力

迪士尼画的12条原则是设计师必须要掌握的经典指导性原则，是由 Ollie Johnston 和 Frank Thomas 在他们的书《The Illusion of Life》中来的观点（译者注：这本书在豆瓣的评分有9.3分，值得一看）。这些原则最初是来为画片这种传统的形式设计的，然而，这些原则同样适于 UI设计。，我想在这里做一个有趣的尝试，看否将这些画原则联系起来。

挤压和拉伸

在画中，挤压和拉伸代表了物体的重，质量，重量和灵性。举例来说，当一个弹球在它撞击地面时会发生形态变，就是挤压和拉伸。

在界面中，挤压和拉伸很容易就联想到按钮。当一个按钮被按下时，就以理为受到挤压，通控按钮的挤压和拉伸，我们以很轻易地做一个按钮的互动画。除按钮之外，种原则也以应用 UI 中的任何互元素上。

△ 按钮在互时的挤压和拉伸

△ 挤压和拉伸被应用边栏

预期动作

让观众能预先道接下来将生什么，它是先下一步生的动。举例来说，迪士尼动画里经常有从高空往下跳跃时先弯曲膝盖跳，正在跑步的人要停止跑步前逐渐变慢步伐等等。

在界面中，悬停状就是好的例。当把鼠标悬停在素上，素会提供反馈，表它是可以点击的，并且在点击，会有一些别的反馈。

△ 悬停的交互通常会暗示这个按钮是可以点的

在有水滚动界面，通常在交互会显示下一个素的部内容。这其实是一个好的例，因为它是在告知用户下一步的一些息。

时间节奏

在传统动画中，间会决定关键帧的绘制方式。帧数越多，动画就越流畅，同也更慢，间能够给动画赋予情绪和性格。

时节奏感是任何动画基础，速度在元素编排起着常要作用。速度太慢，用户会不耐烦；速度太快，用户又会过些内容。般来说，大多数 UI动画在200-600ms，其悬和反馈交互时长大约为300ms，精细转场动画大约在500ms。也可以去参考谷歌动画规范（https://material.io/design/motion/speed.html#duration），里常详细地解释了动画类型持续时。

一些设系统，如 Carbon（https://www.carbondesignsystem.com/guidelines/motion/）、 Lightning（https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/）都把运动的节奏感视一很重的方面，并每种类型的过渡都制了严格的规范。

△ 右的过渡动画显得太过于漫，繁琐。

渐快与渐慢

实世界中，多数体都遵循缓动运动规律。也就，体的运动并不会瞬间始或瞬间结束，就一体自由落体，也一始很慢后面会变。

△ 左侧的卡片缓动的，右侧的缓动的，看起会自然很多。

给 UI 中的元素上缓会它看起来更自然，缓和节奏感都是可有效的升画的质。

呈现方式

舞台中的表演需要合适的编才会精彩。就是说，对象在场景中如何摆放，每个画又如何现，乎演的质量。通过这种编，够将注意引向最重要的角色。

在界面中，呈现方式能够决定元素的位置，以及在互时，它应该何编排才能将用户的注意力引向预期的元素。

比现在有一个基兴趣的音乐APP，对个应用来说，最重要的就是让动画引导用户选择他们所喜欢的音乐。因此，有必要将类似的操与其他元素分开编排，有目的的引导用户。

弧形轨迹

一个从高处抛出的小球，运动轨迹做抛物轨迹运动，弧能使物的运动更加自。

在界面中，沿着对角线的素沿着弧线轨迹将会使运动变得更加然。当需要凸显出素的运动路径，多尝使用弧线轨迹。

△ 通过对比，能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加然。

附属动作

在动画中，次要动作能够起烘托主要动作，比如动画中的角色在路，头部的晃动就是次要动作，却能够让角色行显得更加然。

在界，要操作能够起到强化关键动作，元素需要用户提供反馈时，这个法常管用。所有微交互都是基于这个附属动作原理。

△ 按钮边上粒子效强化了主按钮击效

夸张和吸引力

场景要色常会采用些比较夸张动作来获更多注意力。

界面中，重的交互也会通过一些夸张的动画引起用户的注意。谷歌设规范中的 FAB按钮就一很好的例子，FAB按钮不动的时候也比较能引起注意，因它通常会比较鲜明的颜色，并且独立悬浮界面元素之的。当它被点击时，FAB的动画被，把整界面都占满，使得它完全占据用户的注意力。

△ FAB夸张的交互形式

△ 对于支付这么重功能的按钮，通过夸张的动效引起用户的注意

跟随动作和重叠动作

象一只兔子从高处跳下，当兔子始起跳时，它的耳朵动作会与身体动作发错。然后当它陆时，它的身体停下了，但耳朵还动。者称之随动作，后者被称重叠动作。其原理的就：任何一种体会突然停止，体的运动一部分接另一部分的。

在界面中，可使元素在停止之前超过它们原本的位置，使得元素更自然。（译者注：大白话就是我们说的弹效果。）

△ 界面有一定的弹，会显得更自然。

△ 当界面滚时，字会跟随图片的，图片与字同的速会更自然。（译者注：像是被拖着走的那种感觉）

总结

界面中的每一次交互都必须在适当的场景中精心设计，整个体验更具沉浸感。在正确的地方使这些原则够确保产中的交互体验更协调自然。

原则正在以不同的形式应用当今的数字产品中，值得敬畏的是，30年前设计的一套规则到今天仍适用。

（译者注：这应了迪·拉姆斯的计十诫，好的计是不会过的。）

原文链接：《Disney’s motion principles in designing interface animations》  Ruthi

欢迎关注译者的微信公众：「彩云译设」