在您的设计系统中包含动画

（本文由 Adob​​e 赞助。）设计系统有各种形状和大小，但正如 Sparkbox 的设计系统调查所指出的，并非所有系统都包含动画指南。 当然，有些团队可能已经决定运动不是他们的产品需要指导的东西，但我怀疑在某些情况下运动被遗漏了，因为他们不确定要包括什么。

在过去的几年里，我与许多团队和设计师交谈过，他们承认他们认为运动是他们应该解决的问题，但他们只是不确定如何解决。 如果你在那条船上，你很幸运。 这篇文章是关于在你的设计系统的一组运动指南中包含什么以及如何实现它。

为什么是动画？

动画是用户体验和品牌信息的重要设计工具。 就像排版和颜色一样，您使用的动画说明了您的产品及其个性。 因此，当它没有在设计系统中解决时，该系统基本上会忽略 UI 设计工具的该领域。 然后遵循设计系统的人要么用动画做任何他们想做的事——这可能导致整个体验中动画执行的奇怪混杂——或者，他们根本不使用动画，因为他们没有时间去思考自己拿出所有的细节。 这两种情况都不理想。

对如何在您的设计系统中使用（或不使用）动画有一个明确的立场可以帮助确保您的品牌始终有效地使用动画，同时也可以帮助您的团队更快地工作。 让我们深入了解您的设计系统的一组运动指南。

基础工作：定义您需要涵盖的内容

首先，与人交谈

正如 Jina Anne 所说，“设计系统是为人服务的。” 我经常听到这样的建议，即与将要使用您正在创建的设计系统的人交谈是制作人们将实际使用的设计系统的关键。 这也适用于您围绕动画创建的指南。 您可以从中获得的最大收获是找出他们需要什么以及关注什么。 这有助于您为指南中需要涵盖的内容设置适当的范围。 没有人愿意花费数小时来制定超出您的团队实际需要的大量指南。 那不会有任何乐趣（或使用）。

您的团队可能不会主动告诉您他们的动画痛点，但这并不意味着他们没有任何痛点。

“

设置一些用户访谈（你的设计系统的用户），并询问他们在哪里被动画卡住了。 询问他们如何/是否使用动画，以及动画在他们的设计过程中的位置。 向他们询问他们希望在遇到的痛点上有什么帮助。 最重要的是，听听他们是如何谈论在工作中使用动画的，以及哪些方面做得好或做得不好。

虽然每个团队都不同，但我在进行这项研究时最常听到的担忧和问题是：“我怎么知道动画是好的，或者适合我们的品牌？”，“我如何传达动画细节对我们的工程师有效吗？”，或者“我们的开发人员总是说没有时间来实现我们设计的动画。”

您可能已经猜到了我要解决的问题，但是所有这些问题都可以帮助您在运动指南中提供答案。 您可以使用最常出现的问题和痛点来指导和集中您的运动指南工作。

参考其他系统

不是每个设计系统都必须公开，但有这么多是很棒的。 在规划您的设计系统时，它们是一个有用的资源，它们对于您的设计系统的运动指南也可以是有用的研究。 （事实上​​，我们将在这篇文章中引用其中的一些。）

使用其他运动部分作为您自己的设计系统的参考非常有帮助，但我不建议您大量采用其他品牌的运动指南来代替您自己的。 不，即使它是 Material Design 的运动指南也不行。

Material Design 的动画部分是谷歌的动画指南。 不错，是的，但它的目的是向您展示如何以 Google 的方式制作动画。 如果您正在为 Google 生态系统做一些事情（或有意让自己看起来像），那就太完美了。 但是，当这不是您的目标时，它就不适合了。 您不会在产品上使用其他品牌的颜色或字体，因此也不要只遵循其他品牌的运动指南。

最有效的设计系统包含他们独有的品牌观点——使他们的设计系统更具体到他们所针对的产品的东西——以及常见的设计最佳实践。 花一点时间研究和阅读其他系统的运动指南，您就会开始了解哪些部分是最佳实践，哪些部分是针对该品牌或产品的观点进行定制的。 然后，您可以决定您可能还希望将哪些最佳实践包含在您的指南中，以及在哪里为您的产品自定义指南。

例如，对退出使用缓入和对入口使用缓出是 UI 动画的常见最佳实践。 但确切的缓入或缓出曲线通常是根据品牌的预期信息和个性定制的。

引用 Dan Mall 的话：

“这是一个设计系统应该有的指导方针：视角、观点、将创意方向延伸到决定用设计系统构建东西的每个人。 那东西应该烤进去。”

我完全同意。

设计系统运动指南的两个主要部分

没有明确的规则说明您必须拥有这两个部分，但我发现此细分是处理我所研究的运动指南的有效方法。 而且我还注意到，大多数解决运动的设计系统也有这两个类别，所以它似乎也是一种适用于其他人的方法。

两个主要部分是：

1. 运动原理
   原则通常是解释该品牌如何使用运动的高级陈述。 它们是品牌使用动画及其观点背后的大局观或设计意图。
2. 执行
   本节重点介绍如何在设计和/或代码中实际执行这些原则。 它作为设计系统动画的构建块，它们涵盖的细节数量因品牌需求而异。

运动原理

原则部分是围绕动画陈述您的品牌价值的地方。 它们是衡量设计决策的高级原则，也是围绕动画陈述一些特定定义或价值的地方。 原则通常倾向于关注在特定设计系统中使用动画的“原因”以及它们所服务的用户体验驱动的目的。 在许多情况下，设计系统在其运动部分的原则标题下列出了这些。 但是，您也可以在不包含特定部分的原则中看到原则的概念。

您的动作原则可以根据您的品牌可能拥有的现有全球设计原则建模，从语音和语气指南等内容推断，甚至可以通过在动作审核中查看您产品的现有 UI 动画来推断。

让我们看一些例子，以更好地了解它们是如何发挥作用的。 Microsoft 的 Fluent 设计系统将他们的运动原则列为物理、功能、连续和上下文。 它们包括每个的简短描述和插图，以解释它如何应用于 UI 动画。

奥迪没有单独的原则部分，但他们从动画部分开始声明他们为什么使用动画，这为在设计系统中使用什么样的运动奠定了基础，就像原则一样. 他们说：

“我们代表动态的优质移动性。 因此，奥迪外观的运动具有典型的动态特征。”

在为 Adob​​e 的设计系统 Spectrum 开发运动部分时，我们选择了一个原理部分来匹配系统其他部分中使用的模式。 在 Spectrum 中，动画的目标是有目的的、直观的和无缝的。

注意：在撰写本文时，Spectrum 没有公开的网站。

无论您决定如何呈现它们，您的设计系统的动画原则都可用于建立系统对动画的期望，并评估设计系统应用到的产品的潜在未来 UI 动画。 例如，如果遵循 Fluent 设计系统的设计师想要在组件中引入大型弹跳动画，则可能会围绕是否符合运动原理进行讨论。 （它是否符合功能性和连续性的原则？）然后可以决定该特定动画是否需要违反规定的原则，或者是否应该重新设计动画以符合这些原则。

这有助于让设计讨论远离“你喜欢它吗？” 或个人意见领域，并以更实用的设计导向方式提供评估动画的结构。 这是我最喜欢声明运动原理的优点。 它们使有意义地讨论动画变得更加容易，即使对于没有太多动画经验的人也是如此。

快速提示：有关更多运动原理参考，请查看 Photon 的运动原理、Material Design 运动原理和 Carbon 的运动原理。 还有其他的，但这是一个好的开始。

执行

运动原理非常适合一些高级指导，但如果没有关于如何实现它们的详细信息，您将错过在设计系统中包含动画的最大节省时间的好处。 实施部分（尽管很少有这样的标题）有助于回答您的团队围绕动画提出的许多“如何”和“什么”问题。 目标是为遵循设计系统的任何人提供智能默认值。 这样一来，他们就可以使用您在指南中提供的智能默认设置，而不是花费很长时间来玩弄每个动画的持续时间和缓动。 这是一个巨大的节省时间，也使您的 UI 动画更加一致。

实施指南是许多设计系统在方法和覆盖范围上存在分歧的地方。 您在这些指南中包含的详细信息量和涵盖的主题将取决于动画在您的设计工作中扮演的角色有多大以及您的团队需要什么。 例如，Photon 的实现部分只包含一个持续时间和一个缓动曲线，而 Material Design 的实现部分包括持续时间和缓动的各个部分，以及包含实现细节的附加页面。

运动部分没有完美的长度。 它更多的是涵盖您的团队需要的详细信息，而不是达到特定数量的页面或规则。 要考虑在您的运动指南中包含的一些动画构建块是：

• 动画时长
• 使用的缓动值
• 命名效果

列表中的前三个是我们自定义或样式动画的主要方式。 用于动画的属性、持续时间和缓动的变化会极大地影响动画的呈现方式。 （最后一个是打包前三个的一种方式。）

让我们更详细地研究每一个，对于每一个，我将指出一些常见的最佳实践以及您自己的定制解释的空间。

持续时间、范围和节奏

持续时间与动画应该有多长有关，当我们谈论 UI 动画时，这些值往往很短。 令人惊讶的是，我们可以在几分之一秒内传达多少信息！ 这是动画的一个关键方面，因此每个带有运动指南的设计系统都涵盖了它，但它们以多种方式进行。

您将在大多数运动指南中看到的有关持续时间的一些最佳实践包括：

• 较短的持续时间应该用于较简单的效果和相对较小尺寸的动画（例如淡入淡出或颜色变化）；
• 更长的持续时间应该用于更复杂的效果和更大相对比例的动画（例如页面转换或在屏幕上和屏幕外移动对象）；
• 最佳时间可以根据视口大小而改变。 虽然每组指南的细节各不相同——有时甚至很大——但您会在几乎所有指南中看到这些常见的最佳实践。 不同的系统对究竟什么是“短”或“长”持续时间有不同的定义，并详细介绍了两者之间的差异。 此外，虽然它更多的是设计系统而不是动画最佳实践，但为您指定的持续时间值提供设计令牌也是在这里考虑的有用的事情。

Carbon 提供了一个基于相关动画类型的持续时间值范围的简短表格。 而 Material Design 根据动画的复杂性以及动画覆盖的相关区域将持续时间速度的建议分解为类别。 Pluralsight 采用了不同的方法，并提供了一组针对不同持续时间的关键字与可爱的动物配对。

缓和价值观

我对缓动指南的第一个建议是创建您自己的自定义曲线，而不仅仅是使用 CSS 默认值。 这是为您的品牌建立一些一致的运动关联的最有效方法，正如 Sarah Drasner 所说：建立“运动资产”。 您只需使用三条曲线即可获得稳固的基础：自定义缓出、缓入和缓入。 如果需要，总是可以选择添加更多。

快速提示：如果您完全不知道从哪里开始缓动曲线，请查看 easings.net 上的 Penner Easing equations。 这些旨在为您提供一些漂亮的动作，并分为三组以便于使用。 它们比 CSS 默认值更具表现力和灵活性。 在您的运动指南中使用一组这些可能是一个很好的起点。

基本缓动功能

我建议定义三个核心缓动曲线，因为这将涵盖各种动画的所有主要缓动需求。

• 缓入
  这条曲线是随着它开始任何运动而加速的曲线，这对于将物体移出视野来说非常好。
• 缓出
  这条曲线会导致物体在停止之前减速，从而以更自然的感觉方式将物体带入视野。
• 缓入出
  顾名思义，这条曲线结合了前两者的特点，最适合从点到点移动元素。

使用这三个自定义曲线，您几乎可以满足所有动画需求。

对于 Spectrum，我们确实做到了这一点，并创建了三个自定义缓动曲线以及关于每种动画使用哪种动画的建议。 （我们通过查看现有动画并尝试一些运动研究得出了这些曲线。）

Carbon 和 Pluralsight 采用了类似的方法，指定了三条具有建议用途的曲线，并指定一条作为默认曲线，以便在有疑问时使用。 在某些情况下，您可能只觉得需要使用一条自定义缓动曲线（如 Photon 那样）定义一条用于所有动画的曲线。

除了缓动曲线之外，提供一些支持信息也很有帮助，例如相关的设计标记、特定于语言的代码（适用于 CSS、JS、iOS 和/或 Android）或 After Effects 关键帧速度，具体取决于您的团队使用的工具。 这增加了易用性，并有助于使遵循运动指南中的智能默认设置成为阻力最小的路径。

曲线的可视化说明和曲线的交互式示例也是快速演示缓动曲线的工作原理及其外观的一大优势。 永远不要低估展示而不是讲述的力量。 （或与讲述一起展示！）

缓和层次结构

包含缓动层次结构是一种比三个核心自定义曲线更进一步的方法。 这对于将运动作为传达设计信息的核心方法的品牌特别有用。 就像使用类型一样，您可能想要一种使某些动画比其他动画更突出的方法。 更突出的动画可用于强调特定点或交互。 在这些情况下，构建您的缓动曲线以使您的缓动曲线更具戏剧性以从其他曲线中脱颖而出可能是一种有用的技术。

一个好的开始

在这一点上，有了原则加上你的持续时间和缓动部分，你就有了一套可靠的运动指南。 这可能是您的第一版运动指南或在设计中不严重依赖运动的品牌所需要的全部内容。 如果您时间紧迫，为持续时间和缓动建立智能默认值将足以看到建立运动指南的好处并节省您的团队时间。

命名效果

提供命名效果列表或要使用的动画库可能是您的运动指南中有用的东西。 并非所有设计系统的运动指南都有这些，有些选择将动画指南烘焙到其组件中（或同样），有些则不需要这种详细程度。

不过，请注意：更多并不总是更好。 将庞大的动画库作为设计系统的一部分可能看起来很酷，但是您列出的效果越多，维护这些效果所需的时间和精力就越多。 为避免为您和您的团队造成大量时间消耗，我建议您将任何命名效果集合尽可能小。

有两种方法可以在运动指南中提供效果库。 一种方法是 Lightning 设计系统的做法，提供一个小型动画效果库（如果您愿意，可以使用动画分子），可以单独使用或组合在一起以构建更复杂的动画。

另一种方法是提供更全面和针对特定目的的效果，例如 Audi 提供的显示和隐藏、变换、移动和叠加效果，以及 Fluent 提供的页面过渡效果。 对于任何一种方法，为每种方法提供设计原理和特定代码实现都是有用的。

快速提示：如果您正在寻找额外的运动指南进行研究，Adele 是一个设计系统集合，可让您按运动等主题进行过滤，styleguides.io 也始终是寻找公共设计系统的绝佳资源。

运动可能出现在您的设计系统中的其他地方

设计系统有各种形状和大小。 在许多情况下，这些动画指南也融入了设计系统的 DNA 或组件中。 深入研究如何做到这一点超出了我们在这里所涵盖的范围，但我确实想指出，在特定于组件的页面上而不是在命名效果部分中包含动画信息也很有用。 这完全取决于什么最适合您的团队和您的设计系统。

此外，在设计系统的这些部分、组件指南或运动部分本身中调用动画的性能和可访问性考虑因素可能会很有用。 性能和可访问性目标会影响我们设计工作的方方面面，动画也不例外。

一些离别的想法

我希望这篇文章有助于表明在您的设计系统中包含运动指南非常有用，并有助于揭开创建过程的神秘面纱。 在您的设计系统中处理动画可以有利于产品设计的一致性，并且不必过于耗时。

在制定运动指南时，我鼓励您分阶段工作，而不是等待运动指南完善。 发布一个旨在添加和更新它的版本对您、编写指南的人来说要容易得多，并且可以帮助您确保您正在创建有用的指南。

分享一些你知道缺少一些细节的东西是很困难的，发布你的运动指南的一个版本然后再次与你的团队交谈以了解第一版指南如何帮助他们和哪些痛点仍然是一个因素。 这种迭代方法可以使您的指南涵盖最相关的主题，并使您可以根据团队的需求对其进行调整。 两者都有利于拥有一个有用的系统并避免不必要的额外工作。