文章目录

关闭翻页动画之后,读者仍需要知道自己进入了哪一章;移除收藏时的飞行动效之后,也仍需要确认文章已经收藏。减弱动效设计不是把界面变成“没有反应”,而是减少不必要的运动,同时保留位置、关系和操作结果。

以一款阅读应用为例,用户从目录打开“第2章:观察与记录”,展开一条注释,再收藏这一章。普通模式可以用适度过渡帮助理解;减弱动效模式则要让同一条阅读路径依然连贯,不要求用户忍受大幅缩放、视差或反复位移。

减弱动效还要和焦点、文字放大及状态提示一起检查。UI 无障碍设计清单提供这些相邻要求,下面则专门讨论运动被减少后,页面关系和操作反馈怎样保留。

同一阅读界面从大幅章节过渡变为稳定内容切换,章节位置和收藏结果仍然清楚

先找到动效承担的信息

在调整时长之前,先给每一段动效写一句用途。目录卡片放大到正文,可能在表达“这个页面来自哪一项”;注释区域向下展开,可能在表达“说明属于哪一段”;星标飞入收藏夹,可能在表达“内容已加入哪里”。如果用途说不清,这段运动就可能只是装饰。

将用途与运动拆开后,就能寻找替代表达。章节标题、返回目录入口和当前位置可以说明页面关系;注释标题、展开状态与稳定的边界可以说明内容归属;填充后的星标配合“已收藏”可以说明结果。用户需要的是这些信息,不是必须看完某条运动轨迹。

WebKit 对响应式动效的介绍讨论了缩放、平移等效果与用户动效偏好的关系。设计时可以据此检查大面积元素的运动,但不要把某一种淡入淡出或某个毫秒数当作对所有人都合适的固定答案。

阅读页面尤其要留意内容周围的装饰。正文可能完全静止,背景却持续移动,或标题随着滚动不断放大,读者仍然难以把注意力放在文字上。动效盘点应覆盖整页,而不只检查主要按钮。

把三段阅读动作改成信息不减少的版本

从目录进入章节:保留出处,减少大幅位移

普通方案中,章节卡片从目录位置放大并占满屏幕。减弱动效版本可以取消这段大范围缩放,让正文直接出现,或使用经过验证的轻微过渡;页面顶部仍保留“第2章”和“观察与记录”,返回入口明确指向目录。这样即使没有飞入过程,读者也知道自己打开了什么。

进入正文后的起始位置要一致。不能因为动画被关闭,就保留上一次浏览另一章时的滚动位置,让用户落在本章中段。返回目录时,也应回到原来的章节附近,不要把动效开关变成页面定位规则的开关。

展开注释:减少伸缩,不隐藏新增内容

普通方案可能逐渐增加注释区域高度,使下方段落缓慢移动。减弱动效版本可以直接展开,并把注释标题和关闭入口保持在可辨认的位置。若注释很长,优先考虑用户是否需要就地阅读,或是否适合进入独立说明区域;不能仅为了避免运动,把注释挤进一个无法完整阅读的小框。

展开按钮应同步表达已展开,收起后仍能找到原段落。屏幕位置与焦点规则属于任务结构,不因减弱动效而省略。若使用键盘阅读,可以结合键盘焦点顺序设计确认展开之后如何继续。

收藏章节:移除飞行轨迹,保留结果

普通方案让星标飞到顶部收藏入口,减弱动效版本可以直接改变星标状态,并显示“已收藏”。按钮的名称也应反映接下来可以取消收藏,而不是图标变了、文字仍写“收藏”。如果收藏失败,回到未收藏状态并提供对应反馈,不能把动画结束当作请求成功。

这三处修改有一个共同点:改变的是过渡方式,章节归属、阅读位置和业务结果并没有被删掉。原型中需要比较的是同一内容在两种模式下能否被理解,而不是哪一边看起来更安静。

系统偏好与页面设置怎样配合

Web 页面可以通过 prefers-reduced-motion 获知用户的减弱动效偏好。设计稿应提供偏好生效后的界面方案,而不仅在说明里写“支持无障碍”。媒体查询能传递偏好,不会替设计师决定收藏、展开或章节切换应保留哪些信息。

若产品另有动效设置,可以将默认项设为“跟随系统”,并清楚表达其他可选项的含义。用户主动选择减弱动效后,章节详情、目录和收藏列表应保持一致,不要只有设置页自己停止动画。是否允许覆盖系统偏好以及如何保存选择,需要产品团队明确,不能由不同页面各自决定。

还应考虑用户在页面打开期间改变系统设置。下一次交互应采用对应方案;正在进行的过渡如何结束,也要有可理解的终点。例如正在打开章节时,不要突然把内容退回目录,或停在半透明、不可点击的中间状态。

“减少动态效果”“减弱动效”可以按产品现有用词统一,但不要把它写成“低性能模式”。用户选择较少运动,并不表示设备较差,也不意味着可以降低图片质量、删掉内容或关闭必要功能。

把普通模式和减弱模式画在同一个任务中

在 Pixso 中,用相同的章节目录、正文和收藏按钮制作两行分镜。上行标出普通模式的起点、过渡方向与终点;下行去掉不需要的运动,明确内容何时出现,以及最终保留的标题、位置和反馈。两行都使用“第2章:观察与记录”,避免因为内容不同而无法比较。

Pixso 中阅读界面的普通过渡与减弱动效分镜,章节位置和收藏结果保持一致
减少运动轨迹,不减少章节归属、阅读位置和收藏结果。

可以先用图形和文字标注变化,再连接页面原型讨论点击顺序。评论应落在具体事件上,例如“进入章节后从标题开始阅读”“收藏失败时不保持实心星标”。这种分镜能帮助团队确定表达,但不应把设计文件的播放效果当成浏览器已经响应系统偏好的证明。

对于同一组件,还要明确什么不变:按钮仍可操作,正文仍完整,错误仍可读,关闭入口仍可达。若减弱模式中某个动作失去反馈,应当补回文字或稳定的视觉状态,而不是恢复原来的大幅动画。

不要把不同的动效要求混成一条规则

WCAG 2.3.3“交互产生的动画”属于 AAA 级,关注由交互触发的非必要运动能否关闭。不能把这一条写成所有网站 AA 级验收的同名条款,也不能因为目标只到 AA,就忽略其他适用的动态内容要求。

自动开始的滚动、闪烁或更新需要另行判断。WCAG 2.2.2“暂停、停止、隐藏”分别说明了自动运动内容和自动更新内容的条件。阅读页顶部的自动轮播、旁边不断更新的消息,与用户主动展开注释,不应套用完全相同的控制方式。

对这款阅读应用,可以取消与阅读无关的自动装饰动画,让推荐内容由用户主动切换。若确有必须持续更新的信息,应提供适合其性质的控制,暂停后怎样恢复也要明确。不要把所有动态内容一律改成永不更新的截图,导致用户误读过期状态。

闪光风险也不是开启减弱动效就自动解决。减少位移、提供暂停与处理闪光属于不同问题,应分别检查。团队可以回到UI 无障碍设计清单查看相关要求,再按页面实际内容展开。

交给开发的不是“把动画全关掉”

交付时,用具体事件描述替代方案,例如:“从目录进入章节时取消放大过渡;保留章节标题;从正文起点显示内容;返回时恢复目录位置。”这比一句“动效改弱一点”更容易实现,也能防止不同开发者各自选择不一致的处理。

还要说明状态更新不应依赖动画完成。即使过渡时长变为零,按钮也要恢复可操作,遮罩也要移除,页面也要进入终态。否则表面上动画消失了,用户却卡在无法点击的页面。这个风险应通过实际实现验证,而不是只看静态对比图。

最后再用阅读路径走一遍:打开章节、展开注释、收藏、返回目录。先开启系统减弱动效,再关闭,对照两种模式下的信息是否同样完整。检查长章节、网络失败和连续快速操作,尤其注意有没有消失的反馈或丢失的位置。

成熟的减弱动效方案不需要向用户解释少了多少动画。读者只会感觉到界面稳定、位置清楚、操作有回应,能继续读完自己选择的内容。