让我们看看一些 UI 动画从优秀到卓越的示例。只需稍加调整，您就可以通过动画提升您的 UI 模式。列出的交互显示了状态之间的连续性，指示了共享元素之间的关系，并提醒用户注意他们应该注意并采取行动的内容。
为了创建这些动画，我遵循了Material Motion、IBM 的动画原则和运动宣言中的 UX 的指导方针。
所有交互均使用InVision Studio的早期版本完成。您可以在此处下载源文件。
在设计类似标签页或弹出菜单的交互时，请尝试将内容的位置与打开它的操作关联起来。这样，您不仅可以为内容的可见性添加动画，还可以为位置添加动画。对了，还可以添加一个滑动手势，方便您在内容之间切换。
在不同状态之间创建动画时，请检查它们之间是否存在共享元素并将它们连接起来。使用 InVision Studio，创建Motion过渡时，两个链接屏幕之间重复出现的组件会自动连接。这使得动画原型设计变得轻而易举。
请参阅“运动宣言”，了解您可以应用的动画类型。上面的示例结合使用了“蒙版”、“变换”、“父级”和“缓和”原则。
要实现瀑布效果，请尝试对每个内容片段或内容组应用延迟。保持相同的缓动和时长，以保持一致的效果。但不要将每个小元素都层叠起来，而是要为每组内容添加动画效果。动画要保持快速流畅。Google 建议每个元素的起始间隔不超过 20 毫秒。查看Material Motion 中的编排原理，查看更多示例。
让内容中的元素感知周围环境。这意味着让内容吸引或排斥周围的元素。更多示例，请查看Material Design的感知动效原则。
尝试使用按钮容器来提供状态的视觉反馈。例如，您可以用旋转动画或加载动画替换 CTA；或者在背景中添加动画来显示进度。解决方案由您决定，其核心在于充分利用用户正在交互的空间。如果您使用按钮颜色和文案来确认成功状态，则可以获得加分。
当用户需要执行重要操作时，尝试使用动画来吸引他们的注意力。先从细微的动画开始，然后根据操作的重要性逐渐增加强度（例如大小、颜色和速度的变化）。只在关键操作中使用这种效果——这种效果用得越多，效果就越差……用户也会越烦躁。
我希望这些示例能帮助您在为交互添加动画时做出更好的决策。借助 InVision Studio 等新的动画和原型设计工具，我预测我们很快就会看到创意交互的复兴。我们只需记住要负责任地使用这项新的超能力。
让我们运用动画来解释状态的变化，吸引用户对必要操作的注意力，明确元素之间的关系，并为产品增添趣味和个性。遵循这些原则，我们将使动画从优秀走向卓越。