动效是用户体验的润滑剂

合理的动效能引导用户注意力、提供反馈、增强趣味性。但过度使用会适得其反。

一、动效的作用

• 引导注意力
• 提供操作反馈
• 展示状态变化
• 增强趣味性

二、动效设计原则

• 目的明确：每个动效都有意义
• 自然流畅：符合物理规律
• 持续时间适中：200-500ms
• 性能优化：避免卡顿

三、常见动效类型

• 过渡动效：页面切换、状态变化
• 强调动效：吸引用户注意
• 加载动效：缓解等待焦虑
• 引导动效：指引用户操作

四、动效工具

• CSS动画
• Lottie动画
• GSAP库
• Figma原型动效