运动的响应式设计

2017 年 5 月 15 日

作者：James Craig

WebKit 现已支持 prefers-reduced-motion 媒体特性，它是 CSS 媒体查询级别 5、用户偏好设置的一部分。此特性可用于 CSS @media 块，或通过 JavaScript 中的 window.matchMedia() 接口使用。网页设计师和开发人员可以利用此特性提供备用动画，以避免部分网站访问者经历晕动症触发因素。

为了解释此媒体特性是为谁设计的以及它的预期工作方式，我们将介绍一些背景知识。如果您愿意，可以直接跳到代码示例或 prefers-reduced-motion 演示。

运动作为可用性工具

CSS 变换和动画大约十年前由 WebKit 工程师提出，作为 Core Animation 概念的抽象，并以熟悉的 CSS 语法呈现。CSS 变换/CSS 动画的标准化以及被其他浏览器采纳，为各种技能水平的网页开发者铺平了道路。丰富、富有创意的动画终于触手可及，而无需承担与插件相关的安全风险和电池消耗。

适当且实用的运动在感知上的效用可以提高用户界面的可理解性，是的，还有可访问性。有许多文章论述了动画在提高用户参与度方面的益处

Issara Willenskomer：《利用运动创造可用性：运动中的用户体验宣言》
Aurora Harley：《用于注意力和理解的动画》
Val Head：《UI 动画与用户体验：一个不那么秘密的友情》

2013 年，Apple 发布了 iOS 7，其中大量使用了动画视差、维度、运动偏移和缩放效果。动画被用作一种工具，以最大程度地减少视觉用户界面元素，同时增强用户对其与设备即时响应式交互的理解。iOS 等网页和原生平台中的新功能起到了催化作用，促使更广泛的设计社区对用户界面动画的优势有了更深入的认识。

自 2013 年以来，动画在网页和原生应用中的使用量增加了数量级。

运动虽好，有时也需克制

iOS 辅助功能设置中包含一个名为“减弱动态效果”的开关。它是在 iOS 7 中添加的，允许用户禁用视差和应用程序启动动画。2014 年，iOS 为原生应用开发者提供了公共 API，用于检测减弱动态效果（iOS、tvOS）以及在 iOS 设置更改时收到通知。2016 年，macOS 也添加了类似的用户功能和 API，因此开发者既可以检测减弱动态效果（macOS），也可以在 macOS 偏好设置更改时收到通知。prefers-reduced-motion 媒体特性于 2014 年首次向 CSS 工作组提出，同时发布的还有 iOS API。

等一下！既然我们已经确定动画可以成为提高可用性和注意力的有用工具，为什么它还需要被禁用或减弱呢？

最简单的答案是：“我们并非都一样。”偏好是主观的，许多高级用户在了解界面工作方式后，甚至会进一步减少 UI 开销。

更重要、更客观的答案是：“对某些人来说，这是医疗上的必需。”特别是，对于部分患有通常称为前庭疾病的人群来说，这种改变是必需的。

前庭谱系障碍

前庭疾病是由影响内耳和控制平衡与空间定向的大脑部分的问题引起的。症状可能包括失去平衡、恶心和其他身体不适。前庭疾病比你想象的更常见：仅在美国就影响多达 6900 万人。

大多数人一生中都会经历晕动症，通常是在乘坐交通工具时。想想你上次晕车、晕船或晕机的时候。恶心可能是内耳的平衡输入与眼睛的视觉定向发生冲突时出现的一种症状。如果你的感官向大脑发送相互冲突的信号，它就不知道该信任哪个。冲突的感官输入也可能由变质食物中的神经毒素、致幻剂或其他摄入的毒物引起，因此一个常见假设是，由于运动或前庭反应导致的这些冲突的感官输入会使你的大脑推断自己中毒了，并试图通过呕吐来排出毒物。

无论根本原因是什么，患有前庭疾病的人对某些运动触发因素具有高度敏感性。在极端情况下，症状可能使人虚弱。

前庭触发因素

以下部分包括常见前庭运动触发因素及变体的示例。如果您的网站或 Web 应用程序包含类似动画，请考虑在 prefers-reduced-motion 媒体特性匹配时禁用或使用变体。

触发因素：缩放和放大

视觉缩放或放大动画给观者造成一种错觉，即观者在物理空间中向前或向后移动。一些动画模糊效果也会产生类似的错觉。

注意：保留许多实时、用户控制的直接操作效果（例如捏合缩放）是没问题的。只要交互是可预测和可理解的，用户就可以选择以适合其需求的方式或速度来操作界面。

示例 1：鼠标触发的缩放

如何在 iPhone 上拍摄包含多种视频和运动效果，其中包括当用户鼠标悬停在视频播放按钮上时，海报会缓慢缩放的效果。

Apple.com 团队实施了 prefers-reduced-motion，以禁用缩放效果和背景视频运动。

示例 2：3D 缩放 + 模糊

macOS 网站模拟了从内华达山脉的孤松峰飞离的场景。三维变焦和动画模糊让观看者感受到物理位置和焦距景深正在变化。

在移动设备上，或者在不支持更复杂动画的浏览器中，该效果会简化为更简单的滚动视图。通过采用类似的视觉处理，更简单的变体在去除效果的同时保留了原始设计意图。相同的变体可以与 prefers-reduced-motion 一起使用，以避免前庭触发因素。

2017 年 5 月 25 日更新：macOS 网站已修改为在首选时支持减弱动态效果。

触发因素：旋转和涡流效果

使用螺旋或旋转运动的效果可能导致一些前庭疾病患者失去平衡或垂直方向感。

示例 3：旋转视差星场

Viljami Salminen Design 默认情况下具有旋转的背景星场。

它已整合 prefers-reduced-motion，为有前庭需求的用户停止旋转效果。（注意：以下视频完全静止。）

触发因素：多速或多向运动

视差效果广为人知，但多速或多向运动的其他变体也可能触发前庭反应。

示例 4：iOS 10 网站滚动

iOS 10 网站展示了图像以不同速度垂直移动。

可以与 prefers-reduced-motion 一起使用一个类似的变体，它没有滚动触发的图像偏移，以避免前庭触发因素。

2017 年 5 月 25 日更新：iOS 10 网站已修改为在首选时支持减弱动态效果。

触发因素：维度或平面位移

这些动画给人一种二维 (2D) 平面在三维 (3D) 空间中移动的错觉。这种技术有时被称为二点五维 (2.5D)。

示例 5：平面位移滚动

Apple 环保网站展示了一个动画太阳能电池阵列，它会随着页面滚动而倾斜。

该网站支持一种减弱动态效果的变体，其中 2.5D 效果保持为静态图像。

触发因素：周边运动

视野边缘的水平运动可能导致方向感丧失或恶心。回想一下你上次在行驶的车辆中读书的情景。你的视线中心集中在文本上，但周边区域却不断有运动。这种运动对一些人来说没问题，但对另一些人来说则难以忍受。

示例 6：文本块附近的微妙、持续动画

滚动到 Apple 环保网站的第二部分后，一组 10-12 片叶子会缓慢地漂浮在关于可再生能源的段落附近。

在减弱动态效果的变体中，这些叶子是静止的，以防止观看者专注于附近的文本内容时出现周边运动。

请注意，只有已知有问题的动画才从网站中修改或删除。稍后会详细介绍。

在网页上使用减弱动态效果

既然我们已经介绍了可能触发不良前庭症状的动画类型，接下来我们来了解如何在项目中实现新的媒体特性。

CSS @Media 块

@media 块是将动态效果减弱集成到您网站中的最简单方式。使用它来禁用或更改 animation 和 transition 值，或者提供不同的 background-image。

@media (prefers-reduced-motion) {
  /* adjust motion of 'transition' or 'animation' properties */
}

请查看 prefers-reduced-motion 演示的源代码以了解示例用法。

MediaQueryList 接口

动画和 DOM 更改有时通过 JavaScript 控制，因此您可以利用 prefers-reduced-motion 媒体特性，结合 window.matchMedia 并在用户设置更改时注册事件监听器。

var motionQuery = matchMedia('(prefers-reduced-motion)');
function handleReduceMotionChanged() {
  if (motionQuery.matches) {
    /* adjust motion of 'transition' or 'animation' properties */
  } else { 
    /* standard motion */
  }
}
motionQuery.addListener(handleReduceMotionChanged);
handleReduceMotionChanged(); // trigger once on load if needed

请查看 prefers-reduced-motion 演示的源代码以了解示例用法。

使用辅助功能检查器

在优化动画时，您可以在返回应用查看结果之前切换 iOS 设置或 macOS 偏好设置，但这种间接的反馈循环既缓慢又繁琐。幸运的是，有更好的方法。

通过快速更改主机 Mac 或 iPhone 等连接设备上的任何视觉辅助功能设置，Xcode 辅助功能检查器可让调试动画变得更加容易。

通过 USB 连接您的 iOS 设备。
在辅助功能检查器中选择 iOS 设备。
选择“设置”选项卡。

下面是辅助功能检查器演示的隐藏字幕版本。

避免过度减弱

在某些情况下，减弱动态效果可能会降低可用性。如果您的网站使用前庭触发动画来向用户传达一些基本含义，则完全移除动画可能会使界面变得混乱或无法使用。

即使您的网站只是纯粹地将运动用于装饰目的，也只应移除您知道是前庭触发因素的动画。除非某个特定动画很可能导致问题，否则过早地移除它只会使您的网站变得不必要的单调乏味。

请在上下文中考虑每个动画。如果您确定某个特定动画可能是一个前庭触发因素，请考虑提供一个备用、更简单的动画，或显示另一个视觉指示器来传达预期含义。

要点

运动可以是提高可用性和参与度的绝佳工具，但某些视觉效果会引发部分观看者的身体不适。
尽可能避免前庭触发动画，并在用户启用“减弱动态效果”设置时使用备用动画。尝试这些设置，并在必要时使用新的媒体特性。请查看 prefers-reduced-motion 演示的源代码以了解示例用法。
请记住，Web 属于用户，而非作者。始终根据用户的需求调整您的网站。