authentic-product-representation

真实呈现产品

最快让访客失去信任的方式，就是展示一张明显摆拍的产品视觉图。人们看过成千上万张落地页；他们认得出伪造的仪表盘、满是 lorem ipsum 的截图，或是会打印真实工具根本不会输出内容的“终端”。最能促成转化的视觉图，看起来就像是直接从正在运行的产品中截取的——因为它确实如此，或者因为它经过精心制作，与真实产品毫无二致。

原则很简单：视觉图就是产品本身，而不是产品的宣传海报。 任何偏离这一点的捷径——虚构数据、装饰性界面元素、展示并不存在的功能——都会从信任账户中一点点透支。

这项技能决定视觉图是否可信；它在页面论述中需要达成什么，则取决于 [[layout-paradigms-and-consistency]] 中的产品叙事框架。虚构的证明毫无证明力。

---

用真实内容进行设计

理想化的占位内容会掩盖设计实际会遇到的问题。

• 不要使用 lorem ipsum。 使用真实文案，或尽可能接近真实文案的草稿。真实文字有真实的长度、真实的换行，也有真实的棘手边缘情况。拉丁文占位文字整齐划一，而你的内容绝不会如此。
• 使用真实姓名、真实数字和真实长度。 “John Smith / $1,234”是虚构的数据集。使用现实中最长的姓名、条目数为 0 的账户、会换成三行的标题。如果设计只有在数据完美时才好看，那就还没完成。
• 也要设计空状态、加载状态、错误状态和溢出状态——它们与顺利路径同样是产品的一部分。只展示完整、完美状态的截图，卖的是一个并不存在的产品。

如果确实无法使用生产数据，就根据真实架构和真实渲染器生成模拟数据，确保其形状、格式和约束与实际发布的产品一致。

---

还原真实输出

当视觉图用于展示产品的产出——CLI 运行结果、生成的文件、报告、图表或编辑器——要复现实际格式，而不是更漂亮的重新诠释。

• 使用产品真实的输出结构：相同的标签、相同的排序、相同的树形结构／日志／表格形状，以及相同的截断规则（“+4 more”）。
• 尽可能从真实运行中提取数值。如果视觉图声称要处理 yourdomain.com，就展示处理 yourdomain.com 实际会产生的结果，而不是把其他网站的数值改个标签。
• 如果已有真实的渲染组件，就重复使用。忠实嵌入胜过手工制作的仿品，因为后者会在产品一变更时立刻与现实脱节。
• 展示工具已涵盖的真实类别，比声称其覆盖范围更有说服力（“还包括：边框、阴影、动效、组件”）；对已存在的功能打出“即将推出”的预告，传达的则恰恰相反。

重新诠释的模拟图会带来维护负担和可信度风险：它看起来像产品，直到有人拿它和产品进行比较。

---

保持真实

视觉图会传递信息，每一项都必须属实。

• 数字要符合实际。 统计数据、计数和指标必须真实，或明确标注为示意数据——绝不能把夸大的虚构内容当作事实呈现。
• 标签要与内容相符。 不要把一件事标成另一件事（例如，系统 A 的截图却标注为系统 B；命令中的域名与展示的结果不一致）。
• 只展示真实存在的功能。 演示中展示产品并不具备的功能，就是许下你会在用户首次使用时违背的承诺。
• “即将推出”就该是真的即将推出，而且很少有必要标注。 对已发布的功能加上“待推出／即将推出”徽标，就是在说谎；对真正处于路线图中的项目加上待推出徽标，放在产品截图中通常也只是噪音。优先展示可用的功能。

拒绝虚构的营销装饰

一种可识别的视觉风格，会让人觉得这是“为了显得令人印象深刻而生成的”，而不是“从真实产品中截取的”。这看起来像 AI 垃圾内容，会削弱你正在努力建立的真实感。

避免：

• 虚构的仪表盘、假的图表，以及输出营销文案的装饰性“终端”
• 渐变填充文字、闪光／星星点缀、极光光晕，以及用来替代实质内容的玻璃拟态
• 没有实际功能的打字机／轮播式标题和伪 AI 装饰（扫描线、“思考”闪光效果）
• 只为填充空间而存在的胶囊徽章和装饰，尤其是在与呈现形式冲突的地方（例如，在等宽字体输出中塞入标签芯片）

克制测试：如果某个元素并不存在于真实产品中，就不该出现在代表真实产品的视觉素材里。没有信息价值的装饰应当最先删掉。

---

必须制作模拟画面时

有时无法使用原样截图（例如产品尚未发布、数据敏感或需要组合视图）。请诚实地制作模拟画面：

• 使用真实的架构、真实的组件和合理的值来构建。
• 匹配产品的真实状态和格式，包括那些不那么光鲜的状态。
• 保守地表达主张——视觉素材中宁可少承诺，让产品超出预期。
• 明确标注仅用于说明的数字，不要把它们冒充为实测数据。

---

有色背景上的照片

产品图片放在有色底板上时，需要使用透明抠图。带有内嵌白色背景的不透明图片，会在有色底板上显示成白色方块。如果没有抠图，请将照片与底板进行正片叠底混合，让白色消失。

当设计导出图与其自身截图不一致时，以截图为准。导出图只是工具对文件的呈现。渲染结果才是实际发布的内容。

---

审核清单

• 是否还留有任何占位文本或明显理想化的占位内容？（不应有。）
• 内容长度是否真实——较长的名称、空列表、三行标题？
• 是否呈现了空状态、加载状态、错误状态和溢出状态，而不只是完美状态？
• 当视觉素材代表产品输出时，它是否匹配真实的格式、顺序和截断方式？
• 数值是否与展示的输入相对应（领域正确、来源正确），而不是把其他案例改个标签？
• 是否复用了已有的真实渲染组件，而不是手工制作一个仿品？
• 有色表面上的产品照片是否使用了透明抠图或正片叠底混合？
• 所有数字、标签和功能是否属实——没有夸大、错误标注或尚未实现的内容？
• 对已经发布的功能，是否还用了“即将推出”的说法？
• 是否存在应该删掉的虚构营销装饰（假仪表盘、渐变文字、闪光、装饰性终端）？
• 访客截取真实产品的截图，能否获得与这份视觉素材相同的印象？如果不能，为什么？