让我们一起看一些UI交互动画从良好到优秀的例子。通过对交互动画细节的一些调整，我们可以使用交互动画提升你的UI用户体验。

文章所列出的交互显示了界面状态之间的连续性，表示共享元素之间的关系，并唤起用户的注意力，让他们注意一些他们应该注意和采取行动的事情。

为了创建这些动画，我遵循了Material Motion，IBM的动画原理和UX in Motion Manifesto中的指导原则。

所有的交互都是使用InVision Studio的早期版本进行的。

1.让标签滑动切换平滑过渡

左边的内容淡入淡出。右侧的随着标签一起滑动过渡。

• 一个好的动画将内容从一个状态转换为另一个状态。
• 一个优秀的动画通过使内容在状态之间移动来显示转换过程的连续性。
• 当我们设计像标签或弹出菜单这样一类的交互时，请尝试将内容的位置与打开它的操作相关联。这样你不仅可以提升内容的可见性，还可以为内容的位置设置动画。当你在设计这个动画的时候，还可以添加一个滑动手势，将你从一个内容带到另一个内容。

2.连接列表卡片与内容的共享元素

左侧的内容打开一个向上滑动的新窗口。右侧的卡片展开并填满整个屏幕。

• 一个好的动画使用左推或向上滑动等过渡细节在屏幕上显示内容。
• 一个优秀的动画通过共享元素在两个状态之间建立联系。
• 在不同状态之间制作动画时，查看它们之间是否存在任何共享元素并将其进行关联。使用InVision Studio时，在创建Motion转换时会自动连接两个链接屏幕之间重复的组件。这使得原型制作动画变得简单很多。

查看动画宣言，了解您可以应用的动画类型。上面的示例使用了Masking，Transformation，Parenting和Easing原则的组合。

3.在您的内容中使用级联效果

左侧的卡片通过滑动和淡入显示。右侧的卡片具有相同的动画，但每张卡片都有短暂的延迟。

• 一个好的动画会在元素进入屏幕时改变元素的位置和不透明度。
• 一个优秀的动画会将元素快速的错开有序的显示。
• 要完成瀑布效果，请尝试对每个元素或每组元素应用延迟效果。保持相同的延迟和持续时间，因此对用户来说是感觉一致的。尽管如此，不要对每个小元素进行级联 - 而是使用内容组动画。保持动画的快速和节奏。谷歌建议开始每个元素不超过20毫秒。查看Material Motion更多示例。

4.使内容将其他元素挤压到界面之外

左边的内容是盖在其他内容的上面，右边的内容是随着界面的展开将内容推出来。

• 一个好的动画是在上下文中移动并显示元素。
• 一个优秀的动画是在当元素改变时会影响周围环境的元素。

让内容中的元素了解周围环境。这意味着内容改变时会吸引或排斥其周围的元素。有关更多示例，请查看 Material Design 中的 Aware 运动原理。

5.使菜单显示在上下文中。

左边的内容是菜单从下面飞进来，右边的内容是菜单从创建它的动作中扩展而来。

• 一个好的动画是菜单从打开它们的按钮方向显示出现的内容。
• 一个优秀的动画是从创建它们的动作中浮现出来，从触摸点开始展开。

 

6.使用按钮显示不同的状态。

左边的内容是按钮显示指示状态的文本，右边的内容是按钮使用变化的容器来显示不同的事件。

• 一个好的动画是在按钮附近显示事件。
• 一个优秀的动画是使用按钮本身来显示不同的状态。

尝试使用按钮的容器来提供状态的可视反馈。例如，您可以使用微调器或加载动画替换 CTA; 或者您可以在显示进度的背景中添加动画。解决方案取决于您，我们的想法是使用用户已经与之交互的空间。如果您使用按钮颜色和样式来确认成功状态，则奖励积分。

7.注意一些重要的事情。

左边的内容是用颜色和位置使元素脱颖而出，右边的内容是使用微妙的动画来引起用户的注意。

• 一个好的动画会使用颜色，大小和位置来突出用户需要注意或采取的重要操作。
• 一个优秀的动画会使用动画来引起用户对重要操作的关注，并且不会对用户造成干扰。

当用户需要对重要事项采取行动时，请尝试设置动画来吸引他们的注意力。从一个微妙的动画开始，增加与动作重要程度相关的强度（大小，颜色和速度的变化）。同时仅将其用于关键操作，您使用此效果的次数越多，其影响就越小，并且用户获得的烦恼也会越多。

结论

我希望这些示例可以帮助您在为交互添加动画时做出更好的决策。借助InVision工作室等新动画和原型制作工具，我预测我们很快就会看到创意互动的复兴。我们只需要记住负责任地使用这个新的超级大国。

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