主题
02 - 线框图与原型设计（Wireframe & Prototype）
"原型的价值不在于它有多漂亮，而在于它能帮你验证多少假设。"
目录
基本概念
在正式开始之前，我们先理清三个经常被混用的概念：
草图、线框图、原型的区别
保真度从低到高：
草图 线框图 原型
Sketch Wireframe Prototype
┌─────┐ ┌─────────┐ ┌─────────┐
│ ~~~ │ │ [Logo] │ │ ★ Logo │
│ --- │ │ ─────── │ │ ═══════ │
│ xxx │ │ [按钮] │ │ [登 录] │ <-- 可点击
│ ooo │ │ │ │ 动效 │ <-- 有交互
└─────┘ └─────────┘ └─────────┘
纸笔手绘 灰度框架 可交互模型
5 分钟 30 分钟 2-8 小时
表达想法 确定布局 验证交互| 类型 | 工具 | 目的 | 保真度 | 时间投入 |
|---|---|---|---|---|
| 草图 | 纸和笔 | 快速表达想法，头脑风暴 | 极低 | 几分钟 |
| 线框图 | Figma/Axure | 确定页面布局和内容结构 | 低-中 | 几十分钟 |
| 原型 | Figma/Axure | 模拟真实交互和流程 | 中-高 | 几小时到几天 |
低保真 vs 高保真
这是原型设计中最重要的概念区分之一。选择合适的保真度，能让你在正确的时间获得正确的反馈。
详细对比
| 维度 | 低保真原型（Lo-Fi） | 高保真原型（Hi-Fi） |
|---|---|---|
| 视觉表现 | 灰度色块、简单线条、占位符 | 真实颜色、字体、图片、图标 |
| 交互程度 | 基本的页面跳转 | 完整的交互动效、微动画 |
| 内容 | 示意性文字（如"标题文字"） | 接近真实的内容 |
| 制作时间 | 几小时 | 几天到几周 |
| 修改成本 | 极低，随时推翻重来 | 较高，修改需要较多时间 |
| 适用阶段 | 需求验证、方案探索 | 开发前最终确认、用户测试 |
| 目标受众 | 内部团队、利益相关者 | 用户测试、开发交付 |
| 获取反馈 | 关注结构和流程 | 关注视觉和细节体验 |
| 技能要求 | 低，PM 即可完成 | 中高，通常需设计师参与 |
| 工具 | 纸笔、Balsamiq、Figma | Figma、Sketch、Axure |
直观对比——登录页面
低保真原型 高保真原型
(Lo-Fi) (Hi-Fi)
┌──────────────────┐ ┌──────────────────┐
│ │ │ │
│ [ Logo ] │ │ ★ AppName │
│ │ │ │
│ ┌────────────┐ │ │ ┌────────────┐ │
│ │ 用户名 │ │ │ │ 📱 手机号 │ │
│ └────────────┘ │ │ └────────────┘ │
│ │ │ │
│ ┌────────────┐ │ │ ┌────────────┐ │
│ │ 密码 │ │ │ │ 🔒 请输入密码│ │
│ └────────────┘ │ │ └────────────┘ │
│ │ │ │
│ [ 登录 ] │ │ ╔════════════╗ │
│ │ │ ║ 登 录 ║ │
│ 忘记密码 | 注册 │ │ ╚════════════╝ │
│ │ │ │
│ --- 或 --- │ │ ── 其他方式 ── │
│ │ │ │
│ [微信] [QQ] │ │ (微) (Q) (微博) │
│ │ │ │
│ │ │ 忘记密码？ 立即注册│
└──────────────────┘ └──────────────────┘
灰色块+占位文字 有颜色+图标+真实文字
无交互效果 有点击/输入交互什么时候用低保真，什么时候用高保真？
项目阶段时间线：
概念阶段 ──> 方案探索 ──> 方案确认 ──> 开发交付 ──> 用户测试
│ │ │ │ │
v v v v v
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│ 草图 │ │低保真 │ │低保真 │ │高保真 │ │高保真 │
│ │ │ │ │ + │ │ │ │ │
│ │ │ │ │中保真 │ │ │ │ │
└──────┘ └──────┘ └──────┘ └──────┘ └──────┘选择建议：
- 用低保真 当你需要：快速验证想法、和团队讨论方案、探索多种可能性
- 用高保真 当你需要：进行用户测试、交付给开发团队、向高层汇报
常用原型工具对比
五大原型工具全方位对比
| 维度 | Figma | Axure | Sketch | 墨刀 | Balsamiq |
|---|---|---|---|---|---|
| 类型 | 设计+原型 | 专业原型 | 设计+原型 | 设计+原型 | 线框图 |
| 平台 | Web/桌面端 | Win/Mac | Mac only | Web/桌面端 | Web/桌面端 |
| 价格 | 免费版可用 Professional $15/月 | $29/月 (Pro) | $12/月 | 免费版可用 高级版 ¥99/月 | $9/月 |
| 学习曲线 | 中等 | 较陡 | 中等 | 简单 | 极简 |
| 协作能力 | 实时多人协作 (最强) | 较弱 | 需插件 | 支持协作 | 基础协作 |
| 交互能力 | 中等偏上 | 最强 | 中等 | 中等 | 极弱 |
| 组件库 | 社区丰富 | 内置+社区 | 插件丰富 | 内置模板多 | 内置手绘风格 |
| 设计能力 | 强 | 弱 | 强 | 中等 | 极弱 |
| 开发交付 | Dev Mode | 生成规格说明 | 需插件 | 内置标注 | 不支持 |
| 适合人群 | PM/设计师 | 资深 PM | 设计师 | PM/初学者 | PM/快速验证 |
各工具特点详解
Figma — 当前最推荐
┌──────────────────────────────────────┐
│ Figma │
├──────────────────────────────────────┤
│ │
│ 优势: │
│ + 浏览器即可使用，无需安装 │
│ + 实时协作，团队效率极高 │
│ + 社区资源丰富（模板、组件库） │
│ + 设计+原型一体化 │
│ + Dev Mode 方便开发交付 │
│ + 免费版功能已足够个人使用 │
│ │
│ 劣势: │
│ - 复杂交互不如 Axure │
│ - 国内访问偶尔不稳定 │
│ - 高级功能需付费 │
│ │
│ 适合: 绝大多数 PM 和设计团队 │
│ │
└──────────────────────────────────────┘Axure — 专业交互原型
┌──────────────────────────────────────┐
│ Axure RP │
├──────────────────────────────────────┤
│ │
│ 优势: │
│ + 交互逻辑表达能力最强 │
│ + 支持条件判断、变量、函数 │
│ + 可以做出接近真实的交互效果 │
│ + 适合复杂 B 端产品原型 │
│ │
│ 劣势: │
│ - 学习曲线陡峭 │
│ - 界面设计能力较弱 │
│ - 协作功能不如 Figma │
│ - 价格较贵 │
│ │
│ 适合: 需要复杂交互的 B 端 PM │
│ │
└──────────────────────────────────────┘Sketch — Mac 设计利器
┌──────────────────────────────────────┐
│ Sketch │
├──────────────────────────────────────┤
│ │
│ 优势: │
│ + 矢量设计能力强 │
│ + 插件生态丰富 │
│ + 在国内设计师中使用广泛 │
│ + 文件体积小，运行流畅 │
│ │
│ 劣势: │
│ - 仅支持 Mac │
│ - 协作需借助第三方工具 │
│ - 原型交互能力一般 │
│ - 正在被 Figma 逐步替代 │
│ │
│ 适合: Mac 用户，尤其是 UI 设计师 │
│ │
└──────────────────────────────────────┘墨刀（MockingBot）— 国产之光
┌──────────────────────────────────────┐
│ 墨刀 │
├──────────────────────────────────────┤
│ │
│ 优势: │
│ + 中文界面，上手极简 │
│ + 内置丰富的中文模板和组件 │
│ + 国内访问速度快 │
│ + 支持团队协作 │
│ + 价格亲民 │
│ │
│ 劣势: │
│ - 设计精度不如 Figma/Sketch │
│ - 社区资源相对较少 │
│ - 高级功能需付费 │
│ │
│ 适合: 国内 PM 初学者，快速出原型 │
│ │
└──────────────────────────────────────┘Balsamiq — 手绘风线框图
┌──────────────────────────────────────┐
│ Balsamiq │
├──────────────────────────────────────┤
│ │
│ 优势: │
│ + 手绘风格，防止过早关注视觉细节 │
│ + 操作极其简单 │
│ + 专注于内容和布局 │
│ + 拖拽即可完成 │
│ │
│ 劣势: │
│ - 无法做交互原型 │
│ - 视觉效果简陋 │
│ - 不能用于开发交付 │
│ │
│ 适合: 快速验证想法，早期讨论 │
│ │
└──────────────────────────────────────┘PM 工具选择建议
你的情况是？
│
┌────────────┼────────────┐
│ │ │
初学 PM 有经验的 PM 设计出身
│ │ │
v v v
┌──────────┐ ┌──────────┐ ┌──────────┐
│ 墨刀 │ │ Figma │ │ Figma │
│ 或 │ │ │ │ 或 │
│ Figma │ │ 复杂交互 │ │ Sketch │
│ │ │ 加 Axure │ │ │
└──────────┘ └──────────┘ └──────────┘原型设计的基本流程
完整流程图
┌─────────────────────────────────────────────────────────────┐
│ 原型设计流程 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ 5 │ │
│ │需求 │ -> │信息 │ -> │页面 │ -> │添加 │ -> │原型 │ │
│ │梳理 │ │架构 │ │布局 │ │交互 │ │评审 │ │
│ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │
│ │ │ │ │ │ │
│ ·分析需求 ·功能结构 ·画线框图 ·页面跳转 ·内部评审 │
│ ·理解用户 ·导航设计 ·确定布局 ·动效设计 ·收集反馈 │
│ ·确定范围 ·页面规划 ·内容填充 ·状态切换 ·迭代修改 │
│ │
└─────────────────────────────────────────────────────────────┘各步骤详解
Step 1：需求梳理
在动手画原型之前，务必做好以下准备工作：
需求梳理清单：
┌────────────────────────────────────────┐
│ │
│ [ ] 明确目标用户是谁 │
│ [ ] 确认核心使用场景 │
│ [ ] 列出本次版本的功能范围 │
│ [ ] 梳理功能优先级（P0/P1/P2） │
│ [ ] 确认业务规则和约束条件 │
│ [ ] 参考竞品的解决方案 │
│ [ ] 与相关方对齐需求理解 │
│ │
└────────────────────────────────────────┘Step 2：信息架构
参考上一节内容，完成：
- 功能结构图
- 页面层级规划
- 导航模式选择
Step 3：页面布局
开始画线框图，确定每个页面的布局结构：
常见的页面布局模式：
1. 列表型 2. 卡片型 3. 宫格型
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ ┌──────────┐ │ │┌────┐┌────┐ │ │┌──┐┌──┐┌──┐ │
│ │ item 1 │ │ ││card││card│ │ ││ ││ ││ │ │
│ └──────────┘ │ │└────┘└────┘ │ │└──┘└──┘└──┘ │
│ ┌──────────┐ │ │┌────┐┌────┐ │ │┌──┐┌──┐┌──┐ │
│ │ item 2 │ │ ││card││card│ │ ││ ││ ││ │ │
│ └──────────┘ │ │└────┘└────┘ │ │└──┘└──┘└──┘ │
│ ┌──────────┐ │ │┌────┐┌────┐ │ │┌──┐┌──┐┌──┐ │
│ │ item 3 │ │ ││card││card│ │ ││ ││ ││ │ │
│ └──────────┘ │ │└────┘└────┘ │ │└──┘└──┘└──┘ │
└──────────────┘ └──────────────┘ └──────────────┘
微信聊天列表 小红书首页 支付宝首页Step 4：添加交互
为关键页面添加交互行为：
- 页面间的跳转关系
- 按钮点击后的效果
- 表单提交的流程
- 异常状态的处理
Step 5：原型评审
组织团队进行评审，收集反馈并迭代。
登录页面线框图示例
下面我们用 ASCII 画一个完整的登录页面线框图，包含多种状态：
主登录页
┌──────────────────────────────────┐
│ ← 跳过 │ <-- 顶部导航栏
├──────────────────────────────────┤
│ │
│ │
│ ┌────────┐ │
│ │ LOGO │ │ <-- 产品 Logo
│ │ 64x64 │ │
│ └────────┘ │
│ 产品名称 App │ <-- 产品名
│ │
│ │
│ ┌────┬────────────────────────┐ │
│ │+86▾│ 请输入手机号 │ │ <-- 手机号输入框
│ └────┴────────────────────────┘ │
│ │
│ ┌─────────────────────────┬──┐ │
│ │ 请输入验证码 │发送│ │ <-- 验证码输入框
│ └─────────────────────────┴──┘ │
│ │
│ ┌──────────────────────────────┐│
│ │ ││
│ │ 登 录 ││ <-- 登录按钮（主操作）
│ │ ││
│ └──────────────────────────────┘│
│ │
│ 密码登录 │ <-- 切换登录方式
│ │
│ ─────────── 其他登录 ─────────── │ <-- 分隔线
│ │
│ (微信) (QQ) (微博) │ <-- 第三方登录
│ │
│ │
│ │
│ 登录即代表同意《用户协议》和 │ <-- 协议勾选
│ 《隐私政策》 │
│ [○] 我已阅读并同意 │
│ │
└──────────────────────────────────┘密码登录页
┌──────────────────────────────────┐
│ ← │
├──────────────────────────────────┤
│ │
│ ┌────────┐ │
│ │ LOGO │ │
│ └────────┘ │
│ 产品名称 App │
│ │
│ ┌────┬────────────────────────┐ │
│ │+86▾│ 请输入手机号 │ │
│ └────┴────────────────────────┘ │
│ │
│ ┌────────────────────────┬───┐ │
│ │ 请输入密码 │ 👁 │ │ <-- 密码输入（可切换明文）
│ └────────────────────────┴───┘ │
│ │
│ ┌──────────────────────────────┐│
│ │ 登 录 ││
│ └──────────────────────────────┘│
│ │
│ 验证码登录 忘记密码？ │
│ │
│ ─────────── 其他登录 ─────────── │
│ │
│ (微信) (QQ) (微博) │
│ │
│ [○] 我已阅读并同意《用户协议》 │
│ 和《隐私政策》 │
│ │
└──────────────────────────────────┘登录流程状态
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ 初始态 │────>│输入中 │────>│ 加载中 │────>│ 结果 │
└────────┘ └────────┘ └────────┘ └────┬───┘
│
┌────────┼────────┐
│ │
┌────┴───┐ ┌────┴───┐
│ 成功 │ │ 失败 │
│跳转首页│ │提示错误│
└────────┘ │重新输入│
└────────┘
各状态说明：
┌──────────────────────────────────────────────┐
│ 初始态：输入框为空，登录按钮置灰不可点击 │
│ 输入中：输入框有内容，登录按钮高亮可点击 │
│ 加载中：点击后按钮显示 loading，不可重复点击 │
│ 成功： 跳转到首页 │
│ 失败： 弹出 Toast 提示"手机号或密码错误" │
└──────────────────────────────────────────────┘从需求到原型的转化思路
转化框架
从一个需求文档到一个可交互的原型，需要经历以下思考过程：
┌───────────────────────────────────────────────────────────┐
│ 需求 --> 原型 转化框架 │
├───────────────────────────────────────────────────────────┤
│ │
│ 需求文档输入 思考过程 原型输出 │
│ ┌─────────┐ ┌──────────┐ ┌─────────┐ │
│ │ 用户故事 │ --> │ 确定页面 │ --> │ 页面列表│ │
│ └─────────┘ └──────────┘ └─────────┘ │
│ ┌─────────┐ ┌──────────┐ ┌─────────┐ │
│ │ 功能需求 │ --> │ 设计布局 │ --> │ 线框图 │ │
│ └─────────┘ └──────────┘ └─────────┘ │
│ ┌─────────┐ ┌──────────┐ ┌─────────┐ │
│ │ 业务规则 │ --> │ 定义交互 │ --> │ 交互流程│ │
│ └─────────┘ └──────────┘ └─────────┘ │
│ ┌─────────┐ ┌──────────┐ ┌─────────┐ │
│ │ 异常场景 │ --> │ 处理边界 │ --> │ 异常态 │ │
│ └─────────┘ └──────────┘ └─────────┘ │
│ │
└───────────────────────────────────────────────────────────┘实例演练：将一个需求转化为原型
需求描述：
用户可以在 App 中搜索商品，输入关键词后显示搜索结果列表，支持按价格/销量排序，可筛选品牌和价格区间。
Step 1：拆解需求，确定页面
需求拆解：
┌─────────────────────────────────────────────┐
│ │
│ 功能点 对应页面 │
│ ──────── ────────── │
│ 输入关键词 --> 搜索页（含搜索框+历史） │
│ 搜索结果 --> 搜索结果页 │
│ 排序功能 --> 结果页顶部排序栏 │
│ 筛选功能 --> 筛选浮层/页面 │
│ │
└─────────────────────────────────────────────┘Step 2：画出页面流程
┌────────┐ ┌────────┐ ┌────────┐
│ 搜索页 │────>│结果页 │────>│商品详情│
│ │ │ │ │ │
│·搜索框 │ │·排序栏 │ │ │
│·搜索历史│ │·筛选入口│ │ │
│·热门搜索│ │·商品列表│ │ │
└────────┘ └────┬───┘ └────────┘
│
v
┌────────┐
│筛选浮层 │
│ │
│·品牌选择│
│·价格区间│
│·确认按钮│
└────────┘Step 3：画出关键页面的线框图
搜索页 搜索结果页
┌────────────────────┐ ┌────────────────────┐
│ ← ┌──────────┐ 取消│ │ ← ┌──────────┐ 🔍 │
│ │ 搜索商品 │ │ │ │ 连衣裙 │ │
│ └──────────┘ │ │ └──────────┘ │
├────────────────────┤ ├──┬──┬──┬──┬───────┤
│ 搜索历史 清空 │ │综合│销量│价格│筛选▾│
│ ┌────┐ ┌────┐ │ ├──┴──┴──┴──┴───────┤
│ │连衣裙│ │手机 │ │ │┌──────────────────┐│
│ └────┘ └────┘ │ ││ [img] 商品名称 ││
│ ┌────┐ ┌────┐ │ ││ ¥128 ││
│ │耳机 │ │书包 │ │ ││ 已售 1200 ││
│ └────┘ └────┘ │ │└──────────────────┘│
│ │ │┌──────────────────┐│
│ 热门搜索 │ ││ [img] 商品名称 ││
│ 1. iPhone │ ││ ¥258 ││
│ 2. 连衣裙 │ ││ 已售 890 ││
│ 3. 运动鞋 │ │└──────────────────┘│
│ 4. 防晒霜 │ │┌──────────────────┐│
│ │ ││ [img] 商品名称 ││
│ │ ││ ¥99 ││
│ │ ││ 已售 3500 ││
│ │ │└──────────────────┘│
└────────────────────┘ └────────────────────┘Step 4：考虑异常状态
异常状态清单：
┌──────────────────────────────────────────────┐
│ │
│ 1. 搜索无结果 │
│ ┌────────────────────┐ │
│ │ (空状态图标) │ │
│ │ 抱歉，没有找到 │ │
│ │ "xxx" 相关商品 │ │
│ │ │ │
│ │ 换个关键词试试？ │ │
│ │ [热门推荐] │ │
│ └────────────────────┘ │
│ │
│ 2. 网络异常 │
│ ┌────────────────────┐ │
│ │ (断网图标) │ │
│ │ 网络不给力 │ │
│ │ 请检查网络后重试 │ │
│ │ │ │
│ │ [重新加载] │ │
│ └────────────────────┘ │
│ │
│ 3. 加载中状态 │
│ 显示骨架屏(Skeleton) │
│ │
│ 4. 输入为空点击搜索 │
│ 搜索框抖动+提示"请输入搜索内容" │
│ │
└──────────────────────────────────────────────┘转化思路总结
| 步骤 | 核心任务 | 关键问题 |
|---|---|---|
| 1. 拆解需求 | 提取功能点 | 用户需要完成哪些任务？ |
| 2. 确定页面 | 规划页面数量和关系 | 需要几个页面？页面间如何跳转？ |
| 3. 设计布局 | 画出各页面线框图 | 每个页面放哪些元素？如何排列？ |
| 4. 定义交互 | 添加交互行为 | 点击后发生什么？如何反馈？ |
| 5. 处理边界 | 考虑异常情况 | 空数据/无网络/加载中怎么办？ |
原型评审的注意事项
原型评审是确保设计方案质量的关键环节。一次高效的评审能避免后续开发阶段的大量返工。
评审前准备
┌─────────────────────────────────────────────────────┐
│ 评审前准备清单 │
├─────────────────────────────────────────────────────┤
│ │
│ PM 需要做： │
│ [ ] 确认原型完整性（所有页面、状态、流程） │
│ [ ] 准备需求背景说明（为什么做、给谁用） │
│ [ ] 标注交互说明和业务规则 │
│ [ ] 列出已知的遗留问题和待讨论项 │
│ [ ] 提前发送原型链接给参会人员 │
│ │
│ 参会人员： │
│ [ ] PM（主讲） │
│ [ ] UI 设计师（视觉可行性） │
│ [ ] 前端开发（技术可行性） │
│ [ ] 后端开发（数据和接口） │
│ [ ] 测试工程师（测试覆盖） │
│ [ ] 业务方/运营（业务合理性） │
│ │
└─────────────────────────────────────────────────────┘评审流程
1. 背景介绍 2. 流程演示 3. 逐页讲解 4. 讨论答疑 5. 总结确认
(5 min) (10 min) (20 min) (15 min) (5 min)
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│为什么 │ --> │完整 │ --> │详细 │ --> │收集 │ --> │确认 │
│要做 │ │走一遍 │ │说明 │ │问题 │ │结论 │
│这个 │ │核心流 │ │每个页 │ │解答 │ │待办 │
│功能 │ │程 │ │面 │ │疑问 │ │计划 │
└──────┘ └──────┘ └──────┘ └──────┘ └──────┘常见评审问题与应对
| 常见问题 | 应对策略 |
|---|---|
| "这个按钮点了之后会怎样？" | 原型中应标注所有按钮的跳转/响应 |
| "如果用户什么都不填就提交呢？" | 提前考虑空状态和错误状态 |
| "这个数据从哪里来？" | 与后端提前对齐数据来源 |
| "这里的文案合适吗？" | 准备多个文案方案供讨论 |
| "加载很慢的时候页面怎么显示？" | 设计骨架屏/Loading 状态 |
| "和现有功能冲突吗？" | 评审前检查功能依赖关系 |
| "开发周期能接受吗？" | 了解技术实现难度，准备 MVP 方案 |
评审后跟进
评审结束后的 To-Do:
1. 整理会议纪要（30 分钟内）
- 已确认的方案
- 待修改的问题
- 遗留的讨论项
2. 更新原型（1-2 天内）
- 根据反馈修改
- 补充遗漏的页面/状态
3. 同步更新结果
- 发送修改后的原型链接
- 确认所有问题已解决
4. 归档版本
- 保存评审前版本
- 标记最终确认版本本节小结
┌────────────────────────────────────────────────────┐
│ 本节核心要点 │
├────────────────────────────────────────────────────┤
│ │
│ 1. 理解草图 --> 线框图 --> 原型的递进关系 │
│ │
│ 2. 低保真用于方案探索，高保真用于开发交付 │
│ │
│ 3. 推荐新手 PM 从 Figma 或墨刀入手 │
│ │
│ 4. 原型设计流程： │
│ 需求梳理 -> 信息架构 -> 页面布局 │
│ -> 添加交互 -> 原型评审 │
│ │
│ 5. 从需求到原型的关键： │
│ 拆解功能点、确定页面、画布局、 │
│ 加交互、处理异常状态 │
│ │
│ 6. 原型评审做好准备、把控流程、及时跟进 │
│ │
└────────────────────────────────────────────────────┘练习任务
- 用纸笔画出你常用的一个 App 的登录/注册流程线框图
- 选择 Figma 或墨刀，将纸笔草图转化为电子版线框图
- 为线框图添加基本的页面跳转交互
- 列出这个登录流程中需要考虑的所有异常状态