线框图的目标是先确认页面结构和用户路径,再进入视觉设计。下面用低保真方法说明如何从任务边界、信息层级、状态和评审记录开始,制作一份可讨论的线框图。 如需将这些标准落到可编辑画布中,可先打开在线白板,再按本文步骤记录结果。
先确定页面任务
写下目标用户、入口、主任务、必须展示的信息和暂不讨论的内容。灰阶、占位文字和编号能减少色彩与文案对评审的干扰;若要与团队共创,可在 Boardmix 画布中把页面区域和问题放在同一份文件里。
按路径绘制而不是堆控件
先画顶部导航、主内容区和下一步入口,再补充表单、按钮、空状态、加载状态和错误反馈。每个区域都写“用户要完成什么”和“完成后去哪”,不要把未确定的功能伪装成已确认界面。
评审前的四项检查
检查主路径是否只有一个明确动作,返回路径是否清楚,关键输入是否有反馈,移动端裁切后是否仍能识别层级。评审意见用“位置—问题—影响—决定”记录并标注版本;通过后再进入视觉设计。





先写线框图的任务边界
线框图不是视觉稿,重点是确认页面结构和用户路径。开始前在Boardmix 画布写清目标用户、入口、主任务、必须展示的信息和不在评审范围的内容;用灰阶、占位文字和编号降低视觉干扰。
| 区域 | 要表达的内容 | 评审问题 |
|---|---|---|
| 顶部 | 页面标题、返回和全局入口 | 用户知道自己在哪里吗? |
| 主区 | 完成任务所需的字段或内容 | 是否缺少关键输入? |
| 反馈 | 成功、失败、加载和空状态 | 出错后用户能继续吗? |
| 下一步 | 按钮、链接和返回路径 | 主路径是否只有一个明确动作? |
用评审记录替代反复口头修改
评审时按用户路径走一遍,先记录阻断问题,再讨论样式偏好。每条意见写成“位置—问题—影响—决定”,并标注版本。低保真通过后再进入视觉设计;如果不同角色对同一入口理解不一致,回到页面目标,而不是直接加更多按钮。
把线框图交给下一阶段
评审结论应区分阻断问题、可选建议和暂不处理项,并写明负责人和复查日期。线框图通过后,保留一份低保真版本作为基线,再把已确认的页面区域交给视觉设计或开发,避免在不同文件中重复解释同一条路径。
用一张评审表收敛线框图
评审表可以按“区域、用户任务、当前状态、问题、决定、负责人”六列填写。先在页面上编号,再让每条意见指向具体编号;“看起来不够好”要改写成可操作的问题,例如“提交后没有成功反馈”或“返回入口在移动端不可见”。对于暂不处理的建议,写明原因和再次检查的条件。若页面存在登录、支付、权限或网络异常,至少画出成功、失败、加载和空数据四种状态。这样交给视觉和开发时,双方可以按同一份路径复核,而不是仅凭截图猜测。
从线框评审到交接
评审结束后,把已确认的页面区域、待确认的问题和负责跟进的人分开记录。交接给视觉设计时附上入口、主路径、异常状态和不做范围;交接给研发时补充字段含义、校验规则、空状态和返回路径。下一轮修改只围绕记录中的问题展开,避免重新讨论已经确认的结构。
用“提交报修”页面贯穿制作过程
先写出用户任务:住户提交问题、补充照片、选择期望上门时间并收到受理结果。第一版只放页面标题、问题描述、上传入口、时间选择、提交按钮和结果反馈,不讨论颜色、品牌插画或动画。这样评审时大家讨论的是任务能否完成,而不是个人审美。
| 状态 | 页面要表达什么 | 评审问题 | 交接材料 |
|---|---|---|---|
| 首次进入 | 任务、入口和必填项 | 用户知道下一步吗? | 字段说明和默认值 |
| 填写中 | 校验、剩余步骤和返回 | 错误是否能就地修正? | 校验规则与提示语 |
| 提交成功 | 受理编号和后续安排 | 用户是否知道结果与等待时间? | 成功反馈和通知方式 |
| 提交失败 | 原因、重试和保留输入 | 失败后是否需要重新填写? | 错误处理与埋点需求 |
评审意见要指向位置和决定
把每条意见写成“编号—问题—影响—决定—负责人—复查日期”。例如“F-03,提交失败后输入被清空,可能造成重复填写;决定保留已填内容;负责人产品;周三复查”。这比“体验不够好”更容易转成设计和研发任务。
先验证关键路径,再看移动端裁切
桌面线框图完成后,用窄屏宽度走一遍主路径:标题是否仍然可见,按钮是否被推到屏幕外,错误提示是否遮住输入框。只要主任务在移动端无法完成,就先调整布局和信息层级,不要用缩小字体掩盖问题。
交接时保留基线和不做范围
交给视觉设计时附上页面目标、主路径、异常状态和已确认文案;交给研发时补充字段含义、校验规则、权限和接口依赖。把暂不处理的建议单独列出并说明原因,下一轮只讨论新增证据。用在线白板共创时,可将线框区、问题区和决定区分开,避免评论覆盖正式结构。