动画和转换
注意
此设计指南是为 Windows 7 创建的，尚未针对较新版本的 Windows 进行更新。 大部分指南原则上仍然适用，但演示和示例并不反映我们 当前的设计指南。
战略性地使用动画和切换可以使程序更易于理解、感觉更流畅、更自然、质量更高、更具吸引力。 但是，无偿使用动画和过渡可能会让你的程序分散注意力，甚至令人讨厌。
动画提供运动的外观或随时间的变化。 使用动画提供反馈、预览操作的效果、显示对象之间的关系、吸引对更改的注意或直观地解释任务。
Microsoft Windows 使用背景闪存动画来提供对象被单击的反馈。
过渡是一种动画，用于在用户界面 (UI) 状态更改和对象操作期间保持用户导向，并使这些更改感觉流畅而不是不和谐。 良好的过渡感觉很自然，通常给人一种用户正在与真实对象交互的错觉。
Windows 桌面小工具在其简洁状态和详细信息状态之间使用平滑转换。
通常，最佳动画和过渡用于以非语言方式与用户沟通，并使状态更改更自然且不那么明显。 相比之下，效果最低的是无端的，因为他们不传达任何东西或引起不必要的注意。 动画最好用作辅助通信形式。 它们应传达有用但不重要的信息，并且用户应能够通过其他方式确定等效信息才能访问。
注意： 与 软件品牌、 声音和 辅助功能 相关的指南分别在单独的文章中介绍。
这是正确的用户界面吗？
若要决定，请考虑以下问题。
动画
以下条件是否适用？
- 动画直观地传达有用的内容，例如提供反馈、显示关系、原因和效果，或吸引人们对重要更改的注意。
- 查看动画并不重要。 可通过其他方式获取等效信息。 在以下的情况下，用户可能不会从动画中受益：
- 他们已关闭动画。
- 他们的注意力在其他地方。
- 他们有视力障碍。
- 动画被另一个窗口遮盖。
- 由于系统性能不足，无法播放动画。
- 动画不会影响用户的工作效率。 可以是：
- ) (200 毫秒或更短 (快速发生。
- 它不会干扰交互，也不会中断。
- 用户必须等待。
- 动画不会影响用户的流。
- 它要么位于用户的注意力中心，要么将注意力吸引到注意力中心之外的一些在完成任务中非常重要或有用的内容。
- 它很容易被忽视，不会分散注意力或烦人。
- 它不会变得烦人。 即使反复查看，用户仍然认为它合适且令人愉快。
如果是，请考虑使用动画。
Transitions
对象或场景是否正在更改状态，上述所有使用动画的条件以及以下任何条件是否适用？
- 状态更改在概念上是迷失方向、混淆或难以理解的。
- 状态更改在视觉上是不和谐的，缺乏连续性或平滑性，或闪烁：或看起来不自然、未抛光或质量不佳，尤其是在涉及大屏幕区域时。
- 使用转换会使状态更改的显示速度更快。
- 状态更改值得用户特别注意。
如果是这样，请考虑使用转换。
设计概念
动画和过渡是直观传达信息的有效方法，否则需要文本来解释或用户可能会错过。
不正确：
正确：
使用动画以自然、不显眼的方式传达相同的信息。 你宁愿看到哪一千次？
动画和切换无需引起关注，就可成功。 事实上，它们通常用于避免引起用户不需要注意的程序机制。 许多成功的动画非常自然，以至于用户甚至不知道它们;相反，用户只会注意到他们的缺席。 发生频率增加了对微妙性的需求，因此保存需要关注的不经常事件的效果，这些事件确实值得关注。
避免引起注意的“开始”菜单切换。
除了使程序更易于理解和感觉更流畅之外， 设计良好的动画和过渡是向程序添加个性、角色和样式的好方法。 他们可以通过给用户体验带来自然、真实的感觉，使用户体验更加身临其境并更具吸引力。
Windows 7 根据当前鼠标位置和程序图标颜色突出显示悬停时的任务栏按钮。 这种方法在视觉上很有吸引力，但很微妙，传达了一种谦逊的个性。
但是，当动画和过渡具有明确目的时，它们是最有效和受欢迎的。 它们应该用于提高可用性、流畅性和流畅性，以及质量感知，而不会显著损害性能。
虽然某些类型的动画用于吸引用户的注意力，但请确保注意是当之无愧的，并且值得打断用户的思维定型。 人眼对运动敏感，尤其是外围运动。 当任务栏按钮闪烁或旋转的通知区域图标时，用户可能很难集中注意力。 避免使用动画来打断或分散用户的注意力，或将注意力吸引到不值得用户注意的事情上。
不正确：
除非用户必须立即执行重要操作，否则程序不应刷写任务栏按钮。 在这种情况下，用户只需要激活程序。
使用动画和切换效果是因为程序需要它们，而不仅仅是因为你可以。 出于辅助功能考虑，请勿使用动画作为传达基本信息的唯一方式。 确保用户可以通过其他方式获取等效信息。
良好动画和切换效果的属性
良好的动画和过渡在以下属性之间实现适当的平衡：
- 显然是有目的的。 优秀的动画之所以存在，是因为它们需要，无论是传达信息，让交互感觉真实，还是吸引人们对值得注意的事情的关注。 有目的的动画是准确的：如果动画显示任务正在完成，则这是因为该任务实际上正在完成。
不正确：
在此示例中，动画显示正在为充满电的电池充电。
- 看起来平滑且连续。 良好的动画通过显示关系并提供位置感和上下文感，顺利消除场景或元素状态更改之间的接缝。 连续性可帮助用户了解他们如何到达自己所处的位置，以及如何回到他们来自何处。
当用户从一个程序移动到另一个程序时，Windows 7 任务栏窗口预览将变为连续性。
- 是现实的。 良好的动画模拟对象的实际物理属性和行为。 这有助于用户预测和了解其交互的结果。 你不必对现实世界进行精确建模，但如果使用逼真的动画，则必须使其与现实世界保持一致。 用户不应对结果感到惊讶或困惑，尤其是使用用于直接操作的动画。
在此示例中，Windows 7 任务栏使用的“移出方向”动画感觉比静态插入点更逼真。
- 是真实的。 即使是在现实世界中找不到的对象，也可以通过基于不同但相关的对象的真实行为来显得自然。 仅当关系清楚地传达了预期目的和行为时，此比喻才有效。
在此示例中，Windows 7 使用的窗口“squeegee”动画感觉真实，因为它与玻璃窗口在现实世界中的行为方式一致。
- 使用自然映射。 自然映射是物理的或文化的。 例如，基于文化的自然地图可能始于这样一个事实：在西方文化中，人们从左到右阅读。 因此，为了表示对象的时间序列，中间对象是当前对象，左侧的对象是过去的对象，右侧的对象是将来的对象。 从左到右移动指示向前移动。
在此示例中，Windows 媒体播放器 控件具有自然映射，因为播放会将位置从左向右移动。
- 有个性。 精心挑选的动画是向程序添加个性、性格和风格的绝佳方法。 它们可以使用户体验更加身临其境和吸引力。 虽然动画的类型决定了它传达的内容，但执行动画的具体方式显示了程序的个性。 好的动画为程序投射出正确的个性，无论是严肃或异想天开，还是介于两者之间。
在此示例中，Zune 使用动画文本和动态透视有助于塑造其个性。
- 外观和感觉响应。 良好的动画不会阻止用户进行其他交互或强制用户watch，从而损害用户的工作效率。 无论你的程序动画多么自然和引人入胜，没有人愿意只等待它们。 良好的动画也看起来响应迅速，而不会不和谐，通过软着陆快速启动。 响应式动画还受益于快速传达其用途。 用户不必长时间watch动画，只是为了弄清楚它正在做什么或何时完成。 对于直接操作，响应式动画对于保持直接且引人入胜的真实感觉至关重要。 为了感觉直接，对象的接触点必须在整个操作过程中顺利地保持在指针下。 任何滞后、断断续续的反应或失去联系会破坏直接操纵的感知。
在此示例中，通过在整个操作过程中将接触点保持在用户的手指下，触摸平移切换感觉响应迅速。
- 吸引适当的关注级别。 好的动画通常是微妙的，只吸引实现其目的所需的注意力。 因此，它们不会分散注意力、烦人、过于复杂、过长或重复。 反复观看后，它们不会变得烦人。
在此示例中，Windows 搜索暂时将注意力吸引到匹配的搜索词，然后淡出。
- 只有当真正特别时，才显得特别。 频率增加了微妙性的必要性，因此常见的交互需要简单的动画，这些动画以简单的方式传达一个简单的想法。 保留特殊、复杂的动画，以获取特殊、不常用的体验。
在此示例中，Windows 在启动时使用引人注意的动画来使体验感觉特别，但此类动画在其他位置是不恰当的。
如果删除这些属性中的任何一个，整体体验将受到损害，你就会知道你已经实现了适当的平衡。
创建动画词汇
良好的动画与有效的视觉沟通有关，一致性对其有效性至关重要。 如果使用特定转换，例如将场景从右侧推送到下一个场景，则这应该是用于该目的的唯一过渡，并且该转换不应用于任何其他目的。 为同一动画分配不同的含义会损害其通信能力。 通过为特定含义分配特定动画和转换，可以创建动画词汇。
此问题适用于具有意义的动画和切换效果，不适用于用户不太可能赋予含义的一般动画和切换效果，也不适用于其用途不可察觉的动画和过渡。 例如，淡出等动画和特殊效果（如溶解）没有特殊含义，因此可以自由使用。
良好的词汇会分配动画来模拟对象的真实世界物理行为。 如果需要将动画分配给没有真实世界对应项的对象或操作，请选择一个动画来显示对象在真实情况下的行为方式。
虽然“开始”菜单不是现实世界的对象，但其悬停效果在激活时可能会像真实对象一样亮起。
词汇表中的每个动画都需要明显不同。 仅当动画的关联操作具有类似的关联时，动画才应具有类似的行为。 例如，移动过渡建议导航，因此可以使用不同方向的移动切换来指示不同类型的导航。
你会知道，当用户发现结果令人困惑、令人惊讶或意外时，你的动画和切换效果无法正常沟通。 通常，最好实现一个目的，而不是多个目的。
理想情况下，你的动画词汇应该在程序的所有需要它们的领域是全面的。 如果只有少数交互具有自然动画，则会引起人们对没有动画的交互的注意。
若要了解有关 Windows 动画词汇的详细信息，请参阅本文的使用 模式 部分。
设计正确的个性
虽然动画的类型决定了它传达的内容，但动画执行的具体方式说明了程序的个性，并强化了其品牌。
程序的个性应反映其任务的性质及其用户的个性，因此它不是任意选择。 相反，设计良好的个性应该感觉真实：永远不要试图强迫它。 个性应与用户建立情感联系。 需要考虑的一些因素：
- 任务： 严肃或有趣;可选或必需。
- 后果： 严重或轻微。
- 成本： 免费或购买;如果购买，价格适中或昂贵。
- 用户焦点： 相对狭窄的目标用户组或广泛的一般受众。
- 用户环境： 专业、休闲或家庭。
- 用户年龄： 年轻或更大。
- 使用频率： 频繁或不频繁。
这些因素的组合有助于确定程序的适当个性。 下面是一些适用于常见类型的程序的组合：
生产力应用程序
当然，生产力应用程序必须专注于生产力。 虽然一些特殊体验可以突出，但大多数其他动画应具有以下特征：
- 小
- 自然、逼真
- 细化、低调
- 快速、高效
- 已放宽
实用程序
实用工具通常短暂使用，因此它们对动画的使用可能更积极：
- 逼真、说明性、自我解释性
- Safe
- 引人入胜
娱乐、游戏
由于这些程序的目标是吸引用户并取悦用户，因此通过具有以下特征，动画和过渡可以更具攻击性：
- 大型 (可能成为体验) 不可或缺的一部分
- 人工的超现实
- 有冲击力、充满活力
- 情绪化、俏皮、异想天开
- 精力充沛
建立情感联系对娱乐节目非常重要，如果这样做有助于用户爱上节目，那么弯曲一些规则是可以接受的。 例如，如果动画或过渡在第一百次之后变得烦人，这是可以接受的，如果大多数用户不太可能经常使用该程序。
通常，小型、自然、缓和、高效但轻松的动画和过渡是最安全的赌注。 具有这些特征的转换通常采用从头到尾的最短路径，快速启动，以柔和方式结束，并且不会过冲。 此外，设计良好的转换设计为在将使用这些转换的整个距离范围内正常工作。
动画性能
设计动画时，请确保它们不会影响用户有效使用程序的能力。 通常，使动画速度足够慢，以达到其目的，但速度足够快，使其不会干扰响应能力、需要太多关注或变得烦人。
不正确：
虽然此翻页动画具有引人入胜的实际感觉，但它通过花费更长的时间翻页来降低用户的工作效率。
(200 毫秒或更短) 的短暂转换是一种特殊情况， (特别是当它们经常在延迟) 工作时，因为用户会意识到他们必须等待一瞬间。 在以下情况下，用户愿意等待此类动画：
- 感知到的等待时间非常短暂， (200 毫秒或更短) 。
- 过渡使交互感觉更流畅和自然。
- 转换使交互感觉响应更迅速。
- 任何延迟都有助于用户控制交互。
用户将接受任务栏按钮重新排序动画的短暂延迟，因为它非常短暂，并且使交互感觉更自然。
动画可以通过三种方式对性能产生负面影响：速度、响应能力和感知。
为了提高速度，某些动画是 CPU 密集型任务的视觉贴面，因此，最后应该做的是使用 CPU 密集型动画使这些任务变慢。 ) “重”动画 (最 CPU 密集型动画倾向于：
- 涉及许多独立移动的元素。
- 播放持续时间或距离较长。
- 涉及大量屏幕空间。
- 在数学上是密集型的。
对性能影响较小的动画：
- 涉及单个对象。
- 播放持续时间或距离较短。
- 涉及少量屏幕空间。
- 不是数学密集型的。
为了确保良好的性能，重动画应仅用于不占用大量 CPU 的任务，而轻动画可以在任何位置使用。
为了提高响应能力，应设计大多数动画和过渡，以便用户可以在动画运行时进行交互。 除非动画是进程的一部分，否则请使其独立于用户的主要交互，并允许用户中断它。
动画在现实中可能不会对任务的性能产生负面影响，但用户可能认为它确实存在。 例如，对于缓慢的 CPU 密集型任务，请勿使用看起来很重的动画，即使它不会损害性能，因为用户可能会认为动画是任务速度缓慢的原因。 如果某些内容看起来很慢，会感觉很慢，因此最好使用感觉简单、轻量、快速的动画。 对 CPU 密集型任务使用具有快速开头的动画很有帮助。
风险：
虽然 Windows 文件复制对话框中的动画不会损害文件复制性能，但存在让用户认为这样做的风险。
还有风险：
在此示例中，Windows 资源管理器地址栏中缓慢的进度动画使某些任务看起来非常缓慢。
如果动画和过渡的质量太差，以至于它们使体验变得不那么流畅且不那么引人入胜，则动画和过渡没有价值。 为了保持其质量，动画应设计为在系统资源不足时正常降级。 动画可能会降级，因为存在需要较少资源 (变体，例如) 较短的长度或较低的帧速率，甚至根本不运行。 无论可用的资源如何，请确保动画的质量很高，看起来像动画而不是软件 bug。
最后，如果用户认为你的程序的动画和过渡会损害他们的工作效率，那么一些用户很可能希望将其关闭。 若要支持此功能，请遵循“关闭 Windows 轻松访问中心”中找到 的所有不必要的动画 的选项。
吸引适当的关注级别
虽然只有某些类型的动画和过渡是专门为吸引用户的注意力而设计的，但它们应设计为吸引适当级别的注意力，以很好地实现其目的。 吸引注意力的不同方式是什么，如何选择正确的方式？
动画效果
不同的动画效果吸引不同级别的关注。 以下列表汇总了最常见的方法，从最引人关注的方法开始：
- 快速闪烁。 需要立即关注。 无论在何处发生闪烁，都可能会中断用户的注意力。
- 中等闪烁。 相同，但频率较低，但需要较少关注。
- 弹跳。 在外围视觉中明显，在本质上要求相对较高。 用户可能会注意到，但只有在持续时间较短时，才能继续专注于其他位置。
- 运动。 在外围视觉中明显，但要求不高。 但是，复杂或三维运动比简单或二维运动吸引更多的注意力。 用户可能会注意到，但可以继续专注于其他位置。
- 中等脉冲。 在外围视觉中明显但不会分散注意力。 用户可以继续专注于其他位置。 可以脉冲亮度、颜色和大小。
- 慢脉冲/发光。 明显但微妙。 比静态效果吸引更多的注意力，但用户可能不会注意到动画，除非他们已经在看。
- 褪色。 甚至更不明显。 比静态效果吸引更多的注意力，但用户可能不会注意到动画，除非他们已经在看。
- 静态突出显示/gleam。 如果用户选择查看，则很明显，但如果它位于其他位置，则不要求关注。
- 环境/自然。 故意不明显，因为具有自然的现实世界外观。
若要确定程序或功能的正确方法，请考虑这些因素与功能方案的关系。
例如，假设你正在设计一个即时消息程序，而某人只是向用户发送了一条消息。 这种情况需要用户的注意，它应该在任何地方都很明显，并且用户通常希望快速响应。 此方案表明，中等闪烁动画是一个不错的选择。 相比之下，假设你想要通知用户打印作业已完成。 用户应该能够继续集中精力，在其他地方高效工作，如果用户没有注意到，这是可以接受的。 此方案表明，中等到缓慢的脉冲或发光将是一个不错的选择。
持续时间
获得动画关注的适当持续时间取决于场景和使用的特定动画类型。 动画效果需要的注意力越多，持续时间应越短。 虽然需要很少注意的非常微妙的效果 (如慢脉冲) 可以无限期地播放，但需要注意的效果只能播放 1 到 3 秒。 任何更长的时间都有可能使动画变得令人不堪重负和烦人。
在 Windows 7 中，任务栏仅闪烁一秒钟引起注意。 再烦人了。
效果衰减
你应该根据以下假设设计引人注意的动画：如果用户没有立即响应，那是因为他们忙于执行其他操作，并且不想被打断。 因此，你的目标应该是在不要求注意的情况下吸引注意力。
若要在不要求吸引注意力的情况下获得适当的平衡，请逐渐减少效果的强度。 例如，为了吸引注意力，你可以使效果最初很强烈，但随后会快速减慢效果。 通过这样做，吸引力的力量主要取决于初始效果，但用户的整体印象主要取决于其完成。
在 Windows 7 中，任务栏的闪烁效果在结束时变慢。
PowerPoint 呢？
Microsoft PowerPoint 切换通常故意违反这些准则，因为它们旨在吸引人们对幻灯片切换的注意，并要求用户等待它们。 此外，它们没有任何特定的含义，因此除了幻灯片正在更改的事实之外，它们不会传达任何信息。
正确使用 PowerPoint 样式的转换具有以下用途：
- 它们通过强制演示者暂停将长演示文稿分解为较小的区块。
- 它们将观众的注意力吸引到演示文稿的变化上，帮助人们重新集中注意力，如果他们的头脑想知道的话。
- 他们给演示文稿一个节奏，以便它感觉不单调或压倒。
- 他们的风格反映了演示者或材料的个性。
虽然这些是演示的重要目标，但此类转换会在大多数类型程序的 UI 中引起不必要的注意，并且会很快变得令人厌烦。
底线： 请勿使用 PowerPoint 样式转换作为程序的模型。
如果你只做了六件事...
- 使用动画和过渡使程序更易于理解、感觉更流畅、更具吸引力。 它们应该有一个明确的目的。 不要仅仅因为可以或为了吸引不必要的程序关注而使用动画。
- 定义动画词汇，并在整个程序中一致地使用它。 适当时使用 Windows 7 动画词汇。
- 使用动画的特征赋予节目个性并强化其品牌。
- 使大多数动画简单、简短和微妙。 请记住，动画不必要求关注才能成功。 如果动画是适当且自然的，则用户只会注意到其不存在。
- 使动画快速响应，并赋予它们轻量级的感觉。 无论你的动画多么引人入胜，没有人会愿意感觉他们正在等待它们。 设计更重的动画以正常降级。
- 针对长期运行进行设计。 如果动画令人厌烦、分散注意力或令人厌烦，请重新设计或将其删除。
使用模式
动画有多种使用模式：
| 使用情况 | 说明 |
|---|---|
| 悬停反馈 以显示交互点的位置。 |
指示交互点处于活动状态。 悬停也可以通过静态效果显示。 windows 词汇：显示悬停效果 (边框、突出显示、放大) 以及淡入/淡出效果，以保持平滑度。  在 Zune 数字媒体播放器中，专辑封面突出显示，并在悬停时添加播放控件。 |
| 单击反馈 表示可单击对象响应并收到一次单击。 |
指示已单击对象。 windows 词汇：单击下拉事件时闪烁对象背景。 若要显示触摸接触，请使用波纹效果。  触摸显示波纹动画，以便用户知道已识别交互。 |
| 选择反馈 表示已选择对象。 |
指示已选择对象。 选择也可以通过静态效果显示。 windows 词汇：使用淡入/淡出效果绘制选择矩形，以便获得平滑度。  在 Zune 中，相册封面在单击时闪烁，然后在所选内容上获取选择矩形。 |
| 进度反馈 表示正在执行任务。 |
进度反馈指示任务正在取得进展，通常使用活动指示器、进度栏或演示任务的动画。 确定进度反馈大致显示已完成的任务和剩余的任务量，而不确定的进度仅指示任务正在完成。 windows 词汇：旋转活动指示器、进度栏、进度背景、插图动画。  在此示例中，Windows Live Messenger在登录期间显示不确定的进度反馈。 |
| 吸引 表示某些内容需要用户的注意。 |
当创建重要对象或经常由于更改) 或发生重要或紧急事件而需要注意 (时，吸引适当的关注级别。 请参阅 吸引对设计技术的适当关注级别 。 windows 词汇：闪烁、移动、脉动、发光、闪闪发光。  Windows Live 工具栏在第一次出现时会进行动画处理，使其在何处变得明显。 |
| 关系 以显示对象之间的关系或效果中的因果关系。 |
以一种不会分散注意力或混淆的方式显示关系，尤其是在关系可能被理解或预期时。 windows 词汇：变形、运输、物理变化（如翻转、从点源增长、缩小到点目标）。  在此示例中，动画显示伽玛设置及其在显示器上的影响之间的关系。 |
| 插图/预览 以直观方式解释命令的概念、任务或效果。 |
一个动画或视频，用于解释概念或某些内容如何直观地工作，以补充或替换文本说明。 这样，用户就可以高效、自信地执行任务或选择命令。  在此示例中，平板电脑输入面板“show me”命令使用插图来显示如何更正、删除、拆分和加入。 |
转换有多种使用模式：
| 使用情况 | 说明 |
|---|---|
| 对象增大/收缩/显示 以平滑地更改对象的大小或状态。 |
对象在状态之间更改，可能在移动时发生更改。 转换在更改期间始终面向用户。 windows 词汇：平滑、更改大小、对象滑入或滑出。  在此示例中，天气小工具从其简洁状态更改为显示其“选项”对话框。 |
| 内容显示/隐藏/更改 以流畅地显示、隐藏或更改内容，通常用于渐进式披露。 |
窗口内部重塑以显示更多、更少或不同的内容。 转换在更改期间始终面向用户。 windows 词汇：窗格滑入或滑出。浮出控件窗口淡入和淡出。不同的内容淡入或卷入。  Windows 计算器在视图模式之间具有平滑过渡。 |
| 控制或显示/隐藏 用于在悬停或鼠标移动时平滑显示或隐藏控件或其显示效果，以简化正常的视觉外观。 |
当用户将指针悬停在命令区域上时显示控件，或当用户将鼠标悬停在控件上时显示控件。 将鼠标悬停在这些区域表示用户打算进行交互。 如果指针变为静止，则视觉元素可能会隐藏。  在此示例中，当处于全屏模式时，Windows 媒体播放器控件在悬停时淡入。 |
| 场景过渡 使场景过渡流畅无缝，以避免引起注意。 |
突然的场景更改可能会不和谐，尤其是对于大屏幕区域，因此请使用场景转换来创建流畅性和连续性，并提供上下文。 场景过渡设计为自然而低调，以避免引起人们对过渡过程本身的注意。 windows 词汇：淡入/淡出;交叉淡化;滑入/向左、出/向右、向上、向下滑动;推送和覆盖。  在此示例中，Windows 桌面壁纸在图像之间轻轻地交叉淡化，使过渡感觉流畅和控制。 |
| 特殊场景转换 以吸引人们对场景更改的注意，使其变得特别或重新聚焦用户的注意力。 |
虽然大多数场景转换不应引起人们对转换过程的注意，但有些转换旨在打破流程并引起注意，以强调即将发生不同情况。 为了引起人们的注意，特殊场景过渡设计为非自然且具有较高的视觉效果。  在此示例中，PowerPoint 使用引人注意的过渡来吸引受众参与更改。 |
| 直接操作 以显示直接操作的效果， (如移动、滚动/平移、旋转和缩放) 。 |
转换实时显示操作的效果。 效果应感觉流畅、持续且与现实世界一致。 在某些位置，移动和旋转可能不是连续的，以指示限制或可能的首选选项。 缩放使内容变大或变小，可能会相应地更改细节级别。  在此示例中，放大镜在各级别之间平滑缩放。 |
| 不正确的直接操作 指示尝试了直接操作 (，例如移动、滚动/平移) ，但无法执行。 |
转换显示正在尝试的操作，但会还原到原始状态。 通常，由于一些实际的物理限制，效果看起来无法执行操作。 这些动画用于代替基于文本的错误消息，这将破坏操作的真实感觉。 windows 词汇：弹跳 在此示例中，文档将弹跳以显示用户已到达末尾。 |
| 对转换进行排序、筛选和重新排序 表示项集合的演示文稿或内容已更改。 |
转换显示 (或复杂更改，建议) 更改的效果。    在此示例中，必应视觉搜索使用筛选器转换。  在此示例中，Windows Media Center 使用重新排序转换作为播放歌曲时的特殊体验。 |
| 性能转换 使操作看起来更快发生。 |
尽管任何转换都有可能使操作看起来发生得更快，但这些转换的主要目的是提高对性能和响应性的感知。 一种很好的技术是显示以有意步骤执行的任务。 相比之下，延迟操作、以随意的方式呈现结果或使用活动指示器会感觉缓慢。 windows 词汇：分阶段执行操作，并在阶段之间平稳切换。  在此示例中，任务栏跳转列表会立即显示标准项，然后在列表准备就绪后滑出以显示目标。 这样做会掩盖生成列表所需的时间。 相比之下，延迟初始显示会感觉无响应，显示不完整的列表或进度反馈会感觉慢得多。 |
| 特殊体验 在对计划非常重要且引起用户充分关注的不常见 特殊体验 期间吸引用户并取悦用户。 |
虽然任何转换都有可能成为一种特殊体验，但这些转换最好保留给对你的计划真正特别的不常见体验。 自定义转换用于提供特殊感觉。 品牌和个性通常是重要的设计元素。 与其他模式不同，特殊体验可能需要关注、繁重，并要求用户稍等片刻。 因此，如果过度使用，这些转换会很快磨损，因为体验不再特别。  在此示例中，Windows Media Center 在加载时显示动画以立即吸引用户。 |
准则
有效沟通
定义和使用动画词汇， 以确保动画和过渡具有一致的含义，并在整个程序中一致地使用它。 大多数词汇应包括场景和对象外观和消失、导航、基本交互 (悬停、选择、单击) 、对象操作和交互 (移动、放置、调整大小、滚动、平移、缩放、旋转、筛选) 和吸引注意力。 一致的含义对于有效沟通至关重要。
只要可行，请使用 Windows 动画词汇。 虽然你的节目可能有不同的受众和不同的需求，但一致性和熟悉性的好处往往大于不同的好处。 如果程序的词汇必须不同，请使用与 Windows 相同的基本动画类型，但为它们提供适合程序的正确个性。
不要为动画词汇中的通用动画和过渡指定特定含义。 泛型过渡（如淡出）和特殊效果（如溶解）在) 出现或消失之外， (没有特殊意义，因此可以自由使用。
不正确：
在此示例中，交叉淡出错误地用于导航到下一项。 由于交叉淡化没有特定的含义，因此此转换不提供上下文。
使词汇条目清晰明了。 相关操作可能具有类似的效果， (例如，放大和缩小应) 具有反转，但不相关的操作应具有明显不同的效果 (例如，不应将缩放与旋转) 混淆。
使真实效果保持真实且一致。 如果使用逼真的动画和过渡，请使体验与现实世界保持一致。 用户不应对结果感到惊讶、困惑或误导。 为了一致性，不要混合隐喻。
提供反向操作反转动画。 这样做可以满足用户的期望，并简化了词汇。 例如，如果窗格通过滑入出现，则通过滑出而不具有某种其他效果来删除它。
使动画易于理解。 用户应能够快速了解动画的用途。 可能会使动画太小、太短 (小于 50 毫秒) ，或者过于微妙，以至于用户无法理解其用途。 在这种情况下，请重新设计以明确含义，或删除。
不正确：
在此示例中，效果非常小而微妙，以至于很少有用户能够理解其用途。 最好重新设计或删除。
模式
悬停反馈
- 若要显示响应，请尽量在进入或离开悬停状态后的 50 毫秒内播放动画。
- 若要快速显示，请将悬停动画的持续时间设置为小于 50 毫秒。
- 使用悬停效果的淡入/淡出效果。 这样做会使悬停效果明显不同于单击和选择反馈。
单击反馈
- 若要显示响应性，请尽量在点击事件后 50 毫秒内播放动画。 单击事件不需要单击反馈。
- 若要快速显示，请将单击动画的持续时间设置为小于 50 毫秒。
- 使用背景闪烁或闪烁效果。 这样做会使点击效果明显不同于悬停和选择反馈。 由于单击需要悬停，因此请将单击反馈作为悬停反馈的平滑补充。
选择反馈
- 若要显示响应，请尽量在选择或取消选择后的 50 毫秒内播放动画。
- 若要快速显示，请将选择动画的持续时间设置为小于 50 毫秒。
- 使用淡入/淡出选择矩形效果。 这样做会使选择与悬停和单击反馈明显不同。
进度反馈
- 当一秒钟内无法执行操作时，请使用活动指示器。 这样做表示已收到命令。
- 当任务需要 5 秒以上时，请使用进度栏。 有关更多指南，请参阅 进度栏。
- 使用进度反馈动画，帮助用户可视化长时间运行的任务的效果。 如果动画无法传达任何有用内容，请避免不必要的进度反馈动画，请改用进度栏。
- 具有清晰可识别的完成和失败状态。 用户必须能够快速确定这些最终状态。
- 当基础任务未取得进展时，停止显示进度。 用户需要能够确定是否没有取得进展，并做出相应的反应。
吸引
使用有约束的吸引器。 除非信息是紧急的、至关重要的或可能影响用户的即时行为，否则通常最好不显眼地更改状态，并让用户自行发现更改。 解决干扰，而不是可发现性。
在此示例中，无线网络通知区域图标使用动画处理关键问题，但允许用户自行发现弱信号。
选择吸引适当关注级别的动画。 吸引器动画应吸引足够的注意力，以达到其目的，但不再。 如果用户必须立即采取行动，请选择需要引起注意的效果，无论用户在哪里查看。 对于其他情况，请参阅 吸引适当级别的注意力 部分，以获得注意力、注意性和紧迫性的正确组合。
不正确：
Microsoft Office 助手吸引了不必要的关注。
如果用户没有响应，请不要重复动画或使用连续动画。 相反，假设用户选择不立即执行，但稍后可能会执行操作。 连续动画使用户难以专注于任何其他内容。
关系动画
- 使用关系动画显示对象从何而来或去向。
- 关系动画必须以所选对象开头或结尾。 不显示用户当前未与之交互的对象之间的关系。 如果用户注意到了，他们会注意到的是分心。
插图/预览
- 使用预览显示命令的效果，用户无需先执行该命令。 通过使用有用的预览版，可以提高效率和轻松学习程序，并减少对试错的需求。
- 使用具有清晰解释的插图和预览。 如果混淆，它们没有什么价值。
- 一次只播放一个插图，以避免用户过多。 如果可以同时显示多个插图，请使用鼠标悬停或播放按钮让用户指示其兴趣。
- 如果插图是窗口或页面的main用途，则自动播放插图。 否则，如果它是可选的，请让用户在准备就绪时播放它。
- 以最佳速度播放动画：速度不是那么快，它们很难理解，但速度不太慢，它们watch乏味。
对象增大/收缩
在调整大小期间不要剪辑内容。 在添加内容之前展开容器。 在减少容器之前删除内容。
不正确：
在此示例中，内容在重设大小期间被剪裁。
内容显示/隐藏/更改
- 静态显示重要信息。 用户不应通过渐进式披露来访问重要信息。
控制或显示/隐藏
当用户将指针定位在窗口或窗格中的任意位置时，或者鼠标移动（如果全屏），显示重要控件。 用户不必寻找这些控件，因此请确定其发现。
在此示例中，每当指针位于窗口上方时，Windows Media Center 将显示其控件。
当用户将指针放在命令上或附近时，显示辅助控件或控件的显示。 为便于发现，请使位置明显，目标较大。
在此示例中，当指针靠近右上角时，Windows Live Messenger显示辅助命令。
场景过渡
使物理场景转换与自然映射保持一致。 在西方文化中，人员从左到右读取，分层关系图从上到下排列。 因此，从左到右的移动指示了向前推进的时间。 以下物理场景转换具有自然映射：
切换 含义 左起 在任务流中移回 从右起 在任务流中前进 从顶部 上移任务层次结构 从底部 下移任务层次结构 如果程序播放声音，则同时设计场景切换和音频过渡。 例如，如果场景逐渐淡出，则任何声音也应逐渐淡出。 不要因为声音转换突然而破坏无缝视觉过渡。 有关更多声音指南，请参阅 声音。
直接操作
- 在交互中使用物理手势时， (喜欢) ，请将动画设计为像对手势的自然响应。 将交互原因与过渡效果链接。 为动画提供实际的物理特征，例如加速、减速、动量、阻力、重量、弹跳和旋转。
- 为了保持直接的感觉，在整个交互过程中，使对象的接触点在指针下保持平稳。 任何滞后、断断续续的反应或失去联系会破坏直接操纵的感知。 对象在被操作时不应消失。
对转换进行排序、筛选或重新排序
- 对于简单更改，请显示整个转换。 用户将能够轻松跟踪整个过渡。 简单更改涉及四项或更少项。
- 对于复杂的更改，在动作变慢时强调运动的结束，让眼睛在其余部分填充。 这样做会使动作感觉响应更迅速、更有条不紊。
性能转换
- 请考虑在两到三个阶段中执行慢速切换，使其显示速度更快且立即交互。 在适当时使用以下组合顺序：
- 外部框架
- 背景
- 如有必要，使用临时表示形式 (初始内容)
- 主控件 (，以便用户可以立即) 交互
- 辅助控件和任何剩余的 UI 元素
- 最终内容 (是否使用了临时表示形式) 使用淡出和幻灯片等过渡以使构图看起来流畅、有序和精细。
在“鸟瞰”视图中滚动时，必应地图将显示临时网格背景。 这样，用户就可以在呈现最终内容之前立即继续滚动。
特殊体验动画
- 重新考虑动画初始屏幕 (以及静态初始屏幕) 。 通常，初始屏幕只是吸引人们注意程序加载所需的时间，并且它们很快就会用完它们的欢迎。 虽然初始屏幕仅在无法进行用户交互时才显示是可接受的，但只要可行，更好的替代方法是设计程序，以便用户能够立即与其交互，即使它仍在加载。
- 如果动画初始屏幕花费的时间超过三秒，请提供“跳过简介”命令。 单击初始屏幕上的任意位置也应将其关闭。 或者，在初始时间段后使用动画的简短版本。
性能
不要让用户等待程序的动画和切换。 尽可能使用简短的动画和切换 (小于 200 毫秒) 。 使用更快的动画 (100 毫秒) 进行更频繁的操作。 设计更长的动画 (一秒以上，通常进度反馈、插图和特殊体验模式) ，以便用户可以在运行时继续工作。
设计长时间运行的动画，让用户在动画运行时能够交互。 如果视觉线索表明他们无法继续工作，则用户不会尝试继续工作。
在 Windows Internet Explorer 的此示例中，状态栏中的低键进度栏表明用户无需等待完成即可进行交互。
对 CPU 密集型任务使用轻型动画。 这样做会为任务提供完全的处理能力。 此外，用户不会认为轻型动画是任务占用大量 CPU 的原因。
请勿在动画或切换期间显示活动指示器。 这样做会破坏效果。 设计动画和过渡，使其能够立即启动。
设计动画以在系统资源不足时正常降级。 动画可能会降级，因为存在需要较少资源 (变体，例如) 较短的长度或较低的帧速率，甚至根本不运行。 无论可用的资源如何，请确保动画的质量很高，看起来像动画而不是软件 bug。
不正确：
在此示例中，使用窗口还原转换，即使没有足够的系统资源来很好地发挥它。 因此，冻结的帧似乎是一个 bug。 如果资源不可用，最好只显示窗口而不进行转换。
动画特征
设计良好的动画和过渡通常具有以下特征：
持续时间短。 大多数动画应介于 100 到 300 毫秒之间，最好是 1/6 秒 (167 毫秒) 或 1/4 秒 (250 毫秒) 。 (特殊体验和进度反馈可以更长。) 使用更快的动画时间进行更频繁的操作。 通常，较长的动画需要更多时间才能完成，需要更多时间来理解，并且感觉速度缓慢。
响应能力。 动画应在启动事件或用户操作后的 50 毫秒内启动。 较长的开始时间感觉无响应。
加速/减速。 若要看起来自然，大多数动画效果都需要在启动时加速，在停止时减速。 若要看起来响应迅速，请将动画设计为快速启动。 若要显示受控，请将动画设计为在末尾具有软着陆。 虽然这适用于运动效果，但它也适用于任何建议移动的效果，例如缩放甚至淡出。
大多数动画应该有快速的开始和柔和的结束，以有一个响应，但控制的感觉。
运动。 描绘运动的动画尤其需要加速和减速，因此请勿使用线性运动，除非动画持续时间很短。 动作应从头到尾走短道，不超冲。 并非始终需要完整运动路径。 适当时，在动作减慢时强调运动的结束，让眼睛在其余部分填充。 这样做会使动作感觉响应更迅速、更有条不紊。 同时对多个对象的运动进行动画处理时，请给予它们略有不同的路径，时间略有不同，从而感觉更自然。
帧速率。 大多数动画应使用每秒 20 帧的帧速率。 如果动画是为了获得特殊体验或与程序main目的相关，请考虑使用每秒 24 30 帧的更高速率来提高流畅性和真实性。
调整。 设计动画，使其在整个预期用途范围内正常工作。 例如，页面转换应设计为适用于所有页面大小。
人格。 设计动画以感觉自然、缓和和高效，而不是人工、异想天开或缓慢。
动画文本
- 虽然可以使用切换效果显示文本， 但不要持续对文本进行动画处理。 动画文本通常让人分心，比静态文本更难阅读。 异常：
- 在传统上对文本进行动画处理的情况下，你可以对文本进行动画处理，并且提供了一种可访问的替代方法。
- 如果文本主要用于装饰性，则可以对文本进行动画处理。
在此示例中，Zune 对文本进行动画处理，但其用途主要是装饰性。 如果用户不仔细阅读文本，则没有问题。
降低能耗
- 设计动画以降低能耗。 如果设计正确，动画不应显著增加能耗。 若要降低功耗，请：
- 显示关闭时停止动画处理。 显示器可能已关闭，以节省电量。
- 请勿使用非用户启动的长时间运行的动画。 使用高分辨率定期计时器的动画会降低处理器电源管理的效率。 此外，请确保在动画完成时禁用任何高分辨率定期计时器。
- 当系统变为空闲状态时暂停所有动画。 用户处于空闲状态的时间段由 控制面板 中的 Power Options 确定。
可访问性
不要使用动画作为传达基本信息的唯一方法。 动画应传达有用但不重要的信息，因为有视觉障碍的用户无法访问它们。
确保通过其他方式提供等效信息， 例如：
- 通过检查。 用户可以通过查看动画中涉及的屏幕或对象来确定等效信息。
- 通过简单交互。 用户可以通过悬停、单击或双击来确定等效信息。
必应主页有一个初始动画，其中显示了几个热点。 用户还可以通过将光标移到热点附近来显示热点。
请注意，“等效信息”并不意味着相同的信息。 信息的格式可能不同，或者需要简单的推导。
适当时，将输入焦点设置在转换期间更改的对象上。 这样做使辅助技术能够检测更改发生的位置。 但是，当用户使用键盘时，不要更改输入焦点。
不要使用快速闪烁或调整对象大小的动画或切换效果。 闪烁和快速的屏幕变化可能会导致有癫痫障碍和其他神经障碍的人出现问题。
允许用户关闭程序的动画和切换效果。 若要支持此功能，请遵循 Windows 中的“轻松访问中心”中的“关闭所有不必要的动画”选项。
开发 人员： 可以使用 SystemParametersInfo API 确定是否启用了动画。
假设用户将关闭程序动画的设计任务。 确保这样做不会显著中断任务流。
有关更多辅助功能指南，请参阅 辅助功能。
文档
- 尽可能避免引用动画。 请改为引用正在创建动画的对象，并在必要时引用动画的类型。
- 请勿引用转换，技术文档中除外。 相反，引用处于其最终或初始状态的对象。
- 如果用户显式启动动画，请使用谓词播放;否则，请将谓词用于技术文档。
示例：
- 你会知道当某个项的图标开始弹跳时需要你注意。
- 首先，选择要打印的照片 (请注意，选择) 后，照片会放大。
- 使用交叉淡化转换无缝地更改对象的状态。
反馈
即将发布：在整个 2024 年，我们将逐步淘汰作为内容反馈机制的“GitHub 问题”，并将其取代为新的反馈系统。 有关详细信息，请参阅：https://aka.ms/ContentUserFeedback。
提交和查看相关反馈