如何制作前后对比视频

有些改进很难用语言说清，却很容易展示出来。原本要加载八秒的页面现在只需一秒。杂乱的仪表盘变得一目了然。令人困惑的结账流程少了三个步骤。用文字描述这些变化需要一整段话，用视频展示只需要六秒。

前后对比视频是屏幕录制能做出的最有说服力的形式之一，同时也是最容易做砸的一种。如果两段录制不匹配，观众的注意力就会被你无意造成的差异夺走，而不是你想展示的那一个。

本指南介绍如何在 Recorded 中策划、录制和剪辑对比视频，让改进本身说话。

什么时候适合用对比视频

• 性能改进：加载时间、构建时间、渲染速度、同步耗时
• 重新设计：把新的布局、导航或视觉风格与旧版并排展示
• 流程优化：七次点击缩短为两次
• 修复缺陷：先展示出问题的行为，再展示修复后的行为
• 展示自己的成果：设计整理、代码重构、迁移、文案改写

如果你的改动在屏幕上看不出来——比如输出完全一致的后端重构——对比视频帮不上忙。当差异是观众真的能看见的东西时再用它。

黄金法则：只改一件事

对比之所以有说服力，正是因为除了那处改进以外，其他一切都保持不变。因此两段录制应当共享：

• 相同的窗口尺寸和屏幕分辨率
• 相同的采集模式和帧率
• 相同的起始状态（同一页面、同一数据、同一账号）
• 相同的操作，顺序一致，节奏一致
• 相同的主题——不要「之前」用浅色模式、「之后」用深色模式

任何一处不一致，都会给观众怀疑结果的理由。在第一次按下录制前就把这些锁定好。

策划你的对比

1. 写出精确的操作脚本。 不是旁白，而是点击步骤。「打开仪表盘，点击报表，选择最近 30 天，点击导出。」
2. 确定你要衡量什么。 时间、步骤数、错误次数，或者主观上的清晰度。在视频里把它说出来。
3. 准备完全相同的测试数据。 两个环境使用记录相同的演示账号，可以消除「那边数据本来就少」的质疑。
4. 固定窗口尺寸。 调整一次之后，两次录制之间不要再动。
5. 每个版本都先演练一遍。 一边磕磕绊绊、另一边行云流水，会悄悄夸大你的结果。

录制两个版本

把「之前」和「之后」录成两段独立的视频，而不是一段长录制。分开的文件更容易裁剪、对齐，出问题时也更容易重录。

1. 在 Recorded 中设置采集——两次都选择同一显示器、窗口或区域
2. 选定一个帧率，两次录制都保持不变
3. 严格按照操作脚本录制「之前」版本
4. 切换环境——新的构建、新的设计、预发布地址
5. 确认窗口尺寸没有变化
6. 用完全相同的操作脚本录制「之后」版本

提示：如果你在比较加载时间，请在触发加载的点击之前就开始录制，在加载完成之后再停止。这些多出来的帧能让你更容易裁剪到公平的起点。

剪辑对比视频

裁剪到相同的起点

在编辑器中打开两段录制，把它们都裁剪到完全相同的触发时刻——通常是点击的那一帧。如果一边提前半秒开始，即使速度并不慢也会显得更慢。

给两边清晰标注

用文字叠加在画面上标出 Before 和 After。注意：

• 在两段片段中放在相同位置
• 全程显示，而不是只出现一秒
• 使用高对比度，以便在压缩和小屏手机上依然清晰

再加一层显示耗时或步骤数的叠加文字，就能让改进从「感觉」变成可衡量的数据。

用缩放引导注意力

如果差异发生在屏幕的某个角落——加载图标、计数器、菜单——请在两段片段的相同时刻都加上缩放效果。只在一边缩放会破坏对称性，所以缩放区间要在两段中镜像对应。

谨慎使用变速

变速对教程很好用，对对比视频却有风险。只要你给任一片段变速，观众就无法再信任其中的时间。如果确实需要压缩漫长的等待，请对两段片段应用完全相同的速度，并在画面上说明。

选择布局

• 顺序播放：先播「之前」，再播「之后」。简单、诚实，适用于任何画面比例，是最稳妥的默认选择。
• 左右并排：两段同时播放，适合时长接近、画面足够简单以至于半宽也能看清的情况。
• 关键时刻切换：两边都播到关键瞬间，然后来回切。性能差距悬殊时特别有效。

对于竖屏或社交平台格式，请把两段上下堆叠而不是左右并排，这样每一段都能保持可读的尺寸。

保持诚实

对比视频既是营销，也是证据。一个经不起质疑的结果，损失的信任远比视频赢得的更多。

• 不要只清除其中一次的缓存
• 不要在限速网络下跑「之前」
• 不要在「之后」里悄悄跳过某个步骤
• 要说明条件：哪台机器、什么网络、多少数据量
• 要展示典型情况，而不是你运气最好的那一次

导出与分享

• MP4：适用于任何需要嵌入或上传视频的地方
• GIF：适合放进 README、更新日志或聊天消息的简短对比——控制在几秒以内
• 竖屏裁剪：用于社交平台，配合上文提到的上下堆叠布局

给文件起一个下载后仍能看懂的名字：checkout-flow-before-after-2026-09.mp4 胜过 comparison-final-v3.mp4。

快速检查清单

[ ] 两次录制的窗口尺寸、分辨率、帧率和主题一致
[ ] 相同的起始状态和相同的测试数据
[ ] 完全相同的操作脚本，两个版本都已演练
[ ] 两段片段裁剪到相同的触发帧
[ ] Before/After 文字叠加位置一致
[ ] 缩放效果在两段片段中对应一致
[ ] 没有只给其中一边变速
[ ] 在画面或说明中写明测试条件

结语

好的对比视频不会争辩「变得更好了」——它让观众亲眼看到，自己下判断。尽可能让两段录制保持一致，只改变你要展示的那一件事，并清楚标注结果。下次你上线一次重新设计、一项速度优化或一个更简洁的流程时，请在旧版本消失之前把两边都录下来。那是你回不去补拍的镜头。