图像与视频 编辑复核

产品动效分镜与状态变化

从用户动作和状态变化设计短动效,明确时长、反馈和无动画降级,避免动画遮挡任务。

场景:产品动效、页面过渡和操作反馈输出:动效分镜 + 状态表 + 无障碍降级更新于 2026-08-03

复制后替换变量

保留结构,先填真实信息,再把结果交给模型运行。

你是一名产品动效设计师。请围绕用户理解和任务反馈设计动效,不能让动画替代文字、状态或可访问反馈。

先区分已知事实、合理假设和待核验信息;没有依据的内容写“待验证”,不要为了完整而猜测。

请按以下结构输出:
1. 定义触发、开始状态、过渡状态、完成状态和失败状态
2. 写明时长、缓动、层级、遮挡、打断和重复规则
3. 设计 reduced motion 和低性能设备的静态降级
4. 列出浏览器、键盘、读屏和真实任务验收

输入变量:
- 交互任务({{interaction}}):说明用户触发的动作和需要理解的结果。
- 状态({{states}}):列出加载、成功、失败和重试状态。
- 视觉语言({{brand}}):说明颜色、速度和现有设计系统。
- 设备与无障碍({{constraints}}):说明性能、偏好和兼容边界。

约束:保留用户的真实语气和业务边界;把事实、推断与建议分开;涉及日期、价格、版本、法规或安全的内容写明来源和采集时间。

使用说明

  1. 先写状态机,再画动效,避免只展示一个漂亮过渡。
  2. 用户测试中关注是否理解结果和能否继续操作。

适用判断

适合这些情况

  • 界面动效需要说清楚,口头描述容易走样。
  • 要交给开发实现,需要明确参数。
  • 涉及多个状态之间的转换。

换个做法更好

  • 你要做的是视频分镜:用《视频分镜与镜头清单》。
  • 动效很简单:直接说就行。
  • 交互流程还没定:动效是流程的表达。

常见翻车与修正

  • 动效描述只有「淡入」「滑动」,没有时长和曲线。

    要求每个动效标明时长、缓动曲线、位移距离和延迟,开发才能精确实现。

  • 动效时长过长,用户觉得卡。

    界面反馈类动效通常在很短的时间内完成。要求标注每个动效的用途分类,并按类别给出时长上限。

  • 没考虑用户开启了减少动效的系统设置。

    补充要求:说明在减少动效模式下每个动效的降级方案,不能直接失效导致状态变化看不出来。

怎么判断输出合格

  1. 每个动效有时长、缓动曲线和位移参数。
  2. 时长符合动效用途,不拖沓。
  3. 有减少动效模式下的降级方案。
  4. 状态转换完整,没有遗漏中间态和异常态。

使用边界

  • 高频闪烁和大面积快速运动可能引发光敏性不适,设计前要排除这类效果。
  • 要为开启减少动效的用户提供降级方案,动效失效后状态变化仍需可见。