shot-composition

镜头构图

安排画面并移动摄像机：网格系统、安全区域、视觉焦点层级、负空间、视差分层，以及布局如何随时间引导视线。输出构图说明、图层结构（背景／中景／前景），以及包含具体数值的摄像机运动方案。

适用场景

• 确定画面布局、视觉焦点和负空间。
• 规划元素的进入／退出方向和运动路径。
• 设计摄像机推进／拉远、摇摄、跟随和视差运动。
• 将同一构图适配到 16:9、9:16 和 1:1，并设置安全区域。

决策树

What are you staging?
├─ A static frame's layout
│   └─ set grid → place ONE focal point on a thirds power point
│      → rank hierarchy (size>contrast>color>position) → reserve negative space
├─ Where things enter / leave
│   └─ follow reading direction; nearest edge; ease-out in, ease-in out
│      (new content → from right/below; back/undo → reverse it)
├─ A sense of depth / a camera move
│   └─ split into bg/mid/fg layers (the three motion layers)
│      → ONE camera move per beat (push | pan | follow | parallax), ease-in-out
└─ One comp across aspects (16:9 / 9:16 / 1:1)
    └─ master in 16:9, focal in the center band → RESTACK (don't crop) for 9:16
       → keep critical content inside title-safe margins

交叉参考——应用共享框架。 此技能是 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. 将场景分层（背景／中景／前景），营造纵深和视差

将构图拆分为不同纵深的图层：背景（速度最慢、对比度最低，通常会降低饱和度或添加模糊）、中景（主体所在位置）、前景（速度最快，经过画面时可能会模糊）。视差 = 让不同图层以不同速度移动，以模拟纵深。

这些纵深图层就是映射到 Z 轴上的 animation-principles 三个运动层：每个图层的角色决定了它的速度、对比度和运动幅度：

纵深	运动层	视差速度	对比度／焦点	包含内容
背景	环境层	0.1–0.3x	低，通常会降低饱和度或添加模糊	天空、渐变、纹理、场景布置
中景	次要层	0.5–0.7x	中等；辅助突出主体	主体所处的环境、辅助元素
前景	主层	1.0–1.5x	主体清晰；前景道具经过时会模糊	主体 + 最近的道具

前景速度可以超过 1.0，以表现极近距离。视线跟随的是主层的运动；不要让两个图层的主运动彼此竞争。

5. 镜头语言（适用于 2D 和 3D）

• 推／拉 — 放大或缩小主体（推轨）。营造亲密感或展现环境。800-2000ms，缓入缓出。
• 平移／倾斜／移动 — 在场景中移动画面。展现空间、跟随动作。
• 跟拍 — 让移动中的主体保持在画框内（通常略偏离中心，并为运动方向留出空间）。
• 视差 — 通过分层移动表现纵深。

一个镜头，一个意图。 不要同时推镜头、平移并旋转——多种运动叠加会显得杂乱。选择最能服务当前节拍的一种运动。镜头运动的关键时序要求：使用缓入缓出（cubic-bezier(0.65, 0, 0.35, 1)）；除连续循环外，切勿使用 linear；速度越慢，电影感越强。

6. 进出方向承载含义

顺着阅读方向移动（在 LTR 语言环境中为从左到右、从上到下）会显得自然流畅；反向移动则会制造紧张感，或传达“返回／撤销”的意思。根据意图选择方向：

• 新内容出现 -> 从右侧／下方进入。
• 关闭／返回 -> 向右侧或下方退出，或反向播放进入动画。
• 深入查看 -> 放大／推近。

元素通常应从最近的画框边缘进入和退出；进入时稍微过冲（缓出），退出时加速（缓入）。

7. 安全区域和多宽高比适配

将所有关键内容（文本、徽标、人脸、CTA）放在标题安全边距内，避免被裁切或被平台 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.2x，氛围层。中景 = 手机模型，0.6x，次级舞台。前景 = 一个失焦的 UI 标签从画面中飘过，1.2x + 3px 模糊，作为主要景深提示。
• 镜头：单次推进，在 1600ms 内以 ease-in-out 从 1.0 缩放到 1.10，变换原点位于手机屏幕上——符合高端风格（缓慢，无过冲）。不添加平移。
• 适配 9:16：重新堆叠——标题移到手机上方，手机上移至中上部，为底部 19% 的 CTA/导航区域留出空间，字号 +20%。由于焦点一开始就在中间带，裁切后仍能保留。

有效原因：只有一个焦点，明确分配景深角色，只有一次镜头运动，并根据安全区域重新排布，而不是盲目裁切。

反面模式——“所有内容都居中，所有内容都在动”的画面

• 手机模型正中，标题居中放在上方，Logo 居中放在下方 → 三个元素挤在同一条轴线上，缺乏层级，没有视觉强点。
• 三个图层都以相同的 1.0x 速度向左滑动 → 没有视差，没有景深，看起来像是“整个模板都在移动”（违反 1/3 规则 / 距离：整幅画面横向滑动，且没有中间关键帧）。
• 镜头同时推进、平移并轻微旋转 → 混乱，没有单一意图。
• 9:16 通过裁掉 16:9 两侧制作 → 标题和 Logo 被裁切，手机位置过低，被导航栏遮挡。

修正方法：选定一个视觉强点，为每个图层分配景深角色和不同的视差速度，只用一次镜头运动，并针对竖屏重新堆叠，而不是裁切。

常见错误

症状	原因	修正方法
画面显得平淡 / “整个模板都在移动”	所有图层以相同速度移动；没有景深角色	为背景/中景/前景分配氛围层/次级/主要角色，并使用 0.2/0.6/1.2x 的视差速度
视线不知道该看哪里	2 个或更多元素尺寸/对比度相同，且都居中	将一个焦点放在三分线强点上；按尺寸 > 对比度 > 颜色 > 位置排序
镜头运动显得混乱	推进 + 平移 + 旋转叠加	每个节拍只做一个运动；选择最符合意图的运动
手机屏幕上的内容被裁切	按 16:9 设计，却裁切成 9:16	纵向重新堆叠；将关键内容放在标题安全边距内（9:16 时顶部 13% / 底部 19%）
入场看起来像“滑动”，而不是“事件”	元素在一次不中断的运动中移动超过画面 1/3	使用中间关键帧打断，或将位移与缩放/透明度变化结合（1/3 规则，距离）
看起来廉价 / 拥挤	画面从边到边都被填满	在焦点周围留出负空间；它是一个主动元素
动效与叙事冲突	先选数字，再确定意图	先确定三大支柱 + 动效个性，再为运动设定数值

交付物——构图方案

一份优秀的构图方案会交给实现技能（gsap-web、remotion-video、after-effects），并包含：

• 画面规格：宽高比、分辨率、fps、网格（列数 / 边距 / 间距）、基线单位。
• 焦点：三分线强点上的坐标（px 或 %）+ 每个元素的层级排序。
• 图层映射：为每个元素指定背景/中景/前景 → 氛围层/次级/主要角色，并标明视差速度。
• 入场/退场：针对每个元素，标明边缘、方向、缓动类型，以及位移是否超过 1/3（及如何打断）。
• 镜头运动：唯一的运动、运动属性 + 起始→结束值、持续时间、缓动、变换原点。
• 安全区域：各目标宽高比的标题安全边距 + 竖屏重新堆叠方案。
• 交叉引用：哪些动效个性和支柱决策决定时间安排。

完成前 — 检查清单

• 只有一个主要焦点，位于三分法的强势点上（或采用刻意设计的对称布局）。
• 层级已排序（尺寸 > 对比度 > 颜色 > 位置）；次要元素不会争抢注意力。
• 为焦点周围预留留白。
• 为每个元素指定深度层（bg/mid/fg = 环境/次要/主要），并设置视差速度。
• 一次只使用一个镜头运动，不要叠加；使用缓动（循环除外，不要使用线性缓动）；主视觉移动时长为 800–2000ms。
• 入场/退场使用最近的边缘，遵循阅读方向；入场使用缓出，退场使用缓入缓出。
• 元素移动距离不得超过画面的 1/3，除非加入中间关键帧或调整缩放/不透明度。
• 对每种目标纵横比，关键内容都应位于标题安全边距内；竖屏布局应重新排列，而不是裁切。
• 在确定任何数值之前，先敲定运动个性 + 三大支柱。

快速参考

需求	默认值
网格	12 列，8px 基线，间距采用 8 的倍数
焦点位置	三分法的强势点，而非正中央
层级顺序	尺寸 > 对比度 > 颜色 > 位置
深度层	bg / mid / fg，视差 0.2x / 0.6x / 1.2x
镜头	一次只移动一个，缓入缓出，800-2000ms
入场 / 退场	遵循阅读方向；入场缓出，退场缓入缓出
9:16 安全区	顶部 12%，底部 18%，两侧 6%

参考文件

• references/camera-and-grids.md — 网格计算示例、按纵横比划分的完整安全区百分比表、视差分层代码（CSS 滚动 + JS 指针 + Three.js），以及附带关键帧数值的命名镜头运动方案（推进、快速摇摄、环绕、希区柯克变焦）。