UI动效由一般到卓越的技巧

很好的UI动画提示

让我们看一些UI动画由一般到卓越的例子，通过不断地调整，你可以用动效来提升你的设计水平。
动效交互的作用应该是显示状态之间的连续性，表示共享元素之间的关系，并且将用户的注意力吸引到他们应该注意或者操作的元素上来。

标签下的内容滑动起来

左侧的内容淡入淡出；右侧的内容随着标签滑动
一个好的动画会淡化一个状态进去另一个状态的内容
一个卓越的动画在状态转变之间展示出内容的过渡
当设计交互式选项卡或弹出式菜单时，请尝试将内容的位置与打开它的操作相关联。通过这种方式，您不仅可以制作内容的可见性，还可以制作位置动画。最后，添加一个滑动手势，将你从一个内容带到另一个。

连接卡片的共享元素

左侧的内容打开一个新的屏幕，向上滑动；右侧的内容则是扩展填充屏幕
一个好的动画是使用向左或向上的滑动来显示屏幕上的详细信息内容
一个卓越的动画是通过动画共享内容来建立两个状态之间的连接
在不同状态之间进行动画制作时，请查看它们之间是否有共享元素并将它们连接起来。使用InVision Studio时，在创建运动转换时，在两个链接屏幕之间重复的组件会自动连接。这使原型动画变得轻而易举。

在内容中使用级联效果

左侧的卡片通过滑动和淡入来显示；右侧的卡片具有相同的动画，但每张卡片都有一个短暂的延迟。
一个好的动画改变内容进入屏幕时的位置和不透明度
一个卓越的动画在一个组甚至一个元素上做文章，让他们有序并且快速地出现在屏幕上。
要完成瀑布效果，请尝试对每个内容或一组内容应用延迟。保持相同的缓解和持续时间，会达到一种很和谐的效果。尽管如此，但不要给每一个元素都做这种效果，把元素组合起来，保证动效的干净利落。Google 建议每组元素之间的间隔不要超过20毫秒。

让内容将其他元素排除在外

左侧的动效是新打开内容直接覆盖在其他元素上；右侧的动效是新打开的内容在展开的同时把其他元素推出了屏幕。
一个好的动效是单纯移动、展示出现的元素
一个卓越的动效当一个元素出现或者发生改变时，它对周边其他元素产生了怎样的影响。
在设计的过程中注意内容中元素的周围环境。这意味着使内容吸引或排斥周围的元素。

使菜单显示在上下文中

左侧的菜单从下面飞入；右侧的菜单从创建它的操作扩展而来。
一般的动画菜单显示从打开它们的按钮的方向出现的内容
卓越的动画菜单从创建它们的动作中浮现出来，从触摸点发展而来

使用按钮显示不同的状态

左侧的按钮显示指示状态的文本，右侧的按钮使用容器显示不同的事件
一般的交互靠按钮旁边的文本来展示事件
卓越的交互则可以运用按钮本身来展示事件的不同阶段
尝试使用按钮的容器来提供状态的可视反馈，比如可以用加载动画代替一个“CTA”。或者你可以在整个背景上做一个动效来展示进程，用什么方法，取决于你。另外可以将通过恢复按钮并改变其颜色来表达成功状态。

引起重视

左侧的例子使用颜色和位置来使元素脱颖而出，右边的一个使用微妙的动画来唤起用户的注意力。
一般的设计使用颜色，大小和位置突出显示用户需要注意或采取行动的重要动作。
卓越的使用动画来关注那个重要的动作，而不会造成干扰
当用户需要采取一些重要的行动时，请尝试通过动画来吸引他们的注意力。从微妙的动画开始，增加动作的重要程度（大小，颜色和速度的变化）。只能用于关键性操作，使用此效果的次数越多，效果反而会越低，用户受到的干扰会越多，适得其反。

总结

让我们应用动画来解释状态的变化，提醒注意必要的操作，确定元素之间的关系，并为我们的产品添加一些乐趣和特征。遵循这些原则，我们将把动画从一般转变为卓越。

向Pablo Stanley致敬！