动画和转换

注意

此设计指南是为 Windows 7 创建的，并且尚未更新Windows的较新版本。 大部分指南原则上仍然适用，但演示和示例并不反映我们 当前的设计指南。

动画和过渡的战略用途可以使程序更易于理解、感觉更流畅、更自然、质量更高，并且更具吸引力。 但是，动画和过渡的无端使用会使你的程序分散注意力，甚至令人恼火。

动画提供动作的外观或随时间的变化。 使用动画提供反馈、预览操作的效果、显示对象之间的关系、吸引注意更改或直观解释任务。

Microsoft Windows使用背景闪存动画来提供单击对象的反馈。

转换是动画，用于在用户界面 (UI) 状态更改和对象操作期间保持用户导向，并使这些更改感觉流畅，而不是不区分。 良好的过渡感觉自然，通常给人一种幻想，即用户正在与现实世界对象交互。

Windows桌面小工具在其简洁和细节状态之间使用平滑切换。

通常，最佳动画和过渡用于与用户非口头通信，并使状态更改更加自然和不太明显。 相比之下，最不有效的是无端的，因为它们不会传达任何内容或引起不必要的关注。 动画最好用作辅助形式的通信。 他们应该传达有用但不是关键的信息，并且要可访问，用户应该能够通过其他方式确定等效的信息。

注意： 与 软件品牌、 声音和 辅助功能 相关的指南在单独的文章中介绍。

这是正确的用户界面吗？

若要确定，请考虑以下问题。

动画

以下条件是否适用？

• 动画以视觉方式传达有用内容，例如提供反馈、显示关系、原因和效果，或引起人们对重要更改的关注。
• 查看动画并不重要。 可以通过另一种方式获取等效的信息。 如果用户无法从动画中受益，前提是：
  • 他们已关闭动画。
  • 他们的注意力在别处。
  • 它们视力受损。
  • 动画被另一个窗口遮盖。
  • 由于系统性能不足，动画无法播放。
• 动画不会影响用户的工作效率。 可以是：
  • 它 (200 毫秒或更少的) 快速发生。
  • 它不会干扰交互，也可能中断。
  • 无论如何，用户必须等待。
• 动画不会影响用户的流。
  • 它要么位于用户的注意力中心，要么将注意力吸引到在完成任务时非常重要或有用的注意力中心之外的内容。
  • 它很容易被忽略，而不是分散注意力或恼火。
  • 这不会变得令人厌烦。 即使在重复查看后，用户仍会发现它很合适和愉快。

如果是这样，请考虑使用动画。

Transitions

对象或场景是否更改状态，并且上述所有使用动画的条件以及以下任何条件都适用？

• 状态更改在概念上是迷失方向、混淆或其他难以理解的。
• 状态更改在视觉上很不雅，缺乏连续性或流畅性，或者闪烁：或者显得不自然、不波利斯或质量差，尤其是当它涉及大屏幕区域时。
• 使用转换会使状态更改看起来更快。
• 状态更改值得特殊用户关注。

如果是这样，请考虑使用转换。

设计概念

动画和过渡是直观传达信息的有效方法，否则需要文本解释或用户可能错过。

不正确：

正确：

使用动画传达相同的信息，但以自然、不显眼的方式传达。 你宁愿看到几千次？

动画和过渡不必需要关注才能成功。 事实上，它们通常用于避免关注用户不需要注意的程序机制。 许多成功的动画是如此自然，用户甚至不知道它们;相反，用户只会注意到他们的缺席。 出现频率会增加对微妙的需求，因此保存需要关注的不经常事件的效果，真正值得注意。

避免引起注意的"开始"菜单转换。

除了使程序更易于理解和感觉更流畅外， 设计良好的动画和过渡是向程序添加个性、角色和样式的好方法。 他们可以通过赋予用户体验一种自然、真实的感觉，使用户体验更加沉浸式和引人入胜。

Windows 7 个突出显示鼠标悬停时的任务栏按钮和程序图标颜色。 这种方法具有视觉吸引力，但微妙，传达了一个谦逊的个性。

但是，当动画和过渡具有明确目的时，动画和过渡最为有效，欢迎它们。 它们应该用于提高可用性、流畅性和流动性，以及质量感知，而不会显著损害性能。

虽然某些类型的动画用于吸引用户的注意力，但请确保注意是当之无愧的，值得中断用户的思维训练。 人眼对运动敏感，尤其是外围运动。 当用户有闪烁的任务栏按钮或旋转通知区域图标时，用户很难集中注意力。 避免使用动画来中断或分散用户注意力，或引起对不保证用户注意的内容的注意。

不正确：

除非用户必须立即执行重要操作，否则程序不应闪烁其任务栏按钮。 在这种情况下，用户唯一需要执行的操作是激活程序。

使用动画和切换，因为你的程序需要它们，而不仅仅是因为你可以。 对于辅助功能，不要使用动画作为传达基本信息的唯一方法。 确保用户可以以不同的方式获取等效的信息。

良好的动画和过渡的属性

良好的动画和过渡在这些属性之间取得正确的平衡：

• 显然是有目的的。 良好的动画是因为他们需要，无论是传达信息，使互动感觉真实，或吸引注意的东西值得注意。 有目的的动画是准确的;如果动画显示正在执行某个任务，这是因为该任务实际上正在完成。

不正确：

在此示例中，动画显示正在充电的完全充电电池。

• 看起来平滑和连续。 良好的动画通过显示关系并提供位置感和上下文感来顺利消除场景或元素状态更改之间的接缝。 连续性可帮助用户了解他们所处的位置，以及如何回到他们来自何处。

当用户从一个程序移动到另一个程序时，Windows 7 个任务栏窗口预览将变为连续性。

• 是现实的。 良好的动画模拟对象的真实物理属性和行为。 这有助于用户预测和了解其交互的结果。 你不必完全对现实世界进行建模，但如果使用逼真的动画，则必须使它们与现实世界保持一致。 用户不应对结果感到意外或困惑，尤其是用于直接操作的动画。

在此示例中，Windows 7 任务栏使用的“移出方式”动画比静态插入点更真实。

• 是真实的。 即使是在现实世界中找不到的对象也可以基于不同但相关的对象的真实行为来自然出现。 仅当关系明确传达预期目的和行为时，此隐喻才有效。

在此示例中，Windows 7 使用的窗口“squeegee”动画感觉真实，因为它与玻璃窗口在现实世界中的行为方式一致。

• 使用自然映射。 自然映射是物理或文化映射。 例如，基于文化的自然映射可能从西方文化中，人们从左到右阅读的事实开始。 因此，为了表达对象的时间序列，中间对象是当前对象，左侧的对象来自过去，右侧的对象是将来的对象。 前进时间由从左向右运动指示。

在此示例中，Windows 媒体播放器控件具有自然映射，因为播放将位置从左向右移动。

• 有个性。 选择良好的动画是向程序添加个性、角色和样式的好方法。 他们可以使用户体验更具沉浸式性和吸引力。 虽然动画类型确定它传达的内容，但执行动画的具体方式显示程序的个性。 优秀的动画为程序投影正确的个性，无论是严肃的还是异想天开的，还是介于两者之间的某个位置。

在此示例中，Zune使用动画文本和动态透视有助于塑造其个性。

• 看起来和感觉响应。 良好的动画不会通过阻止用户进行其他交互或强制用户观看来损害用户的工作效率。 无论节目的动画多么自然和引人入胜，没有人想独占地等待它们。 良好的动画也看起来响应迅速，没有在软着陆快速开始。 响应式动画还受益于快速传达其用途。 用户不应该长时间观看动画，只是为了弄清楚它正在做什么或何时完成。 对于直接操作，响应式动画对于保持直接和引人入胜的实际感觉至关重要。 为了感觉直接，对象的接触点必须在整个操作过程中顺利地停留在指针下。 任何滞后、窒息的响应或接触损失都破坏了直接操纵的感觉。

在此示例中，触摸平移切换通过在整个操作过程中将联系人点放在用户的手指下，感觉反应迅速。

• 吸引正确的注意力水平。 良好的动画通常是微妙的，只吸引满足其目的所需的注意力。 因此，它们不会分心、恼火、过于复杂、过度长或重复。 反复观看后，他们不会变得令人厌烦。

在此示例中，Windows搜索暂时引起匹配搜索词的注意，然后淡化。

• 仅当真正特别时，才显得特别。 频率增加了微妙的必要性，因此常见的交互需要简单的动画，以简单的方式传达简单的想法。 为特殊、不频繁的体验保留特殊、复杂的动画。

在此示例中，Windows在启动时使用引人注目动画使体验感觉特别，但这种动画在其他位置是不适当的。

你会知道，如果删除了这些属性中的任何一个，则你已经实现了适当的平衡，当整体体验受到损害时。

创建动画词汇

良好的动画是关于有效的视觉沟通，一致性对他们的有效性至关重要。 如果使用特定转换（例如将场景从右推送到下一个场景），则应是唯一用于该目的的转换，并且不应将转换用于任何其他目的。 为同一动画分配不同的含义会损害其通信能力。 通过将特定动画和过渡分配给特定含义，可以创建动画词汇。

此问题适用于具有含义的动画和切换效果，不适用于用户可能不向其分配含义的泛型动画或无法识别其用途的动画。 例如，淡化和特殊效果等动画没有特定的含义，因此可以自由使用它们。

良好的词汇分配动画，以建模对象的现实世界、物理行为。 如果需要将动画分配给没有实际对应对象的对象或操作，请选择一个动画来显示该对象的行为是否真实。

虽然"开始"菜单不是现实世界对象，但其悬停效果在激活时可能会像真实对象一样亮起。

词汇中的每个动画都需要明显不同。 仅当动画的关联操作类似时，动画才应具有类似的行为。 例如，移动切换建议导航，因此可以使用不同方向的移动切换来指示不同类型的导航。

你将知道，当用户发现结果令人困惑、令人惊讶或意外时，动画和过渡不会很好地沟通。 一般来说，最好是实现一个目标，而不是多个目的不太好。

理想情况下，动画词汇应在需要它们的所有区域中全面。 如果只有几个交互具有自然动画，这将吸引人们对那些没有的动画的关注。

若要详细了解Windows动画词汇，请参阅本文的“使用模式”部分。

设计正确的个性

虽然动画类型决定了它传达的内容，但动画执行的具体方式与节目的个性有关，并强化了它的品牌。

程序的个性应反映其任务的性质及其用户的个性，因此这不是任意选择。 相反，设计良好的个性应该感觉真实：从不试图强迫它。 个性应该与用户建立情感联系。 需要考虑的一些因素：

• 任务： 严肃或有趣;可选或必需。
• 后果： 严重或次要。
• 成本： 免费或购买;如果购买，则为中等价格或昂贵。
• 用户焦点： 相对狭窄的目标用户组，或广泛的常规受众。
• 用户环境：Professional、休闲或家庭。
• 用户年龄： 年轻或更年长。
• 使用频率： 频繁或不频繁。

这些因素的组合有助于确定计划的适当个性。 下面是一些适合常见类型的程序的组合：

生产力应用程序

当然，生产力应用程序必须专注于工作效率。 虽然一些特殊体验可以脱颖而出，但大多数其他动画应具有以下特征：

• 小
• 自然、现实
• 微妙的子级
• 快速、高效
• 已放宽

实用工具

实用工具通常短暂使用，因此其动画的使用可能更具侵略性：

• 现实、说明性、自我解释性
• Safe
• 引人入胜

娱乐、游戏

由于这些程序的目标是吸引和吸引用户，因此动画和过渡可以通过具有以下特征来更加积极：

• 大型 (可能成为体验) 不可或缺的一部分
• 人工的超现实
• 有影响力的，充满活力的
• 情感，玩弄，异想天开
• 精力充沛

制作情感联系对于娱乐节目非常重要，如果这样做有助于用户爱上节目，可以接受弯曲某些规则。 例如，如果大多数用户不太可能经常使用该程序，那么如果动画或过渡在第百次之后变得令人厌烦，则这是可以接受的。

通常，动画和过渡是小，自然，低调，高效，但放松是最安全的赌注。 具有这些特征的转换通常采用从头到尾、快速启动、软结束和不超速的最短路径。 此外，设计良好的转换旨在很好地跨要使用的整个距离范围。

动画性能

设计动画时，请确保它们不会影响用户高效使用程序的能力。 通常，使动画速度足够慢，以满足其目的，但足够快，以至于它们不会干扰响应能力，需要太多的注意力，或变得令人厌烦。

不正确：

虽然此页面翻转动画具有引人入胜、真实的感觉，但它通过花费更长的时间来减少用户翻页的工作效率。

短暂转换 (200 毫秒或更少) 是一种特殊情况， (尤其是在他们经常因延迟) 而关闭时，因为用户会知道他们必须等待一个拆分秒。 如果用户愿意等待此类动画，前提是：

• 感知的等待时间非常短暂， (200 毫秒或更少的) 。
• 这种转换使交互感觉更流畅和自然。
• 转换使交互感觉更响应。
• 任何延迟都有助于用户控制交互。

用户将接受任务栏按钮重新排序动画的短暂延迟，因为它非常简短，这使得交互感觉更自然。

有三种方法可以对性能产生不利影响：速度、响应能力和感知。

对于速度，某些动画是 CPU 密集型任务的视觉贴面，因此最后一件事是让这些任务在 CPU 密集型动画中变慢。 CPU 密集型动画 (“重”动画) 倾向于：

• 涉及许多独立移动的元素。
• 长时间播放或距离。
• 涉及大量屏幕空间。
• 在数学上是密集型的。

对性能影响较小的动画：

• 涉及单个对象。
• 播放持续时间较短或距离。
• 涉及少量屏幕空间。
• 不是数学密集型的。

为了确保性能良好，重动画应仅用于不占用 CPU 的任务，而轻动画可在任何位置使用。

为了获得响应能力，应设计大多数动画和切换效果，以便用户可以在动画运行时进行交互。 除非动画是进程的一部分，否则它独立于用户的主要交互，并允许用户中断它。

动画可能不会对任务的现实性能产生负面影响，但用户可能认为它确实存在。 例如，不要使用因速度缓慢、CPU 密集型任务而显得很重的动画，即使它不会损害性能，因为用户可能会得出结论，动画是任务速度缓慢的原因。 如果有些东西看起来很慢，感觉很慢，所以最好使用感觉简单、轻量、快速的动画。 将动画与快照开头用于 CPU 密集型任务有助于。

风险：

虽然Windows文件复制对话框中的动画不会损害文件复制性能，但它会运行用户认为文件复制性能的风险。

还有风险：

在此示例中，Windows资源管理器地址栏中看起来缓慢的进度动画会使某些任务看起来很痛苦。

如果动画和过渡的质量太差，动画和过渡没有价值，以至于它们使体验不那么流畅和更引人入胜。 为了保持其质量，动画应设计为在没有足够的系统资源不可用时正常降级。 动画可以通过具有需要更少的资源（例如较短的长度或更低的帧速率） () 的变体（甚至根本不运行）来降级。 无论可用的资源如何，请确保动画具有高质量的动画，看起来类似于动画，而不是软件 bug。

最后，如果用户认为你的程序的动画和过渡会减去他们的工作效率，那么一些用户可能会希望关闭它们。 若要支持此功能，请遵循关闭在Windows轻松访问中心中找到的所有不必要的动画的选项。

吸引适当的关注级别

虽然只有一些类型的动画和过渡专门设计为吸引用户的注意力，但他们应该设计为吸引适当的关注级别，以很好地实现其目的。 吸引注意力的不同方式是什么，你如何选择正确的方法？

动画效果

不同的动画效果吸引了不同级别的关注。 以下列表总结了最常见的方法，从最引人注目的开始：

• 快速闪烁。 要求立即引起注意。 无论发生闪烁的位置，都可以打破用户的集中度。
• 中等闪烁。 同样，但频率较低，但需要更少的关注。
• 弹跳。 在外围视觉中明显，在本质上相对要求。 用户可能会注意到，但只有在持续时间较短的情况下，才能继续专注于其他位置。
• 运动。 在外围视觉中明显，但不要求。 但是，复杂或三维运动比简单或二维运动吸引更多的注意力。 用户可能会注意到，但可以继续集中在其他地方。
• 中等脉冲。 明显但不会分散外围视觉的注意力。 用户可以继续专注于其他位置。 可以脉冲亮度、颜色和大小。
• 缓慢的脉冲/发光。 明显但微妙。 吸引比静态效果更多的注意力，但用户可能不会注意到动画，除非他们已经看过。
• 褪色。 更明显。 吸引比静态效果更多的注意力，但用户可能不会注意到动画，除非他们已经看过。
• 静态突出显示/闪烁。 如果用户选择查找，但在其他位置时不需注意。
• 环境/自然。 故意不明显，有一个自然的，现实世界的外观。

若要确定程序或功能的正确方法，请考虑这些因素与功能方案的关系。

例如，假设你正在设计即时消息程序，而有人只是向用户发送了一条消息。 此方案需要用户的注意，它应该在任何地方明显，并且通常用户需要快速响应。 此方案表明，中等闪烁动画将是一个不错的选择。 相比之下，假设你想要通知用户打印作业已完成。 用户应该能够在其他地方继续集中精力并高效工作，如果用户不注意到，这是可以接受的。 此方案表明，中等到慢速的脉冲或发光将是一个不错的选择。

持续时间

获取动画的相应持续时间取决于使用的方案和特定类型的动画。 动画效果要求越多，持续时间越短。 虽然需要很少注意的非常微妙的效果 (如缓慢的脉动) 可以无限期播放，但需要注意的效果只能播放 1 到 3 秒。 任何更长的风险使动画压倒和令人恼火。

在 Windows 7 中，任务栏仅闪烁一秒即可引起注意。 再也令人恼火了。

效果衰减

你应该根据假设设计引起注意的动画，即如果用户没有立即响应，这是因为他们正忙着做别的事情，不想被中断。 因此，你的目标应该是在不要求它的情况下吸引注意力。

若要在不要求注意力的情况下获得吸引注意力的正确平衡，请随时间而衰落效果的强度。 例如，为了吸引注意力，你可以使效果最初强壮，但然后快速减慢效果。 通过这样做，吸引力的力量大多由初始效果决定，但用户的整体印象大多由其完成决定。

在 Windows 7 中，任务栏闪存效果在末尾变慢。

PowerPoint呢？

Microsoft PowerPoint转换通常故意违反这些准则，因为它们旨在引起对幻灯片切换的注意，并要求用户等待它们。 此外，它们没有任何特定的含义，因此它们除了幻灯片正在改变的事实之外，没有传达任何内容。

PowerPoint样式的转换在正确使用时具有以下用途：

• 它们通过强制演示者暂停将长演示文稿分解为较小的区块。
• 他们吸引观众关注演讲中的变化，帮助人们重新集中注意力，如果他们的想法已经想知道。
• 他们给演示文稿一个节奏，使其感觉不单调或压倒性。
• 他们的风格反映了演示者或材料的个性。

虽然这些是演示的重要目标，但此类转换会在大多数类型的程序的 UI 中引起不必要的关注，并且会很快变得令人厌烦。

底线：不要将PowerPoint样式的转换用作程序的模型。

如果你只做六件事...

1. 使用动画和切换使程序更易于理解，并感觉更流畅且更具吸引力。 他们应该有明确的目的。 不要仅仅因为你可以使用动画，也不要引起对程序不必要的关注。
2. 定义动画词汇，并在整个程序中一致地使用它。 适当时使用 Windows 7 个动画词汇。
3. 使用动画的特征为程序提供个性，并强化其品牌。
4. 使大多数动画变得简单、简短和微妙。 请记住，动画不必要求注意才能成功。 如果动画合适且自然，用户只会注意到其缺席。
5. 使动画快速响应，并为他们提供轻量级的感觉。 无论你的动画多么引人入胜，没有人会觉得他们正在等待它们。 设计更重的动画，以正常降级。
6. 长期设计。 如果动画令人恼火、分心或令人厌烦，请重新设计或将其删除。

使用模式

动画具有多种使用模式：

使用情况	说明
悬停反馈 以显示交互点的位置。	指示交互点处于活动状态。 悬停也可以通过静态效果显示。 windows 词汇：显示悬停效果 (边界矩形、突出显示、放大、放大) ，以淡入/淡出效果实现平滑度。 在Zune数字媒体播放器中，专辑覆盖突出显示并在悬停时添加播放控件。
单击反馈 to show that a clickable object is responsive and received a click.	指示已单击对象。 windows 词汇：单击向下事件时闪烁对象背景。 若要显示触摸接触，请使用波纹效果。 触摸显示波纹动画，以便用户知道已识别交互。
选择反馈 to show that an object is selected.	指示已选择对象。 也可以通过静态效果来显示选择。 windows 词汇：绘制具有淡入/淡出效果的选定矩形，以便平滑。 在Zune中，专辑封面在单击时闪烁，然后在所选内容上获取选择矩形。
进度反馈 显示正在执行任务。	进度反馈指示任务正在进行中，通常使用演示任务的活动指示器、进度条或动画。 确定进度反馈大致显示已完成的任务量以及剩余多少任务，而不确定的进度仅表示任务正在完成。 windows 词汇：旋转活动指示器、进度条、进度背景、插图动画。 在此示例中，Windows Live Messenger在登录期间显示不确定进度反馈。
吸引 显示需要用户注意的内容。	当创建重要对象或经常因更改) 或发生重要或紧急事件而需要注意时，吸引适当的 (关注级别。 查看 吸引设计技术的正确关注级别 。 窗口词汇：闪烁，移动，脉动，发光，闪闪发光， 闪闪发光。 Windows实时工具栏在第一次出现时进行动画处理，使其在何处变得明显。
关系 以显示对象之间的关系或效果中的因果关系。	显示关系，尤其是当关系可能无法理解或预期时，这种关系不会分散注意力或混淆。 窗口词汇：变形、交通、物理变化，如翻转、从点源增长、缩小到点目标。 在此示例中，动画显示 gamma 设置与其对显示器的影响之间的关系。
插图/预览 以直观方式解释命令的概念、任务或效果。	一个动画或视频，用于解释概念或某些内容如何直观地工作，以补充或替换文本解释。 这样，用户就可以高效、自信地执行任务或选择命令。 在此示例中，平板电脑输入面板“显示我”命令使用插图来演示如何更正、删除、拆分和联接。

转换具有多种使用模式：

使用情况	说明
对象增大/收缩/显示 以平滑更改对象的大小或状态。	状态之间的对象更改，可能在移动时发生。 转换使用户在更改期间保持面向用户。 windows 词汇：平滑、更改大小、对象幻灯片或横向滑动。 在此示例中，天气小工具从其简洁状态变形，以显示其“选项”对话框。
内容显示/隐藏/更改 若要显示、隐藏或更改内容，通常用于渐进式披露。	窗口内部形状可显示更多、更少或不同的内容。 转换使用户在更改期间保持面向用户。 windows 词汇：窗格幻灯片或横向滑动。浮出控件窗口淡入和淡出。不同的内容淡化或卷入。 Windows计算器在视图模式之间具有平滑切换。
控件或显示/隐藏 可平滑显示或隐藏悬停或鼠标移动上的控件或其功能，以简化正常的视觉外观。	当用户将指针悬停在命令区域上时显示控件，或者在用户将鼠标悬停在控件上时显示显示控件。 将鼠标悬停在这些区域上表示用户打算交互。 如果指针变得固定，则负担可能会隐藏。 在此示例中，当全屏模式下，Windows 媒体播放器控件在悬停时淡入鼠标悬停。
场景转换 使场景过渡流畅且无缝，以避免注意。	突然的场景更改可能会很不和谐，尤其是对于大屏幕区域，因此使用场景切换来创建流畅性和连续性，并提供上下文。 场景转换设计为自然和低调，以避免引起对过渡过程的关注。 windows 词汇：淡入/淡出;交叉淡化;滑动/向左，出/右，向上，向下;推送和覆盖。 在此示例中，Windows桌面壁纸在图像之间轻轻交叉淡化，以使过渡感觉流畅和控制。
特殊场景转换 以引起对场景更改的关注，使其特别或重新聚焦用户注意力。	虽然大多数场景转换不应引起对过渡过程的注意，但有些转换旨在打破流程并引起注意，以强调不同之处即将发生。 为了引起注意，特殊场景切换设计为非自然，具有很高的视觉效果。 在此示例中，PowerPoint使用关注转换将受众吸引到更改中。
直接操作 显示直接操作 (的效果，例如移动、滚动/平移、旋转和缩放) 。	此转换显示操作的实时效果。 效果应感觉流畅、连续且与现实世界一致。 移动和旋转在某些地方可能不是连续的，以指示限制或可能的首选选项。 缩放使内容更大或更小，可能会相应地更改细节级别。 在此示例中，放大镜在级别之间平滑缩放。
直接操作不正确 如果指示直接操作 (（例如移动），则尝试滚动/平移) ，但无法完成。	转换显示正在尝试的操作，但会恢复为原始状态。 通常，由于一些实际物理限制，效果看起来无法执行操作。 这些动画被使用，而不是基于文本的错误消息，这将中断操作的真实感觉。 windows 词汇： 弹跳 在此示例中，文档会弹跳，以显示用户已到达末尾。
排序、筛选、重新排序转换 指示项集合的演示文稿或内容已更改。	转换显示 (或复杂更改，建议) 更改的效果。 在此示例中，必应视觉搜索使用筛选器转换。 在此示例中，Windows媒体中心在播放歌曲时使用重新排序转换作为特殊体验。
性能转换 使操作似乎更快发生。	尽管任何转换都有可能更快地执行操作，但这些转换的主要目的是提高性能和响应能力。 一种良好的技术是显示正在故意执行的任务。 相比之下，延迟操作、以随意的方式呈现结果，或使用活动指示器会感到缓慢。 windows 词汇：分阶段执行操作，阶段之间平稳过渡。 在此示例中，任务栏跳转列表会立即显示标准项，然后在列表准备就绪后向外滑动以显示目标。 这样做会掩盖生成列表所需的时间。 相比之下，延迟初始显示会感到无响应，并且显示不完整的列表或进度反馈会感觉慢得多。
特殊体验 若要在不频繁 、特殊体验 中吸引和喜悦用户，这些体验对你的程序很重要，并充分关注用户。	尽管任何转换都有可能成为一种特殊体验，但这些转换最适合用于真正特别到你的程序不经常的体验。 自定义转换用于提供特殊感觉。 品牌和个性通常是重要的设计元素。 与其他模式不同，特殊体验可能需要注意、繁重且需要用户等待一会儿。 因此，如果过度使用，这些转换会很快耗尽，因为体验不再特别。 在此示例中，Windows媒体中心在加载时显示动画，以便立即吸引用户。

指南

有效沟通

• 定义和使用动画词汇 ，以确保动画和过渡具有一致的含义，并在整个程序中一致地使用它。 大多数词汇应包括场景和对象外观和消失的条目、导航、基本交互 (悬停、选择、单击) 、对象操作和交互 (移动、删除、调整大小、滚动、平移、缩放、旋转、筛选) 和吸引注意力。 一致的含义对于有效沟通至关重要。

• 只要实用，请使用Windows动画词汇。 虽然你的计划可能有不同的受众和不同的需求，但一致性和熟悉的好处往往超过了不同的好处。 如果程序词汇必须不同，请使用与Windows相同的基本动画类型，但为程序提供正确的个性。

• 请勿将特定含义分配给动画词汇中的泛型动画和过渡。 泛型转换，如淡出和特殊效果（如解散）没有特殊意义， (出现或消失) ，因此可以自由使用。

  不正确：

  

  在此示例中，交叉淡化错误地用于导航到下一项。 由于交叉淡化没有特定的含义，因此此转换不提供上下文。

• 使词汇条目明显不同。 例如，相关操作可能有类似的效果 (，放大和缩小应具有反转) ，但无关操作应具有明显不同的效果 (例如，缩放不应与旋转) 混淆。

• 使现实世界的效果保持真实且一致。 如果使用逼真的动画和过渡，请保持体验与现实世界保持一致。 用户绝不应惊讶、困惑或误导结果。 为了一致性，不要混合隐喻。

• 提供反向操作反函数动画。 这样做符合用户的期望并简化词汇。 例如，如果窗格通过滑动显示，请通过滑动而不与其他效果一起滑动来删除它。

• 使动画易于理解。 用户应能够快速了解动画的用途。 使动画变得太小，太简短 (不到 50 毫秒) ，或者用户无法理解其用途的微妙之处。 在这种情况下，重新设计以明确含义或删除。

  不正确：

  

  在此示例中，效果非常小而微妙，以至于很少有用户可以理解其用途。 更好地重新设计或删除。

模式

悬停反馈

• 若要显示响应，请努力在进入或离开悬停状态的 50 毫秒内播放动画。
• 若要快速显示，请使悬停动画的持续时间小于 50 毫秒。
• 使用悬停效果的淡入/淡出效果。 这样做会使悬停效果明显不同于单击和选择反馈。

单击反馈

• 若要显示响应，请在点击下击事件后 50 毫秒内努力播放动画。 单击事件不需要单击反馈。
• 若要快速显示，请使单击动画的持续时间小于 50 毫秒。
• 使用背景闪烁或闪烁效果。 这样做会使单击效果明显不同于悬停和选择反馈。 由于单击需要悬停，因此单击反馈可以顺利添加悬停反馈。

选择反馈

• 若要显示响应，请努力在所选内容或取消选择后的 50 毫秒内播放动画。
• 若要快速显示，请使所选动画的持续时间小于 50 毫秒。
• 使用淡入/淡出选择矩形效果。 这样做会使选择与悬停明显不同，然后单击反馈。

进度反馈

• 在一秒钟内无法执行操作时，请使用活动指示器。 这样做指示已收到该命令。
• 当任务需要 5 秒以上的时间时，请使用进度栏。 有关更多指南，请参阅 进度栏。
• 使用进度反馈动画，帮助用户直观显示长时间运行的任务的效果。 如果动画不传达任何有用的内容，请改用进度栏，避免不必要的进度反馈动画。
• 具有明确可识别的完成状态和故障状态。 用户必须能够快速确定这些最终状态。
• 当基础任务未进行时停止显示进度。 用户需要能够确定进度是否未进行，并相应地做出反应。

吸引

• 使用具有克制的吸引器。 除非信息是紧急、关键或可能影响用户的即时行为，否则通常最好不明显地更改状态，并让用户自行发现更改。 解决干扰，不可发现性。

  

  在此示例中，无线网络通知区域图标使用动画解决关键问题，但允许用户自行发现弱信号。

• 选择吸引适当关注级别的动画。 吸引者动画应该吸引足够的注意力来满足自己的目的，但不再。 如果用户必须立即采取行动，请选择需要注意的效果，无论用户位于何处。 对于其他情况，请参阅“ 吸引正确的关注级别 ”部分，以获得正确的关注、明显性和紧迫性的组合。

  不正确：

  

  Microsoft Office助手们引起了自己不必要的关注。

• 如果用户没有响应，请不要重复动画或使用连续动画。 相反，假设用户选择不立即采取行动，但以后可能会采取行动。 连续动画使用户难以专注于其他任何内容。

关系动画

• 使用关系动画来显示对象来自何处或从何处访问的对象。
• 关系动画必须以所选对象开头或结尾。 不显示用户当前不与之交互的对象之间的关系。 如果用户完全注意到，他们会注意到的是分心。

插图/预览

• 使用预览显示命令的效果，而无需用户首先执行命令。 通过使用有用的预览版，可以提高效率和轻松学习程序，并减少试用和错误需求。
• 使用具有明确解释的插图和预览。 如果混淆，他们几乎没有价值。
• 一次只播放一个插图 ，以避免压倒性用户。 如果可能有多个同时插图，请使用鼠标悬停或播放按钮让用户指示其兴趣。
• 如果它是窗口或页面的主要用途，则自动播放插图。 否则，如果这是可选的，允许用户在准备就绪时播放它。
• 以最佳速度播放动画：不是那么快，他们很难理解，但不太慢，他们很乏味地观看。

对象增长/收缩

• 不要在调整大小期间剪辑内容。 在添加内容之前展开容器。 在减少容器之前删除内容。

  不正确：

  

  在此示例中，内容在调整大小期间被剪裁。

内容显示/隐藏/更改

• 静态显示重要信息。 用户不应通过渐进式披露访问重要信息。

控件或显示/隐藏

• 当用户将指针放置在窗口或窗格中的任意位置时，或在鼠标移动上全屏时显示重要控件。 用户不必搜寻这些控件，因此可以确定其发现。

  

  在此示例中，每当指针位于窗口上方时，Windows媒体中心会显示其控件。

• 当用户将指针放在命令上或靠近命令时，显示辅助控件或控件提供。 为便于发现，使位置明显且目标较大。

  

  在此示例中，当指针靠近右上角时，Windows Live Messenger显示辅助命令。

场景转换

• 使物理场景转换与自然映射保持一致。 人们从左到右阅读西方文化，分层关系图从上到下流动。 因此，前进的时间由从左向右运动指示。 以下物理场景转换具有自然映射：

  切换	含义
  从左起	在任务流中回退
  从右	在任务流中向前移动
  从顶部	上移任务层次结构
  从底部	下移任务层次结构

• 如果程序播放声音，设计场景切换和音频转换一起。 例如，如果场景逐渐淡出，则任何声音也应逐渐淡出。 不要通过突然的声音转换来破坏无缝视觉转换。 有关更多声音指南，请参阅 “声音”。

直接操作

• 在交互中使用物理手势 (喜欢) 时，请设计动画，感觉就像对手势的自然响应。 将交互原因与转换效果链接。 提供动画真实物理特征，如加速、减速、动量、阻力、重量、弹跳和旋转。
• 为了保持直接的感觉，在整个交互过程中，使对象的接触点在指针下保持流畅。 任何滞后、窒息的响应或接触损失都破坏了直接操纵的感觉。 对象在被操纵时不应消失。

排序、筛选或重新排序转换

• 对于简单的更改，请显示整个转换。 用户将能够轻松完成整个转换。 简单的更改涉及四个项目或更少。
• 对于复杂的变化，强调动作的结束，因为它放慢速度，让眼睛填充其余部分。 这样做使运动感觉更响应和有序。

性能转换

• 请考虑在两三个阶段中执行缓慢的转换，使其看起来更快且立即交互。 适当时使用以下组合顺序：
  • 外部帧
  • 背景
  • ) 如有必要，使用临时表示形式 (初始内容
  • 主控件 (，以便用户可以立即交互)
  • 辅助控件和剩余的任何 UI 元素
  • 最终内容 (如果使用临时表示形式，) 使用淡色和幻灯片等过渡，使合成看起来流畅、有序和细化。

在“鸟瞰”视图中滚动时，必应地图显示临时网格背景。 这样，用户就可以在呈现最终内容之前立即继续滚动。

特殊体验动画

• 重新考虑动画初始屏幕 (和静态初始屏幕) 。 通常，初始屏幕只是引起人们注意一个程序需要多长时间才能加载，他们很快耗尽了他们的欢迎。 虽然初始屏幕只有在用户交互无法实现时才显示，但只要实际更好的替代方法是设计程序，以便用户能够立即与之交互，即使它仍在加载。
• 如果动画初始屏幕需要超过三秒，请提供“跳过简介”命令。 单击初始屏幕上的任意位置也应将其消除。 或者，在初始时间段后使用动画的短版本。

性能

• 不要让用户等待程序的动画和过渡。 随时使用简短动画和切换 (小于 200 毫秒) 。 使用更快的动画 (100 毫秒) 进行更频繁的操作。 设计较长的动画 (一秒以上通常是进度反馈、插图和特殊体验模式) ，以便用户可以在运行时继续工作。

• 设计长时间运行的动画，让用户清楚地知道在动画运行时可以交互。 如果用户的视觉线索表明无法继续工作，则用户不会尝试继续工作。

  

  在此示例中，状态栏中Windows Internet Explorer 中的低键进度栏建议用户不必等待完成，然后才能交互。

• 对 CPU 密集型任务使用轻型动画。 这样做为任务提供完整的处理能力。 此外，用户不会认为轻量级动画是任务占用 CPU 的原因。

• 请勿在动画或切换期间显示活动指示器。 这样做会破坏效果。 设计动画和过渡，以便他们能够立即开始。

• 只要系统资源不足，设计动画就会正常降级。 动画可以通过具有需要更少的资源（例如较短的长度或更低的帧速率） () 的变体（甚至根本不运行）来降级。 无论可用的资源如何，请确保动画具有高质量的动画，看起来类似于动画，而不是软件 bug。

  不正确：

  

  在此示例中，即使没有足够的系统资源来很好地发挥它，也使用了窗口还原转换。 因此，冻结帧似乎是一个 bug。 如果资源不可用，最好只是显示没有转换的窗口。

动画特征

设计良好的动画和过渡通常具有以下特征：

• 简短持续时间。 大多数动画应介于 100 到 300 毫秒之间，最好是 1/6 秒 (167 毫秒) 或 1/4 秒 (250 毫秒) 。 (特殊体验和进度反馈可能更长。) 为更频繁的操作使用更快的动画时间。 通常，较长的动画需要更多时间才能完成，需要更多时间来理解，感觉缓慢。

• 响应能力。 动画应在启动事件或用户操作的 50 毫秒内启动。 较长的开始时间感觉无响应。

• 加速/减速。 若要看起来自然，大多数动画效果需要在停止时启动和减速时加速。 若要看起来响应，请设计动画以快速启动。 若要显示受控，请设计动画，以在末尾进行软着陆。 虽然这适用于运动效果，但它也适用于建议移动的任何效果，例如缩放甚至淡化。

  

  大多数动画应该有快速的开始和柔和的结局，有一个响应，但控制的感觉。

• 运动。 描绘运动的动画尤其需要加速和减速，因此不要使用线性运动，除非动画持续时间很短。 动作应从头到尾走短道，而无需过度移动。 并非总是需要完整运动路径。 适当时，在运动减慢时强调动作的末尾，让眼睛填充其余部分。 这样做使运动感觉更响应和有序。 同时对多个对象的动作进行动画处理时，请为它们提供略有不同的路径，其计时略有不同，感觉更自然。

• 帧速率。 大多数动画应使用每秒 20 帧的帧速率。 如果动画适用于特殊体验或与程序的主要用途相关，请考虑使用每秒 24 30 帧的较高速率来提高平滑度和现实度。

• 调整。 设计动画，使其在整个预期用途范围内正常工作。 例如，页面切换应设计为适用于所有页面大小。

• 人格。 设计动画，以感觉自然、缓和和高效，而不是人工、异想天开或慢。

动画文本

• 虽然可以使用切换显示文本， 但不要持续对文本进行动画处理。 动画文本通常分散注意力，比静态文本更难阅读。 异常：
  • 在传统上对其进行动画处理的情况下，您可以对文本进行动画处理，并提供可访问的替代方法。
  • 如果文本的用途主要是装饰性的，则可以对文本进行动画处理。

在此示例中，Zune对文本进行动画处理，但其用途主要是装饰性的。 如果用户不仔细阅读文本，则不存在问题。

减少能耗

• 设计动画以减少能耗。 正确设计时，动画不应显著增加能耗。 若要减少能耗，请：
  • 停止显示关闭时进行动画处理。 为了节省电源，显示器可能已关闭。
  • 不要使用用户未启动的长时间运行的动画。 使用高分辨率定期计时器的动画可降低处理器电源管理的效率。 此外，请确保在动画完成后禁用任何高分辨率定期计时器。
  • 当系统空闲时挂起所有动画。 处于空闲状态的用户处于非活动状态的时间段由控制面板中的 Power Options 决定。

可访问性

• 不要使用动画作为传达基本信息的唯一方法。 动画应传达有用的信息，但不重要，因为它们对有视觉障碍的用户不可访问。

• 确保通过其他方式提供等效信息， 例如：

  • 通过检查。 用户可以通过查看动画中涉及的屏幕或对象来确定等效的信息。
  • 通过简单的交互。 用户可以通过悬停、单击或双击来确定等效的信息。

  

  必应主页有一个初始动画，其中显示了几个热点。 用户还可以通过将光标移到它们附近来显示热点。

  请注意，“等效信息”并不意味着相同的信息。 信息可能采用不同的格式，或者需要简单的扣减。

• 适当时，在转换过程中对对象设置输入焦点。 这样做使辅助技术能够检测发生更改的位置。 但是当用户使用键盘时，不要更改输入焦点。

• 不要使用快速闪烁或调整对象的动画或切换效果。 闪烁和快速屏幕变化可能会导致癫痫发作障碍和其他神经系统疾病患者出现问题。

• 允许用户关闭程序的动画和切换效果。 若要支持此功能，请遵循在 Windows 的“轻松访问中心”中关闭所有不必要的动画选项。

  开发 人员： 可以使用 SystemParametersInfo API 确定是否启用了动画。

• 设计任务假设用户将关闭程序的动画。 请确保这样做不会显著中断任务流。

有关更多辅助功能指南，请参阅 辅助功能。

文档

• 避免尽可能引用动画。 请改为引用正在创建动画的对象，并在必要时引用动画的类型。
• 请勿引用转换，技术文档除外。 而是引用其最终状态或初始状态的对象。
• 如果用户显式启动动画，请使用谓词播放;否则，请使用谓词用于技术文档。

示例：

• 你会知道，项目在图标开始弹跳时需要注意。
• 首先，选择要打印的照片， (请注意，选择后) 放大照片。
• 使用交叉淡化转换无缝更改对象的状态。