如何製作前後對比影片

有些改進很難用文字說清楚，卻很容易展示出來。原本要載入八秒的頁面現在只要一秒。雜亂的儀表板變得清晰易讀。令人困惑的結帳流程少了三個步驟。用文字描述這些變化需要一整段，用影片展示只需要六秒。

前後對比影片是螢幕錄影能做出最具說服力的形式之一，同時也是最容易做壞的一種。如果兩段錄影不一致，觀眾的注意力就會被你無意造成的差異帶走，而不是你想呈現的那一個。

本指南說明如何在 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 文字覆蓋位置一致
[ ] 縮放效果在兩段片段中對應一致
[ ] 沒有只替其中一邊變速
[ ] 在畫面或說明中寫明測試條件

結語

好的對比影片不會爭辯「變得更好了」——它讓觀眾親眼看到，自己下判斷。盡可能讓兩段錄影保持一致，只改變你要展示的那一件事，並清楚標示結果。下次你推出重新設計、速度優化或更簡潔的流程時，請在舊版本消失之前把兩邊都錄下來。那是你回不去補拍的鏡頭。