全文共2486词，阅读大约需要10分钟，记得点击上面的 蓝字 关注我哟！
前几天，我在读者群里做了一个关于喜欢哪类文章小调查，发现很多小伙伴对动效类的文章呼声比较高，其实关于动效这方面的文章，我之前也翻译了不少，感兴趣的也可以看看之前的一些，原理性的内容都大同小异。
Uber高级产品设计师告诉你，她是如何完成100天动画设计挑战的
不过，对于我自己来说，每一次写的感受都不一样，总能收获一些之前没有注意到的小细节。希望大家在看的时候，也能多想想有没有一些细节是可以在平时做的项目中去提升的。
迪士尼动画的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年前设计的一套规则到今天仍然适用。
（译者注：这又应了迪特.拉姆斯的设计十诫，好的设计是不会过时的。不禁感叹，迪特.拉姆斯真的设计界的鼻祖啊，连乔布斯，乔纳森，张小龙都是他的粉丝，他提出的设计十诫说起来容易，能真正做到的产品太少太少了。）
原文：https://uxplanet.org/disneys-motion-principles-in-designing-interface-animations-9ac7707a2b43
作者：Ruthi
译者：彩云Sky
本文翻译已获得作者的正式授权
授权截图
往期热门文章回顾
非常遗憾的错过了微信公众号的留言新规，导致没法直接留言，大家有什么想说的，可以尝试使用下面这个留言小程序进行留言交流~
Ps:觉得有用就点个好看吧，谢谢~
原文始发于微信公众号（彩云译设计）：9个小知识教你更好的理解动画原则，提升动效品质
评论0