核心能力 / 有节奏,不喧宾夺主
动效编排
好的动效应该让用户更容易理解页面发生了什么。我会把动画分为入场、状态变化、操作反馈和叙事推进四类,并控制位移、时长、缓动和并发数量。
先用白话理解
这项能力到底是什么?
动效不是让页面一直动,而是告诉用户刚才发生了什么、内容从哪里来。
我的判断方式
先确定动效目的
每个动画必须回答它在解释什么:层级、方向、状态还是操作结果。
短反馈,慢叙事
按钮和控件反馈保持迅速,内容叙事可以稍慢,但不能阻塞阅读。
尊重减少动态
系统开启减少动态后,页面仍需保持完整信息结构和明确操作反馈。
交付检查
落地时会确认什么
- 动画结束后内容是否稳定
- 滚动动画是否正确清理
- 移动端是否避免大幅视差
- 减少动态模式是否仍可使用
可以怎样一步步做
- 先说清动画要解释什么
- 控件反馈保持短而明确
- 内容动画不能阻止阅读
- 关闭动画后检查内容是否完整
常见误区
- 所有元素同时飞入
- 动画太长让用户等待
- 忽略减少动态设置
术语解释
- 缓动:动画速度变化方式
- 视差:不同层以不同速度移动
- 减少动态:系统提供的动画偏好