针对运动灵敏度进行减少运动设计

CSS 最近添加了一些功能，使我们能够识别用户当前环境的某些用户偏好和质量。 其中一项新功能，特别是首选减少运动媒体功能，对于在网络上设计更具包容性的运动特别有用。

几年前，我写了一篇关于为运动敏感度设计更安全的网络动画以及我们当时在网络上设计安全运动的有限选择的文章。 自那篇原始文章以来，有些事情保持不变，例如可以触发的运动效果的类型，以及上下文和用户期望的重要性。 但是改变的是prefers-reduced-motion媒体功能的存在和支持​​。 这对我们如何将工作中的动作设计为具有包容性和可访问性有很大的不同。

为什么要减少运动？

早在 2013 年，iOS7 的发布就让整个数字设计界意识到屏幕上的某些动作——即使它是界面的一部分——可能会对具有动作敏感性的人产生物理后果。 从那以后的几年里，主要的移动和桌面操作系统为人们增加了功能，以减少他们在操作系统中遇到的运动量。

“你的互动让我恶心”和“前庭障碍的可访问性”等文章分享了我们的设计选择，尤其是围绕运动的设计选择如何对运动敏感的人产生身体影响的第一手故事。 这些运动敏感性的根本原因可能因人而异。 对一些人来说，它源于前庭疾病，而对另一些人来说，它可能源于偏头痛或其他因素。 触发的因素也可能因人而异，甚至对某些人来说每天都不同。 个人因触发运动而经历的身体症状可能从轻微的头晕或头痛到恶心或更严重。

我们在工作中围绕动画所做的设计选择直接影响我们的工作如何影响具有运动敏感性的人。 了解哪些运动可能会触发，以及我们如何通过设计选择来减轻它们，有助于我们设计对观众安全且不会造成意外伤害的体验。 动画仍然绝对可以对我们的用户体验工作产生积极影响，但我们要确保负责任地使用它，就像我们尝试负责任地使用其他设计工具一样。

喜欢在网络上减少运动

prefers-reduced-motion 媒体功能现在具有强大的浏览器支持。 当前版本的 Edge、Firefox、Chrome、Safari、Opera、iOS Safari 以及 Android 浏览器和适用于 Android 的 Chrome 都支持它。 我们今天拥有的支持水平使其成为您绝对可以在生产中使用的东西。 此外，如果某人的浏览器不支持此功能，则不会发生任何不好的事情，它会被忽略，事情会照常进行。

在开发方面，我们可以像在 CSS 或 JavaScript 中使用任何其他媒体查询来确定是否已请求减少运动一样，测试偏好减少运动。

在 CSS 中看起来像这样：

 @media (prefers-reduced-motion: reduce) { /* reduced behaviour */ }

在 JavaScript 中：

 let motionQuery = matchMedia('(prefers-reduced-motion)'); const handleReduceMotionChanged = () => { if (motionQuery.matches) //reduced behaviour; } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged()

无论您选择哪种方式访问​​它，此媒体查询都将返回以下两个值之一：无偏好 (false) 或减少 (true)。 检索后，您可以使用这些值来告知您在浏览器中显示的内容。

在可以返回的两个值中，我们可以确定的唯一一个是有意设置的reduce (true)值。 无偏好 (false) 可能意味着所讨论的人对所有类型的动作都很好，或者可能意味着尚未设置该偏好。 这使得任何将无偏好（错误）的价值等同于选择参与所有级别运动的人的方法都不可靠。 因此，更好的方法是在返回值reduce (true)时减少潜在的触发运动效果。

例如，当请求减少运动时，这里的循环弹跳动画被动画淡入替换：

 /* A constant bouncing motion effect applied to the title */ h2 { animation: bouncing 1.5s linear infinite alternate; } /* Replace it with a safer effect when prefers-reduced-motion returns true */ @media (prefers-reduced-motion) { h2 { animation: fade 0.5s ease-in both; }

从用户的角度减少运动

大多数主要操作系统都允许人们在他们的系统设置中设置他们的偏好。 设置的确切措辞和位置各不相同，但可以在 iOS、OSX、Windows 和 Android 操作系统上设置首选项。

实践中首选的减少运动媒体功能

决定如何使用偏好减少运动媒体功能是我们有空间创建最适合我们产品和内容背景的解决方案的地方。 对于大多数 Web 项目，您需要首先识别网站上任何可能触发的运动效果，然后使用 prefers-reduced-motion 媒体功能来提供该效果的简化版本。

让我们更详细地看一下每个步骤。

识别潜在的触发运动

要找到您可能拥有的任何潜在触发动作，请查看您的网站或产品的一些典型用户流程，并仔细查看使用的动作效果：您是否有任何具有大动作的交互？ 任何大变焦、旋转效果或视差效果？ 对于运动敏感的人来说，所有这些类型的动画效果很可能会成为问题。 相比之下，颜色淡化、不透明度变化和规模的微小变化等动画效果不太可能出现问题。 如果有疑问，将有问题的效果添加到您的“减少”列表中不会有什么坏处，谨慎起见。

Web 内容可访问性指南建议为任何“产生运动错觉的运动......这对内容的意义并不重要”提供简化版本。 我认为查看一些示例也很有帮助，尤其是如果您认为自己对屏幕上的动作不敏感。 我在之前的文章中介绍了可能触发运动的示例，Webkit 博客上的这篇文章也有一些。 除非您的网站严重依赖运动，否则很有可能您最终会得到一个相当短的效果列表来关注这里。

创建一个减少的运动版本

接下来，您要为这些潜在的触发效果确定最合适的减少运动条件。 是否可以轻松调整动画以使用非运动效果（如不透明淡入淡出或交叉淡入淡出）来减少运动请求？ 暂停运动或完全删除效果以减少运动会保留内容的含义吗？

有关动议的作用将是决定最合适的简化版本的重要因素。 您不想无意中删除内容或降低整体体验。 以下是一些可能对您发现的潜在触发效果有效的示例：

大页面过渡

大页面过渡效果可能会替换为减少运动模式的交叉淡入淡出效果。 对于在不同状态或视图之间转换的大缩放或旋转转换，通常也是如此。

动画插图

另一方面，如果动画插图主要是为了个性或品牌效应，最好用静态版本代替以减少运动。 您需要确保静态版本仍然有意义，并且最有意义的安排可能并不总是动画的开头或结尾。 通过允许人们在准备好时播放动画，添加按需播放动画插图以减少运动的功能也很有用。

不要忘记在此处考虑动画 gif 或自动播放视频中的动作。 这些也可能包含潜在的触发动作，如果有，则需要简化版本。

视差效果

视差效果和夸张的平滑滚动效果普遍适用于对运动敏感的人，因此应显着减少或完全删除这些效果以减少运动。 （在我的研究中与我交谈过的每个人都特别指出视差对他们来说是一个问题。）平滑滚动效果可以替换为 Eric Bailey 在此处描述的默认浏览器锚链接行为。 消除视差效果以减少运动是理想的解决方案，但请确保在消除视差后检查所有必要的内容是否仍然可见和可用。

在大多数情况下，用更安全的效果代替潜在的触发效果来减少运动是尽可能多地保留内容的意图和可用性的最佳方式。 幸运的是，替换减少的效果也很简单。

减少运动的一个例子

例如，假设我在浏览我的网站时将此标题动画标记为可能触发。 运动大到足以产生运动的错觉，因此很可能会触发，并且运动的多个方向也可能会出现问题。 这绝对是我在查看我的网站时需要简化版本的效果列表中的一个。

所有植物照片都将相同的样式应用于动画的最终状态，以将它们本质上定位在默认情况下它们在文档流中的位置：

 .active .plant1, .active .plant2, .active .plant3 { transform: translateY(0); opacity:1; }

并且每个都有一个开始状态，定位到将其转换为略高于或低于其开始的固有位置。 连同定义的过渡以使动画发生：

 .plant1 { transform: translateY(-100%); transition: $dur $ease-both; } .plant2 { transform: translateY(120%); transition: $dur $dur/6 $ease-both; } .plant3 { transform: translateY(-100%); transition: $dur $dur/3 $ease-both; }

文本动画以相同的方式工作，但每个单词的水平翻译而不是垂直翻译。

当通过更改动画的开始状态请求减少运动时，我可以将动画更改为过渡不透明度，而不是过渡变换位置，如下所示：

 @media (prefers-reduced-motion: reduce) { .plant1, .plant2, .plant3 { transform: translateX(0); opacity:0; } }

现在，当 prefers-reduced-motion 媒体功能返回 true 时，每个植物照片动画的开始状态将被设置为已经定位在结束状态，不透明度为 0。这意味着它可以使用相同的过渡属性 -相同的缓动、持续时间和偏移量——但不透明度现在将通过变换而不是位置进行动画处理：

请注意，我不需要对动画的持续时间、缓动或延迟进行任何更改来执行此操作。 换出动画属性，但仍然使用相同的动画细节，足以减少运动。 这个特殊的例子是用 CSS 制作的，但是使用 JavaScript 或使用动画库时也可以直接替换动画属性。

野外运动减少的例子

您可以在 viljamisdesign.com 上看到这种方法的实际效果，这恰好是我注意到除了 apple.com 之外的第一个使用减少运动的网站。 当您访问请求减少运动的站点时，旋转的星空动画会停止，并且标题的较大运动会被移除。 但是各种悬停效果等动画仍然存在。 这会带来一种体验，其 UX 可供性和设计细节完好无损，同时对于要求减少运动的人来说也更安全。 （这里是 Viljamisdesign.com 的视频，无论是否启用了减少运动以供参考：https://vimeo.com/399979166/1bd41d1919）

Airpods Pro 页面也响应减少的运动偏好，但由于使用的内容和效果，方式非常不同。 页面上几乎所有的动作都可能被触发，因为它有很多大的缩放动作和视差风格的效果。 当请求减少运动时，所有视差和大运动效果都会被移除，但它们不仅仅是暂停或移除动画。 您看到的选择减少运动的版本经过精心设计，以保留完整运动体验的相同内容和含义。 （这里是 Airpods Pro 网站的视频，其中包含和不包含减少运动的选择以供参考。）

为运动量大的体验添加自定义切换

我在上面提到，大多数“基于任务”的网站可能只有少数可能触发的动画并且需要缩减版本。 但这些并不是网络上唯一的网站。 涉及大量运动的项目，例如更适合讲故事或创造体验的网站，可能会受益于稍微不同的方法。

对于这样的项目，很难列出可能触发的动作并为每个动作提供减少的替代方案，因为几乎所有使用的动作都可能是触发的。 另外，动作是内容及其意义的重要组成部分。 为这些类型的网站设计减少运动模式将采用更全球化的方法和更多努力，以确保即使减少运动也能保留内容的含义。

对于这些高度动画体验的网站，提供可见的自定义运动切换是非常有用的。 这将允许那些可能还不知道减少运动设置的人，或者当时正在经历一些运动敏感性的人快速调整体验。 动作切换为对动作敏感的人提供了一种不会让他们生病的方式参与您的内容的方式。 对于所有相关人员来说，这绝对比他们必须完全避开您的网站要好。

上下文是一个关键因素

请记住，上下文在这里也起着重要作用。 没有人愿意对他们意想不到的大量运动感到惊讶。 如果您正在访问一个标榜为高度互动的讲故事体验的网站，那么您的期望与访问银行网站时的期望会大不相同。 这两个网站当然都可以包含大量的动画，但这在银行网站上将是一个意外的惊喜。

构建自定义动作切换

我在 2015 年的文章中提到了自定义切换的想法，但今天它是一个更可行的选择。 在今天的网络上，我们可以更轻松地创建一个，甚至可以进行比几年前更智能的切换。

Marcy Sutton 有一个很好的例子，说明现代自定义运动切换如何在这个 CodePen 中工作。 （这个例子是她关于制作可访问的网络应用程序的课程的一部分，这也非常值得一试。）她的例子使用切换来移除所有运动，因为它只包含一个动画，但这种方法可以用来提供减少的运动整个应用程序或站点的效果也遵循相同的逻辑。

这种方法的主要特点是 Marcy 将它与现代网络技术很好地结合在一起，即更喜欢减少运动和本地存储。 使用这种方法时，如果有人请求减少运动来访问您的站点，他们会自动获得减少运动的版本，而无需手动激活切换。 如果有人调用切换来减少运动，该偏好将通过本地存储保存，因此他们不必在每次访问时重复进行此选择。

动物森友会官方网站是自定义减少运动切换与偏好减少运动媒体功能相结合的精彩真实示例。 这是我最喜欢的处理减少运动的例子之一。 他们围绕如何减少潜在的触发动作而做出的设计选择，同时仍然保持网站和内容的整体感觉，非常棒。 我在这篇博文中写了更多关于他们是如何成功的。 有很多网站的受众可以从类似的方法中受益。

使用运动切换的其他方式

如果您已经有一个首选项或设置面板，添加一个切换来请求减少运动可能是一个有价值的东西，可以像 Twitter 在其网站上所做的那样添加到这些设置中。 在这种情况下，访问该站点时不会立即呈现大量动作，并且已经有一个设置面板，因此将切换作为设置首选项的一部分非常适合。 Twitter 的切换还通过偏好减少运动查询尊重操作系统级别的设置，并根据用户在操作系统级别设置的内容预设为打开或关闭。 设计您的运动切换以尊重操作系统设置绝对是实现它们的明智方法，无论切换可能出现在哪里。

上下文切换是另一种方法，可用于减少特定动画插图或整个站点中出现的其他内容区域的运动。 The Dark Side of The Grid 文章通过为每个动画人物添加上下文切换按钮很好地做到了这一点，以允许读者在他们想要看到它时播放动画，而不是在他们阅读时让它无休止地循环。

沿着同样的思路，Dave Rupert 分享了一种技术，用于在请求减少运动时将首选减少运动与图片元素相结合，以显示静态元素代替动画 gif。 Chris Coyier 更进一步，并建议基于相同的方法为这些动画 gif 提供播放切换。 Steve Faulkner 的 gif de-animator 示例也可能是一种有用的方法。

所有这些，或类似的东西，都可能是减轻网络上任何潜在触发动作的好选择。 我提出这些例子有两个原因。 首先是表明有多种方法可以提供减少的运动变化，并且您可以灵活地找到最适合您的内容的方法。 其次，随着时间的推移，越来越多的人正在构建具有减少运动选项的网站，我们将在社区中看到更多创新的解决方案。

有许多创造性的方法可以以对项目上下文有意义的方式添加切换和设置。 这是一个有趣的平行，我们看到越来越多的网站包含设置面板或用于设置偏好的选项，如暗模式。 包括减少运动的选项可能是自然的下一步。

我们使用它的次数越多，它对每个人的影响就越大

我认为对于我们这些为网络设计和构建事物的人来说，利用偏好减少运动媒体功能使我们的工作更具包容性是很重要的。 通过采取措施尊重运动偏好，我们使网络更安全，可供更多人使用，这只能是一件好事。 我们绝对可以通过网络上的动作表达和创造性，同时也负责任和包容。

但是意识水平仍然是我们需要意识到的。 并非每个可能需要减少运动的人都知道他们的操作系统设置中的选项。 也许更少的人知道它也可以对浏览器中的内容产生影响，因为目前很少有网站利用它。 我们越多地利用prefers-reduced-motion媒体功能，并通过它提供高质量的减少运动体验，它对那些需要它的人来说就越有意义。