07 · HTML 影片與動效短片

速覽

產出	動效短片，可匯出 MP4
用時	1 到 3 小時
型別	「Video」
難點	分鏡，不是渲染

什麼時候用這個

HTML 影片是用程式碼驅動的，所以它的適用範圍很明確：

適合	不適合
產品功能演示	任何實拍素材
資料視覺化動畫	需要真人出鏡
釋出短片	複雜的剪輯節奏
更新日誌影片	需要音效設計的片子
介面操作演示

核心優勢是能改。資料變了改一個數組，文案錯了改一行字串，然後重新渲染。傳統剪輯做同樣的事要重做那一段。

做之前：先寫分鏡

不寫分鏡直接生成，出來的一定是一堆各自漂亮但連不起來的鏡頭。

分鏡要寫清楚三件事：

鏡頭 1（0:00 - 0:03）
畫面：產品 logo 從模糊到清晰
文字：無
目的：建立品牌，給觀眾一個準備

鏡頭 2（0:03 - 0:08）
畫面：一個雜亂的資料夾，檔名一片混亂
文字：「找一個檔案要三分鐘」
目的：把問題說出來，讓觀眾代入

鏡頭 3（0:08 - 0:15）
畫面：游標點一下，檔案自動歸類
文字：「現在是三秒」
目的：給出對比，這是全片的核心時刻

每個鏡頭寫「目的」這一行是關鍵。沒有目的的鏡頭就是可以刪的鏡頭。

提示詞

做一個 [時長] 秒的產品短片。

分鏡：
[貼上上面那種格式的分鏡]

規格：
- 畫幅 [16:9 / 9:16 / 1:1]
- 幀率 30
- 無聲（或者：留出配樂位置，音樂我自己加）

視覺：
- 按當前設計系統的配色和字型
- 整片的動效節奏統一：入場用 ease-out，時長 400ms 左右
- 不要每個元素都動，一個鏡頭裡最多兩個運動焦點

約束：
- 所有文字必須在畫面裡停留足夠久（每個字元至少 60ms）
- 關鍵資訊不要放在畫面邊緣（可能被裁）
- 資料如果是示例，在畫面裡標註
- 轉場用同一種，不要每個鏡頭換一個

先做前兩個鏡頭，我看過節奏之後再做完。

為什麼這麼寫

「先做前兩個鏡頭」 是控制返工的關鍵。節奏對不對，看兩個鏡頭就知道。做完六個再發現整體太快，改起來是全部重來。

「一個鏡頭裡最多兩個運動焦點」 直接對應觀眾的注意力。三個東西同時動，觀眾什麼都沒看清。

「每個字元至少 60ms」 是可讀性的經驗值。一句 15 個字的文案，至少要停留 0.9 秒，實際給 1.5 到 2 秒更穩。

「轉場用同一種」 跟 PPT 工作坊第 10 步 是同一個道理：一致性比花樣重要。

驗收清單

• [ ] 每個鏡頭都能說出它的目的
• [ ] 所有文字能讀完（自己按正常速度讀一遍，讀得完嗎）
• [ ] 一個鏡頭裡沒有超過兩個運動焦點
• [ ] 轉場統一
• [ ] 關鍵資訊不在畫面邊緣
• [ ] 示例資料標註了
• [ ] 匯出的 MP4 在手機上看清楚（如果是豎版）
• [ ] 總時長符合投放平臺的要求

變體

資料驅動的動畫

用這份資料做一段視覺化動畫：

[貼上 CSV]

要求：
- 柱子從 0 長到目標值，用彈簧物理曲線
- 數字同步從 0 滾到目標值
- 所有柱子不要同時開始，依次錯開 80ms
- 結束後停留 2 秒

資料驅動是 HTML 影片最擅長的場景——資料更新了，動畫自動跟著變。

豎版社交平臺

把這個片子改成 9:16 豎版，用於社交平臺。

要求：
- 重新構圖，不要簡單裁切
- 文字加大（手機上看）
- 前 3 秒必須抓住人，把最核心的對比放在開頭
- 無聲也能看懂（多數人靜音刷）
- 時長壓到 15 秒以內

加字幕

給這個片子加字幕。

要求：
- 字幕在安全區內，不要貼邊
- 有描邊或者半透明底，保證在任何畫面上都可讀
- 斷句按語意，不要按字數
- 單行不超過 [N] 個字

常見問題

渲染很慢。

正常，影片渲染是這套流程裡最重的操作。先用低解析度預覽確認節奏，最後再出高畫質版。

節奏太快 / 太慢。

節奏問題要在分鏡階段解決。把分鏡的時間軸寫出來，自己按秒數讀一遍臺詞，讀不完就是太快。

做出來像模板。

模板感通常來自轉場——用了平臺預設的那幾種。指定具體的轉場行為（「切換時前一個鏡頭的主體先縮小退到背景，新鏡頭從這個主體的位置展開」），比用現成轉場好得多。

要配樂。

音樂單獨處理。片子做成無聲版，匯出後在別的工具里加音軌。或者在分鏡裡標註節拍點，讓畫面卡在音樂的重音上。

相關

• 進階 · 影像與影片 — 三條媒體路徑的取捨
• PPT 工作坊 · 第 8 步 — 動效的剋制原則