不会画原型被产品经理嘲笑？
"你这画的是什么？用户能看懂吗？"——需求评审会上，产品经理指着你的原型图说这句话的时候，全场安静得能听到空调出风口的声音。
这种场景，我相信很多开发者都经历过。
不是科班出身，没学过设计，但工作中又经常需要画原型——给领导汇报方案、写技术方案文档、做内部工具的原型演示。网上搜"原型怎么画"，出来的全是产品经理视角的长篇大论，看完还是不知道从哪下手。
今天这篇文章，不讲理论，只讲实操。从一个干了十几年开发、画过上百张原型图的老程序员角度，把"从0到1画一张专业原型图"这件事彻底拆透。
一、先搞清楚：你到底要画什么级别的原型？
很多人一上来就打开工具开始拖组件，画到一半发现方向全错了。原型分三个级别，先搞清楚你要画哪个：
低保真原型（线框图）：用矩形、线条、文字占位符搭出页面骨架。不看颜值，只看结构和流程。适合内部沟通、方案讨论、快速验证想法。纸笔就能画，10分钟出一张。
中保真原型：在低保真基础上加了基本样式——真实的按钮样式、输入框、导航栏，颜色克制，主要看页面布局和信息层级。适合需求评审、技术方案附图。这是日常工作中最常用的级别。
高保真原型：接近最终产品外观，有真实内容、交互动效、页面跳转。适合给客户演示、向老板汇报、用户测试。制作成本高，一般只在关键节点使用。
90%的场景，中保真就够了。 不要一上来就追求高保真，花两小时调颜色和圆角，结果需求一变全部白费。
二、画之前的准备工作：比动手更重要
我见过太多人跳过这一步直接开画，然后反复修改到崩溃。画原型之前，花10分钟做这三件事：
1. 列出用户路径
不管你画的是什么系统，一定有用户操作的主线。比如画一个"工单管理系统"：
- 管理员：登录 → 查看工单列表 → 分配工单 → 查看处理进度 → 导出报表
- 处理人：登录 → 接收工单 → 处理工单 → 提交结果
- 提交人：登录 → 创建工单 → 查看状态
把这三条路径写在纸上或便签上，画的时候时刻对照——每一个页面、每一个按钮，都必须服务于某条路径。不服务于任何路径的元素，就是多余的。
2. 确定页面清单
根据用户路径，列出需要画的页面。还是工单系统的例子：
- 登录页
- 工单列表页（含筛选、搜索）
- 工单详情页
- 创建工单页
- 工单分配页
- 数据统计页
每张页面对应一个画板，在工具里排列好顺序。不要在一张画板上画完所有内容——那是流程图不是原型图。
3. 确定布局规范
- 页面宽度：Web端按1440px设计，内容区1200px；移动端按375px（iPhone标准）
- 字号：标题16-18px，正文14px，标注12px
- 间距：模块间距24px，元素间距12px，按钮内边距8-12px
- 配色：背景#FFFFFF，主色用一个品牌色，辅助用中性灰
这些数字不用记死，但心里有谱，画出来的东西就不会东倒西歪。
三、动手画：6步从中保真原型
第1步：搭建页面框架
每个页面先搭骨架——顶部导航栏、左侧菜单（如果有）、主内容区、底部操作栏。用灰色矩形占位就行，不用管颜色。
这一步的核心原则：先定结构，后填内容。 就像盖房子先搭框架再砌墙，不要一上来就纠结某个按钮的圆角是4px还是8px。
第2步：填充核心内容
每个页面的主内容区放什么？回到你的用户路径，这条路径走到这个页面，用户要做什么操作？
- 工单列表页：表格（工单编号、标题、状态、创建时间、操作按钮）+ 顶部筛选栏
- 创建工单页：表单（标题输入框、类型下拉选择、描述文本域、附件上传、提交按钮）
- 详情页：工单信息卡片 + 处理记录时间线 + 底部操作按钮
关键技巧：内容用真实文字，不要用"Lorem ipsum"或"测试文字"。写上"服务器磁盘告警-生产环境-紧急"这种真实内容，评审时所有人一眼就看懂。
第3步：标注交互逻辑
中保真原型不需要做真正的跳转，但要用标注把交互逻辑写清楚。方法很简单——在页面旁边放一个文本框，写明：
- 点击"提交"按钮 → 跳转到工单列表页
- 点击"取消"按钮 → 返回上一页
- 工单状态为"已完成"时，操作列不显示"分配"按钮
- 表单未填写完整时，提交按钮置灰
这些标注是给开发和自己看的，防止评审后回头改的时候忘了当时的设计意图。
第4步：统一组件样式
所有页面画完后，回头统一检查一遍组件样式：
- 所有主按钮：同样的背景色、字号、圆角、内边距
- 所有输入框：同样的高度、边框、圆角
- 所有表格：同样的表头样式、行高
- 所有弹窗：同样的宽度、标题样式、按钮位置
不一致的组件是原型图最大的不专业表现。 产品经理一眼就能看出来"这不是一个人画的"或者"画的人没走心"。
第5步：添加状态说明
很多开发者画原型只画了"正常状态"，忘了异常状态。但恰恰是异常状态决定了你的方案是否经得起评审：
- 空数据状态：列表没有数据时显示什么？（空状态插画 + "暂无数据"文字 + 引导操作按钮）
- 加载状态：数据请求中显示什么？（骨架屏 or Loading动画）
- 错误状态：请求失败显示什么？（错误提示 + 重试按钮）
- 权限不足：没有权限的用户看到什么？（灰显 or 隐藏菜单）
每个核心页面至少画两个状态：正常 + 空数据。多了不用，但这两个必须有。
第6步：自检清单
交出去之前，对照这张清单过一遍：
- 每个页面都有明确的标题
- 用户路径完整，没有断头路
- 所有按钮都标注了跳转目标
- 异常状态至少覆盖了空数据
- 组件样式全局统一
- 页面之间有明确的跳转关系标注
- 内容文字是真实的，不是占位符
- 没有出现任何"TODO"或"待补充"
四、原型图工具怎么选
工欲善其事必先利其器。画原型图不一定要花钱，关键看你的使用场景：
日常偶尔画图：用免费在线工具就够了。Excalidraw（免费开源，手绘风格，适合快速画线框图）、singcheng.com（流程图和简单原型都能画）、Penpot（开源免费，支持协作，Figma的免费替代品）。
需要画移动端高保真原型：singcheng.com免费版（3个文件够用，组件库丰富）、Lunacy（完全免费，Windows原生支持，能打开Figma和Sketch文件）。
需要复杂交互和条件逻辑：Axure（功能最强但学习成本高，适合后台系统原型）。
我的建议：如果你跟我一样，只是日常工作中偶尔需要画原型，别花钱买会员。Excalidraw画线框图、Draw.io画流程图、Figma免费版画中保真，三个工具加起来覆盖95%的需求，全部免费。
五、新手最容易犯的5个错误
画了十几年原型，踩过的坑和见别人踩过的坑，总结下来就这5个：
错误1：一上来就画高保真。 花三小时调配色和阴影，评审时一个需求变更，三小时白费。正确做法：先画线框图，评审通过后再做中保真。
错误2：只画正常路径。 用户操作顺利时怎么走都画了，但点错了怎么办？没权限怎么办？网络断了怎么办？评审时被问住，现场改图，场面尴尬。
错误3：内容全是占位符。 "标题1""内容1""按钮1"——评审时所有人都在猜这到底是什么。用真实业务内容，沟通效率提升10倍。
错误4：一个页面塞太多信息。 恨不得把所有功能都挤在一个页面里，密密麻麻全是组件。信息密度太高，看的人找不到重点。正确做法：一个页面只做一件事，功能多了就拆页面。
错误5：不标注交互逻辑。 画完就交，以为别人能看懂你的设计意图。结果开发按自己的理解做，做出来跟你想的完全不一样。标注不需要很长，一句话说清楚就行。
六、总结
画原型图这件事，核心不是工具用得多溜，而是想清楚再动手。
- 先确定原型级别（90%用中保真）
- 再列出用户路径和页面清单
- 然后按框架→内容→交互→样式→状态的顺序画
- 最后用自检清单过一遍
工具不重要，免费工具完全够用。思路对了，用纸笔画出来的原型都比用专业工具瞎画的强。
下次再有人让你画原型图，别慌。按这个流程走，30分钟出一张让产品经理挑不出毛病的中保真原型。