线框图怎么做：低保真原型的画法与评审要点
线框图的重点不是好看，而是「决定什么放在哪里」。用灰度框和占位文字先把结构和层级定下来，讨论才聚焦在内容与流程上；一旦用了真实配色和图片，所有人的注意力都会跑到视觉细节上。
先确定画到几档：草图、线框、视觉稿
这三个阶段解决的问题完全不同。草图用于快速试错结构，线框图用于确定信息层级和交互路径，视觉稿才处理配色与质感。跳过低保真直接做视觉稿，通常意味着结构问题会在实现阶段才暴露。
- 草图：手绘或极简框，只解决「有没有这块」
- 线框：灰度、占位文字、标明交互元素，解决「放在哪、怎么跳」
- 视觉稿：配色、字体、间距、图像，解决「看起来怎样」
- 线上修改成本越低，越应该往前一档走
页面拆解：从信息层级开始，不是从布局开始
动笔画之前先把页面上的内容按重要性排序：用户第一眼必须看到什么、第二层是什么、什么可以藏进展开区域。排完再决定布局，你会发现布局选择其实是被内容层级决定的，而不是相反。
- 列出页面上的全部内容与操作，先不排版
- 按「不做会怎样」排序，删掉不做也没影响的部分
- 把第一层内容放在首屏可见区域，第二层放滚动区域
- 剩下的移入折叠区、次级页面或直接删掉
用真实文案，不要用 Lorem ipsum
占位假文会让所有方案的排版看起来都一样漂亮。用真实长度的中文文案（尤其是最长的那个按钮名、最长的标题），能立刻发现截断、换行和间距问题。这些问题在实现阶段修复的成本远高于在设计阶段。
- 用真实文案，至少用真实长度
- 特意测最长的标题和按钮文字，看会不会挤坏布局
- 空状态、错误状态、加载状态都要画，不要只画有数据的样子
- 标注交互元素：按钮、输入框、可点击卡片用不同样式区分
把页面之间的跳转画出来
单张线框图看不出流程问题。把主要页面并排画出，用箭头标出它们之间的跳转和返回关系，能提前发现死胡同（回不去）和绕路（要点五次才到）。移动端尤其要看返回路径，那里最容易出问题。
- 每条跳转标注触发动作，例如「点击卡片」「提交成功」
- 检查每个页面都有明确的返回或退出路径
- 把异常流程单独画一条（提交失败、网络中断）
- 关键任务数一数需要几步，超过三步考虑能否合并
评审：该盯哪几件事
线框图评审容易变成视觉讨论。把讨论拉回结构上，可以按固定清单逐项过，效率高很多。评审的目的是发现问题，不是达成一致的美感偏好。
- 信息层级是否与内容优先级一致
- 主要操作在首屏是否可见，是否需要滚动才能找到
- 空状态和错误状态是否都有设计，而不只是留白
- 文案长度变化时布局是否会崩
- 交互元素的点击区域是否够大，移动端尤其注意
常见问题
- 线框图需要标注尺寸吗？
- 不需要精确尺寸，但建议标注关键区块的相对比例和间距关系。设计阶段关注的是层级和结构，精确尺寸交给视觉稿和实现阶段处理，过早锁定会限制后续调整。
- 用什么工具画线框图比较好？
- 重点不是工具而是速度。结构还在变的时候，能快速复制和调整的通用图形工具比专业设计软件更合适，因为前者让你更愿意推翻重来。等到结构稳定，再进入专业工具做高保真。
- 线框图要不要上色？
- 建议只用灰度和一两种强调色。强调色专门用来标记可交互元素和主要操作，这样评审时注意力会落在操作路径上而不是配色偏好上。
- 移动端和桌面端要画两套吗？
- 如果两端的信息层级不同，需要分开画。如果只是布局适配，可以先画一套主线框图再标注响应式变化规则。判断依据是内容优先级是否因设备而改变。