Cinematic Shot：用真實介面導演一支發表片

電影感鏡頭

你是導演和攝影指導，不是動態設計師。這部影片是一系列英雄鏡頭。每個鏡頭都從一個陡峭、低角度注視著產品 UI 的真實部分，近到焦平面只涵蓋一兩行文字，其他一切都融化為黑色。攝影機緩慢地向著下一個事件發生的方向漂移。UI 會自行運作：當我們觀看時，內容會被輸入、串流、選取和撰寫。沒有任何東西用字幕來解釋自己。

此技能關乎攝影機、構圖、燈光和剪輯。使用任何渲染技術堆疊來建構影片。無論你選擇什麼，都要讓每個影格成為時間的純函數，這樣影片就能確定性地渲染並可以加入動態模糊。

請參閱 references/look.md 以了解精確的攝影機、景深、燈光、揭示和文字配方。請參閱 references/shot-list-example.md 以了解鏡頭語法的完整範例。

品味

一個黑色虛空。產品像一塊黑色石板漂浮其中，向後傾斜遠離攝影機，由一盞柔和的光池照亮，跟隨任何重要的東西，讓其他一切落入黑色。攝影機位置低且近，是 沿著 UI 觀看而不是看向它，這樣文字行就會對角線地穿過影格並消失在遠方。焦平面是一條細帶：一個控制項、一行輸入、列表中的一行是清晰的，其餘則是柔和的散景。攝影機從不停止漂移，也從不快速移動。鏡頭長到足以觀察某件事情發生。唯一的顏色是產品自身的顏色。其他地方保持克制。

1. 在鏡頭之前先找到故事

在規劃任何單一攝影機之前，先寫下：

• 流程：螢幕上發生的 4 到 7 件事情，按順序排列。範例：開啟一個檢視、選取一個分頁、輸入一個提示、觀看答案串流進來、觀看文件自行撰寫、核准。
• 回報時刻：產品明顯做出非凡之事的那一個瞬間。影片的存在就是為了達到這個影格。
• 示範內容：UI 內部具體、可信的數據，例如名稱、ID、狀態、程式碼和簡短的人性化文字。真實的密度是讓特寫鏡頭美麗的原因。一個包含十二個合理問題的列表看起來像個產品；三個灰色佔位符看起來像個模型。
• 一行文案：產品或功能名稱，然後是一個五個字或更少的標語。

2. 撰寫鏡頭列表

在開始建構之前先發布鏡頭列表，然後再繼續進行：

#	剪輯點	長度	主體（焦點中的是什麼）	比例	角度	移動	動作

規則：

• 總長度：總共 45–55 秒，包含 8–10 個 UI 鏡頭，然後是文案和標誌。
• 鏡頭長度跟隨動作。 過程鏡頭（輸入、串流、文件自行撰寫、長差異比較）持續 5–9 秒。標點鏡頭（一個分頁、一個按鈕、一個導航項目）持續 2–3.5 秒。交替使用兩者，這樣一個長時間觀看後緊接著一個短暫的重音。中位數約 5 秒。
• 在動作發生時剪輯，而不是根據節拍器。 沒有節拍網格。在主體已經在影格內或即將到達時切入；動作在 0.3–0.8 秒內開始；保持結果 0.5–1 秒；在攝影機仍在移動時剪出。
• 一個鏡頭一個想法。 一個鏡頭可以包含一個短鏈（輸入 → 發送 → 回覆開始），只有當攝影機跟隨一個連續的線索時才可以。
• 像剪輯師一樣變化比例。 極致微距和微距鏡頭占主導。中景鏡頭承載較長的過程。將廣角鏡頭（整個視窗，近乎正面）保留給回報時刻，它會像釋放一樣落地。之後再回到特寫。
• 交替對角線方向。 如果一個鏡頭中的文字向右上升，下一個鏡頭的文字就向右下降，或者平面向另一邊傾斜。每次剪輯都應呈現一個新的攝影機位置。
• 沒有連續性游標。 UI 會自行運作（參見第 4 節）。觀看者永遠不需要在鏡頭之間跟隨指標。
• 不同的表面使用不同的設置。 當故事移動到另一個表面（終端機、手機、另一個應用程式）時，在同一個黑色虛空中給它自己的石板，並對它進行硬剪輯。

鏡頭比例

以 UI 在焦點的放大倍率來測量比例，相對於其原始尺寸：

比例	放大倍率	用途	景深
極致微距	5–7×	單一分頁、一個按鈕、一個導航項目、一個狀態徽章。一兩個字填滿影格的三分之一。	只有主體是清晰的。其他一切都是厚重的散景。
微距	2.5–4×	一個帶有輸入文字的編輯器、列表的幾行、一段程式碼	一個 2–4 行文字深的頻帶是清晰的
中景	1.5–2.5×	一個工作中的面板：串流進來的列表、自行撰寫的文件、帶有側邊欄的差異比較	更寬的頻帶是清晰的；遠端邊緣和近端邊緣保持柔和
廣角	0.8–1.1×	僅限回報時刻：整個視窗，近乎正面，內容滾動或變化	大致清晰；影格邊緣仍然柔化

微距鏡頭必須保持清晰。在攝影機縮放之前，以放大倍率的解析度（例如 6×）柵格化 UI。永遠不要放大 1× 的點陣圖。

攝影機角度

這是畫面的標誌。除了廣角鏡頭外，攝影機是低且傾斜的，橫跨 UI 平面觀看：

• 將平面向後傾斜 30–50°（俯仰），這樣 UI 的遠端後退，近端則逼近。
• 在傾斜之前，在同平面內旋轉它 10–20°，這樣文字行會對角線地運行。在連續的鏡頭之間翻轉符號。
• 加上一點偏航角，±5–15°，這樣影格的一側比另一側更近。
• 使用稍短的透視，使前縮效果明顯：在同一個影格中，近處文字的大小應約為遠處文字的 1.4–1.8 倍。約 0.6–0.75 倍影格寬度的透視距離效果不錯（在 1080p 下約為 1100–1400 像素）。
• 廣角鏡頭是例外：近乎正面，俯仰 8–12°，無同平面旋轉，偏航角在 ±3° 以內。
• 構圖：大膽裁切。石板的邊緣跑出影格或落入黑色。留下充足的黑色：影格的四分之一到一半通常是虛空，或是失焦到只能被視為紋理的 UI。

攝影機移動

每個鏡頭都是一個連續的移動。它是有動機的：攝影機朝著下一個將要出現的東西漂移。

• 跟隨動作的閱讀方向平移：在一個典型鏡頭中移動影格寬度的 3–10%，在沿著差異比較或文件進行長平移時可達 20–35%。
• 跟隨內容的增長：當答案向下串流時，隨之向下漂移；當一行文字被輸入時，跟隨插入符號漂移。
• 輕輕推進，在鏡頭期間產生 1–5% 的尺寸變化。拉出的情況很少見。
• 稍微轉動，在鏡頭期間產生 0.5–4° 的滾轉或偏航變化。
• 速度：恆定（線性）速度，或者在前三分之一段有一個短暫的緩慢到達，然後以緩慢的恆定漂移繼續。攝影機永遠不會緩慢到完全停止，並且在剪輯時仍在移動。沒有手持雜訊，沒有晃動。
• 跟隨動作進行焦點轉移：當注意力從輸入的文字行轉移到回覆，或從標題轉移到內文時，在 0.4–0.8 秒內將焦點帶滑到那裡。

3. 燈光和調光：一個黑色虛空

每個鏡頭看起來都必須像在同一個舞台上拍攝的。數值請參閱 references/look.md。

• 舞台：產品周圍是真正的黑色。沒有漸層背景、沒有彩色薄霧、沒有地板。
• 主體燈光：在主體上的一盞柔和、中性的光池，而不是在影格上。UI 從焦點開始，在大約三分之一影格寬度的距離內衰退為黑色。光池位於 UI 平面上，因此傾斜會使其前縮，滾轉會使其沿對角線鋪開。它沿著動作方向較長，熱點偏向離軸主光（主光側隨對角線翻轉），有時一側會被軟遮光板切掉。它比主體慢一拍，隨著焦點轉移而滑動，並在內容增長和回報時刻時張開。它永遠不是一個在每個鏡頭中都看起來一樣的居中圓形。沒有彩色主光。
• 低調：平均影格非常暗（約 7–10% 亮度）。明亮的像素保留給焦點處的文字和產品自身的彩色 UI。任何明亮且失焦的東西都會被調暗。
• 產品是一塊黑色石板：其自身的金屬質感、圓角以及面板上微弱的 1 像素邊緣高光。保持真實 UI 的原貌；不要重新設計其樣式。
• 顏色屬於產品：狀態圖示、差異比較的綠色和紅色、品牌色的主要按鈕。不要添加你自己的強調色：沒有光暈、沒有發光、沒有環圈、沒有色光。
• 後期：動態模糊（180° 快門，4+ 子影格）和最終渲染上的細緻底片顆粒。與景深一起，這三種效果完成了幾乎所有的工作。

4. 鏡頭內的動態

• 沒有游標。 UI 會自行運作。一個導航項目會高亮。一個分頁的選取指示器會滑過去。一個按鈕會壓下。一個裝訂線控制項會出現在程式碼行上，並且該行會高亮。如果必須顯示點擊，則透過控制項自身的按下或選取狀態來表現。
• 輸入：每秒 12–13 個字元，帶有可見的插入符號。程式碼識別字和檔案引用在輸入時會變成內聯標籤。在發送時，編輯器清空，訊息移動到討論串中。
• 串流：生成的文字逐行解析，從上到下。每一行以細微的點狀圖案到達，在大約 0.5 秒內凝聚成實心字形，每行之間間隔約 0.1 秒。圖示和頭像以相同的方式解析。
• 撰寫：文件和圖表按順序建構：一個標題，然後一個標題，然後段落；圖表節點，然後繪製連接線，然後標籤。
• 滾動：在中景和廣角鏡頭中，內容可以在漂移的攝影機下平滑滾動。這是第二層動態，它應該感覺像閱讀速度。
• 出現：新的面板和訊息在 0.3–0.5 秒的緩慢輸出過程中，略微帶有模糊地淡入並微微升起。沒有東西會因為過衝而彈出。
• 沒有衝擊效果。 回報時刻是透過比例（廣角鏡頭）和變化的幅度來展現，而不是透過晃動、閃光或環圈。

5. 結尾：文案，然後是靜態標誌

1. 離開最後一個 UI 鏡頭，透過硬切到黑色，或一個快速的 0.4 秒模糊變暗進入黑色。
2. 文案：在黑色背景上居中顯示的一行文字，在 1080p 下約 80–100 像素，字重 500，字距約 -0.02em，白色。它透過從約 16 像素模糊中解除模糊並在 0.6–1 秒內淡入到來。可以一次設置整行，或者先設置產品名稱，然後在同一行上附加標語，讓該行隨著增長而重新居中。文字後面微弱的柔和光暈可能會在它變清晰時消散；沒有東西橫掃過它。保持 3–5 秒。
3. 標誌：剪輯或短暫溶解（約 0.3 秒）到靜態標誌，可以是只有標記或標記和文字商標，在 1080p 下約 110–120 像素高，純白色。它不會移動、脈動或發光。保持 4–5 秒，並以它結束影片。

除非被要求，否則不要添加 CTA 按鈕、URL 卡片或「現已提供」橫幅。

6. 聲音

沒有音樂：沒有配樂、沒有嗡嗡聲、沒有節拍、沒有漸強、沒有強音、沒有音調提示。配樂是在近乎寂靜中安靜、觸覺性的擬音。

每個可見動作都有一個提示：每個輸入字元有輕柔的按鍵聲，當分頁或項目被選取時有輕柔的點擊聲，發送時有安靜的呼嘯聲，以及在串流文字下方有微弱的顆粒狀嘶嘶聲。回報時刻沒有衝擊音效。文案和標誌在寂靜中播放。

不要做的事

這些會讓影片看起來像教學或模板：

• 在動作開始前的冷開場、標題卡，或「推出…」和「全新…」畫面。
• 按鍵覆蓋層、字幕、呼叫箭頭，或解釋 UI 的標籤。
• 可見的滑鼠指標驅動動作，或在目標之間移動的游標。
• 平坦、正面的特寫鏡頭。除了廣角的回報鏡頭外，攝影機是橫跨 UI 觀看，而不是直視它。
• 所有東西都在焦點內。如果影格沒有散景，則鏡頭太廣或焦點頻帶太深。
• UI 鏡頭之間的溶解或淡入黑色。UI 鏡頭僅使用硬剪輯。
• 快速移動、緩慢的環繞、大的 3D 旋轉、俯衝飛越、攝影機晃動，或緩慢停止的攝影機。
• 剪輯到網格。連續的兩秒鏡頭看起來像精彩片段集錦；讓過程鏡頭有呼吸空間。
• 重新設計產品的 UI 使其看起來「有電影感」。保持真實 UI 的原貌，並從攝影機、焦點和燈光中獲得電影感。
• 變形光暈、發光、強調色環、彩色主光，或產品尚未擁有的任何顏色。
• 穿過影格的燈光：光澤帶、掃掠，或在 UI 上移動的光條。燈光跟隨主體；它不表演。
• 一個螢幕空間的圓形光池，居中且在每個鏡頭中都相同。它看起來像是一個帶有洞的黑色疊加層，而不是石板上的光。
• 動畫標誌揭示。
• 任何類型的音樂，包括配樂、節拍、嗡嗡聲、漸強、強音或鈴聲。

7. 像攝影指導一樣驗證

在每個鏡頭的中間、每個動作的高峰、回報時刻，以及文案和標誌影格處渲染一個靜態影格。將每個影格作為從電影中擷取的影格來評估：

• 恰好有一個清晰的主體，並且眼睛在不到半秒內落在它上面。
• 焦點頻帶很薄，具有近處和遠處的散景，廣角鏡頭除外。
• 平面看起來是傾斜的：文字對角線地運行，並明顯地縮小到遠方。
• 焦點內的文字在半解析度下清晰可讀。
• 至少四分之一的影格是黑色或接近黑色。
• 連續的鏡頭在比例或對角線方向上有所不同。
• 每個影格共享相同的黑色水準、中性光線和顆粒，但光池的形狀會隨著每個攝影機而變化：前縮、沿動作方向拉伸，並從一側照明。
• 選取最強的影格作為海報。

反覆迭代，直到每個靜態影格都可以作為發布貼文中的螢幕截圖。