如何為影片加入動態圖形
如何為影片加入動態圖形以強化說明：8 種實用圖形、時間點規則、60 秒分鏡表以及 3 種製作方式。
Roozbeh Firoozmand閱讀時間 4 分鐘
大多數產品影片並不需要更多動態效果，而是需要讓觀眾在正確的時間點關注正確的位置。當您為影片加入動態圖形時，每個圖形都應具備以下兩種功能之一：引導視線或解釋意義。除此之外的任何元素都只是裝飾，而在螢幕錄影中，裝飾會干擾您正在教學的 UI。
以下介紹 8 種實用的圖形、各自的時間點規則、60 秒操作流程的前後對比分鏡表，以及 3 種製作方式。
每個圖形都必須通過的測試
分別播放有加入圖形與未加入圖形的片段。加入圖形後，觀眾是否能更快找到正確的按鈕或數字？如果誠實的答案只是「看起來比較好看」，那就刪掉它。以下 2 個檢查點能過濾掉大部分雜亂的元素：
- 一次只出現一個動態圖形。 將出現時間錯開至少半秒，否則觀眾會無法閱讀。
- 圖形需與旁白同步。 如果旁白說「點擊匯出」，而反白效果在 2 秒後才出現，觀眾早已在尋找目標。請在說到該詞彙時，或提前幾幀讓圖形出現。
8 種在螢幕錄影中實用的圖形
| 圖形 | 功能 | 經驗法則 |
|---|---|---|
| 標註 (文字標籤) | 標示螢幕上的項目 | 2 到 6 個字，停留時間至少為閱讀時間的 2 倍 |
| 縮放 + 反白 | 指出操作位置 | 在點擊前縮放，點擊後停留 1 到 2 秒 |
| 步驟計數器 | 告知觀眾目前進度 | 每個步驟位置與樣式保持一致 |
| 下三分之一版面 | 標示人物或區塊名稱 | 位於畫面下方三分之一，避開示範的 UI |
| 標題卡 | 區隔章節 | 停留 2 到 3 秒，僅 1 行文字 |
| 動態箭頭 | 指向縮放無法突顯的項目 | 繪製出來後保持靜止 |
| 數據計數器 | 強調數字變化 | 在約 1 秒內計數完成，並停留最終數值 |
| 轉場 | 標示場景或主題轉換 | 每支影片僅用 1 種樣式，長度小於半秒 |
標註
標註應標示控制項名稱或說明結果，例如「帳單設定」或「發票已寄出」。字數控制在 6 個字以內。BBC 的字幕準則建議每個詞至少約 0.3 秒。在螢幕錄影中，觀眾同時還在瀏覽介面，因此時間需加倍：4 個字的標註需要約 2.5 秒，而非 1.2 秒。
縮放 + 反白
這是螢幕錄影中最實用但也最常被濫用的動態圖形。在點擊前 0.5 秒縮放，在結果出現時保持，然後縮小讓觀眾看清整體位置。反白（柔和的方框或調暗周圍）能在不移動畫面的情況下達到同樣效果，適合在縮放會隱藏背景資訊的密集儀表板中使用。每個動作擇一使用即可。
步驟計數器
在固定角落顯示「步驟 3/5」能讓觀眾了解剩餘進度。保持位置與樣式固定，僅變更數字。若步驟少於 3 個，則可省略。
下三分之一版面
在產品影片中，下三分之一版面用於標示視訊框中的講者，或標示區塊名稱（如「管理員檢視」）。注意位置：大多數網頁應用程式的底部都有儲存列或聊天視窗。
標題卡
在章節之間使用，而非每個步驟都用。60 秒的影片開頭只需 1 張。如果標題卡需要很長的閱讀時間，那它只是偽裝成圖形的段落。
動態箭頭
當螢幕上兩個項目有關聯時（例如「此開關會變更該預覽」），箭頭比縮放更有效。讓它在約 0.3 秒內繪製完成，然後停止。彈跳的箭頭會持續吸引觀眾注意力，造成干擾。
數據計數器
在示範或發表影片中，計數至「1,240 張票券」能增加數據份量。這通常不適合用於教學影片。請快速完成動畫並停留最終數字，否則觀眾只會記得動態效果。
轉場
每支影片僅使用 1 種樣式，且僅在場景或主題轉換時使用。在同一個畫面的兩個步驟之間，直接剪接通常是最好的。避免閃爍特效：WCAG 關於閃爍 3 次或以下的成功準則存在的原因，是因為閃爍內容可能引發癲癇與偏頭痛。
保持動態疊加層一致的規則
當動態疊加層看起來像一個系統時，會顯得更專業：
1. 統一動態樣式。 每個標註使用相同的緩動效果、進入方向與持續時間。如果步驟 1 的標註是從左側滑入，步驟 5 也應如此。 2. 建立品牌模板。 字體、顏色、Logo 露出與標題卡版面應儲存在模板中，而非每支影片重新製作。下方列出的工具皆以某種形式支援此功能。 3. 安全區域。 文字應遠離畫面邊緣與您正在展示的 UI 控制項。在模板中標示出安全區域。 4. 圖形配合腳本。 先寫好旁白，再標記每個圖形對應的詞彙。沒有對應詞彙，就不要加圖形。
前後對比：60 秒操作流程分鏡表
以典型的 SaaS 帳單應用程式「寄出您的第一張發票」為例。 「前」為帶有旁白的原始錄影。
| 時間 | 前 (原始錄影) | 後 (加入動態圖形) |
|---|---|---|
| 0:00–0:03 | 儀表板，游標漂移 | 標題卡：「寄出您的第一張發票」搭配 Logo 露出，3 秒 |
| 0:03–0:10 | 旁白說明儀表板目標 | 出現步驟計數器 (「步驟 1/4」)；當旁白提到時，反白「發票」分頁 |
| 0:10–0:18 | 點擊發票，頁面載入 | 點擊前 0.5 秒縮放至「新增發票」按鈕；標註「新增發票」 |
| 0:18–0:32 | 輸入客戶、項目、金額 | 步驟 2/4；縮小以顯示完整表單；對真實客戶 Email 進行模糊處理 |
| 0:32–0:40 | 捲動至到期日 | 步驟 3/4；從到期日欄位指向付款條款預覽的箭頭 |
| 0:40–0:50 | 點擊傳送，確認提示 | 步驟 4/4；縮放至確認提示；標註「發票已寄出」，停留 2.5 秒 |
| 0:50–0:57 | 旁白提到提醒事項 | 滑動轉場至「提醒事項」畫面；反白開關 |
| 0:57–1:00 | 影片結束於儀表板 | 結尾卡顯示下一支影片標題，與開頭使用相同模板 |
這是在 60 秒內加入了 16 個圖形事件。之所以有效，是因為進入時間錯開，且每個圖形都對應到腳本中的詞彙。模糊處理是為了隱私，這是處理真實客戶資料時絕對不能省略的圖形。
3 種為影片加入動態圖形的方式
1. 傳統編輯器：Premiere、After Effects 或 DaVinci Resolve
Adobe Premiere 搭配 After Effects。 動態圖形模板 (.mogrt 檔案) 在 After Effects 中製作並在 Premiere 中重複使用。根據 Adobe 說明頁面，您可以將模板從「基本圖形」面板拖曳到影片軌道上，然後在「屬性」面板的「編輯」標籤中進行修改。數據驅動模板可從試算表資料填入長條圖與折線圖，這是製作精準數據計數器與圖表最乾淨的路徑。
DaVinci Resolve。 Fusion 頁面 是 Resolve 內建的節點式合成工具，擁有超過 200 種功能。你可以在 Fusion 中建立下三分之一版面（lower thirds）、動畫背景與轉場，將其儲存為巨集（macros），並僅開放編輯者所需的控制項。這些設定隨後會出現在「編輯」頁面的特效庫中，供任何專案使用。Resolve 提供免費下載；Resolve Studio 售價為 295 美元。
最適合： 擁有動態設計師可一次建立模板，並由編輯人員重複使用的團隊。取捨： 螢幕錄影中的縮放與標註（callouts）每次都需要手動設定關鍵影格。
2. 模板編輯器：Canva 或 CapCut
Canva 讓你透過「動畫」按鈕 為頁面、元素與文字製作動畫，並提供慢速、中速或快速預設，或是精確的淡入淡出時間。「顯示元素時間軸」讓你設定每個元素的出現時機，而「建立動畫」則讓你沿著路徑拖曳元素。品牌套件 可儲存 Logo、顏色與字體，確保模板符合品牌規範。
CapCut 擁有 文字模板與文字動畫 庫，在電腦版上，你還可以 為位置、縮放、旋轉與不透明度設定關鍵影格。這就是你製作手動縮放或滑動標註的方式。
最適合： 已經習慣使用這些工具，且需要在短片上加上動畫文字的行銷人員。取捨： 兩者皆非圍繞螢幕錄影設計，因此跟隨點擊的縮放、游標清理與隱私模糊處理都需要手動完成。
3. Clevera：時間軸上的疊加層，或用文字描述需求
Clevera 從錄影開始。針對 AI 配音的操作教學影片 與產品展示，它會平滑化游標、突顯關鍵互動並套用智慧縮放，同時撰寫並同步旁白。上述拍攝清單中大部分的縮放與突顯工作，在你開啟編輯器前就已完成。
在時間軸編輯器中，你可以新增或調整其餘內容：文字、圖片、模糊與螢光筆疊加層、標題卡、開場卡、Logo 揭示、縮放以及轉場效果，如縮放交叉、階梯、百葉窗、溶解、柔和擦除與滑動。標題卡、Logo 揭示與影片風格可儲存為預設或自訂模板，確保第二支影片與第一支風格一致。如果你只想為自己的錄影套用縮放、疊加層與標題卡，使用「已設定風格（可分享）」選項不會消耗 AI 點數，因此所有方案（包含免費版）皆可無限使用（免費版透過連結或嵌入分享；MP4 下載功能包含在 Starter 與 Pro 方案中）。
若需該清單以外的圖形，請使用 AI 動態圖形產生器 中的 「描述你的需求」。你只需撰寫自由格式的簡要說明，例如「在 0:45 處新增一個從 0 到 1,240 的動畫計數器，並加上一個從到期日欄位指向條款預覽的箭頭」，Clevera 就會在現有影片上建立動畫圖形。編輯器的疊加層清單中不包含專用的箭頭或計數器，因此這是處理這類需求的途徑。
對已發布的 Clevera 影片進行文字、突顯與模糊處理的編輯，會自動更新所有託管連結與嵌入內容，因此重新命名的按鈕標籤只需修正一次。但新的 UI 仍需新的錄影素材。
最適合： 每週製作操作導覽，但沒有專職編輯的產品、支援與行銷團隊。取捨： AI 錄影工具 僅能擷取公開的 https 網站與網頁應用程式，因此桌面軟體與內部網路的錄影需來自桌面應用程式或上傳。關於不適合的任務，請參閱下一節。
Clevera 自動完成與未完成的部分
2026 年 10 月，我們使用 Clevera 的 AI 錄影工具擷取了一段 demo 待辦事項應用程式的操作，共 0:58 的原始素材，並將其轉為教學影片。約 50 秒後消耗 9 點點數，時間軸上已包含開場卡、Logo 揭示與 1.5 倍及 1.8 倍的自動縮放，並剪輯至 0:40。這完成了拍攝清單中的標題卡與縮放列。標註、步驟計數器與箭頭則未包含在內；這些需要由你手動新增。
接著，我們對同一段錄影執行「已設定風格以供分享」，並使用我們的團隊模板而非內建的「預設」。過程約 25 秒且消耗 0 點點數。輸出長度為 1:07，因包含開場卡而比原始素材長，具備兩次 1.8 倍自動縮放，且編輯器開啟在「風格」面板，可調整背景、邊距、圓角與游標。錄影頁面本身看起來較為黯淡且對比度低；「風格」面板僅能為素材加上外框，無法修復畫質。
1:07 的「已設定風格以供分享」版本，未經編輯，消耗 0 點點數。
至於簡要說明途徑，我們使用自訂簡要說明在約 7 到 8 分鐘內建立了一支 1:00 的 動畫資訊圖表，包含一個填滿進度條，消耗 86 點點數。數字正確，但它忽略了簡要說明中設定的 15 秒（長度需在「格式」選單設定），且來源行在手機上顯示太小。該片段是從零開始建立的。我們尚未測試將圖形疊加在現有錄影上的效果。
Clevera 根據簡要說明產出的 1:00 動畫資訊圖表，未經編輯。
何時值得聘請動態設計師
AI 編輯器與模板涵蓋了本指南中的圖形需求。但它們無法取代動態設計師來處理以下項目：
- 產品發表主打影片或品牌形象影片，每一幀都需要藝術指導，且動態本身即是訊息傳遞的核心。
- 移動畫面上的追蹤圖形，例如在手持拍攝中跟隨手機移動的標籤。
- 3D、角色動畫或自訂動態插畫。
- 你的模板系統。 設計師花一週時間在 After Effects 或 Fusion 中建立你的下三分之一版面、標題卡與 Logo 揭示，這將在團隊後續製作的每一支影片中發揮效益，適用於任何支援模板的工具。
常見的分工方式：由設計師負責系統與旗艦發表影片，AI 工具或模板編輯器則用於每週的操作導覽。
從縮放開始
如果你的下一次螢幕錄影只能新增一項功能，請選擇在點擊前 0.5 秒進行縮放。這能解決產品影片中最常見的抱怨：「我看不到你點了哪裡」。本指南中的其他所有圖形，都是建立在「將觀眾視線引導至旁白所指之處」這一習慣之上。
