格式错位论证片 — 使用指南

你会得到什么

一支为「格式转换类产品」做的发布片。它先点名用户已经在用的那个格式，说清它当初到底是为什么设计的，然后把同一份内容渲染两遍——一遍按旧格式的假设，一遍按新格式的逻辑。

对比本身就是论证，文案只负责指一下。深色底、一个电压级强调色，代码形态的东西一律等宽。每一帧都是代码画的。

为什么这个对比必须是受控的

任何发布片都能"说"旧方式产出更差。但很少有片子能让一个怀疑的观众真的接受，因为最省事的作弊——把"之前"做烂——同时也是最明显的破绽。

所以这里的诚实是结构性的。一个内容对象在任何东西存在之前先以数据形式写好，两个渲染器只消费它、不消费别的。谁都不知道另一个存在，谁也没法悄悄拿到更好的素材。屏幕上剩下的，就是版面逻辑的真实差异——而这恰恰就是要主张的东西。

你需要提供什么

• 两个格式，都平铺直叙地点名，以及旧格式当初到底是为什么设计的。
• 内容对象：真实字符串和真实品牌值，两个渲染器共用。
• 两份约定清单——各自格式对版面意味着什么。一边是卡片、pill、栅格、hover 态；另一边是尺度、停留、节奏、方向。
• 品牌 token：一个近黑底色、一个电压级强调色、两级表面层次。

一次完整流程

1. 失败可见性检查。 动工之前，找一个没参与的人冷看错误格式的产出。如果他看不出哪儿不对，这就是错的结构，流程会直说。
2. 先写内容对象，以数据形式。
3. 在任何其他拍点之前先做两个渲染器，并排做、并排看。它们就是这支片子，其余都是框架。
4. 其余按顺序做，每拍验证通过再往下。
5. 并排通读。 第 3 拍和第 6 拍截帧对比。如果唯一能说出的差别是"一个更好看"，那这个对比还没在论证。
6. Preview，确认后渲染。

八拍结构

#	画面
1	旧格式的文件名，单独地、以等宽大字号出现。
2	它当初为什么而生——四个词的简短、公允的来历。
3	你的内容，按旧格式的逻辑渲染。落定之后，就那么杵着。
4	诊断：问题从来不是工具。
5	新格式的文件名，用强调色。
6	同一份内容再来一遍，按新逻辑渲染——一次一个想法，带停留。
7	对句：一格式一行，结构完全对仗。
8	品牌锁定，以及去哪儿试。

第 3 拍和第 6 拍就是这支片子。时长要压，压 1、2、8——绝不压这两次渲染，也绝不压它们中间的停顿。

这支片子守的几条设计规矩

• "之前"要做得称职。 它是旧格式真实约定的一次真实应用，要像你为它自豪那样做。敷衍的"之前"就是稻草人，技术观众一眼看穿。
• 发呆那一拍就该发呆。 为网页设计的版面和时间没有任何关系，所以它就杵着——不给聚光、音乐撤掉、落定后不再有动作。这份静止就是论证。
• 一个强调色，一个电压。 它承载新格式的名字、CTA，以及最多一个别的词。第二个强调色会把一支技术片变成营销片。
• 全片一个无衬线字族。 标题、正文、说明都是同一个字面的不同字重；等宽只给代码形态的东西。
• 圆角 8px，不是全 pill。 紧凑的圆角是开发者工具的方言。

版权与诚实

旧格式会被公允对待。第 2 拍准确交代它当初为什么而生，全片的口径始终是"适配"而不是"好坏"——你的观众大多当初选了那个格式，羞辱这个选择会让你在对比落地之前就失去他们。

不点名竞品。这支片子的靶子是一个格式，而且停在这里更有力；即使被要求，流程也会拒绝这一项。内容对象里的字符串和品牌值要么是你自己的，要么明显是虚构的；全片不会出现任何第三方 logo、字标、图标集或专有界面。

本片的叙事弧、"同内容两渲染"对比与画面调性参考自一支公开发布的 HyperFrames 发布片。主题、文案、配色值和全部素材都为你的产品重新创作，成片中不包含、也不暗示与任何你不拥有的公司存在关联或获得其背书。

环境要求

HyperFrames CLI、Node.js 22 或更新版本、FFmpeg。渲染在你自己的机器上跑。全程不调用任何图像、视频或数字人生成模型，因此没有按次计费的 API 成本。音乐床由你按自己持有的授权提供。

值得知道的限制

• 没有旁白。这支片子是靠对比来论证的，旁白会在观众自己看之前就告诉他们该怎么想。
• 参考版是 26.8 秒。短于约 24 秒，发呆那一拍的停顿就没了，对比也就不成立。
• 默认 1920x1080。尤其是错误格式那一版，竖版要重新排版而不是缩放——一个网页版面塞进手机画幅，读起来像响应式设计正常工作，而那恰好是反面。