减少不必要的重复动画
动效可以表示操作反馈、状态变化或视觉层级,但频繁、强烈的位移或闪烁容易降低可用性。建议让持续动画有明确目的,并提供暂停入口。
尊重系统偏好
现代浏览器支持 prefers-reduced-motion 媒体查询。设计时应确保在用户选择减少动态效果后,依然能够获取完整信息。
@media (prefers-reduced-motion: reduce) {
.motion-element { animation: none; }
}控制反馈节奏
操作按钮、状态提示与数据更新的动效通常比纯装饰性的循环动画更有实际意义。请在真实使用环境中检验节奏,而不要只以视觉复杂度衡量设计质量。
打开动效编辑器 →