一、原型交付的本质从画图到翻译原型不是美术作品而是产品经理与业务方、研发团队之间的需求契约。优秀的原型交付需要同时满足三个维度维度目标受众核心诉求常见失败点业务正确性用户/业务方“这是我们想要的吗”自嗨式设计脱离真实场景技术可行性研发团队“这能做吗怎么做”过度设计忽视实现成本体验完整性设计师/测试“所有分支都覆盖了吗”只画主流程遗漏异常状态二、项目交付场景的原型策略场景一需求评审会快速对齐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现场调整或记录待办 ↓ 【T1日】输出PRD 原型定稿 生成规格文档 字段映射表 上传至项目管理工具Jira/禅道/飞书项目 ↓ 【T3日】设计介入 UI设计师基于原型出视觉稿 设计师与PM对齐交互细节动效、微交互 ↓ 【T5日】开发启动 前端对照原型视觉稿开发 测试对照原型写用例异常状态全覆盖交付物版本管理版本号命名示例适用阶段存储位置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周与开发并行 工具FigmaUI设计师主导PM配合 输出视觉稿 设计规范 切图资源 受众前端开发、品牌部门 目标视觉还原度95%以上 【阶段4开发跟进】第5-8周 工具Axure Cloud 项目管理工具 动作每周原型走查开发疑问实时答疑 输出《原型答疑记录》 变更日志 目标减少开发返工确保按图施工 【阶段5验收测试】第9周 工具Axure原型 测试用例 动作测试对照原型状态机写用例逐条验证 输出Bug清单 原型修正记录 目标上线前所有状态覆盖验证七、总结原型交付的三好原则原则内涵检验标准好懂业务方不用解释就能看懂给非技术人员演示能说出页面用途好做开发看完知道怎么实现开发能说出技术方案和所需接口好测测试能写出完整用例测试用例覆盖原型中所有状态分支最终建议初级PM先掌握墨刀走通流程再用Axure攻克复杂逻辑每次原型评审后问三个问题“哪里看不懂”“哪里觉得难做”“还有什么情况没考虑到”建立个人原型组件库登录模块、列表页、表单页、详情页复用率决定效率上限原型是产品经理的**“设计语言”工具只是语法真正重要的是对业务的理解深度和对用户场景的还原精度**。