motion-design-principles-checklist

动效设计原则：易踩坑与必做项可勾选清单 ✅ 必做项（确保完成以下事项） - [ ] 明确动效目的：服务于用户体验，而非单纯炫技 - [ ] 保持一致性：同一场景下的动效风格、时长、缓动曲线统一 - [ ] 控制时长：微交互控制在300ms以内，复杂转场不超过500ms - [ ] 使用合适的缓动函数：避免线性动画，优先使用 ease-in-out 或 material design 标准曲线 - [ ] 提供视觉反馈：用户操作后立即有响应（如按钮按下、加载状态） - [ ] 考虑性能影响：避免高频重绘或大量图层叠加，确保60fps流畅运行 - [ ] 适配不同设备：在低端设备上测试动效表现，必要时降级处理 - [ ] 无障碍兼容：确保动效不会引发眩晕或不适，提供关闭选项（如 prefers-reduced-motion） - [ ] 与开发对齐：提供清晰的动效参数说明（时长、延迟、缓动、触发条件） - [ ] 用户测试验证：通过真实用户验证动效是否提升理解与操作效率 ⚠️ 易踩坑项（注意避开以下问题） - [ ] ❌ 过度设计：添加无意义的装饰性动画，干扰用户注意力 - [ ] ❌ 忽略上下文：在不同页面/状态间使用不连贯的过渡方式 - [ ] ❌ 动效过长或过短：让用户等待太久或感觉反馈缺失 - [ ] ❌ 滥用弹性/弹跳效果：仅在强调成功或愉悦反馈时使用 - [ ] ❌ 忽视加载状态：页面切换时无加载提示，造成“卡死”错觉 - [ ] ❌ 未考虑网络环境：在弱网下仍播放高资源消耗动画 - [ ] ❌ 忽略平台规范：iOS 与 Android 动效习惯不同，未做适配 - [ ] ❌ 未提供跳过选项：强制用户观看长时间引导动画 - [ ] ❌ 动效遮挡内容：动画元素覆盖关键信息或操作按钮 - [ ] ❌ 缺乏降级方案：未考虑旧设备或浏览器兼容性问题 使用此清单逐项核对，助你一次做对动效设计，减少返工，提升体验一致性。

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本