跳转至

发布片与产品视频

发布片就一个产品许下一个承诺，并展示这个承诺被兑现。它是一部有任务的短片：开头几秒观众就知道这东西是什么，看到最后就知道去哪里拿到它。下面每一条规则都是在 anidoodle 自己那部 77 秒的发布片（剪了四版）上付过代价换来的，并对照已公开发表的发布片制作经验核对过。可复用的零件在 launch-video-kit.md；一部模板影片能根据数据为任何产品渲染出一部 16 秒的发布片。

对方带来的素材

产品截图、logo、UI 截取图、仓库链接、功能清单、准确的安装或注册命令。他们带来的图片可以嵌入（用 sha256 钉住，来源写在清单文件里）；图片周围的一切都用代码画。绝不生成或抓取图片。

先扎根于真实的产品

在画任何分镜之前，先写一份注明出处的简短 brief，并就它拿到一次审批。凭空编造主题的发布片，画出来的是产品的吉祥物，而不是产品本身。

  1. 读真东西。 他们带来的截图和截取图、仓库的 README 和 UI 组件、线上页面。记下观众应该能在屏幕上认出来的两三个真实功能、准确的产品名称和标志、品牌色的十六进制值。
  2. 收集获准的说法。 一句话的承诺和任何数字都来自他们自己的材料（网站文案、发布说明、README），每一条旁边都注明出处。凡是你找不到出处的，都变成一个问题，而不是影片里的一句话。列出影片绝不能做出的宣称。
  3. 问扎根问题，放在一条消息里：展示哪些功能（推荐你选的那三个）、交付哪几种画幅、在哪里播放、准确的 CTA 文案。
  4. 写 brief，放在影片文件所在的地方：产品和承诺、功能及其出处、品牌色映射到调色板的各个角色、获准和禁止的说法、画幅、平台。分镜和屏幕上的每一个字都引自 brief，绝不凭记忆。

为这个产品而做，每一帧、每一个音符

影片的画面按 brief 选定的画风配方（references/style-guide.md），为这个产品的主题而画；它的配乐为这份 brief 而作。anidoodle 自己的样张和曲子是手艺的示例，绝不是别人影片的素材。

故事

  • 影片要证明的一句话，在其他任何东西之前先写下来。anidoodle 的是：「你可以用纯代码做出图像、插画、循环动画、动画和影片。」每一拍都为它服务。一排功能是一张规格表，不是故事。
  • 从用户的视角讲：他们输入，按下按钮，结果出现。观众应该能想象自己正在这么做。
  • 前五秒说清它是什么（anidoodle：最迟在 10 秒前说出「没有图像模型，只有代码」）。钩子在 2-3 秒内落地，并且在声音关闭时也能看懂：信息流是静音自动播放的。
  • 弧线：钩子、一个核心交互、快速证明能力范围（一面墙，绝不是慢吞吞的参观）、品牌时刻、号召。每 3-5 秒给一个视觉上的回报；没有冷场的等待。
  • 屏幕上没有脚注、没有眉题文字、没有终端行话，除非产品本身就是终端工具。

文字

  • 默认让文字拥有自己的空间。 一个词拥有自己的整个画面：一团墨晕打开，一支画笔写出这个词，墨晕在下一个场景上收拢（typeFrame）。或者，对于功能拍，给它自己的一栏：文字在左，实时 UI 在右（在手机上文字在上、UI 在下），各占布局里属于自己的区域（split），比整页文字页更快。镜头把 UI 移到角标下面时，角标会让开；在手机画面上，角标待在属于自己的一条区域里。
  • 文字压在画面上是一种判断，而答案通常仍然是不。 只有下面这些全部成立时，它才配得上这个位置：文字下面那块画面是平静的（平坦或安静，没有东西从字母间穿过）；这个词属于这个场景（贴在它所指之物上的标签、一个标注、一行与画面一起构图的动态文字，而不是扔在上面的一条字幕）；这一帧能当海报用；关掉声音也能看懂。绝不压在人脸、产品的 UI、这个镜头所讲的细节或繁杂的纹理上。用最小交付尺寸的审查静帧检查它。拿不准时，让这个词拥有自己的画面。
  • 每个画面 3-7 个词，画面要少。 把文字卡片合并成先主张、后证明（先「JUST CODE.」，再「32 STYLES」）；卡片越少，留给证明的时间就越多。
  • 每个定住的词停留 0.5 秒或更久，主张停留得更久。
  • 在审查静帧里评判设计，而不只是看有没有碰撞：层级、间距、这一帧能不能当海报用。一帧里什么都没重叠，照样可能很丑。

运动

  • 默认的转场是一个轻柔的移动：晕开、卡片翻转、推移、卡片变大进入画面。缓入缓出；镜头见 references/camera.md。
  • 硬切是一种判断。 它在匹配时才成立：两侧有相同的形状、位置或运动方向，或者在一首能量需要它的曲子里切在一个有力的拍子上。一个什么都没带过去的切，以及任何尖锐的嗖声，看起来仍然像幻灯片。
  • 设计好的接缝同样是一种判断。 让下一个画面从当前画面里长出来的六种方法，每一种都写明了什么时候合适、什么时候不合适：references/motion-grammar.md。只在它的条件明确成立时用其中一种；否则就用轻柔的移动。
  • 画的过程以真实时间的 3-6 倍速播放；循环动画要停留得够久，让人看得出它在循环。
  • 活着意味着真实的运动：锦鲤游过一个滚动的世界，而不是原地播放的 GIF（start-here.md 的「『活的』意味着真正的运动」一节）。
  • 聊天是一条真实的对话流：请求在它的结果之前出现，之前的回答保留，对话流会滚动，追问在现有的卡片里以动画呈现，而不是弹出一张新卡片。
  • 网页：先展示整个网站，再推近每一次点击；网站的文案描述观众正在看到的东西。
  • 不是聊天类的产品，展示它自己的 UI，根据它的真实数据画出两种状态：before（问题），按一次它的动作按钮，每个条目以弹簧动画移到 after。绝不是截图幻灯片（productUI.ts，一个 kind: "ui" 请求）。

动机

只挑一个故事里本来就有的物件，带着它跨过接缝：anidoodle 的模板带的是那滴墨，每按一次 Generate 都会把它送进对话流；结尾时它最后一次从 Generate 上升起，落下成为片尾卡标志（"NAME."）里的那个点，片尾卡从它晕开。对任何你设计成匹配剪辑的接缝，规则是：在出画镜头的最后一帧和入画镜头的第一帧，这个物件在屏幕上的位置和大小相同（误差 2 px 以内），并且入画的场景从它展开。motif.ts（relay、checkRelay）会检查这一点；跳了的接缝会抛错。把它用在要紧的接缝上（揭晓），绝不用在每一个切点上。

  • 禁用的默认做法：渐变背景上居中的标题、所有东西都淡入、弹跳的缓动、粒子爆发、UI 外框发光、冷场、缩放到模糊的文字。

两种基调

手绘基调（默认）：墨晕、手写文字、暖色纸张调色板、用选定画风画出的产品。简洁基调（preset: "clean"）用于 UI 优先的产品：安静的画布、一种强调色、字体排印本身就是设计（排出来的，不是写出来的；每个词升到位）、圆形光圈接缝、产品自己的 UI。每部影片挑一种；绝不混用。

品牌与片尾卡

  • logo 反复出现：每一帧都有一个小角标（logoBug），而不是只在开头出现一次。
  • 片尾卡为这个画面构图：名字、一句话、放在一块面板里的准确安装命令，停留 3 秒或更久，让观众来得及截图。anidoodle 的是这两行：/plugin marketplace add alexgreensh/anidoodle 和 /plugin install anidoodle@alexgreensh-anidoodle。只有一个主要号召；链接用更小的字放在下面。

声音

  • 音乐先行，先由人听过 mp3，再拿它给任何东西配乐（你自己听不见）。为这个品牌作曲：根据 brief（能量、受众、在哪里播放）挑选风格，并为每一段挑选情绪，然后写出音符（references/music/compose.md）。anidoodle 自己的发布片选的是 chill lo-fi 电子乐，这只是一个示例（references/music/styles/lofi-electronic.md）；绝不复用我们的配乐或现成的曲库音乐。
  • 按分轨 RMS 做平衡，而不只看 LUFS：综合响度 -14 LUFS 曾经掩盖过一条超低音偏响 7-10 dB 的问题。
  • 切在强拍上，而不是每一拍都切。 让主张落在一个和弦上（launch3 的落在第 26 小节，主和弦）；beatGrid().solve() 会调整一个可伸缩片段，让它做到这一点。
  • 音效来自画面自己的数学，绝不手工铺上去：每输入一个字符一声按键，按钮按下去的那一帧一声按压，墨滴和它的晕开，卡片在它的弹簧第一次到位时落定，每一个都按它在屏幕上发生的位置做声像定位（launchSound.ts）。每个 cue 都必须能在配乐之上被听见（模板会调高被淹没的 cue，然后检查）。
  • 转场音效只用在真正改变方向的地方：进入大揭晓时一个上升音效，揭晓那一刻一个冲击音效，绝不在每个切点上都来一声呼啸，文字页上什么都不放（references/music/sound-design.md）。
  • 母带处理到综合响度 -14 LUFS、真峰值 -1 dBTP 或更低，然后用手机扬声器听一遍。

交付

  • 时长：发布帖（LinkedIn、YouTube、README）约 60 秒；X 上 15-45 秒；为每个平台剪一个版本，而不是把一个母版推到所有地方。按整拍剪；绝不把整部影片加速（那会破坏节拍网格，而且看起来很赶）。
  • 画幅：16x9 用于 YouTube 和网站，1x1 或 4x5 用于信息流，9x16 用于 Reels 和 Shorts。从同一条时间线为每种画幅重新构图；绝不裁切宽画幅的渲染结果。模板通过 launchLayout.ts 做这件事（launch.mjs ship <film> --shapes 16x9,1x1,9x16），文字对手机安全：在手机画幅上，观众读的每一行在横向 1080 下至少 32 px。
  • 字幕：信息流是静音自动播放的。给支持外挂字幕的播放器（YouTube、LinkedIn、网站）提供 .srt/.vtt；对不支持外挂字幕的信息流，把字幕烧进画面下方属于它们自己的一条字幕带里（captions: "burn"），绝不压在画上。
  • 同步和峰值在你交付的文件上检查，而不是在母版上：每个同步标记处的声音与混音相差在 1 ms 以内，AAC 编码之后真峰值不高于 -1 dBTP（verify-export --delivery）。
  • UI 多的影片可以跑 60 fps（fps: 60）；用 --blur auto 渲染，让快速的移动按它们真实的速度模糊，静止的帧保持清晰。
  • 第一帧就是缩略图。 平台和播放器在播放前显示第 1 帧。让它清晰可读、符合品牌（anidoodle 的是那面画风墙；模板的是提示词，大字，句子写到一半）；绝不是一片空白、从黑场淡入，或者一整个小到读不清的聊天窗口。如果故事开头很安静，就用 --poster-frame N 渲染（第 0 帧显示第 N 帧，到第 6 帧时溶解进开场），并且只交付通过 verify-export --delivery 的文件。

流程

  1. 故事句和注明出处的 brief。✋ 一次审批。
  2. 分镜：每拍一行，写明它以拍计的长度、文字、转场。
  3. 选项表：把转场和文字样式并排放在一张成本很低的静帧表上（比如三种墨晕、三种书写媒介）。由对方挑选；这时还什么都不做完整渲染。
  4. 每个场景一张静帧，以 0.3-0.5 的比例放在一张缩略拼图（contact sheet）上，从设计角度审查：still.mjs <film> --frames 0,240,610 --sheet out/scenes.jpg 在一个浏览器里把它们全部画出来（references/working-method.md）。
  5. 把音乐做成 mp3 放在页面上，由人来听。✋ 审批。
  6. 剪辑即数据：内容场景放在一条时间线上，剪辑是节拍网格上的 pic/type 片段（launchCut.ts）。重新调整时间只改这个列表，绝不改场景代码。
  7. 从渲染结果审查：每拍一张缩略拼图，切点按前后成对来看，先看设计（文字压在画上、间距、层级），再看时间。只渲染改动过的区间（render.mjs --from F --to T 写出 out/<film>.<F>-<T>.mp4，无声）。用镜头语言给意见（「把这个推近放慢到 0.7 倍」、「这个词多停 10 帧」），绝不说「弄好一点」。
  8. QA：对照 launch-video-kit.md 里的设计清单，审查每一种画幅的缩略拼图（文字不被裁切、内容不被边缘裁掉、每种画幅构图均衡、内容前后一致）。launch.mjs ship <film> --shapes ... --gate 对每一种交付的画幅运行 framecheck（每一帧上文字和卡片都完整）、闸门（确定性、契约、冷场；在 meta.holds 里声明真正的停留，每一个都写明理由）和 verify-export --delivery（尺寸、帧数、配乐、同步、真峰值、清晰可读的第 0 帧），并写出封面图和字幕；要检查品牌色，再加上 verify-export <film>-<shape> --first-frame #rrggbb。给混音做响度测量。随着工作推进，持续更新审查页面。
  9. ✋ 对成品文件做最终审批。