4. 低保真原型快速搭建：线框图、页面流程、关键交互
用户场景
项目启动会结束后，产品经理小陈要在一周内完成电商App“个人中心”模块的需求评审。业务方只给出了两句口头描述：“用户能查看订单、管理收货地址、联系客服。”开发和设计需要具体的页面结构和操作流程才能评估工作量。小陈打开Figma，决定用低保真原型快速把核心页面和跳转关系搭出来，赶在周五评审会前与UI、前端、后端对齐一遍。
典型场景标签： 需求口头化 | 周期紧迫 | 多角色需同步 | 业务边界模糊
需求痛点分析
在未搭建低保真原型之前，团队常陷入以下沟通陷阱：
- 页面范围不清： 业务方说“一个页面搞定”，实际需要5个页面承载；
- 流程断点： 从“订单列表”到“订单详情”再到“取消订单”缺少中间态页面，开发到一半才发现缺页面；
- 交互遗漏： 点击“联系客服”是跳转IM还是弹出电话？未标注时开发和设计各做一套方案；
- 评审反复： 每次评审都在讨论新页面是否该加，而不是聚焦已有页面的细节优化。
以上痛点的根因是需求方和实现方对“完成后的系统”没有共同的可视化参照物。低保真原型正是用最低成本构建这个参照物。
原型设计要点
低保真原型不是“草稿”，而是一种有纪律的快速表达。设计时需围绕三个维度展开：
4.1 线框图 — 页面骨架
- 灰度优先： 所有元素使用黑白灰，避免色彩分散评审注意力；
- 占位符代替真实内容： 头像用圆+斜线，图片用矩形+“图片”文字，文本用横线组；
- 组件可识别： 按钮、输入框、列表项使用Figma自带或社区UI Kit，保持统一的视觉符号；
- 标注尺寸比例： 不必精确到像素，但需标明“顶部导航高度约48–56px”“左右边距16px”等相对关系。
4.2 页面流程 — 跳转与状态
- 主流程完整： 覆盖用户从入口到核心任务完成的所有页面（如“个人中心 → 订单列表 → 订单详情 → 取消订单 → 结果页”）；
- 异常状态标记： 空白态、加载态、网络错误、无权限等至少用文字或单独画板标出；
- 页面编号与连线： 在画布中用箭头连接画板，每个画板右上角标注编号，方便评审时快速定位。
4.3 关键交互 — 操作反馈
- 触发方式： 点击、长按、左滑、下拉刷新等需在画板旁用文字气泡说明；
- 反馈类型： 跳转新页面、弹出toast、加载中、弹窗确认等必须标注；
- 过渡意图： 如果是“右滑返回上级”或“底部弹出动作面板”，用箭头+文字描述过渡方向。
高效策略： 先画线框图 → 再用箭头串联流程 → 最后在关键位置加交互注释。三轮迭代，每轮只聚焦一个维度，避免一次塞入过多信息。
沟通协作方法
低保真原型本身就是沟通载体，但要发挥最大价值，需配合以下协作方式：
- 异步预审 + 同步评审： 将原型链接提前1天发到项目群，要求各角色标注疑问；评审会直接讨论已收集的问题，而非从头过一遍；
- 画板命名规范： 页面画板命名格式为“模块_页面_版本”，如“个人中心_订单列表_v1”，方便在Figma中搜索和引用；
- 用注释代替口头说明： 在Figma画板上用文字气泡标注逻辑判断（如“如果已登录，显示用户名；未登录显示‘去登录’”），减少会议中的来回确认；
- 版本标记： 每轮修改后更新画板右上角的版本号（v1→v2），并在群内发送更新日志，避免团队使用过期版本。
避坑提醒： 不要试图在低保真阶段对齐视觉风格、图标细节或品牌色。一旦开始讨论“这个按钮圆角是不是大了”，就偏离了快速搭建的初衷。建议在Figma中新建一个“视觉探索”页面单独收纳UI细节争议，主流程页面继续保持灰度。
检查清单
在提交评审前，逐项核对以下清单，确保原型没有结构性遗漏：
| # | 检查项 | 说明 | 状态 |
|---|---|---|---|
| 1 | 核心业务页面完整 | 所有用户故事涉及的页面都已画出，无遗漏 | ▢ 是 ▢ 否 |
| 2 | 主流程可走通 | 从入口到任务完成，所有跳转关系已用箭头连接 | ▢ 是 ▢ 否 |
| 3 | 异常态已标注 | 空白态、加载态、错误态至少有一个占位画板或文字说明 | ▢ 是 ▢ 否 |
| 4 | 交互反馈有注释 | 点击、滑动、输入等操作的响应已用文字气泡说明 | ▢ 是 ▢ 否 |
| 5 | 页面编号与版本号 | 每个画板右上角有编号，主文件标注了当前版本 | ▢ 是 ▢ 否 |
| 6 | 灰度无彩色 | 低保真原型中未使用彩色元素，避免干扰评审焦点 | ▢ 是 ▢ 否 |
验收条件
以下条件全部满足时，本章节对应的低保真原型可进入下一阶段（高保真或开发）：
| # | 验收条件 | 验证方式 | 通过标准 |
|---|---|---|---|
| AC-1 | 所有业务方确认页面范围完备 | 业务方逐页确认 | 无新增页面需求 |
| AC-2 | 主流程链路无断裂 | Figma原型走查 | 从入口到结束可连续点击 |
| AC-3 | 关键交互行为已达成共识 | 评审会记录 | 开发、设计、产品三方同意 |
| AC-4 | 异常态处理方案已明确 | 对照清单核对 | 至少文字描述或画板示意 |
| AC-5 | 原型已锁定版本并共享 | Figma链接可访问 | 所有角色拥有查看权限 |
交付物模板： 本章完成后，应输出一个Figma文件，包含：① 线框图画板（灰度，每个页面一个Frame）；② 流程连线图层（用箭头插件或手动绘制）；③ 交互注释图层（统一使用16px圆角矩形+文字，置于画板右侧）；④ 一个“变更记录”页面，记录每次版本更新的日期和改动点。
Figma操作提示（无代码）
- 快速复制画板： 选中Frame后按住 Alt 拖拽，快速生成同尺寸画板用于流程串联；
- 使用Auto Layout： 给容器添加Auto Layout后，内部元素会自适应排列，调整边距时无需逐个移动组件；
- 箭头插件： 推荐使用Figma社区插件“Arrow Auto”，可批量生成带箭头的连线并自动吸附画板边缘；
- 组件复用： 将顶部导航、底部Tab、列表项等常用模块创建为Local Component，拖拽到画板后修改文本即可，保持全局一致性；
- 注释图层统一管理： 在画板外新建一个“注释”矩形，内部用文字列出交互反馈，所有注释样式保持统一（如深灰背景+白字，字号12px）。