原型演示视频
像真品一样构建原型，然后用视频讲述故事。
静态模型只能展示屏幕的外观。它无法展示产品的感觉：哪些内容最先加载、你的拇指落在哪里、失败时会发生什么。此技能构建的行为与正在构建的实物一致的原型，将其展示给人们以收集反馈，然后逐帧驱动同一个原型以渲染出演示视频。无需屏幕录制，因此设计的更改意味着重新渲染，而非重新录制。
这里的规则源于真实的评审轮次。每一条都始于评审者的一条备注，并最终成为默认规则，确保同样的备注无需给出第二次。
何时使用（以及何时不使用）
- 制作原型：当想法依赖于行为时：时序、加载、过渡、手势、边界情况或多步骤流程。此外，当评审者不断对图片做出反应，而非体验时。
- 制作视频：当受众无法点击时：循环幻灯片、网站图块、异步更新、案例研究。视频是原型大规模共享的方式。
- 跳过它：对于静态画面就能回答的布局或视觉问题，以及在非常早期的阶段，线框图成本更低。确定方向后，再制作原型。
工作流
按顺序执行。在渲染之前不要跳过步骤。
- 加载上下文。 获取真实的设计稿（设计文件、截图、设计令牌）、流程和目标。询问受众在观看或点击后应该理解到什么。阅读
references/fidelity.md。 - 首先列出状态和行为。 在编写代码前，写下每个屏幕、状态和转换：加载、空状态、错误、成功、返回、提示信息、边界情况。每项一行。向人员确认列表。
- 构建实时 HTML。 从
kit/shell.html开始。将屏幕重建为真实的 DOM，带有真实的点击目标，绝不能是带热区的截图。阅读references/behavior.md。 - 自行点击测试。 在桌面端和移动端使用无头浏览器运行每条路径。截取每个状态的屏幕截图。确保零控制台错误。在分享前修复所有问题。
- 分享以收集反馈。 发布带有说明文字和点击提示的链接（
references/sharing.md）。以references/feedback-log.md的格式记录每条备注：备注内容，及其转化成的规则。 - 编写镜头列表。 每个节拍一行：
时间 | 屏幕内容 | 操作 | 镜头类型 | 故事要点。将每个节拍命名为一个镜头（建立镜头、插入镜头、动作剪辑、匹配剪辑、回报镜头；参见references/pacing.md，电影语法）。一个节拍一个想法。在制作视频前获得确认。 - 预览，然后渲染。 在暂停的时钟上驱动原型并捕获帧。首先发送低分辨率预览（15fps，一半尺寸）。仅在时序获得批准后，再渲染全质量版本。阅读
references/pacing.md和references/motion-tokens.md。 - 质量保证，然后交付。 执行
references/qa.md中的每项检查，并在交付消息中说明已检查的内容。修复仅针对被标记的问题。
不可妥协的事项
- 实时 DOM，而非带热区的图像。图像仅用于照片、标志和媒体。
- 文本使用设计稿的令牌（字体族、字号、行高、字间距），绝不使用手动设置的值。确认字体在渲染位置已安装。
- 提示消息和浮层位于内容之上。它们绝不能将页面推开。
- 每个作品使用一种缓动曲线族。进入时使用缓出，UI 上绝不使用缓入，绝不由 0 缩放。UI 上不使用弹跳效果，除非是回报时刻（见
motion-tokens.md，趣味在于回报）。 - 进入新屏幕后，在有任何动作之前保持静止：对于轻量屏幕约 0.9 秒，默认 1.4 秒，对于文本密集型屏幕约 2.4 秒。
- 为点击操作带上上下文：推进到整行或整组，而非单独按钮。
- 电影语言绝不能覆盖 UI 的行为方式。每个元素在其自身的图层上动画。
- 仅在点击操作上显示点击标记。滚动操作上不显示手指。
- 幻灯片循环保持在 20 秒或更短，除非故事需要更长时间且相关人员同意。解释性剪辑仅循环其教学的那个时刻。
- 在任何全质量渲染之前，必须提供低分辨率预览。
- 未通过质量保证检查绝不交付。
- 当评审者给出建议时，将其转化为规则并记录下来。
文件
references/behavior.md：使原型行为与真实产品一致references/fidelity.md：精确匹配源设计稿references/sharing.md：为收集反馈而设置references/pacing.md：演示视频的呈现节奏references/motion-tokens.md：缓动、持续时间和运动模式references/qa.md：每次交付都必须通过的检查references/feedback-log.md：备注如何转变为规则，包含真实示例kit/shell.html：中立的原型外壳（工具栏、桌面/移动端、设备框架、说明文字、点击提示）kit/proto.css,kit/proto.js：过渡、工作表、提示消息、骨架屏、光标