原作者：Pablo Stanley 原文链接
优秀的动画，对于提升UI的逼格非常重要，在大多数情况下，针对动画进行合理的调整，就可以让你的UI变得更加出色，好的交互设计，能够展示状态之间的连续性，以及不同UI元素的的关系，同时，能够使得用户的注意力聚焦在重要的地方。
所有的交互都是用体验版本的InVision Studio做出来的，你可以下载源文件。
将选项卡种的内容做成可滑动的
好的动效将内容从一个标签页淡出，再淡入到另一个标签页；
优秀的动效让页面内容在不同标签之间移动，能够展现过度时的连续性。
当你设计选项卡或者弹出菜单这种交互时，试着将内容的位置与打开它的动作相关联。通过这种方式，你可以将你的内容和内容的位置都做成可视动画。做这种页面时，也加上一个可以在不同内容之间切换的滑动手势。
关联卡片上的相关元素
好的动画展示信息详情页时使用左滑或者上划的方式；
优秀的动画会在有共同信息的两种状态之间建立联系。
当给两种不同的状态的过渡做动画时，看看这两种状态之间有没有共有的元素，如果有则可以在动画中体现两者的联系。在InVision Studio中，两个相关联的页面有重复的元素时，当你创建一个Motion的时候，系统会自动在两个元素之间创建关联动画。这让创建动画原型变得轻而易举。
在内容中使用瀑布流效果
当卡片进入屏幕时，好的动画改变它的位置和透明度；
优秀的动画则会快速蔓延每组元素。
要达到瀑布流的效果，可以将每个动画元素都保持相同的动画速度以及持续时长，并对其按序设置一定的延时，这样设置动画组中
瀑布流的效果可以通过展示延迟元素来实现，保持同样的释放速度和持续时长，它们看起来就是连续的。要将瀑布流的形式应用在组里，不能应用在单独的元素上。保持动画的快速简介。谷歌的提醒功能里，每个元素出现的间隔不超过20毫秒。点击动画里的瀑布流形式查看更多案例。
让内容推开其他元素
好的动画直接在画面中移动和展示元素；
优秀的动画则会展示出动画对其周围元素的影响。
让内容与周围的环境相互动。这意味着让内容吸引或者赶走它周围的元素。点击Material Design中，查看更多动画规则。
让菜单从按钮中出现
好的动画菜单出现的方向与打开它的按钮的方向保持一致；
优秀的动画菜单从打开它的按钮中展开。
用按钮展示不同的状态
好的交互将活动状态用文字方式展示在按钮旁边；
优秀的交互则直接用按钮展示不同状态。
试着用按钮本身展示不同状态。例如：用旋转菊花或者加载动画代替CTA；或者在按钮背景中加一个动画表明进程。具体方式取决于你，核心就是利用好已有的用户已经与之交互的空间。如果你使用按钮颜色去确认成功状态，对于用户来说就是一个大彩蛋。
将用户的注意力引导到重要的东西上
好的设计使用颜色、尺寸和位置，来突出需要格外引起用户注意并触发用户行为的重点内容；
优秀的设计使用动画引导用户将注意力放在重要的地方，并且不会打扰到用户。
当用户需要做出一些重要的操作时，试着将这些操作的按钮以动画的方式展现，以吸引用户的注意力。可以做一些简单细微的动画并逐渐增加强度，并根据行动的重要性改变按钮的大小、颜色和动画的速度。记住只在最重要的操作上使用动画，因为你用的动画越多，它就变得越不重要并且会打扰到用户。
