1.好的UI动画是自然的

用户界面中的状态变化通常涉及默认剪切，这可能使其难以遵循。在现实世界中，大多数事情不会马上出现或消失。当某物有两种或两种以上的状态时，状态之间的变化将使用户更容易知道转换是动态的而不是瞬时的。让我们看看下面的例子。用户选择列表中的一个项目以放大其详细视图。在扩展过程中，当小卡扩展为大卡时，小卡将向目的地移动。这一运动受到了现实世界力量的启发。

2.有效的UI动画分阶段进行

分阶段动画过渡引导用户的注意力，并阐明状态的变化。该功能与用户关注度和连续性直接相关。良好的过渡将有助于在正确的时间将用户的注意力引向正确的位置，并且根据目标强调正确的元素。在以下示例中，浮动操作按钮(FAB)被转换为由三个按钮组成的标题导航元素。第一次，用户不能真正预测即将到来的互动，但正确的动画转换可以帮助用户保持领先，不会感觉到内容突然改变。这种转变有助于指导用户交互的下一步。

3.最好的UI动画是关联的
转换应该解释元素之间的联系。良好的转换将新创建的曲面与创建它们的元素或操作关联起来。关联连接的逻辑是帮助用户理解视图布局中刚刚发生的变化以及是什么触发了这些变化。下面你可以看到两个分层转换的例子。在第一个示例中，新层看起来远离触发它的触摸点，这破坏了它与输入法的关系。
在第二个示例中，一个新层出现在触摸点的正上方。因此，元素被绑定到触摸点。
另一个例子可以在苹果操作系统中找到，它在最小化窗口时使用动画转换。动画将第一状态与第二状态连接起来。
4.流行的UI动画是快速的
如果你只关心一个动画原则，那就是时间。当设计改变时，时间可以说是最重要的考虑因素之一。动画应该快速而准确，在用户的开始动作和动画开始之间有很少或没有滞后时间。此外，用户不必等待动画完成。在下面的示例中，缓慢的动画将导致不必要的延迟并延长持续时间。

当一个元素在不同状态之间移动时，移动应该足够快而不会引起任何等待，但是要足够慢以理解转换。为了有效地传达用户界面元素之间因果关系的动画，效果必须在初始用户操作的0.1秒内开始，以保持直接操纵的感觉。尽量将动画持续时间保持在300毫秒以下，因为快速切换会浪费用户的时间。和你的用户一起测试，看看什么是可容忍的。

5.最佳UI动画是清晰的
通过动画重新加载用户界面或创建过于复杂的交互是一个常见的错误。用户界面变化太多可能会导致用户迷失方向，这需要时间来恢复。记住，屏幕上的每一个动作都会吸引人们的注意力，所以太多的动画会同时引起混乱。过渡应该一次避免过多的项目，因为当多个项目需要向不同的方向移动时，它们会变得混乱。请记住，在动画和转换，尤其是少。任何能让用户界面变得更清晰的东西，如果被删除，几乎肯定是个好主意。当曲面改变形状和大小时，有必要为下一个视图保留一条清晰的路径。复杂的转换应该保持单个元素可见。这有助于保持用户导向。
6.过渡和辅助功能
由于转换是关于视觉交流，默认情况下，视觉障碍用户不能访问它们。您应该为这组用户提供替代内容。网站的动画最佳实践提供了何时为辅助技术提供替代内容的建议。
想学习了解更多UI设计知识，欢迎关注灵加教育UI设计课程培训~~http://www.linkplus.cc