很多人画原型，是奔着"像"去的——像真App、像上线后的样子、像设计师给的稿子。颜色调了，圆角修了，图标对齐了，做完发到群里，大家说一句"挺好看的"，然后进入开发。
这个流程看着很顺，其实是最贵的做法。
因为原型的价值从来不是"像"，而是让人挑出毛病。判断一张原型合不合格，标准只有一句：看图的人敢不敢在上面改东西。 图太漂亮，别人反而不敢下手；图太粗糙，别人看不懂。中间那个"刚好能挑毛病"的度，才是原型的全部技术含量。
这篇文章用一个真实量级的项目算例，讲清楚三件事：保真度怎么选、画到什么程度该停、标注该标什么。最后是五个坑和九条自检。
一、原型在所有图里的位置
我们这套图系列里，几张图的分工是这样的：
| 图 | 回答什么问题 | 什么时候画 |
|---|---|---|
| 用例图 | 谁，用系统做什么 | 定范围（最早） |
| 流程图 | 一件事按什么步骤走 | 定逻辑（次之） |
| 原型图（本文） | 长什么样、点哪里、点了会怎样 | 定交互（开发前） |
| 时序图 | 谁先调谁、耗时多少 | 定接口（开发前） |
最常见的问题是拿原型图当需求文档用。原型能说清"长什么样"，说不清"为什么这样"和"数据从哪来"。它必须配一段说明文字，否则开发只能猜。
二、反常识：保真度越高，发现的问题越少
这是我们做过的一次对照。同一个改版需求，两种做法：
| 做法 | 投入 | 评审发现的问题数 | 平均修改一次耗时 |
|---|---|---|---|
| 低保真线框图 | 3 小时 | 31 个 | 约 20 分钟 |
| 高保真（含视觉稿、动效） | 2 个工作日 | 8 个 | 约 4 小时 |
结果很反直觉：花两天做出来的精美原型，只被挑出 8 个问题；花三小时画的线框图，被挑出 31 个。
原因很简单。图一精美，看的人就会切换成"验收模式"——默认你已经想好了，只提一些"这个颜色能不能再淡一点"的意见。而线框图逼着人进入"挑错模式"——结构不对、流程缺一步、异常状态没画，这些真问题才会冒出来。
更现实的是修改成本：线框图改一次 20 分钟，高保真改一次 4 小时。31 个问题里哪怕有一半要改，两种做法的总耗时差距会拉开到十倍以上。
所以第一条原则：评审前用低保真，评审后再上保真度。
三、三层保真度，按阶段切换
| 层级 | 画什么 | 用什么画 | 适用阶段 |
|---|---|---|---|
| 低保真（线框） | 区块位置、元素有无、跳转关系 | 灰块 + 占位符 | 需求评审 |
| 中保真 | 真实尺寸、真实文案、关键状态 | 线框 + 状态 | 开发联调前 |
| 高保真 | 配色、圆角、动效、真实图片 | 视觉稿 | 上线前确认 / 给老板看 |
关键判断：谁看图，就给谁对应那一层。
给业务方和产品看，低保真；给开发和测试看，中保真；给决策层看，高保真。给错层级，要么没人提意见，要么全是无关意见。
四、完整算例：一个 App 首页改版
4.1 需求与量级
| 项 | 数值 |
|---|---|
| 首页模块数 | 6 个（搜索、轮播、分类、推荐列表、悬浮入口、底部导航） |
| 涉及的页面数 | 首页 + 3 个二级页 + 2 个弹窗 |
| 日均访问 | 约 12 万人次 |
| 改版目标 | 推荐列表点击率从 3.1% 提到 4.5% 以上 |
4.2 先列页面清单，再动画面
这一步最容易被跳过，也最致命。先把要画的页面列全：首页（正常）、首页（无网络）、首页（无数据）、二级页×3、弹窗×2、加载中、操作失败、空状态。
数一下：3 个"正常页面"，却有 5 个"异常状态"。这就是原型的真相——状态比页面多。
只画正常状态的原型，等于把一半的工作量留给开发去猜。猜出来的结果，通常是五种不同的处理方式。
4.3 尺寸与热区：两个必须守的数
可点击区域不小于 44×44。这是移动端的最低舒适值，老年用户和手抖的时候尤其明显。我们那次改版把悬浮入口从 36 加到 48，点击率当场上去了一截——这不是设计优化，是生理限制。
字号层级不超过三级。 标题、正文、辅助信息，三级足够。层级超过三级，页面就没有重点了。
4.4 标注：三条必标，其余不标
每个页面配一段说明，只标三件事：
| 标注项 | 例子 | 为什么必须标 |
|---|---|---|
| 状态 | 列表为空时显示占位图 + "还没有内容" | 开发默认会留白 |
| 边界 | 标题超过两行省略号；金额超过 8 位缩小字号 | 不标就会出现文字撑破布局 |
| 异常 | 加载失败显示重试按钮；超时 10 秒提示 | 不标就没人做 |
至于颜色值、圆角、阴影这些，交给视觉稿。原型图里标这些，既浪费时间又会干扰评审。
4.5 跳转逻辑：一张表胜过十张图
页面多了之后，别靠箭头连线，越连越乱。用一张表：
| 触发元素 | 触发动作 | 目标页面 | 备注 |
|---|---|---|---|
| 轮播图 | 单击 | 活动详情（H5） | 按配置 ID 跳转 |
| 分类图标 | 单击 | 分类列表 | 传分类 ID |
| 悬浮入口 | 单击 | 发布页 | 需登录，未登录弹登录框 |
| 列表项 | 单击 | 详情页 | 传内容 ID |
| 返回键 | 单击 | 上一页 | 二级页返回首页时刷新 |
这张表是开发和测试的共同依据。图负责"长什么样"，表负责"点了去哪"，两者缺一不可。
4.6 什么时候该停
出现下面三个信号之一，就可以停手：
- 连续两轮评审，没有人提出结构性问题（只剩颜色、文案这类意见）；
- 异常状态已经覆盖到上表列出的全部 5 种；
- 开发与测试拿着图和表，能自己说出"这个状态要怎么做"。
再往下画，就进入视觉设计环节了，那是另一件事。
四点六、八个高频组件的最小约定
原型不必做完整组件库，但下面这八样必须统一约定，否则一个页面会出现三种按钮：
| 组件 | 最小约定 |
|---|---|
| 按钮 | 主按钮每屏最多一个；禁用态要画 |
| 输入框 | 占位文案、出错提示位置、字数上限 |
| 下拉选择 | 展开形态、选中态、无数据态 |
| 复选框 / 单选 | 选中与未选中两种态，不画第三种 |
| 列表项 | 高度、左右间距、分割线位置 |
| 弹窗 | 居中还是底部弹出；遮罩能否点击关闭 |
| Toast | 显示时长、位置、能否手动关 |
| 导航栏 | 返回按钮位置、标题超长怎么处理 |
约定写成一页说明，配在原型旁边。开发照着做，测试照着验。
四点七、和视觉稿怎么交接
原型定的是"结构对不对"，视觉稿定的是"好不好看"，两者不要混在一次评审里过。顺序是：原型评审通过 → 视觉设计 → 视觉走查 → 开发。
走查阶段最容易漏的是状态：视觉稿通常只给正常态，空状态、出错态、加载态要单独列清单让设计师补。我们吃过一次亏——上线前三天才发现加载失败页没有视觉稿，最后让开发随手放了一行灰字，至今还在。
五、五个最常见的坑
- 只画正常状态。 占比最高，也最贵。空状态、加载失败、无网络这三样，不画必返工。
- 一上来就高保真。 评审时被"好看"带偏，真问题全被藏起来。
- 原型当需求文档。 图说不清数据从哪来、规则是什么，必须配文字。
- 跳转只画箭头不写表。 页面一多，箭头连成蜘蛛网，没人看得懂。
- 热区不做标注。 看着能点的地方点不了，看着不能点的地方能点，测试阶段集中爆发。
六、画完自检的 9 条
- 空状态画了吗？
- 加载中和加载失败画了吗？
- 无网络画了吗？
- 文案用的是真实文案，还是"这里是文字"这种占位？
- 每个可点击元素都不小于 44×44 吗？
- 超长文本、超长标题、超大金额这些边界都标了吗？
- 跳转逻辑表配齐了吗？
- 需要登录的入口，标注了吗？
- 图上的模块，和用例图里的用例能一一对上吗？对不上的，要么补用例，要么删模块。
七、总结
原型图是这几张图里最"快"的一张：低保真三小时能出，改一次二十分钟。
但它也是最容易画错方向的一张——一旦画成"缩小版的产品"，它就失去了唯一的价值。
记住那句判断标准：看图的人敢不敢在上面改东西。
敢改，说明你画对了。一片叫好，多半是画错了。