product-proof-saas

产品证明型 SaaS

在提出宽泛主张之前，先展示产品机制。让界面成为证据，而非装饰。

建立故事

1. 用一句话说明用户遇到的阻碍。
2. 在首屏中放入真实、可确定复现或明确标注的示例工作流。
3. 按输入、处理、草稿、编辑、审批和发布状态说明机制。
4. 围绕用户成果和受众组织功能。
5. 将定价限制和异议放在连贯的决策路径中。

替换来源品牌、输出、客户、指标、价格、截图和主张。绝不伪造生成速度或输出质量。

构建视觉系统

• 使用白色到淡蓝色的表面、近黑色文字、柔和的灰色网格线，以及一种冷色调的强调色。
• 搭配 x 高度较高的无衬线字体和紧凑的等宽标签。
• 使用 12 列产品网格、12–16px 圆角、细边框和真实的 UI 截图。
• 产品面板的内容密度应高于周围的营销文案。
• 使用黑色作为主要操作的颜色，将强调色留给激活状态、进度、选中状态和焦点。
• 避免装饰性的 AI 粒子、持续漂浮效果和含糊发光的光球。

编排页面

• 页眉：让产品导航简洁，并使主要试用或演示操作一目了然。
• 首屏：将价值主张与产品展示区结合，演示一个完整成果。
• 阻碍说明：展示前后对比、时间分解或具体的工作流限制。
• 功能模块：使用小图标和聚焦的文案介绍真实能力。
• 工作流：说明状态变化和人工控制，而非承诺神奇的一键操作。
• 受众标签页：保留 DOM 中的内容，并在有用时支持深层链接。
• 证明：使用经过验证的示例、客户证据或明确标注的样例。
• 定价：对齐可比较的限制、用量单位和脚注。
• 常见问题：从比较表深层链接到含糊的套餐条款。
• 页脚：通过淡蓝色渐变背景提供信任信息、文档和法律相关页面的入口。

实现从提示词到输出的故事

• 将输入、处理、草稿、编辑、审批和发布建模为明确的状态。
• 如有可用的真实应用状态，就使用它；否则将流程标注为 Sample workflow。
• 支持编辑、提交、取消、重试、复制、版本历史、加载、配额、内容审核、网络和错误状态。
• 提供可确定复现的演示流程和文本记录。
• 在启用减少动态效果时，停用自动打字和大幅度的状态动画。
• 即使 JavaScript 或动画不可用，也要确保工作流易于理解。

实现定价和常见问题

• 使用语义化的对比表或列表，并对齐共同功能。
• 用浅显的语言说明用量单位、限制、超额用量和计费周期。
• 保留计费周期、套餐选择、CTA 加载、禁用、错误和恢复状态。
• 将含糊的条款关联到可深层链接的常见问题解答。
• 使用浏览器的“后退”功能恢复之前的比较视图。

动效默认值

• 控件反馈时长设为 160–220ms，界面状态变化时长设为 420–700ms。
• 卡片之间错开 45–70ms，每次只动画呈现一个交接过程。
• 云朵或背景的漂移效果应缓慢、可选，并在移出屏幕后暂停。
• 避免伪造打字速度、永久漂浮的卡片和装饰性的生成循环。
• 在启用减少动态效果时，立即渲染稳定的 UI 状态。

验证

• 测试键盘编辑、提交、取消、重试、复制和对比控件。
• 测试配额、内容审核、网络、空、加载和错误状态。
• 确认所有输出都是真实内容、可确定复现的样例，或明确标注的演示内容。
• 验证焦点、对比度、200% 缩放、移动端换行、历史记录和减少动态效果。
• 移除虚构的客户、成果、安全主张、可用性或性能指标。

避免

• 无法解释自身状态变化的营销模型图。
• 虚假的仪表板、虚假的打字效果或未标注的示例输出。
• 与核心工作流无关的功能网格。
• 隐藏的定价限制或彼此脱节的常见问题解答。
• 泛化的 AI 粒子、漂浮的玻璃卡片和持续不断的动画效果。