建立產品展示影片
製作一個連貫的產品故事,讓它感覺是由真人操作的。偏好錄製真實的介面,並只添加必要的呈現層來提升清晰度。
選擇剪輯版本
- 使用 1920×1080 以 30 或 60 fps 製作適合儲存庫、登陸頁面或詳細工作流程的影片。
- 使用 1080×1350 製作 4:5 的社群貼文剪輯,以及 1080×1920 製作直式的限時動態/連續短片。
- 預設完整工作流程的長度為 45–90 秒,社群預告則為 8–15 秒。
- 為實質上不同的長度建立獨立的剪輯版本;不要只是單純加快長版本的播放速度。
建構故事
在開始製作前,先檢查應用程式、可用的素材、現有的腳本和品牌風格。撰寫一個簡短的節奏表,包含:鉤子、問題、行動、可見結果和行動呼籲。每個節奏只保留一個有意義的動作。讓重要的狀態停留足夠長的時間,以便能夠被閱讀。
對於完整的工作流程,展示人類的意圖、代理的行動、審查後的結果以及最終的解決方案。對於預告片,則以結果開頭,並只使用能證明這個結果的最低限度 UI。
模擬人類互動
在實作指標、打字或鏡頭動畫之前,請閱讀 motion-language.md。使用 human-motion.mjs 來產生確定性的指標路徑和打字時間軸,然後將其輸出改編到錄製工具中。
套用以下要求:
- 在單一場景內保持游標位置連續。絕不要在可見的動作之間瞬間傳送游標。
- 沿著一條略微彎曲的路徑移動,包含加速、減速和一個小的最終修正。
- 根據距離和目標大小調整移動持續時間。避免使用全域統一的游標速度。
- 到達目標後短暫暫停,然後執行指針按下動作並顯示點擊漣漪效果,最後才執行點擊。
- 逐字元打字,並帶有變化延遲,在空格和標點符號處暫停稍長。
- 每當文字欄位獲得焦點時,顯示一個閃爍的插入游標,包括在打字前、打字中和打字後的暫停期間。
- 避免使用合成的打字錯誤,除非它們有助於故事的呈現。
- 在困難的場景切換時,如果無法保持游標位置的連續性,則應淡出游標。
錄製與合成
當需要瀏覽器自動化時,使用 Playwright 技能。以最終目標解析度或更高的解析度進行錄製。偏好使用真實的應用程式、真實的版面配置和真實的狀態轉換,而不是重新建立的模型。如果必須建立階段性環境,請清楚保留產品的視覺識別。
使用剋制的鏡頭移動:
- 平移或縮放以引導注意力,而不是僅僅為了增加動感。
- 對一個穩定的鏡頭容器進行動畫處理;不要獨立地轉換多個頁面子元素。
- 保持固定的轉換原點,並從當前渲染的轉換狀態繼續,以防止跳躍。
- 緩入和緩出縮放,在目標位置停留,並為返回動作提供其自身的緩動。
- 避免同時讓鏡頭、游標和主要 UI 元素朝相互競爭的方向移動。
- 將文字覆蓋層保持在安全邊距內,並且在沒有音訊的情況下也能閱讀。
- 以與產品視覺語言一致的方式為字幕和進度指示器添加動畫。
編碼
優先使用 H.264 MP4 格式,搭配 yuv420p 和 faststart 設定,以獲得廣泛的播放支援。保留高解析度的母版檔案,並從中衍生出較小的傳遞版本。保持文字清晰,並避免在 UI 邊緣周圍進行過度壓縮。
審查與迭代
檢查完整影片,而不僅僅是第一幀。提取一份接觸表,以及每個點擊、轉場、縮放端點、文字輸入完成和最終行動呼籲處的關鍵影格。檢查:
- 游標移動感覺有目的性但並非完美;
- 每個點擊都有可見的回饋並且落在目標上;
- 指針速度和打字節奏自然變化;
- 插入游標在獲得焦點的文字欄位中閃爍;
- 縮放在開始、焦點停留、反轉和結束點都保持連續;
- 標籤的顯示時間足夠長以至於可讀;
- 沒有游標、工具提示、模態框或字幕被剪裁;
- 轉場保持空間連續性;
- 尺寸、持續時間、編碼器和檔案大小與所選的剪輯版本相符。
在交付前修改任何過於急促的動作。提供最終影片、海報幀、持續時間、尺寸以及本地或儲存庫路徑。僅在要求時才更新儲存庫文件。