鏡頭構圖

安排畫面框架與移動攝影機：網格系統、安全區域、焦點層級、負空間、視差分層，以及佈局如何引導視線隨時間流動。產出構圖筆記、圖層結構（背景/中景/前景）以及附有數字的具體攝影機運鏡計畫。

使用時機

定義畫面佈局、焦點與負空間。
規劃元素進出場方向與運動路徑。
設計攝影機推/拉、平移、跟隨與視差運鏡。
將同一構圖適應於16:9、9:16和1:1比例並保留安全區域。

決策樹

你在安排什麼？
├─ 靜態畫面的佈局
│   └─ 設定網格 → 在三分線交點放置一個焦點
│      → 排序層級（大小>對比>色彩>位置）→ 保留負空間
├─ 元素進出方向
│   └─ 遵循閱讀方向；最近邊緣；進場緩出，出場緩入
│      （新內容 → 從右方/下方進入；返回/復原 → 反向）
├─ 深度感 / 攝影機運鏡
│   └─ 拆分為背景/中景/前景（三個運動圖層）
│      → 每個節拍只有一個攝影機運鏡（推 | 平移 | 跟隨 | 視差），緩入緩出
└─ 同一構圖適應不同比例（16:9 / 9:16 / 1:1）
    └─ 以16:9為主，焦點放在中央帶狀區域 → 針對9:16重新堆疊（非裁切）
       → 將關鍵內容保留在標題安全邊距內

交叉參考 — 應用共享框架。 此技能是 animation-principles 的空間部分。請明確應用它們：

1/3 規則（animation-principles）有兩種形式，此技能在空間上均會使用：(a) 構圖三分法 — 將焦點置於三分線交點（33%/67%）；(b) 距離 — 沒有任何元素在未經中間關鍵影格或縮放/透明度變化的情況下移動超過畫面約1/3，確保進場保持可讀性。
三層運動（animation-principles：主要 / 次要 / 環境）直接映射到深度：前景 = 主要（視線追隨的運動），中景 = 次要（主體 + 支援反應），背景 = 環境（緩慢、低對比的生機）。視差速度隨此角色調整。
在為攝影機運鏡編號之前，先確定三大支柱（情感意圖 / 視覺敘事 / 動態工藝）與選定的動作個性（motion-art-direction）— 高級感需要緩慢長推，活力風格需要快速甩鏡。

核心工作流程

1. 建立網格

網格提供對齊與節奏。預設為12欄網格，適用於橫向網頁/影片（可均分為二、三、四、六），包含欄間距與外邊距。以1920px寬的畫面為例：外邊距80-120px，12欄，欄間距24-32px。

content_width = frame_width - 2 * margin
column_width  = (content_width - (cols - 1) * gutter) / cols

範例（1920寬，邊距100，欄間距24，12欄）：內容1720，欄寬 = (1720 - 11*24)/12 = 121.3px。

基線網格（垂直節奏）以8px為標準間距單位；所有尺寸與間距均以8的倍數（8/16/24/32/48/64）呈現，以達成視覺和諧。

2. 放置焦點

使用三分法則：將畫面分為3x3網格；將主要主體置於三分線或交點（「力量點」）上，而非正中央 — 除非作品刻意運用對稱來表現寧靜/正式。交點大致落在水平和垂直方向的33%/67%位置。

依此優先級建立視覺層級以引導視線：大小 > 對比 > 色彩 > 位置。最大、對比最高的元素最先吸引注意力。每個畫面只建立一個主要焦點；次要元素予以支援，而非競爭。

3. 運用負空間作為節奏

不要填滿畫面。在焦點周圍保留充裕的負空間，使其顯得高級且有自信，並為運動提供呼吸空間。留白是主動的構圖元素，而非剩餘空間。

4. 分層場景（背景 / 中景 / 前景）以產生深度與視差

將構圖拆分為深度圖層：背景（最慢、對比最低，通常去飽和/模糊）、中景（主體）、前景（最快，經過時可能模糊）。視差 = 以不同速度移動圖層來模擬深度。

這些深度圖層就是 animation-principles 投影在Z軸上的三層運動——每個圖層的角色決定了它的速度、對比以及獲得的運動量：

深度	運動層	視差速度	對比/焦距	內容
背景	環境	0.1–0.3倍	低，通常去飽和/模糊	天空、漸層、紋理、場景布置
中景	次要	0.5–0.7倍	中等；支援主體	主體的環境、支援元素
前景	主要	1.0–1.5倍	主體清晰；前景道具穿越時模糊	主角 + 最近的配件

前景速度可能超過1.0倍以顯得非常接近。主要運動是視線追隨的運動；切勿讓兩個圖層競爭主要運動。

5. 攝影機語言（適用於2D和3D）

推 / 拉 — 向主體縮放或遠離（Dolly）。營造親密感或揭露背景。800-2000毫秒，緩入緩出。
平移 / 俯仰 / 移動 — 在場景中平移畫面。揭示空間、跟隨動作。
跟隨 — 保持移動中的主體在畫框內（通常稍微偏離中心，領先運動方向）。
視差 — 分層移動，營造深度感。

一次鏡頭，一個意圖。 不要同時推 + 平移 + 旋轉——組合運鏡會顯得混亂。選出服務該節拍的單一運鏡。內嵌時機要點：攝影機運鏡使用緩入緩出（cubic-bezier(0.65, 0, 0.35, 1)）；切勿使用 linear，除非是連續循環；越慢越有電影感。

6. 進出場方向傳達意義

遵循閱讀方向（在LTR語言環境中為從左到右、從上到下）的運動感覺自然流暢；反向則會產生張力或表示「返回/復原」。將方向與意圖匹配：

新內容到達 -> 從右方 / 從下方進入。
關閉 / 返回 -> 向右或向下退出，或反轉進場方向。
深入鑽研 -> 放大 / 推入。

元素通常應從最近的畫面邊緣進出，進場時略帶超調（緩出），出場時加速（緩入）。

7. 安全區域與多比例適應

將所有關鍵內容（文字、標誌、人臉、行動呼籲按鈕）保留在標題安全邊距內，避免被平台UI裁剪或遮擋。

比例	用途	標題安全邊距	備註
16:9	YouTube、網頁主視覺	~5% 各邊	傳統廣播安全邊距為10%
9:16	Reels、TikTok、Stories	頂部 ~12-14%、底部 ~18-20%、側邊 ~6%	平台UI佔用頂部和底部
1:1	動態牆貼文	~6-8% 各邊	對稱
4:5	動態牆貼文（較高）	~6% 側邊、~8% 頂底	最大化貼文版面空間

將焦點設計得夠居中，使其在所有裁切中都能存活，然後讓次要元素按比例重新排列。對於16:9 -> 9:16，應將水平排列垂直重新堆疊，而非直接裁切兩側。

實際範例

良好範例 — 產品主視覺，16:9 → 9:16

簡報：應用程式啟動主視覺，高級個性，必須同時適用於網頁主視覺和Reel。

網格：1920×1080，邊距100，欄間距24，12欄。手機模型佔欄7–11（右側力量欄）。

焦點：手機螢幕位於右側三分線交點（1280, 360）— 非居中。只有一個焦點；標題（欄1–5）為次要，對比較低。

深度（三層運動）：背景 = 柔和漸層漂移，0.2倍，環境。中景 = 手機模型，0.6倍，次要舞台。前景 = 一個失焦的UI晶片飄過，1.2倍 + 3px模糊，作為主要深度線索。

攝影機：單一推入，縮放1.0→1.10，持續1600毫秒緩入緩出，變換原點位於手機螢幕 — 符合高級感（緩慢、無超調）。未添加平移。

9:16適應：重新堆疊 — 標題移動到手機上方，手機上移至上中位置，以避開底部19%的CTA/導航區域，字體放大+20%。焦點因起始於中央帶狀區域而在裁切後存活。

成功原因：一個焦點、指定深度角色、一個攝影機運鏡、安全區域感知的重新排列，而非盲目裁切。

反模式 —「所有東西都居中、所有東西都在動」的畫面

手機模型死置中央，標題居中在上，標誌居中在下 → 三個元素在同一軸上競爭，無層級、無力量點。

所有三層以相同1.0倍速度向左滑動 → 無視差、無深度，看起來就像「整個模板移動了」（違反1/3規則/距離：全寬滑動無中間關鍵影格）。

攝影機同時推 + 平移 + 輕微旋轉 → 混亂、無單一意圖。

9:16透過裁切16:9兩側來實現 → 標題和標誌被裁切，手機過低被導航欄遮擋。

修正：選定一個焦點力量點，為每個圖層指定深度角色 + 不同的視差速度，使用一個攝影機運鏡，並為垂直比例重新堆疊而非裁切。

常見錯誤

症狀	原因	修正
畫面感覺扁平 /「模板移動了」	所有圖層以相同速度移動；無深度角色	為背景/中景/前景分配環境/次要/主要角色 + 0.2/0.6/1.2倍視差
視線不知該看哪裡	2個以上元素大小/對比相等，全部居中	在三分線力量點上設定一個焦點；排序大小>對比>色彩>位置
攝影機運鏡顯得混亂	推 + 平移 + 旋轉組合	每個節拍只用一個運鏡；選出服務意圖的那一個
在手機上內容被裁切	專為16:9設計，裁切至9:16	垂直重新堆疊；將關鍵內容保留在標題安全邊距內（9:16頂部13% / 底部19%）
進場感覺像「滑入」，而非「事件」	元素在一次連續移動中移動超過畫面1/3	用中間關鍵影格打斷，或將移動與縮放/透明度配對（1/3規則，距離）
看起來廉價 / 擁擠	畫面從邊到邊都填滿	在焦點周圍保留負空間；它是主動元素
運動與故事衝突	在決定意圖之前先選擇數值	先確定三大支柱 + 動作個性，再為運鏡編號

交付成果 — 構圖計畫

一個良好的構圖計畫應交給實作技能（gsap-web、remotion-video、after-effects），並包含：

畫面規格：比例、解析度、幀率、網格（欄數/邊距/欄間距）、基線單位。
焦點：在三分線力量點上的座標（px或%）+ 每個元素的層級排序。
圖層映射：每個元素被指定為背景/中景/前景 → 環境/次要/主要，附帶視差速度。
進出場：每個元素 — 邊緣、方向、緩動系列，以及移動是否超過1/3（以及如何打斷）。
攝影機運鏡：單一運鏡、其屬性 + 從→到數值、持續時間、緩動、變換原點。
安全區域：每個目標比例的標題安全邊距 + 垂直比例的重新堆疊計畫。
交叉引用：哪個動作個性與哪些支柱決策驅動了時機。

完成前 — 檢查清單

僅一個主要焦點，位於三分線力量點（或刻意對稱）。
層級已排序（大小 > 對比 > 色彩 > 位置）；次要元素不競爭。
焦點周圍保留負空間。
每個元素已指定深度圖層（背景/中景/前景 = 環境/次要/主要）並附帶視差速度。
一個攝影機運鏡，未疊加；已使用緩動（非 linear，除非是循環）；英雄運鏡800–2000毫秒。
進出場使用最近邊緣、遵循閱讀方向、進場緩出 / 出場緩入。
無任何元素在未經中間關鍵影格或縮放/透明度變化的情況下移動超過畫面1/3。
對於每個目標比例，關鍵內容都在標題安全邊距內；垂直比例為重新堆疊，而非裁切。
在選定任何數值之前，已確定動作個性 + 三大支柱。

快速參考

需求	預設值
網格	12欄，8px基線，8的倍數間距
焦點放置	三分法力量點，非正中央
層級順序	大小 > 對比 > 色彩 > 位置
深度圖層	背景 / 中景 / 前景，視差 0.2倍 / 0.6倍 / 1.2倍
攝影機	一次一個運鏡，緩入緩出，800-2000毫秒
進場 / 出場	遵循閱讀方向；進場緩出，出場緩入
9:16安全區域	頂部12%，底部18%，側邊6%

參考檔案

references/camera-and-grids.md — 帶有實際數字的網格計算、每個比例的完整安全區域百分比表格、視差分層程式碼（CSS滾動 + JS指標 + Three.js），以及具名攝影機運鏡配方（推入、甩鏡、環繞、Dolly Zoom）與關鍵影格數值。

shot-composition