cinematic-shot

电影感镜头

你是导演兼摄影指导（DP），不是动态设计师。这部影片由一系列主角镜头组成。每个镜头都以陡峭的低角度近距离拍摄产品 UI 中真实的一部分，近到焦平面只覆盖一两行文字，其他一切都融化成散景。摄影机缓慢地漂向下一件即将发生的事。UI 自行呈现：输入、流式输出、选择和写入都在我们眼前发生。没有任何字幕来解释画面。

这项技能关注摄影机、构图、灯光和剪辑。可使用任何渲染技术栈来制作影片。无论选择什么方式，都要让每一帧都是时间的纯函数，这样影片才能确定性地渲染，并支持运动模糊。

同一台摄影机也能拍静帧：以相同风格拍摄 UI 的单张照片，用作主视觉图、发布帖、社交卡片或海报。当用户要图片而不是影片时，先阅读第 10 节；其中说明了哪些方法可以沿用，以及静止画面需要做哪些调整。

阅读 references/look.md，了解摄影机、景深、灯光、揭示效果、字体和静帧的具体方案。阅读 references/shot-list-example.md，查看镜头语法和静帧集的完整示例。

风格取向

产品像一块石板般悬浮在舞台上，背向摄影机倾斜，在重要之处柔和受光。摄影机位置低、距离近，沿着 UI 的方向观看，而不是正对 UI，因此文字行斜穿画面，并向远处逐渐缩小。焦平面是一条窄带：一个控件、一行输入内容或列表中的一行清晰锐利，其余部分则化为柔和散景。摄影机始终缓慢漂移，从不停下，也不快速移动。镜头足够长，让观众能看清发生了什么。画面中唯一的色彩来自产品本身，其他一切都应克制。

舞台有两种，由产品的真实主题决定（第 2 节）：

• 暗色舞台：黑色虚空。一块深色石板，柔和的光池随着重要内容移动，其他部分则隐入黑暗。
• 浅色舞台：高调影棚。一块白色石板置于暖调浅灰地面上，两者之间有柔和的投影分隔；主体受到柔和的主光照射，不会有任何部分沉入黑暗。白色背景下，散景会变成柔和的光雾。

1. 先找到故事，再规划镜头

在规划任何摄影机动作之前，先写下：

• 流程：画面中依次发生的 4–7 件事。例如：打开一个视图、选择一个选项卡、输入提示词、观看答案逐步生成、观看文档自行写入、批准。
• 亮点：产品显著完成某件非凡之事的那个时刻。影片的目的就是抵达这一帧。
• 演示内容：UI 中具体且可信的数据，例如姓名、ID、状态、代码和简短自然的文字。真实感十足的内容能让特写更动人。十二条可信的问题列表看起来像真实产品；三个灰色占位符则像模型稿。
• 一句文案：产品或功能名称，再加一句五个词或更少的标语。

如果你录制的是用户的真实网站，而不是重新搭建的页面，就要根据真实页面实际会发生的动画（第 6 节）来构思故事，而不是依据重建页面可以伪造的效果。

2. 根据产品的真实主题选择舞台

在规划镜头列表之前就做出决定。“忠实呈现真实 UI”优先于“使用深色石板”。

• 产品确实有深色主题：使用暗色舞台。
• 产品只有浅色主题，或浅色主题是其主要形象：使用浅色舞台。绝不要伪造深色主题，也不要反转颜色。网站未使用的深色样式不算深色主题：如果强行启用会破坏页面（例如卡片变白、文字不可见），那产品就只有浅色主题。
• 产品同时提供两种主题：询问用户，或遵循其品牌风格。

影片中的所有镜头都使用同一种舞台。

3. 编写镜头清单

搭建前先发布镜头清单，然后继续：

#	切点	时长	主体（焦点所在）	景别	角度	运镜	动作

规则：

• 总时长：45–55 s，包含 8–10 个 UI 镜头，随后是文案和标志。
• 镜头时长跟随动作。 过程镜头（打字、流式输出、文档自行写成、较长的 diff）时长为 5–9 s。标点式镜头（标签页、按钮、导航项）时长为 2–3.5 s。长镜头后接短促强调镜头，交替安排。中位数约为 5 s。
• 跟着动作切，而不是跟着节拍器切。 没有节拍网格。主体已在画面中或即将入画时切入；动作在 0.3–0.8 s 内开始；保持结果 0.5–1 s；在镜头仍在运动时切出。
• 每个镜头只表达一个想法。 只有在镜头沿着同一条连续脉络移动时，一个镜头才可以包含一段短链（输入 → 发送 → 回复开始）。
• 像剪辑师一样变换景别。 极特写和特写为主。中景承载较长的过程。将 远景（整个窗口，接近正面）留给高潮时刻，让它像释放般呈现。之后再回到特写。
• 交替倾斜方向。 如果某个镜头中的文字向右上方倾斜，下一个镜头中的文字就向右下方倾斜，或者让平面朝另一方向倾斜。每次切换都应呈现新的机位。
• 不保留连续光标。 UI 自行操作（见第 5 节）。观众不需要跟着指针在镜头间移动。
• 不同表面要分别布景。 当故事切换到另一个表面（终端、手机、其他应用）时，在同一舞台上为其单独布置一个平板，然后硬切过去。

景别

以焦点处 UI 相对于原始尺寸的放大倍数来衡量景别：

景别	放大倍数	用途	景深
极特写	5–7×	单个标签页、按钮、导航项或状态徽标。一两个词占据画面的三分之一。	只有主体清晰，其他部分都呈现强烈的散景。
特写	2.5–4×	正在输入一行文字的编辑框、列表中的几行内容、代码块	2–4 行文字深度的一条区域清晰
中景	1.5–2.5×	正在工作的面板：流式呈现的列表、自动写成的文档、带侧边栏的 diff	更宽的区域清晰；远端和近端仍然柔焦
远景	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 px）。
• 远景例外：接近正面，俯仰角 8–12°，平面内无旋转，偏航角在 ±3° 以内。
• 取景：大胆裁切。在深色舞台上，平板边缘延伸到画面外或隐入黑暗；画面中常有四分之一到一半是留白，或是严重虚焦、看起来像纹理的 UI。在浅色舞台上，平板边缘延伸到画面外，或显示为页面本身的边缘及其投在地面上的阴影；裁切边缘绝不能露出（参见 references/look.md 中的浅色舞台）。

摄影机移动

每个镜头都是一个连续的移动。移动有动机：摄影机朝着下一个即将出现的内容缓缓移动。

• 横移：沿动作的阅读方向移动；典型镜头移动画面宽度的 3–10%，沿差异对比或文档长距离平移时最多移动 20–35%。
• 跟随：随着内容增长而移动；答案逐行向下流动时，摄影机跟着向下移动；输入一行文字时，摄影机跟着光标移动。
• 缓慢推近：整个镜头内缩放变化 1–5%。拉远很少使用。
• 轻微转动：整个镜头内旋转或偏航 0.5–4°。
• 速度：保持恒定（线性）速度；或者在前 1/3 的时间内短暂缓出，随后继续缓慢匀速移动。摄影机绝不会缓至完全停下，剪切时仍在移动。不加手持噪点或抖动。
• 跟焦：跟随动作移动焦点；注意力从输入行转向回复，或从标题转向正文时，在 0.4–0.8 秒内将焦平面移到相应位置。

4. 灯光与调色

每个镜头都必须看起来像是在同一个舞台上拍摄的。两个舞台的参数见 references/look.md。

暗色舞台：漆黑虚空

• 舞台：产品周围是真正的黑色。没有渐变壁纸、彩色雾气或地面。
• 主体光：在主体上形成柔和的光区，而不是照亮整个画面。UI 从焦点开始，大约在画面宽度的 1/3 范围内逐渐融入黑色。光区位于 UI 平面上，因此倾斜会使它产生透视压缩，旋转会让它沿对角线铺展。它沿动作方向延伸得更长，热点向离轴主光方向偏移（主光侧随对角线翻转），有时一侧会被柔光旗裁切。光区会稍微滞后于主体，随跟焦滑动，并在内容增多以及效果呈现时扩大。它绝不是每个镜头里都一样的居中圆形光斑。没有彩色主光。
• 低调照明：画面平均亮度很低（约 7–10%）。亮部只留给对焦清晰的文字和产品自身带颜色的 UI。明亮但失焦的内容要压暗。
• 产品是一块深色面板：保留产品自身的镀铬装饰和圆角，以及面板上微弱的 1 px 边缘高光。

亮色舞台：高调摄影棚

• 地面：暖色浅灰，比页面略深，让白色面板从中凸显。不能是白色，也不能是黑色。
• 产品是一块白色面板：使用页面真实的视口，带圆角，悬浮在地面上。面板下方要有宽阔柔和的投影和紧贴的接触阴影，让它看起来像摄影棚中的实体。
• 主体光：不用光区遮罩，也不让任何部分融入黑色。只用柔和的主光：面板远离主体的位置最多变暗约 12%，光照沿着与暗色舞台相同的滞后、位于平面上的椭圆区域分布，但范围更宽、过渡更柔和。镜头暗角要很淡，并朝灰色渐变。不要用旗板。
• 高调照明：平均亮度预期约为 75–90%，这不是故障。页面白色接近但不达到过曝。对焦清晰的文字使用产品自身的深色墨色。在白色背景上，失焦区域不要压暗，焦外光斑应是柔和的雾状效果。

两种舞台通用

• 保持真实 UI 忠实原样：不要重新设计、改色或替换主题。
• 颜色属于产品：状态图标、差异对比中的绿色和红色，以及品牌色的主按钮。不要添加任何自有点缀：不要炫光、辉光、光环或色调偏移的灯光。
• 成片效果：最终渲染加入运动模糊（180° 快门、4 个以上子帧）和细腻的胶片颗粒。景深加上这两者，几乎就能完成全部效果。

5. 镜头内的动态效果

• 不显示光标。 UI 自主运行。导航项高亮显示。标签页的选中胶囊滑入对应位置。按钮按下。代码行旁出现边栏控件，该行随之高亮。如果点击必须清晰可见，就通过控件自身的按下或选中状态来呈现。
• 输入：每秒输入 12–13 个字符，并显示可见的插入光标。代码标识符和文件引用在输入时转为行内标签。发送后，输入框清空，消息移入对话线程。
• 流式生成：生成的文本从上到下逐行显现。每行先以精细的点状纹理出现，再在约 0.5 s 内凝结为实心字形，每行之间错开约 0.1 s。图标和头像也以相同方式显现。
• 编写：文档和图表按顺序逐步构建：先标题，再分标题，然后段落；图表则先出现节点，再绘制连接线，最后显示标签。
• 滚动：在中景和广角镜头中，内容可以在缓慢移动的镜头下平滑滚动。这是动态效果的第二层，应有阅读的速度感。
• 显现：新面板和消息以 0.3–0.5 s 的缓出效果淡入并轻微上移，同时带有轻微模糊。不要使用带回弹的弹出效果。
• 不要使用冲击效果。 通过画面尺度（广角镜头）和变化量来展现效果，而不是通过抖动、闪光或光环。

6. 录制真实网站

如果用户想展示真实网站而不是重建的网站，请录制线上页面。此要求适用于两个阶段。

• 操作线上页面：在无头浏览器中操作并录制页面本身的状态，包括点击、悬停、CSS 动画和由 JS 驱动的循环。
• 确保时间确定性。 在导航前安装浏览器自动化工具的虚拟时钟，让 JS 定时器和 requestAnimationFrame 遵循该时钟。每帧手动推进所有 CSS 动画和过渡：获取 document.getAnimations()，暂停每个动画，然后设置 currentTime += dt。这样，每一帧都是时间的纯函数。
• 通过页面 JS 触发交互，使用 element.click()。自动化工具自身的点击辅助函数会等待 requestAnimationFrame，在虚拟时钟下会卡住。
• 先清理页面：拦截分析请求，并关闭公告横幅，然后再开始录制。
• 在虚拟时钟下追踪由 JS 驱动的状态循环。页面稳定后，找出每次变化发生的时间（例如，某个状态在页面稳定约 11 s 后从 Idling 切换为 Scaling up），然后添加提前量，让每次变化都出现在镜头列表所需的位置。
• 使用文本节点 Range 搜索探测文本位置。选择器上的 getBoundingClientRect 无法准确定位拆分在多个节点中的文本。
• 使用 Chrome DevTools Protocol 以任意比例捕获区域：通过 Page.captureScreenshot 的 clip.scale，可以按所需放大倍数渲染某个区域，而无需更改设备像素比或触发调整大小事件。

7. 结尾：文案，然后静态 Logo

1. 让最后一个 UI 镜头硬切到舞台，或用快速的 0.4 s 模糊淡入转场：深色舞台切至黑色，浅色舞台切至地面色。
2. 文案：舞台中央显示一行文字，1080p 下字号约为 80–100 px，字重 500，字距约为 −0.02em。深色舞台用白色；浅色舞台用产品自身的深色字。文字从约 16 px 的模糊状态中逐渐清晰，同时在 0.6–1 s 内淡入。可以一次性显示整行，也可以先显示产品名称，再在同一行追加标语，让整行随着文字增多重新居中。在深色舞台上，文字后方微弱的柔和光晕可以在文字变清晰时逐渐消失；浅色舞台上不加光晕。不要让任何东西扫过文字。停留 3–5 s。
3. Logo：硬切或短暂溶解（约 0.3 s）至静态 Logo，可以只显示标志，也可以同时显示标志和字标；1080p 下高度约为 110–120 px。深色舞台用纯白色；浅色舞台用品牌色。不要移动、脉动或发光。停留 4–5 s，并以此结束影片。

除非用户要求，否则不要添加 CTA 按钮、URL 卡片或“现已推出”横幅。

8. 声音

没有音乐：没有配乐、持续音、节拍、渐强音、低沉撞击音，也没有调性短音。配乐是近乎静默中细微而真实的拟音。

每个可见动作都有相应音效：每输入一个字符，就响起轻柔的按键声；选中标签页或条目时，响起轻柔的点击声；发送时，响起轻微的呼啸声；文本流式显示时，背景中有微弱的颗粒嘶声。呈现效果时不加冲击音。文案和徽标在静默中呈现。

避免事项

这些做法会让影片看起来像教程或模板：

• 先来一段冷开场、标题卡，或“隆重推出……”和“新增功能……”之类的画面，再进入操作。
• 添加键帽叠层、字幕、说明箭头或解释 UI 的标签。
• 显示鼠标指针来驱动操作，或让光标在目标之间移动。
• 使用平直、正面的特写镜头。除宽幅呈现效果镜头外，摄影机应从 UI 侧面拍摄，而非正对着拍。
• 所有内容都清晰对焦。如果画面没有焦外散景，说明镜头太广，或焦平面太深。
• UI 镜头之间使用叠化或渐黑。UI 镜头之间只能硬切。
• 快速移动、缓慢环绕、大幅 3D 旋转、俯冲式穿越、镜头抖动，或让摄影机缓缓停下。
• 切换到网格布局。连续播放每段两秒的镜头会像宣传集锦；让过程镜头留有呼吸感。
• 把产品 UI 改得更有“电影感”。保持真实 UI 原样，用摄影机、对焦和光线营造电影感。
• 强行把仅支持浅色主题的产品改成深色主题，或反转其颜色。
• 在浅色页面上使用黑色虚空背景，或黑色光池。这看起来像是叠加了一块挖空的黑色遮罩。
• 调暗浅色布景上的散景。
• 使用屏幕空间中的圆形光池，并且让它在每个镜头中都居中且一模一样。这看起来像是挖空的黑色遮罩，而不是照在平面上的光。
• 使用变形宽银幕耀斑、辉光、强调环、彩色主光，或产品原本没有的任何颜色。
• 使用在画面中移动的光线：光泽带、扫光，或划过 UI 的光条。光线应跟随主体，而不是自行表演。
• 使用动画徽标揭示效果。
• 使用任何形式的音乐，包括配乐、节拍、持续音、渐强音、低沉撞击音或钟声。

9. 预览，然后像摄影指导一样核验

在进行任何全质量渲染前，先渲染轻量预览（960 × 540、30 fps、2 个运动模糊子帧、半尺寸采集），向用户展示，并等待用户确认。

在每个镜头的中间时刻、每个动作的峰值时刻、呈现效果时，以及文案和徽标画面处，分别渲染一张静帧。像审看影片截帧一样审视每一帧：

• 恰好只有一个清晰主体，视线能在半秒内落到它上面。
• 焦平面很薄，近处和远处都有散景，宽幅镜头除外。
• 画面呈现倾斜感：文字沿对角线延伸，并且随着距离增加而明显缩小。
• 对焦区域内的文字在半分辨率下仍清晰可读。
• 相邻镜头在景别或对角线方向上有所不同。
• 每一帧的布景、中性光线和颗粒感都一致，但光线形状随摄影机位置变化：透视压缩、沿动作方向拉伸，并从一侧照亮。
• 在深色布景上：
  • 至少四分之一的画面为黑色或近乎黑色；
  • 画面平均亮度约为 7–10%。
• 在浅色布景上：
  • 平面应看起来像一个实体：大多数镜头中都能看到边缘或阴影，极近距离特写除外；
  • 不能出现拼接裁切痕迹；
  • 主体是最亮、最清晰的区域；
  • 平均亮度应为高调效果，而不是灰蒙蒙的：文字对比度依然明显。
• 选出效果最好的一帧作为海报图。

反复调整，直到每张静帧都像是可以用于发布公告的截图。

10. 静帧：静态镜头

静帧是在与影片相同的布景上拍摄的，只不过由摄影师而非摄影指导拍摄。舞台、倾斜视角、浅景深、平面上的光线、调色、颗粒感和忠实还原的 UI 都会沿用。影片的摄影机则不会。

静帧不是影片中的一帧。 影片的摄影机是为运动而设计的：短焦镜头、在自身平面内旋转并偏航的平面、半个主体落在画面之外，以及一道横穿主体的焦点带。在动态影像中，这些问题都会在片刻之后迎刃而解：镜头漂移揭示被裁掉的部分，焦点转移找到清晰焦点。画面一旦定格，什么都不会迎刃而解，因此影片画面看起来就像从一台经过的摄影机中截取出来的一帧。静帧则是从头开始为这一帧构图：更长的镜头、整体水平转动的摄影机、完整且完全清晰的主体、物体真实的边缘，以及沉静的留白。它必须独自完成镜头漂移、剪辑和焦点转移合力完成的效果。

用户要求图片时就拍摄静帧：例如主视觉图、关键视觉、发布帖配图、Open Graph 或社交卡片、海报，或一组产品照片。用户要求影片时，也可以提供海报画面（第 9 节）作为静帧。绝不要把影片画面导出为静帧：它带有动态模糊，分辨率受影片限制，而且摄影机是为运动而设计的。按照本节的规则，用独立的摄影机和构图重新拍摄那个时刻。

沿用哪些内容，哪些需要改变

方法的部分	静帧中的处理
故事（第 1 节）	仍然需要，但要更精简：呈现成果和演示内容。每张静帧展示流程中的一个时刻。
舞台（第 2 节）	不变。一组静帧中的每张都使用相同的舞台。
镜头清单（第 3 节）	改为静帧清单（见下文）。景别变化和对角线交替仍然适用；时长、剪辑和摄影机运动则不适用。
摄影机角度	为静帧重新设置（见下文）：使用更长的镜头，通过摄影机滚转而非平面内滚转形成对角线，默认不偏航。具体数值见 references/look.md 中的 Stills。
摄影机运动	无。摄影机是静止的，因此改由构图来引导视线（见下文）。
焦点转移	无。清晰区域要覆盖整个主体，然后迅速虚化。
主体光线（第 4 节）	光线仍打在平面上，并使用偏轴主光。没有延迟：将光斑中心对准主体，同时偏移主光。暗色舞台上可以使用遮光板；静帧可以呈现更强烈的图形形状。
动态（第 5 节）	一个定格的瞬间（见下文），绝不是静态截图。
动态模糊	无。改用超采样，让边缘保持清晰（参见 references/look.md 中的 Stills）。
颗粒感	需要，静态且比影片中更淡，因为它不会移动来遮掩瑕疵。
结尾、Logo、声音（第 7–8 节）	无，除非用户要求在图片上添加文案或 Logo。

编写静帧清单

渲染前先列出清单，然后继续：

#	格式	主体（焦点所在）	景别	角度	定格的瞬间	留白

• 一张静帧：除非用户要求呈现整个产品，否则将成果作为主体，以微距或中景景别拍摄。单张静帧没有其他画面可供对比，因此宽幅、近乎正面的画面会像截图。
• 一组静帧（3–6 张）：像影片一样改变景别，在相邻画面间翻转对角线，并且最多只允许一张宽幅画面。一组静帧应当看起来像同一次拍摄：舞台、调色和颗粒感都保持一致。
• 先确定格式。 格式决定构图，因此要先选格式，再定角度。常见格式和尺寸见 references/look.md。之后绝不要将一帧裁成另一种格式：应针对每种格式重新调整摄影机构图，因为裁切会让主体偏离三分线，也可能切断对角线。

设置摄影机

每张静帧都要重新设置摄影机。切勿沿用视频镜头的摄影机设置：

• 使用更长的镜头。 将透视距离设为画面宽度的约 2–2.4 倍（视频使用 0.6–0.75 倍），模拟产品摄影师使用的短焦长焦镜头。通过俯仰而非广角镜头获得倾斜效果：近处文字的大小约为远处文字的 1.2–1.4 倍，而不是 1.4–1.8 倍。短焦镜头拍静帧会显得像摄影机正扫过画面。
• 先调平平面，再旋转摄影机。 将斜线效果设为摄影机横滚 6–10°，让整个画面旋转，而 UI 保持在平面上不旋转。将偏航角保持为 0。这样，清晰带会沿着文字行延伸，因此一个完整的单词、文本行或标题可以同时清晰。视频中在平面内旋转时，清晰带会穿过文本行，使主体一半变模糊，看起来就像焦点仍在调整。
• 例外情况是一个紧凑的控件，例如磁贴、按钮或徽章。此时，将平面旋转 12–16°，让一排相邻元素沿对角线逐渐远离并变模糊。
• 只在需要拉开距离时使用偏航。 如果与主体处于同一景深的相邻元素也会同样清晰（例如网格中的下一张卡片、另一面板中的同一行），可将偏航角增至约 10°，将其推入模糊区域；也可以重新构图，将其排除在镜头外。切勿为了戏剧效果而使用偏航。

构图

没有移动的摄影机，画面就必须自行指向主体：

• 主体完整呈现。 清晰主体应是一个完整单元：一个完整的单词、带头像的标题、完整列表或完整控件。主体应完全位于画面内，且与每条边缘至少相距画面高度的 8%。清晰文字绝不能触碰或越过画面边缘；只有模糊文字可以延伸出画面。

• 根据主体调整焦点范围。 清晰区域的景深要恰好覆盖主体，让主体的每个角落都清晰；然后让主体之外的模糊程度迅速加深：主体之外的下一行应已明显柔化，画面最远的三分之一达到最大模糊程度。固定的窄清晰带会切开主体；若加宽到足以覆盖主体，又会让整个画面都清晰。

• 展现物体。 让一道真实边缘进入画面：可以是板材边缘及其投射在浅色布景上的阴影，也可以是主体自身的卡片或面板。这道边缘能让 UI 看起来像布景中的物体，并为画面提供结构线。边缘应在远离角落的位置离开画面，绝不能沿着画面边缘延伸或仅与其相切。

• 将主体放在三分线上，靠近四个交点之一，绝不放在正中央。极端微距是例外：如果对角线穿过一个单词或控件，它可以位于画面中央附近。

• 让对角线引导视线。 文字行应从一个角落延伸至主体，让视线沿着文字滑向清晰带。

• 在主体远侧留出负空间，约占画面的三分之一到一半。暗色布景上是虚空；浅色布景上则是柔和的朦胧感、干净的板材或地面。如果用户希望在图像上放置文案或徽标，应放在这片区域，绝不要覆盖 UI。

• 保持负空间简洁。 半清晰的文字带、被画面边缘截断的深色卡片，或边缘处清晰的相邻元素，都会分散视线。重新构图、推进镜头或调整偏航，直到它们消失或深陷于模糊之中。

• 布置好场景。 动态画面可以掩盖的问题，静帧却会暴露出来。如果半透明叠加层（例如背景模糊的菜单或面板）将其后方内容模糊成污迹，就滚动到页面的空白处，或在拍摄时隐藏这些内容。绝不要更改主体本身。

• 近处和远处都要有散景。 静帧的审视时间比视频画格更长，因此只有一侧有散景的画面会显得平板。

• 按格式的安全区域裁剪。 对于社交媒体卡片，主体和任何文案都应位于画面中央 80% 的范围内，因为各个平台会裁掉边缘。

包围拍摄，再做选择

摄影师不会只拍一张。制作联系表之前，先以四分之一尺寸为每张静帧渲染一轮构图：提供 6–9 个变体，在放大倍率、主体位置和相机旋转角度上各不相同。选出通过以下检查的版本，只向用户展示选中的帧。

定格瞬间，而非状态

UI 静止不动时的画面看起来像截图。选择产品明显正在做某件事的帧，时机要显得刻意，而不是像故障：

• 看起来像一个瞬间：光标停在行中，提示词已输入一部分；回复最后一两行仍在点描效果中逐渐显现，上方的行已清晰实在；选择胶囊刚好落在自己的标签页上；按钮呈现自身的按下态颜色；图表连接线绘制到一半。
• 看起来像故障：面板在 Appear 配方中恰好处于淡入或模糊到一半的状态；选择胶囊卡在两个标签页之间；滚动停在缓动过程中；整块文本同时处于点描效果的一半。

录制真实网站时（第 6 节），将模拟时钟跳转到选定的时刻，让页面动画推进到该时刻，然后拍摄一次。

渲染并交付

• 每张静帧只渲染一次，分辨率为 2×，再缩小采样至交付尺寸；这可以替代运动模糊来实现抗锯齿。按静帧放大倍率的两倍捕捉 UI，如第 3 节所述。
• 最后添加颗粒，在缩小采样之后、写入交付文件之前添加，这样也能对水池的深色渐变进行抖动处理。没有颗粒，深色舞台色带会显现出来。
• **先展示联系表。**在全分辨率渲染之前，将每张静帧以四分之一尺寸渲染到一张联系表上，并像影片预览那样等待用户确认。
• 交付无损 PNG；如有需要，再提供不带色度抽样的 JPEG（或无损 WebP）供网页使用，确保产品中的彩色文字清晰锐利。

检查每张静帧

使用第 9 节中的检查项，去掉与运动和剪辑有关的项目，再加上：

• 眼睛能在半秒内落到主体上，无需镜头运动引导。缩小到十分之一尺寸时，主体仍能辨认为一个形状。
• 主体整体清晰，且所有边缘都在画面内并留有余量。清晰对焦的文字不能触及画面边缘。
• 画面中应出现底板或主体自身卡片的一条真实边缘，不能形成相切。
• 留白区域平静：画面边缘没有清晰的邻近物体、深色块或难以辨认的文字。
• 画面看起来不能像影片中的一帧：没有短焦镜头扫动，没有色带穿过主体，也没有拍到主体进入画面的途中。
• 主体位于三分线上，对角线引导视线进入主体。
• 定格瞬间的呈现符合预期，而不是像掉帧。
• 没有可见的裁切边缘、深色渐变中的色带，或彩色文字上的色度拖影。
• 如果是一组静帧，它们应能协调地挂在一起：舞台、调色和颗粒一致，尺度和对角线各不相同。

静帧中不要：

• 直接导出影片镜头的相机画面，或重新渲染它作为静帧。应重新设置相机，并为静帧构图。
• 让画面边缘切掉主体，或让焦点色带穿过主体。
• 拍摄正面截图，再把边缘模糊掉。这是晕影，不是景深。
• 用拖影、速度线或方向性模糊伪造运动。静帧就是定格画面。
• 添加产品本身没有的设备边框、浏览器界面、倒影或地面，除非用户提出要求。
• 在 UI 上叠加文案，或在图像上放置多于一行的文案。