出自UXGuide.net

动画和过渡

Animations and Transitions

有策略地运用动画和过渡效果可以使你的程序更容易理解、用起来更加流畅自然、品质更好且更具吸引力。但动画和过渡效果的滥用也会导致你的程序显得混乱烦人。

• 设计理念
• 使用模式
• 设计规范
• 文档编写

动画是指运动或随时间改变的外观。动画可以用来提供反馈、预览某个操作的效果、显示对象间的关系、引起用户对更改的注意、或者直观地解释一个任务等。

Microsoft® Windows® 使用背景闪烁动画来提供反馈，指示对象被单击。

过渡是在用户界面（UI）状态更改及对象操作的过程中，用于使用户保持方向感，并使这些变化流畅而不显突兀的动画。好的过渡效果应当是自然的，往往给用户以操作真实世界物体的感觉。

Windows 桌面小工具在其精简和详细状态间切换时使用平滑过渡效果。

通常来说，最佳的对话和过渡是用于和用户进行非语言的沟通，从而使得状态更改显得更加自然而不那么突显。相反，最没有意义的即是那些完全不传递任何信息，吸引不必要的注意力的那些动画效果。动画用作信息传达的次要形式时最为合适，应当用于那些有用但并非关键、能够访问、且用户可以通过其他方式获得等价信息的信息。

注：与软件品牌宣传、声音和无障碍访问（辅助特性）相关的设计规范请参考各自相应的章节。

这样的用户界面是否合适？

考虑下列问题以进行判断：

动画

下列条件是否满足？

• 该动画形象地传达了有用的信息，比如提供反馈、显示关系、因果、或引起对重大变化的注意。
• 该动画并不是非看到不可。可以通过其他途径获取等价的信息。用户可能因为下列原因而无法看到动画：
  • 动画被关闭。
  • 正关注其他地方。
  • 视力受损。
  • 被其他窗口遮挡。
  • 由于系统性能问题，动画没有播放。
• 该动画不会影响用户的工作效率。具体指（满足其中一项）：
  • 速度很快（不超过 200 毫秒）。
  • 不会影响用户操作，或可随时中断。
  • 用户本来就需要等待。
• 该动画不会影响用户的使用流程。
  • 要么处于用户的注意力中心，要么将用户的注意力吸引到对于完成任务非常重要或有用的事情上。
  • 可以轻易忽略，不会让人分心或厌烦。
  • 不会看厌。用户即使在重复看到多次之后仍然觉得它合适且有趣。

如果满足，则考虑使用动画。

过渡

是否某个对象或场景正在进行状态切换，且上述关于使用动画的所有条件及下面的条件都能满足？

• 该状态切换在概念上较为模糊、混乱，或难于理解。
• 该状态切换在视觉上显得突兀、缺乏连贯性、会产生闪烁；或者显得不自然、粗糙、或质量低劣，尤其在涉及大块的屏幕区域时。
• 使用过渡会使状态切换看上去快一些。
• 该状态切换值得用户特别地关注。

如果满足，则考虑使用过渡。