动效不只是好看——它有实用价值
好的动效设计有三个作用：
- 引导注意力：告诉用户这里发生了什么
- 表达关系：展示元素之间的层级和空间关系
- 提供反馈：确认你的操作已经被接收了
我们在日照某旅游APP中加入了一套流畅的页面转场动效后，用户对APP的品质感评分从72分提升到了89分。
日照APP必备的动效场景
1. 页面转场
从列表页进入详情页时，详情图应该从列表中的位置平滑放大过来（Hero Animation）。这种动效让用户清楚地知道我点的是这个东西打开了详情。
2. 按钮反馈
按钮被点击时要有轻微的缩放（缩小到95%再恢复）或颜色变化。没有反馈的按钮会让用户不确定是否点上了。
3. 加载状态
等待时不要只显示一个转圈圈。可以用骨架屏（Skeleton Screen）或者有趣的loading动画。日照海洋公园APP用了小鱼游泳的loading动画，用户反馈等的时候也不无聊了。
4. 下拉刷新
下拉时可以有与主题相关的动效。比如日照绿茶APP下拉时茶叶飘落，海鲜APP下拉时气泡上升。
5. 成功/失败提示
操作成功时可以有打勾动画加愉快的微动效；失败时温和地抖动加提示文字（不要红色警告框吓人）。
6. 手势操作
左滑删除/右滑收藏/长按预览等手势都要有相应的动效反馈。
动效设计的原则
- 时长控制在200-500ms（太慢用户急，太快看不清）
- 使用缓动曲线（ease-out最常用，先快后停）
- 不要为了炫技加动效——每个动效都要有目的
- 考虑性能（低端手机上不能卡顿）
- 尊重用户的减少动态效果系统设置
日照APP动效工具
After Effects + Lottie（导出JSON动画文件，APP端轻量渲染）；Principle（专门做交互动效的原型工具）；Figma Auto-animate（适合简单的过渡动效）。