07 · HTML 视频与动效短片

速览

产出	动效短片，可导出 MP4
用时	1 到 3 小时
类型	「Video」
难点	分镜，不是渲染

什么时候用这个

HTML 视频是用代码驱动的，所以它的适用范围很明确：

适合	不适合
产品功能演示	任何实拍素材
数据可视化动画	需要真人出镜
发布短片	复杂的剪辑节奏
更新日志视频	需要音效设计的片子
界面操作演示

核心优势是能改。数据变了改一个数组，文案错了改一行字符串，然后重新渲染。传统剪辑做同样的事要重做那一段。

做之前：先写分镜

不写分镜直接生成，出来的一定是一堆各自漂亮但连不起来的镜头。

分镜要写清楚三件事：

镜头 1（0:00 - 0:03）
画面：产品 logo 从模糊到清晰
文字：无
目的：建立品牌，给观众一个准备

镜头 2（0:03 - 0:08）
画面：一个杂乱的文件夹，文件名一片混乱
文字：「找一个文件要三分钟」
目的：把问题说出来，让观众代入

镜头 3（0:08 - 0:15）
画面：光标点一下，文件自动归类
文字：「现在是三秒」
目的：给出对比，这是全片的核心时刻

每个镜头写「目的」这一行是关键。没有目的的镜头就是可以删的镜头。

提示词

做一个 [时长] 秒的产品短片。

分镜：
[粘贴上面那种格式的分镜]

规格：
- 画幅 [16:9 / 9:16 / 1:1]
- 帧率 30
- 无声（或者：留出配乐位置，音乐我自己加）

视觉：
- 按当前设计系统的配色和字体
- 整片的动效节奏统一：入场用 ease-out，时长 400ms 左右
- 不要每个元素都动，一个镜头里最多两个运动焦点

约束：
- 所有文字必须在画面里停留足够久（每个字符至少 60ms）
- 关键信息不要放在画面边缘（可能被裁）
- 数据如果是示例，在画面里标注
- 转场用同一种，不要每个镜头换一个

先做前两个镜头，我看过节奏之后再做完。

为什么这么写

「先做前两个镜头」 是控制返工的关键。节奏对不对，看两个镜头就知道。做完六个再发现整体太快，改起来是全部重来。

「一个镜头里最多两个运动焦点」 直接对应观众的注意力。三个东西同时动，观众什么都没看清。

「每个字符至少 60ms」 是可读性的经验值。一句 15 个字的文案，至少要停留 0.9 秒，实际给 1.5 到 2 秒更稳。

「转场用同一种」 跟 PPT 工作坊第 10 步 是同一个道理：一致性比花样重要。

验收清单

• [ ] 每个镜头都能说出它的目的
• [ ] 所有文字能读完（自己按正常速度读一遍，读得完吗）
• [ ] 一个镜头里没有超过两个运动焦点
• [ ] 转场统一
• [ ] 关键信息不在画面边缘
• [ ] 示例数据标注了
• [ ] 导出的 MP4 在手机上看清楚（如果是竖版）
• [ ] 总时长符合投放平台的要求

变体

数据驱动的动画

用这份数据做一段可视化动画：

[粘贴 CSV]

要求：
- 柱子从 0 长到目标值，用弹簧物理曲线
- 数字同步从 0 滚到目标值
- 所有柱子不要同时开始，依次错开 80ms
- 结束后停留 2 秒

数据驱动是 HTML 视频最擅长的场景——数据更新了，动画自动跟着变。

竖版社交平台

把这个片子改成 9:16 竖版，用于社交平台。

要求：
- 重新构图，不要简单裁切
- 文字加大（手机上看）
- 前 3 秒必须抓住人，把最核心的对比放在开头
- 无声也能看懂（多数人静音刷）
- 时长压到 15 秒以内

加字幕

给这个片子加字幕。

要求：
- 字幕在安全区内，不要贴边
- 有描边或者半透明底，保证在任何画面上都可读
- 断句按语意，不要按字数
- 单行不超过 [N] 个字

常见问题

渲染很慢。

正常，视频渲染是这套流程里最重的操作。先用低分辨率预览确认节奏，最后再出高清版。

节奏太快 / 太慢。

节奏问题要在分镜阶段解决。把分镜的时间轴写出来，自己按秒数读一遍台词，读不完就是太快。

做出来像模板。

模板感通常来自转场——用了平台默认的那几种。指定具体的转场行为（「切换时前一个镜头的主体先缩小退到背景，新镜头从这个主体的位置展开」），比用现成转场好得多。

要配乐。

音乐单独处理。片子做成无声版，导出后在别的工具里加音轨。或者在分镜里标注节拍点，让画面卡在音乐的重音上。

相关

• 进阶 · 图像与视频 — 三条媒体路径的取舍
• PPT 工作坊 · 第 8 步 — 动效的克制原则