关于 motion-sensitivity
一项帮助设计者在避免给动态敏感人群带来风险的前提下使用动效的技能，说明应避免的动态效果、减少动态效果时的处理方式、安全动画原则和检查问题。
主要功能
- 01闪烁与动态效果风险说明
- 02prefers-reduced-motion 指引
- 03按用途规划动效预算
- 04更安全的动画原则
- 05视频与动态内容检查清单
适用场景
- 01审查界面中的潜在危险动效
- 02让动画适配减少动态效果设置
- 03检查自动播放视频和动态背景
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/motion-sensitivity确认已加载。
详细介绍
动效敏感性设计
设计动效时，应兼顾功能且避免造成伤害。对于有前庭障碍的人来说，不合适的动画不只是令人烦恼，还可能引发持续数小时或数天的眩晕、恶心、偏头痛或癫痫发作。
适用人群
- 有前庭障碍的人（据估计，40 岁以上成年人中有 35%）
- 视觉运动会诱发偏头痛的人
- 有光敏性癫痫的人（闪烁可能诱发癫痫发作）
- 正在脑震荡康复的人
- 有焦虑症的人（意外动效会增加压力）
- 任何正在经历晕动症的人
应避免的危险动效
绝不可使用
- 每秒闪烁超过 3 次的内容（有诱发癫痫发作的风险——这是 WCAG A 级要求，不可忽视）
- 任意颜色的大面积闪烁（即使频率较低）
- 频闪或脉冲效果
使用时务必极其谨慎
- 视差滚动（会引发前庭反应）
- 滚动劫持（覆盖原生滚动行为）
- 缩放整个视口的动画
- 旋转或转动元素
- 自动切换的轮播图或幻灯片
- 背景视频
设计模式
尊重 prefers-reduced-motion
这是最低要求，不容妥协。
启用 prefers-reduced-motion 时：
- 将动画过渡替换为即时状态变化
- 停止所有自动播放的视频和动画
- 禁用视差效果
- 禁用滚动触发的动画
- 仅保留必要的动效（加载指示器），并简化这些动效
动效预算
并非所有动效都一样。应有意识地分配动效：
- 必要动效： 加载旋转图标、进度条、传达含义的状态 过渡。保留这些动效，但应予以简化。
- 有帮助的动效： 悬停效果、帮助理解的细微过渡。予以保留，但启用减少动效时应改为即时变化。
- 装饰性动效： 背景动画、入场效果、视差效果。完全移除。
安全动画原则
- 动画时长应较短（过渡动画低于 300ms）
- 尽可能使用不透明度和颜色变化，而非位置变化 （对前庭系统的影响较小）
- 避免同时为屏幕上的大面积区域设置动画
- 为所有动态内容提供播放／暂停控件
- 切勿自动播放任何内容——让用户自行选择是否播放
视频和动态背景
- 切勿自动播放动态内容——先显示静态预览图
- 提供清晰可见的暂停／停止按钮
- 如果使用背景视频，应提供静态替代方案
- 确保视频暂停时，内容仍完全可读
评估问题
- 界面是否尊重 prefers-reduced-motion？
- 是否存在每秒闪烁超过 3 次的内容？
- 所有动画是否都可以暂停、停止或隐藏？
- 是否有任何内容会自动播放并产生动效？
- 是否存在视差或滚动触发的动画？它们是否 有静态替代方案？
评论
支持 Markdown