原型说明的基本结构

在产品团队协作中，原型图附带的说明文字是需求传递的关键载体。缺少统一结构时，开发容易遗漏交互细节，测试无法覆盖边界状态，产品验收则陷入“凭感觉”的反复沟通。通过将原型说明拆解为六大标准要素，能够将隐性知识显性化，降低版本碎片、理解偏差和返工成本。

六大核心要素总览

要素详解

1. 页面标题

标题应遵循“模块-子页面-用途”的命名规则，统一放置在原型画布左上角或说明区顶部。

2. 版本号

推荐使用语义化版本号（v1.2.3）或与项目迭代周期绑定的日期版本（v20250404）。每次评审或需求变更后必须更新。

3. 修改记录

修改记录以表格形式呈现在说明区起始位置，按时间降序排列。

4. 交互说明

使用列表或简化的“条件-行为”描述法，避免冗长段落。对于复杂交互可附加流程图编号。

行为：点击“提交”按钮
条件：所有必填字段非空且格式校验通过
结果：
  1. 按钮变为 loading 态，禁用重复点击
  2. 成功 → 关闭弹窗，刷新列表页
  3. 失败 → 保留弹窗，字段边框标红，顶部展示错误提示条

5. 数据字段

数据字段应以结构化方式书写，推荐使用 JSON 或表格格式，标明字段名、类型、长度、是否必填、数据来源。

{
  "refundReason": {
    "type": "String",
    "maxLength": 200,
    "required": true,
    "source": "用户选择/输入",
    "placeholder": "请选择退款原因"
  },
  "refundAmount": {
    "type": "Decimal",
    "precision": 2,
    "required": true,
    "source": "根据售后规则计算"
  }
}

6. 状态描述 & 异常处理

将每种页面形态拆解为独立描述，覆盖正常态、空态、加载态、错误态、极限值（如超长文案、超大数据量）。

• 正常态：默认展示，字段有值或空输入框。
• 空态：列表无数据时显示插画 + 引导文案。
• 加载态：骨架屏或旋转加载图示，预估时长超过 3 秒需提示“正在查询”。
• 错误态：网络失败、服务超时、权限不足时的错误提示与重试入口。
• 极限值：文本超出截断显示省略号 + tooltip；图片加载失败显示默认占位图。

结构关系框架

交付物模板示例

将上述六要素组合到一个表格中，作为原型图的统一说明模板。评审时逐项打勾，避免遗漏。

---
页面标题：订单管理 → 退款详情 → 审核弹窗
版本号：v1.2.0
修改记录：
  - v1.2（2025-04-08）张三：新增退款原因下拉框
  - v1.1（2025-04-01）李四：提交方式改为异步
  - v1.0（2025-03-25）王五：初版
交互说明：
  - 点击“提交” → loading → 成功/失败处理
数据字段：
  - refundReason: String, 200, required, 用户选择
  - refundAmount: Decimal(8,2), required, 计算
状态与异常：
  - 正常态：展示下拉框和金额
  - 空态：无需处理
  - 加载态：按钮 loading，禁止重复点击
  - 错误态：提交失败 → 字段标红 + 顶部错误提示
  - 极限值：金额超过 99999.99 时截断加 tooltip