發布影片與視覺素材
此技能涵蓋產品發布所需的視覺與影片資產製作。這些是你將創作出的影響力最高的資產 — 一部出色的展示影片或 GIF 能抓住眾人目光、比文字更快傳達價值，並被廣為分享。而一部糟的影片則會讓產品看起來混亂或粗糙，直接削弱發布效果。
媒體資產層級
對於大多數發布，決定要創建什麼應遵循以下順序：
- 展示影片 — 在情境中展示產品運作。最適合解釋某項功能如何運作。
- 動畫 GIF 或螢幕錄製循環 — 較短，可在社交媒體上自動內嵌播放。最適合展示特定互動。
- 附註解的螢幕截圖 — 靜態、製作快速，適合展示特定狀態或功能。
- 圖表或插圖 — 用於架構、概念或無法截圖的內容。
一般原則：當流程重要時使用影片；當單一互動能傳達價值時使用 GIF；當特定狀態是重點時使用螢幕截圖。
展示影片
各平台長度建議
| 平台 | 目標長度 | 硬性上限 |
|---|---|---|
| Product Hunt | 60-90 秒 | 3 分鐘 |
| 登陸頁面主視覺 | 60-90 秒 | 2 分鐘 |
| X/Twitter 嵌入式 | 30-45 秒 | 2 分 20 秒 |
| 45-90 秒 | 10 分鐘 | |
| YouTube (完整展示) | 3-5 分鐘 | — |
平台的硬性上限不只是技術限制 — 超過後互動率會急遽下降。一部 4 分鐘的 Product Hunt 影片實際上等於沒有影片。
腳本結構 (短版展示)
請將內容控制在 5-7 個節拍：
- 問題 (5-10 秒) — 陳述要解決的問題。一句話即可。不需要冗長的鋪陳。
- 介紹解決方案 (5-10 秒) — 說出產品名稱與核心價值主張。
- 展示：主要路徑 (30-60 秒) — 完整展示主要使用案例。這是影片的核心。
- 關鍵功能 (10-20 秒) — 2-3 個快速剪輯展示次要功能。節奏要快。
- 佐證點 (5-10 秒) — 一個數據、客戶見證或基準。一個投影片或旁白即可。
- 行動呼籲 (5 秒) — 一個動作。「前往 [URL] 免費試用」或「在 [URL] 註冊」。
應避免：冗長的開場、動畫 Logo (觀眾會點擊離開)、緩慢的產品啟動畫面，以及任何未展示產品實際運作的內容。
錄製技巧
- 使用展示環境，而非生產環境。 使用乾淨的數據，沒有尷尬的客戶資訊，狀態穩定可靠。
- 放慢刻意操作的動作。 當你以有意識而非一般工作速度移動時，人們更容易跟上游標軌跡。
- 以目標解析度的 2 倍錄製。 以 2880×1800 或 1440×900 (Retina) 錄製，然後縮小輸出。這能提供裁切空間並使畫面更銳利。
- 隱藏所有不相關的內容。 關閉 Slack 通知、隱藏瀏覽器書籤列、使用乾淨的瀏覽器設定檔。錄製中的干擾會削弱信任感。
- 多錄一些，備而不用。 錄製完整的操作流程，後製時再剪輯。這比因為漏掉某個步驟而重錄要快得多。
旁白 vs. 無聲
兩者皆可行。選擇取決於情境：
- 有旁白：更溫暖、更具解釋性，在 YouTube 和登陸頁面上效果較佳。需要乾淨的錄音環境和良好的音質。糟糕的音質比沒有聲音更糟。
- 無聲搭配文字疊加：在自動播放且靜音的環境中效果更好 (社交媒體資訊流)。製作更快。需要清晰的螢幕標籤。
如果無法決定：先無聲錄製展示，在關鍵時刻加上文字疊加，然後根據平台決定是否加入旁白。
工具
- 螢幕錄製：Loom (快速)、Screen Studio (輸出精美，適合行銷)、QuickTime (原始)、OBS (完全控制)
- 影片剪輯：CapCut (快速、簡單)、DaVinci Resolve (專業、免費)、Final Cut Pro、Adobe Premiere
- 動態設計 / Logo 動畫：After Effects、Motion (Mac)、Jitter (網頁版)
- 字幕：Descript (也可按逐字稿剪輯)、Captions app、Rev
- 程式化影片：Remotion (基於 React — 請見下方章節)
使用 Remotion 製作程式化影片
對於快速發布、不想每次都等待動態設計師的團隊，程式化影片讓你可以編寫 React 元件並將其渲染為 MP4 檔案。影片即程式碼：可版本控制、可參數化、且無需時間軸編輯器即可迭代。
何時使用程式化影片
適合用於：
- 社交媒體的發布預告短片 (15-45 秒)
- 展示 UI 操作的產品導覽影片
- 帶有文字疊加和螢幕截圖的功能精華影片
- 數據驅動的影片 (基準比較、成長指標)
- 將在不同發布中重複使用的模板化影片 (只需更換內容)
較不適合用於：
- 需要複雜動態設計的電影級品牌影片
- 包含實拍畫面的創辦人故事影片
- 需要大量自訂插圖或 3D 的影片
對於重大的 Tier 1 發布，你可以結合不同做法：使用程式化影片製作社交媒體短片，並聘請專業動態設計師製作主視覺影片。
Remotion 設定
npx create-video@latest my-launch-video
cd my-launch-video
npm start # 開啟 Remotion Studio 進行預覽
關鍵概念：
- Composition：一個影片就是一個 React 元件，具有定義的持續時間 (幀數) 和幀率
- useCurrentFrame()：回傳目前幀數的 Hook — 用它來驅動動畫
- Sequence：一個將其子元件在時間上偏移的元件 — 用它來安排場景順序
- spring()：用於產生自然動態效果的動畫工具函式 (緩入/緩出)
- Assets：圖片、螢幕截圖和音訊放在
public/資料夾中
場景規劃模板
在編寫程式碼前，逐一規劃影片場景：
| 欄位 | 描述 |
|---|---|
| 場景編號 | 順序數字 |
| 時長 | 秒數 (例如 "3s") |
| 目的 | 此場景要傳達的訊息 (一句話) |
| 文字內容 | 螢幕上顯示的準確文字 |
| 視覺元素 | 螢幕截圖、圖示、程式碼片段、圖表 |
| 動畫風格 | 淡入、從左側滑入、打字機效果、放大等 |
| 轉場方式 | 此場景如何結束 (淡出、切換、滑出) |
程式碼模式
安排場景順序：
<Sequence from={0} durationInFrames={90}>
<HookScene />
</Sequence>
<Sequence from={90} durationInFrames={120}>
<DemoScene />
</Sequence>
<Sequence from={210} durationInFrames={90}>
<CTAScene />
</Sequence>
文字顯現：
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
return <h1 style={{ opacity }}>您的核心價值主張在此</h1>;
迭代工作流程
- 使用上述模板規劃場景
- 收集素材 — 螢幕截圖、Logo、產品圖片 → 放入
public/資料夾 - 編寫或提示產生初稿 — 確保結構和內容正確
- 在 Studio 中預覽 — 完整觀看，記錄時間點和視覺問題
- 迭代 — 調整時間、動畫和內容。通常需要 2-4 輪
- 渲染 —
npx remotion render src/index.ts MyComposition out/video.mp4 - 檢查平台規格 — 確認解析度和檔案大小符合目標平台要求
GIF 與短循環
GIF 在大多數平台上會自動播放，非常適合展示單一互動 — 例如 UI 狀態變化、CLI 指令輸出、API 回應。它們製作起來比影片快，且在社交貼文中通常更有效。
何時使用 GIF 與影片
使用 GIF 時機：
- 整個價值能在 3-8 秒內傳達
- 你展示的是單一 UI 互動，而非一個工作流程
- 素材將嵌入在 Twitter 貼文或 README 中，而影片播放較不可靠
使用影片時機：
- 價值需要情境脈絡 (問題 → 解決方案)
- 互動需要超過 8 秒才能展示
- 你需要音訊
錄製 GIF
- 以 2 倍解析度擷取，縮小至目標解析度
- 保持低於 5MB 以確保網路效能 (使用色板縮減或減少幀數)
- 無縫循環 — 起始和結束狀態應匹配，使循環不會產生突兀感
- 工具選項：CleanShot X (Mac 推薦)、Kap、Giphy Capture、Gifski (用於轉換影片短片)
最佳化 GIF 檔案大小
- 減少顏色色板 (許多 UI 錄製從 256 色降至 128 或 64 色即可)
- 減少幀數 (在 UI 錄製中，30fps → 15fps 幾乎察覺不出差異)
- 積極裁切 — 只顯示變化的部分，而非整個螢幕
- 在平台支援時，將 GIF 轉換為帶有自動播放/循環功能的 MP4 (MP4 比同等 GIF 小約 10 倍)
螢幕截圖
螢幕截圖在發布中常被低估。一張構圖良好且附有清晰註解的螢幕截圖，比一段文字能更快地傳達功能。
構圖
- 在有意義的狀態下展示產品 — 不要是空白畫面、載入狀態，或填滿難以看清功能的假資料畫面
- 使用乾淨的環境 — 沒有分頁的瀏覽器、一致地應用深色或淺色模式、沒有可見的個人資料
- 突顯相關區域 — 使用說明框、箭頭或高亮來引導注意力到重點
註解工具
- CleanShot X (Mac) — 在同一個流程中完成擷取、註解和匯出
- Skitch — 簡單的註解
- Figma / Sketch — 用於更精緻、帶有自訂樣式的產品展示圖
瀏覽器框架
對於網頁產品，使用瀏覽器框架讓螢幕截圖看起來經過設計，而非原始畫面。可以使用 Screely、Browserframe 或自訂的 Figma 模板來添加瀏覽器外框。
功能展示區的多張截圖
登陸頁面和 Product Hunt 畫廊通常需要 3-5 張展示產品不同面向的截圖。將它們作為一組來規劃：
- 每張截圖展示一個不同的功能
- 一致的視覺處理 (相同的縮放等級、相同的瀏覽器主題、相同的註解風格)
- 講述一個進程：進入 → 關鍵操作 → 結果
依發布層級的素材檢查清單
第一級
- 展示影片 (60-90 秒，適用於 Product Hunt 和登陸頁面)
- 社交媒體短片 (同一次錄製的 30-45 秒版本)
- 3-5 張附註解的螢幕截圖 (用於登陸頁面和 Product Hunt 畫廊)
- 1-2 個社交貼文用 GIF (展示關鍵互動)
- 部落格文章和社交連結預覽用的 Open Graph 圖片
第二級
- 1-2 個 GIF 或短螢幕錄影
- 2-3 張登陸頁面區塊用的螢幕截圖
- Open Graph 圖片
第三級
- 1 張螢幕截圖
- 可選：如果變更是視覺性的，可製作一個短 GIF
Open Graph 圖片
每個以連結形式分享的內容 (部落格文章、登陸頁面、更新日誌) 都應有自訂的 Open Graph (OG) 圖片。OG 圖片是當連結貼到 Twitter、Slack、iMessage 或 LinkedIn 時會顯示的圖片。
- 尺寸：1200×630px
- 內容：產品名稱 + 核心價值主張。將它視為一個看板 — 在小尺寸下也要可讀
- 一致性：使用模板，讓所有發布內容具有統一的視覺風格
- 工具：Figma 模板、Vercel OG (程式碼生成)、Bannerbear (自動化)
各平台影片規格
| 平台 | 解析度 | 最長長度 | 格式 | 備註 |
|---|---|---|---|---|
| X/Twitter | 1280×720 或 1920×1080 | 2:20 | MP4 (H.264) | 自動播放時靜音 — 請加上字幕 |
| 1920×1080 | 10 分鐘 | MP4 (H.264) | 正方形 (1080×1080) 在資訊流中效果良好 | |
| Product Hunt | 1920×1080 | 90 秒 | MP4 | 保持低於 50MB |
| 網站主視覺 | 1920×1080 | 無限制 | MP4/WebM | 考慮使用自動播放循環 (無音訊) |
配套技能
- launch-strategy — 決定發布層級需要哪些素材
- launch-tweet — GIF 和影片會附加在推文中 (作為附件，而非連結)
- launch-landing-page — 展示影片和螢幕截圖會放在頁面上
- launch-distribution — 各平台的格式要求