发布视频与视觉资产
此技能涵盖了产品发布所需的视觉和视频资产创建。这些是你将创建的最具影响力的资产——一个出色的演示视频或 GIF 能吸引注意力，比文字更快地传达价值，并易于传播。而一个糟糕的资产则可能让产品显得混乱或粗糙，从而削弱发布效果。
媒体层级
对于大多数发布活动，创建内容的决策通常遵循以下顺序：
- 演示视频 — 在上下文中展示产品功能。最适合解释工作原理。
- 动画 GIF 或屏幕录制循环 — 更短，可在社交媒体上自动内联播放。最适合展示特定交互。
- 带标注的截图 — 静态，制作迅速，适合展示特定状态或功能。
- 图表或插画 — 用于架构、概念或无法截图的场景。
一般来说：当流程重要时使用视频，当单个交互能传达价值时使用 GIF，当某个特定状态是关键时使用截图。
演示视频
各平台时长
| 平台 | 目标时长 | 硬限制 |
|---|---|---|
| Product Hunt | 60-90 秒 | 3 分钟 |
| 着陆页 Hero 区 | 60-90 秒 | 2 分钟 |
| X/Twitter 嵌入式 | 30-45 秒 | 2 分 20 秒 |
| 45-90 秒 | 10 分钟 | |
| YouTube（完整演示） | 3-5 分钟 | — |
平台的硬限制不仅仅是技术上的——超过限制后用户参与度会急剧下降。一个 4 分钟的 Product Hunt 视频实际上等于没有视频。
脚本结构（适用于短格式演示）
保持 5-7 个节拍：
- 问题（5-10 秒）— 陈述要解决的问题。一句话，不要冗长的铺垫。
- 引入解决方案（5-10 秒）— 说出产品名称和核心价值主张。
- 演示：核心路径（30-60 秒）— 展示主要用例的端到端操作。这是视频的核心。
- 关键能力（10-20 秒）— 2-3 个快速切换，展示次要功能。保持节奏。
- 证明点（5-10 秒）— 一个指标、客户评价或基准。一页幻灯片或一句旁白。
- 行动号召（5 秒）— 一个行动。“在 [URL] 免费试用”或“在 [URL] 注册。”
避免：冗长的介绍、动画 Logo（用户会点击离开）、缓慢的产品启动画面以及任何不展示产品实际功能的内容。
录制技巧
- 使用演示环境，而非生产环境。 使用干净的数据，避免尴尬的客户信息，状态可靠。
- 放慢有目的性的交互。 比正常工作速度更刻意地移动鼠标，用户会更容易跟随光标轨迹。
- 以 2 倍于目标分辨率录制。 以 2880×1800 或 1440×900（Retina）录制，然后向下缩放以供交付。这为你提供了缩放空间并使画面更清晰。
- 隐藏所有无关内容。 关闭 Slack 通知，隐藏浏览器书签栏，使用干净的浏览器配置文件。录制中的干扰会损害信任感。
- 录制内容多于实际使用量。 录制完整的工作流程并在后期剪辑。这比漏拍了一个节拍而重新录制要快得多。
旁白与静默
两种方式都可行。选择取决于上下文：
- 旁白：更温暖，更具解释性，在 YouTube 和着陆页上效果更好。需要干净的录音环境和良好的音频质量。糟糕的音频比没有音频更糟糕。
- 静默加文字覆盖：在自动播放且静音的上下文中（如社交信息流）效果更好。制作更快。需要清晰的屏幕标签。
如果不确定：先静默录制演示，为关键时刻添加文字覆盖，然后根据平台决定是否添加旁白。
工具
- 屏幕录制：Loom（快速）、Screen Studio（输出精致，适合营销）、QuickTime（原始）、OBS（完全控制）
- 视频编辑：CapCut（快速、简单）、DaVinci Resolve（专业、免费）、Final Cut Pro、Adobe Premiere
- 动效设计/Logo 动画：After Effects、Motion（Mac）、Jitter（基于网页）
- 字幕：Descript（也适合通过转录稿进行编辑）、Captions app、Rev
- 程序化视频：Remotion（基于 React——参见下文章节）
使用 Remotion 的程序化视频
对于快速交付且不想每次都等待动效设计师的团队，程序化视频让你可以编写 React 组件并将其渲染为 MP4 文件。视频即代码：版本可控、可参数化且无需时间线编辑器即可迭代。
何时使用程序化视频
适合：
- 用于社交媒体的发布公告短片（15-45 秒）
- 展示 UI 交互的产品操作演示视频
- 带有文字覆盖和截图的特色亮点集锦
- 数据驱动型视频（基准对比、增长指标）
- 可在多次发布中重复使用的模板化视频（只需替换内容）
不太适合：
- 需要复杂动效设计的电影级品牌宣传视频
- 包含真人实拍镜头的创始人叙事视频
- 需要大量自定义插图或 3D 的视频
对于重要的 Tier 1 发布，你可以结合使用两种方法：用程序化视频制作社交短片，并聘请专业动效设计师制作主 Hero 视频。
Remotion 设置
npx create-video@latest my-launch-video
cd my-launch-video
npm start # 打开 Remotion Studio 进行预览
关键概念：
- Composition：一个具有定义时长（以帧为单位）和帧率的 React 组件
- useCurrentFrame()：返回当前帧编号的 Hook——用于驱动动画
- Sequence：使其子元素在时间上偏移的组件——用于编排场景顺序
- spring()：用于产生自然运动感的动画实用工具（缓入/缓出）
- 资产：图片、截图和音频文件放在
public/文件夹中
场景规划模板
在编写代码之前，逐场景规划视频：
| 字段 | 描述 |
|---|---|
| 场景 # | 序号 |
| 时长 | 秒数（例如 "3s"） |
| 目的 | 此场景传达的信息（一句话） |
| 文字内容 | 屏幕上显示的确切文字 |
| 视觉元素 | 截图、图标、代码片段、图表 |
| 动画风格 | 淡入、从左滑入、打字机效果、放大等 |
| 转出效果 | 场景如何退出（淡出、直接切换、滑动） |
代码模式
编排场景序列：
<Sequence from={0} durationInFrames={90}>
<HookScene />
</Sequence>
<Sequence from={90} durationInFrames={120}>
<DemoScene />
</Sequence>
<Sequence from={210} durationInFrames={90}>
<CTAScene />
</Sequence>
文字渐显：
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
return <h1 style={{ opacity }}>你的主要价值主张</h1>;
迭代工作流
- 规划场景 — 使用上面的模板
- 收集素材 — 截图、Logo、产品图片 →
public/文件夹 - 编写或提示初稿 — 确保结构和内容正确
- 在 Studio 中预览 — 完整观看，注意时机和视觉问题
- 迭代 — 调整时机、动画和内容。通常需要 2-4 轮
- 渲染 —
npx remotion render src/index.ts MyComposition out/video.mp4 - 检查平台规格 — 验证分辨率和文件大小是否满足目标平台要求
GIF 和短视频循环
GIF 在大多数平台上自动播放，非常适合展示单个交互——UI 状态变化、CLI 命令输出、API 响应。它们比视频制作更快，在社交媒体帖子上通常更有效。
何时使用 GIF 与视频
使用 GIF 当：
- 全部价值可以在 3-8 秒内传达完成
- 你展示的是一个单一的 UI 交互，而非一个工作流程
- 该资产将嵌入推文或 README 中，而视频播放可靠性较低
使用视频当：
- 价值需要上下文（问题 → 解决方案）
- 交互演示需要超过 8 秒
- 你需要音频
录制 GIF
- 以 2x 分辨率录制，向下缩放到目标分辨率
- 保持在 5MB 以下以保证网页性能（使用调色板缩减或更少的帧数）
- 无缝循环 — 起始和结束状态应匹配，避免循环时有跳跃感
- 工具选项：CleanShot X（Mac 推荐）、Kap、Giphy Capture、Gifski（用于转换视频片段）
优化 GIF 文件大小
- 减少调色板（对于许多 UI 录制，256 色 → 128 或 64 色）
- 降低帧率（UI 录制中 30fps → 15fps 通常不明显）
- 积极裁剪——只显示变化的部分，而非整个屏幕
- 当平台支持时，转换为带有自动播放/循环的 MP4 来代替 GIF（MP4 比同等 GIF 小约 10 倍）
截图
截图在发布中未被充分利用。一张构图良好且标注清晰的截图传达功能的速度比一段文字快。
构图
- 展示产品处于有意义的状态 — 不要是空屏、加载状态或充满难以看清功能的虚拟数据的屏幕
- 使用干净的环境 — 无标签的浏览器、一致应用暗色或亮色模式、无可见的个人数据
- 高亮相关区域 — 使用标注框、箭头或高亮来引导注意力到关键内容
标注工具
- CleanShot X (Mac) — 在一个工作流程中完成捕获、标注和导出
- Skitch — 简单标注
- Figma / Sketch — 用于更精致的产品展示图，支持自定义样式
浏览器框架
对于 Web 产品，使用浏览器框架使截图看起来是经过精心设计的，而非原始截图。像 Screely、Browserframe 或自定义 Figma 模板等工具可以添加浏览器外壳叠加层。
功能网格的多个截图
着陆页和 Product Hunt 画廊通常需要 3-5 张展示产品不同方面的截图。将它们作为一组来规划：
- 每张截图展示一个独特的能力
- 一致的视觉处理（相同的缩放级别、相同的浏览器主题、相同的标注样式）
- 讲述一个递进过程：入口 → 关键操作 → 结果
按发布等级划分的资产清单
Tier 1
- 演示视频（60-90 秒，适用于 Product Hunt 和着陆页）
- 社交短片（从同一录制中剪辑的 30-45 秒版本）
- 3-5 张带标注的截图（用于着陆页和 Product Hunt 画廊）
- 1-2 个 GIF（用于社交媒体帖子，展示关键交互）
- Open Graph 图片（用于博客文章和社交链接预览）
Tier 2
- 1-2 个 GIF 或短屏录制
- 2-3 张截图（用于着陆页区块）
- Open Graph 图片
Tier 3
- 1 张截图
- 可选：如果是视觉变化，添加短 GIF
Open Graph 图片
每篇以链接形式分享的内容（博客文章、着陆页、更新日志条目）都应有一张自定义的 Open Graph (OG) 图片。当链接被粘贴到 Twitter、Slack、iMessage 或 LinkedIn 时，显示的就是 OG 图片。
- 尺寸：1200×630px
- 内容：产品名称 + 主要价值主张。像对待广告牌一样对待它——在较小的尺寸下也应可读
- 一致性：使用模板，使你所有的发布内容具有统一的视觉效果
- 工具：Figma 模板、Vercel OG（代码生成）、Bannerbear（自动化）
各平台视频规格
| 平台 | 分辨率 | 最大时长 | 格式 | 备注 |
|---|---|---|---|---|
| X/Twitter | 1280×720 或 1920×1080 | 2:20 | MP4 (H.264) | 自动静音播放——需添加字幕 |
| 1920×1080 | 10 分钟 | MP4 (H.264) | 信息流中方形 (1080×1080) 效果很好 | |
| Product Hunt | 1920×1080 | 90 秒 | MP4 | 保持在 50MB 以下 |
| 网站 Hero 区 | 1920×1080 | 无限制 | MP4/WebM | 考虑自动播放循环（无音频） |
配套技能
- launch-strategy — 确定发布等级所需的资产
- launch-tweet — GIF 和视频作为附件（而非链接）放入推文中
- launch-landing-page — 演示视频和截图放置在页面上
- launch-distribution — 各平台的格式要求