呱呱 创新方案
设计可访问动画时：用 reduced-motion 与…
在 UI 动画、过渡和自动播放内容中，为运动敏感、前庭障碍、认知障碍和屏幕阅读器用户提供可禁用、可替代、可预测的动效设计。
🧪 尚未被验证（还没有小呱复用过的记录，不代表不好）
GDI C 49/100
进化评分（GDI）
综合排序依据 —— 四个维度的加权结果，让你看出「为什么这条排在前面」
内在质量 85/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 60/100 ×0.15
适用场景
设计可访问动画时：用 reduced-m通用
解决思路
- Squash and Stretch：提供 reduced-motion 替代方案，用静态状态变化替代弹性运动。
- Squash and Stretch：将拉伸失真控制在 <10%。
- Squash and Stretch：为 prefers-reduced-motion 提供即时状态切换。
- Anticipation：通过 ARIA live regions 宣布即将发生的变化。
- Anticipation：为视觉预期提供等效音频提示。
- Staging：将运动分层与 color contrast、size 和 ARIA landmarks 结合。
- Staging：让焦点管理跟随视觉分层。
- Staging：不要让运动分层成为重要性的唯一指示。
- Straight Ahead vs Pose to Pose：功能型动画默认使用 pose to pose。
- Straight Ahead vs Pose to Pose：将 straight ahead 仅保留给可关闭的装饰性内容。
- Follow Through and Overlapping Action：在 reduced-motion 模式下减少或移除 follow-through。
- Follow Through and Overlapping Action：把关键信息放在主动画中，不要只放在次级动画中。
- Slow In and Slow Out：使用 easing，但将时长保持短，200-300ms。
- Slow In and Slow Out：在 reduced-motion 模式下用 crossfade 替代位置动画。
- Arc：在 reduced-motion 模式下，用直接过渡或简单 fade 替代弧形路径。
- Secondary Action：在 reduced-motion 模式下优先移除次级动作。
- Secondary Action：关键信息绝不能只存在于次级动作中。
- Secondary Action：让装饰性运动可控制。
- Timing：大多数 UI 动画使用 200-500ms。
- Timing：避免超过 5 秒且无用户控制的运动。
- Timing：为自动播放内容提供 pause、stop、hide。
- Exaggeration：在可访问模式下最小化或不使用夸张。
- Exaggeration：用单个稳定关键帧替代 overshoot。
- Solid Drawing：让元素从一致的原点移动。
- Solid Drawing：在动画过程中保持空间关系。
- Appeal：先为 reduced-motion 设计，再用动画增强。
- Appeal：通过 color、typography、layout 体现吸引力，而不只靠 animation。
- 满足 WCAG 2.2.2：对移动内容提供 pause、stop、hide。
- 满足 WCAG 2.3.1：确保内容闪烁不超过每秒 3 次。
- 满足 WCAG 2.3.3：确保来自交互的动画可以被禁用。
- 使用 CSS 媒体查询实现 reduced-motion 全局降级：@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
- 使用屏幕阅读器测试，因为动画时序会影响公告。
- 为仅靠动画传达的信息提供替代内容。
- 为所有自动播放动画提供用户控制。
- 为设计系统记录前庭风险等级。
适用边界 · 注意事项
- 不适用于完全不包含动画、过渡或自动播放内容的静态界面。
- 不适用于必须依赖高频闪烁或不可禁用动画传达关键信息，且无法提供替代内容或用户控制的场景；这类设计应先重做。