下面是一些优秀和更高明的 UI 微交互对比示例。随着一点点地调整，你可以用动画来改进你的 UI 布局。
所列出的交互展示了状态之间的连续性，表示共享元素之间的关系，并且将用户的注意力引向他们应该注意和采取动作的点上。
为了构建这些动画，我遵循了 Material Motion、IBM 的动画原则以及
Motion Manifesto 中的 UX 准则。
所有的交互动画都是使用尝鲜版的 InVision Studio 制作的。
你可以在此下载源文件。
让 tab 页的内容可以滑动
左边的内容渐入渐出，右边随 tab 滑动。
-
优秀的动画随着内容从一个状态进入另一个状态而渐入渐出。
-
高明的动画能在移动时表现出连续性，使内容在状态间移动。
当设计 tab 页或是弹出式菜单的交互时，尝试在触发事件的地方定位内容的位置，除了控制显示，还可以在位置方面加入动画。当这样设计时，可以加一个滑动手势，将你从内容的一方带到另一方。
连接卡片的共享元素
左边的内容在向上滑动的时候打开了一个新的屏幕。右边的卡片则是放大并填充屏幕来显示内容。
-
优秀的动画使用比如左滑或上滑这样的过渡效果在屏幕上展示内容。
-
高明的动画通过共有内容的过渡效果维持两个状态之间的联系。
在不同状态之间进行动画过渡时，请查看它们之间是否有共享元素并将它们连接起来。 使用 InVision Studio 时，在创建 Motion 过渡时，在两个链接屏幕之间重复的组件会自动连接。 这使制作原型动画变得轻而易举。
查看 Motion Manifesto 以了解你可以应用的动画类型。上面的例子使用了 Masking、Transformation、Parenting 和 Easing 原则的组合。
给内容使用级联效果
左边的卡片通过滑动和淡入而出现，右边的卡片使用了相同的动画，但每个卡片有一个短暂的延迟。
-
当素材进入屏幕时，优秀的过渡动画会改变位置和素材的不透明度。
-
高明的动画效果会迅速错开每个组或者每个元素的出现。
要完成瀑布效果，请尝试对每个内容或一组内容应用延迟。保持相同的缓解和持续时间，这样会感觉连贯。 尽管如此，不要串联每个小元素，这些内容组成了一个动画。保持动画快速和敏捷。谷歌建议每个元素间隔不超过20毫秒。 查看 Material Motion 中的编排原理以了解更多示例。
使内容将其他元素推出
左侧的动画位于其他内容的顶部。右侧的动画随着其增长将内容推出。
-
优秀的动画在上下文中移动并显示元素。
-
高明的动画显示被他们改变所影响周围的元素。
让内容中的元素知道他们的周围元素。这意味着使内容吸引或排斥周围的元素。 更多示例，请查看 Material Design 中的 Aware 运动原则。
使菜单在上下文中浮现
左边的菜单从下面飞入。右侧的菜单是从创建它的动作扩展而来的。
-
优秀的动画菜单从打开它们的按钮的方向来展示其内容。
-
高明的动画菜单从创建它们的动作中浮现出来，从触摸点扩展而来。
用按钮来显示不同状态
左边的按钮用文字来标示状态。右边的按钮用容器来显示不同的事件。
-
优秀的交互应该在紧挨着按钮来显示事件。
-
高明的交互使用按钮本身来表明不同的状态。
试着用按钮的容器来提供状态的视觉反馈。比如，你可以 spinner 旋转器或者载入动画来代替 CTA 按钮；或者你可以在背景中加入一段动画来展示载入过程。具体解决方案是取决于你自己的，但核心思想是利用已经和用户产生交互的空间。 如果你使用按钮颜色和复制来确认一个成功状态，这会是一个加分项。
把注意力聚焦到重要的事物上
左边的例子用颜色和位置来突出一个元素。右边的例子使用一个轻微的动画效果来吸引用户的注意力。
-
优秀的设计者会使用颜色、大小和位置来突出一个值得用户注意或者接受指示的环节。
-
高明的设计者会用动画效果来将注意力带到需要执行的环节上，并且不会分散干扰用户注意力。
当用户要执行重要操作时，尝试让这一环节变的动态起来以吸引用户的注意力。以轻微的动画效果为起始然后根据这个环节的重要程度增加力度（改变大小、颜色和速率）。注意只在关键的环节上使用动画效果 —— 使用效果越频繁，它将变得越不引人注意...并且你的用户会越觉得厌烦。
结语
希望这些例子可以帮助你在为交互添加动画时做出更好的决策。有了像 InVision Studio 这样的新动画和原型制作工具，我估计很快就会开始看到富有创意的互动的复兴。我们只需要记住负责任地使用这个新的超级利器。
用微交互来解释状态的变化，注意必要的操作，确定元素之间的关系，并在产品中添加一些趣味和特征。遵循这些原则，我们将把微交互从优秀转变为高明。
为微交互欢呼吧！
