一、原型交付的本质：从"画图"到"翻译"
原型不是美术作品，而是产品经理与业务方、研发团队之间的"需求契约"。优秀的原型交付需要同时满足三个维度：
| 维度 | 目标受众 | 核心诉求 | 常见失败点 |
|---|---|---|---|
| 业务正确性 | 用户/业务方 | "这是我们想要的吗？" | 自嗨式设计，脱离真实场景 |
| 技术可行性 | 研发团队 | "这能做吗？怎么做？" | 过度设计，忽视实现成本 |
| 体验完整性 | 设计师/测试 | "所有分支都覆盖了吗？" | 只画主流程，遗漏异常状态 |
二、项目交付场景的原型策略
场景一：需求评审会（快速对齐，2小时内）
目标：让业务方在会议结束前说"对，这就是我们要的"
工具选择 ：墨刀（打开即用，演示流畅）
交付标准：
- 低保真线框图（灰度配色，无真实数据）
- 核心流程覆盖：主流程 + 1-2个关键异常分支
- 每页配一句话说明：该页面解决什么问题
高效绘制法：
【会前准备】（30分钟）
1. 用「思维导图」梳理3个核心页面：首页 → 操作页 → 结果页
2. 墨刀新建项目 → 选择对应设备模板
3. 拖拽「占位符」组件快速搭骨架
【会中演示】（实时调整）
1. 投屏演示 → 业务方提出修改 → 当场拖拽调整
2. 关键争议点用「便签」组件标注，会后细化
3. 生成分享链接，业务方扫码带走
【会后输出】（1小时）
1. 根据会议记录调整原型
2. 导出PNG/PDF附在会议纪要中
3. 邮件发送：原型链接 + 待确认问题清单避坑指南：
- ❌ 不要画高保真：业务方会纠结"这个蓝色不够正"，偏离需求本质
- ❌ 不要只画主流程：至少展示"网络错误/无权限/空状态"中的一种
- ✅ 用真实业务数据：如电商原型用"iPhone 15"而非"商品A"
场景二：技术评审/开发排期（明确边界，精确到字段）
目标：让开发看完能估算工时，知道接口要什么字段
工具选择 ：Axure RP（复杂逻辑、数据规则、状态机）
交付标准：
- 高保真原型（接近最终UI，或直接使用UI设计稿）
- 全状态覆盖：正常/加载中/空数据/错误/无权限
- 字段级标注：每个输入框的校验规则、数据来源、枚举值
- 交互说明面板：用Axure的「说明」功能写逻辑，而非口头传达
高效绘制法：
【页面结构规范】
├── 页面标题（如：订单列表页）
│ ├── 说明区：页面目的、前置条件、数据来源
│ ├── 正常状态（默认展示）
│ ├── 加载状态（骨架屏/loading）
│ ├── 空状态（无数据时的引导）
│ ├── 错误状态（网络异常/接口报错）
│ └── 无权限状态（角色权限不足）
【标注规范示例】
┌─────────────────────────────┐
│ 搜索框 │
│ placeholder: "请输入订单号" │
│ 校验：最多20位数字，实时校验 │
│ 接口：GET /api/order/search │
│ 防抖：300ms │
└─────────────────────────────┘Axure高效技巧：
| 功能 | 应用场景 | 操作路径 |
|---|---|---|
| 动态面板多状态 | 一个页面展示所有状态 | 右键→转换为动态面板→添加状态（State1/State2...） |
| 中继器模拟数据 | 列表页展示真实数据结构 | 拖入中继器→数据集绑定→设置每页条数 |
| 全局变量 | 跨页面传递参数（如用户ID） | 项目→全局变量→新建变量→交互中赋值 |
| 条件判断 | 根据角色显示不同按钮 | 交互→启用情形→if [[Role == 'admin']] |
交付物清单：
- 原型文件（.rp）+ 生成的HTML压缩包
- 《交互说明文档》（Axure自动生成规格文档，含所有标注）
- 《字段映射表》（Excel，列明每个字段的：名称/类型/必填/枚举值/来源接口）
- 《异常清单》（所有错误码及前端提示文案）
场景三：客户演示/投标（视觉冲击，建立信任）
目标：让客户觉得"专业、靠谱、值得托付"
工具选择 ：Figma （视觉精美）或 墨刀高保真（快速出图）
交付标准：
- 视觉级高保真：使用真实配色、品牌Logo、业务数据
- 可点击演示：完整走通核心场景，模拟真实操作
- 多设备适配：PC端 + 移动端响应式展示
高效绘制法：
【视觉准备】（与UI设计师协作）
1. 获取品牌VI规范（主色、辅色、字体、圆角）
2. Figma中建立「设计系统」：按钮/输入框/卡片等组件库
3. 使用真实业务截图/数据（脱敏处理）
【演示脚本】（按场景编排）
场景A：管理员日常操作
登录 → 仪表盘 → 数据报表 → 导出Excel
场景B：异常处理
提交失败 → 错误提示 → 自动重试 → 成功反馈
场景C：移动端适配
手机扫码 → H5页面 → 拍照上传 → 实时预览
【演示技巧】
- 提前录制GIF作为备份（防现场卡顿）
- 准备「对比页」：旧系统截图 vs 新原型截图
- 关键数据用「高亮动画」引导视线三、让研发团队"零误解"的交付规范
1. 原型注释三层体系
| 层级 | 位置 | 内容 | 阅读者 |
|---|---|---|---|
| L1 页面级 | 页面顶部或侧边栏 | 页面目的、入口来源、前置条件、数据流向 | 全体 |
| L2 区域级 | 模块旁便签 | 该区域功能说明、业务规则摘要 | 开发/测试 |
| L3 元素级 | 元件说明面板 | 字段定义、校验规则、接口信息、错误提示 | 前端/后端 |
Axure实现：选中元件 → 右侧「说明」面板 → 填写文本 → 生成规格文档时自动带出
墨刀实现：使用「批注」组件或页面旁添加「便签」说明
2. 状态机可视化：不再遗漏异常
强制要求：每个有交互的页面，必须展示以下状态矩阵：
【状态矩阵模板】
页面：订单提交页
┌──────────────┬─────────────┬─────────────────────────────┐
│ 触发条件 │ 页面状态 │ 系统行为 │
├──────────────┼─────────────┼─────────────────────────────┤
│ 用户点击提交 │ 加载中 │ 显示loading，按钮禁用 │
│ 接口返回200 │ 提交成功 │ 跳转成功页，Toast提示"提交成功" │
│ 接口返回400 │ 参数错误 │ 红字提示具体字段错误，定位到输入框│
│ 接口返回500 │ 系统错误 │ 弹窗提示"系统繁忙，请稍后重试" │
│ 网络超时(5s) │ 网络异常 │ 弹窗提示"网络不稳定"，提供重试按钮│
│ 用户无权限 │ 无权限页 │ 显示403插画，引导联系管理员 │
└──────────────┴─────────────┴─────────────────────────────┘绘制技巧 ：Axure中用动态面板管理所有状态，通过「设置面板状态」交互切换；墨刀中用多个页面分别展示状态，命名规范为页面名_状态（如订单页_空数据）
3. 数据流标注：打通前后端认知
每个数据展示区域必须标注：
【数据标注模板】
区域：今日订单统计卡片
├── 数据来源：GET /api/dashboard/todayOrders
├── 更新频率：页面加载时请求，每5分钟轮询
├── 字段映射：
│ ├── 订单总数 → data.totalCount (Number)
│ ├── 环比增长 → data.growthRate (String, 如 "+12.5%")
│ └── 更新时间 → data.updateTime (ISO 8601格式)
├── 空数据展示：显示"0单"，不隐藏卡片
├── 错误处理：接口失败时显示"--"，点击可手动刷新
└── 缓存策略：本地缓存5分钟，减少重复请求四、跨团队协作的交付SOP
标准交付流程
【T-3日】需求初稿
PM完成低保真原型（墨刀）
↓
【T-2日】业务确认
与业务方评审，确认核心流程
输出《需求确认单》（业务方签字/邮件确认）
↓
【T-1日】原型细化
转为Axure高保真（复杂系统）或Figma（视觉项目）
补充所有异常状态、数据标注、交互说明
↓
【T日】技术评审会
演示原型 + 讲解数据流 + 答疑
开发提出技术难点，PM现场调整或记录待办
↓
【T+1日】输出PRD
原型定稿 + 生成规格文档 + 字段映射表
上传至项目管理工具（Jira/禅道/飞书项目）
↓
【T+3日】设计介入
UI设计师基于原型出视觉稿
设计师与PM对齐交互细节（动效、微交互）
↓
【T+5日】开发启动
前端对照原型+视觉稿开发
测试对照原型写用例（异常状态全覆盖）交付物版本管理
| 版本号 | 命名示例 | 适用阶段 | 存储位置 |
|---|---|---|---|
| v0.1 | 订单系统原型_低保真_评审版 | 业务评审 | 墨刀云端/飞书文档 |
| v0.5 | 订单系统原型_高保真_技术评审版 | 技术评审 | Axure Cloud/共享盘 |
| v0.9 | 订单系统原型_定稿_待开发 | 设计开发 | 项目管理系统附件 |
| v1.0 | 订单系统原型_上线版 | 上线归档 | 知识库/Confluence |
变更控制：任何原型修改必须记录《变更日志》（日期/修改人/修改内容/影响范围），并在原型首页置顶说明
五、让"用户满意"的原型心法
1. 用户参与式设计（Co-design）
不要闭门造车，在原型阶段就让用户介入：
【用户测试三步法】
第一步：任务测试（5分钟）
给用户原型链接，不说任何提示："请试着完成下单"
观察：在哪里犹豫？哪里点错？哪里想放弃？
第二步：出声思考（10分钟）
让用户边操作边说出想法："我现在想找优惠券，但没看到入口"
记录：认知盲区、术语误解、流程断裂点
第三步：快速迭代（当天）
根据反馈调整原型，当晚发新版本给用户确认2. 场景化原型：拒绝"功能清单式"设计
错误示范：原型按功能模块排列（用户管理、订单管理、商品管理...）
正确示范 ：原型按用户故事排列：
【外卖骑手端原型结构】
故事线：骑手小王的一天
├── 07:00 上线准备
│ ├── 健康打卡（拍照上传）
│ ├── 装备检查（清单确认）
│ └── 接单设置（最大接单量/配送范围）
├── 10:30 高峰期接单
│ ├── 新订单推送（语音播报+震动）
│ ├── 到店取餐（导航+预计等待时间）
│ └── 异常上报（商家未出餐/地址错误）
├── 13:00 午间休息
│ ├── 收入查看（实时账单）
│ └── 问题反馈（客服入口）
└── 20:00 收工下线
├── 今日数据（单量/里程/收入）
└── 明日预约（设置上线提醒）这种结构让业务方一眼看懂**"用户怎么用"，而非"系统有什么功能"**
六、工具组合实战：一个完整项目的原型流转
以"企业级CRM系统"为例，展示工具如何配合：
【阶段1：需求探索】（第1周）
工具：墨刀 + XMind
输出：10页低保真原型 + 用户旅程地图
受众：业务总监、销售负责人
目标：确认需求范围，争取资源
【阶段2：方案细化】（第2-3周）
工具：Axure RP + Excel
输出：80页高保真原型 + 数据字典 + 接口文档
受众：技术负责人、前后端开发、测试经理
目标：技术评审通过，进入开发排期
【阶段3：视觉设计】（第4周，与开发并行）
工具：Figma（UI设计师主导，PM配合）
输出：视觉稿 + 设计规范 + 切图资源
受众：前端开发、品牌部门
目标：视觉还原度95%以上
【阶段4：开发跟进】（第5-8周）
工具：Axure Cloud + 项目管理工具
动作：每周原型走查，开发疑问实时答疑
输出：《原型答疑记录》 + 变更日志
目标：减少开发返工，确保按图施工
【阶段5：验收测试】（第9周）
工具：Axure原型 + 测试用例
动作：测试对照原型状态机写用例，逐条验证
输出：Bug清单 + 原型修正记录
目标：上线前所有状态覆盖验证七、总结：原型交付的"三好原则"
| 原则 | 内涵 | 检验标准 |
|---|---|---|
| 好懂 | 业务方不用解释就能看懂 | 给非技术人员演示，能说出页面用途 |
| 好做 | 开发看完知道怎么实现 | 开发能说出技术方案和所需接口 |
| 好测 | 测试能写出完整用例 | 测试用例覆盖原型中所有状态分支 |
最终建议：
- 初级PM先掌握墨刀 走通流程，再用Axure攻克复杂逻辑
- 每次原型评审后问三个问题："哪里看不懂？""哪里觉得难做？""还有什么情况没考虑到？"
- 建立个人原型组件库（登录模块、列表页、表单页、详情页），复用率决定效率上限
原型是产品经理的**"设计语言"，工具只是语法，真正重要的是 对业务的理解深度和对用户场景的还原精度**。