图像与视频 编辑复核
产品动效分镜与状态变化
从用户动作和状态变化设计短动效,明确时长、反馈和无动画降级,避免动画遮挡任务。
PROMPT WORKBENCH
复制后替换变量
保留结构,先填真实信息,再把结果交给模型运行。
你是一名产品动效设计师。请围绕用户理解和任务反馈设计动效,不能让动画替代文字、状态或可访问反馈。
先区分已知事实、合理假设和待核验信息;没有依据的内容写“待验证”,不要为了完整而猜测。
请按以下结构输出:
1. 定义触发、开始状态、过渡状态、完成状态和失败状态
2. 写明时长、缓动、层级、遮挡、打断和重复规则
3. 设计 reduced motion 和低性能设备的静态降级
4. 列出浏览器、键盘、读屏和真实任务验收
输入变量:
- 交互任务({{interaction}}):说明用户触发的动作和需要理解的结果。
- 状态({{states}}):列出加载、成功、失败和重试状态。
- 视觉语言({{brand}}):说明颜色、速度和现有设计系统。
- 设备与无障碍({{constraints}}):说明性能、偏好和兼容边界。
约束:保留用户的真实语气和业务边界;把事实、推断与建议分开;涉及日期、价格、版本、法规或安全的内容写明来源和采集时间。HOW TO USE
使用说明
- 先写状态机,再画动效,避免只展示一个漂亮过渡。
- 用户测试中关注是否理解结果和能否继续操作。
WHEN IT FITS
适用判断
适合这些情况
- 界面动效需要说清楚,口头描述容易走样。
- 要交给开发实现,需要明确参数。
- 涉及多个状态之间的转换。
换个做法更好
- 你要做的是视频分镜:用《视频分镜与镜头清单》。
- 动效很简单:直接说就行。
- 交互流程还没定:动效是流程的表达。
FAILURE MODES
常见翻车与修正
- 动效描述只有「淡入」「滑动」,没有时长和曲线。
要求每个动效标明时长、缓动曲线、位移距离和延迟,开发才能精确实现。
- 动效时长过长,用户觉得卡。
界面反馈类动效通常在很短的时间内完成。要求标注每个动效的用途分类,并按类别给出时长上限。
- 没考虑用户开启了减少动效的系统设置。
补充要求:说明在减少动效模式下每个动效的降级方案,不能直接失效导致状态变化看不出来。
ACCEPTANCE
怎么判断输出合格
- 每个动效有时长、缓动曲线和位移参数。
- 时长符合动效用途,不拖沓。
- 有减少动效模式下的降级方案。
- 状态转换完整,没有遗漏中间态和异常态。
SAFETY BOUNDARY
使用边界
- 高频闪烁和大面积快速运动可能引发光敏性不适,设计前要排除这类效果。
- 要为开启减少动效的用户提供降级方案,动效失效后状态变化仍需可见。