线框图：梳理页面结构与功能布局

线框图、低保真原型、交互原型和 UI 设计稿有什么区别

产物	主要回答的问题	通常包含的内容	适合使用的阶段
线框图	页面放什么、如何布局、信息先后顺序是什么	区块、控件、占位内容、导航和基础状态	需求梳理与方案早期
低保真原型	页面之间怎样流转，任务能否完成	多页面线框、跳转关系和少量交互	流程评审与快速测试
交互原型	点击、输入、反馈和状态变化如何发生	触发条件、页面跳转、浮层、动效和系统反馈	交互评审与可用性验证
UI 设计稿	产品最终呈现的视觉风格和组件规范是什么	颜色、字体、图标、图片、间距和视觉规范	视觉设计与研发交付

线框图不是“画得不精致的 UI”，而是主动减少视觉干扰，把讨论集中在结构、内容和任务路径上。需要进一步验证点击与状态反馈时，可以继续学习交互设计与可点击原型。

线框图有哪些常见类型

纸笔草图

适合会议、访谈或头脑风暴中的快速探索。优点是修改成本低，缺点是不方便复用、同步和持续维护。

低保真数字线框图

使用统一控件和灰阶区块表达页面骨架，适合需求评审、功能梳理和多页面方案对比，也是大多数产品工作的常用形式。

可点击线框图

在线框页面之间增加跳转、弹窗或状态切换，用于验证用户是否能完成关键任务。它仍可保持低保真，不需要提前处理精细视觉。

线框图怎么做：从需求到评审的完整流程

先写清用户任务和成功标准

不要从“首页应该长什么样”开始。先说明谁在什么场景下，要完成什么任务，以及怎样算完成。例如“新用户用手机号完成注册并进入工作台”，比“画一个注册页”更容易判断页面是否缺少步骤。

整理内容清单与功能清单

列出页面必须展示的信息、用户需要执行的动作、系统需要返回的结果和业务限制。把“必须有”和“可以以后补充”分开，避免线框图变成功能堆叠。

确定信息层级和页面路径

先放任务最需要的信息和主要操作，再安排辅助说明、次要入口和帮助内容。多页面任务应先画出入口、关键节点和结束状态，再逐页细化。

用区块搭建页面骨架

使用标题、文本、图片占位、输入框、按钮、列表、卡片和导航等基础元素表达布局。线框阶段应保持视觉克制，避免颜色和装饰影响对结构的判断。

补齐页面状态和交互规则

除了默认页面，还要考虑首次进入、加载中、内容为空、输入错误、无权限、操作成功和网络失败。状态不完整，是线框图进入研发后频繁返工的常见原因。

添加必要说明

对于无法仅靠画面表达的规则，可补充字段格式、按钮可用条件、排序逻辑、权限差异、数据来源和异常处理，但不要把整份需求文档复制到页面旁边。

进行评审和任务测试

让参与者按照具体任务操作或口述下一步，观察他们是否能找到入口、理解反馈并完成目标。需要更细的执行清单，可继续阅读线框图设计步骤。

线框图需要包含哪些页面状态

状态	需要表达的重点	检查问题
默认状态	页面正常内容与主要操作	用户是否知道从哪里开始？
加载状态	等待反馈、骨架屏或进度提示	用户是否知道系统正在处理？
空状态	无数据原因和下一步引导	页面是否只剩一片空白？
错误状态	错误原因、修正方式和重试入口	用户能否恢复任务？
权限状态	不可操作原因与申请方式	用户是否理解权限边界？
成功状态	结果确认和后续动作	用户是否知道操作已经完成？

不同产品场景怎样画线框图

网页线框图

重点处理导航、首屏信息、内容分区、页面长度和响应式变化。营销页面还要明确核心信息、证明材料和行动入口的先后关系。

APP 线框图

需要考虑底部导航、返回路径、系统键盘、手势、弹层和不同屏幕尺寸，避免把桌面网页结构直接缩小到手机。

小程序线框图

应关注授权、登录、分享、返回层级和平台控件限制，同时减少过深的页面层级，让用户在较短路径中完成任务。

后台系统线框图

重点通常是导航层级、筛选、表格、批量操作、表单、权限和数据状态。复杂系统应先定义模块和任务流程，再细化单页。

线框图常见问题与改进方法

• 一开始就做视觉细节：先确认结构和流程，再进入颜色、字体与图标设计。
• 只画正常状态：同时设计空、错、加载、权限和成功状态。
• 页面信息同等突出：根据用户任务区分主要信息、辅助信息和低频入口。
• 只画单页不画路径：标明页面入口、返回方式、关键跳转和任务结束位置。
• 线框图没有真实内容：关键标题、字段和按钮尽量使用接近真实的文字，避免全部使用无意义占位符。
• 评审只讨论喜好：用具体任务检查页面，而不是询问“好不好看”。

线框图工具怎么选

工具选择不应只看组件数量，还要考虑项目复杂度、团队协作方式、交互需求、文件交付和学习成本。

• 只需要快速记录想法时，纸笔或白板工具即可；
• 需要多人评审和持续修改时，优先使用在线协作工具；
• 需要验证多页面任务时，选择支持页面连接和预览的工具；
• 需要复杂条件和高保真演示时，再使用更强的交互能力；
• 需要从文字快速生成候选方案时，可结合 AI 原型工具，但仍需人工检查需求、结构和状态。

可进一步查看线框图软件哪个好、快速画线框图的软件和AI生成线框图的方法。

如何用墨刀在线制作线框图

建立项目并选择页面尺寸

根据网页、手机、平板或其他终端建立页面，先统一画布和页面命名规则。

拖入基础组件搭建结构

用文本、按钮、输入框、列表、表格、图片占位和导航组件表达页面骨架，并将重复区域整理为可复用组件。

组织页面与关键任务

按照用户任务排列页面，补充入口、跳转、返回和结果页。需要验证路径时，可为页面增加简单连接和预览。

邀请团队评审并迭代

围绕需求范围、信息层级、页面状态和任务完成情况收集反馈，修改确认后再进入交互或视觉深化。需要模板辅助时，可参考线框图制作教程与模板。

线框图交付前检查清单

• 每个页面是否有明确的用户任务和主要操作；
• 信息层级是否与任务优先级一致；
• 导航、返回和跨页面路径是否完整；
• 加载、为空、错误、权限和成功状态是否覆盖；
• 输入、按钮和数据展示规则是否能够被理解；
• 页面命名、版本和评审范围是否清楚；
• 进入高保真之前，结构和流程是否已经达成共识。

如果线框图已经确认，可以继续了解低保真原型转高保真设计。

线框图常见问题

线框图一定要用黑白灰吗？

不是强制要求，但使用较少颜色能减少视觉干扰。必要时可用单一强调色标记主要操作、状态或讨论重点。

线框图需要写真实文案吗？

关键标题、按钮、字段和错误提示最好接近真实内容，因为文字长度和语义会直接影响布局与任务理解。非关键区域可以使用占位内容。

线框图需要做到可点击吗？

单页结构评审不一定需要；涉及注册、购买、审批等多步骤任务时，增加基础跳转能更早发现流程问题。

线框图和流程图应该先画哪个？

跨页面或多角色任务通常先梳理流程，再画关键页面；结构简单的单页需求可以直接从内容清单和线框图开始。

什么时候可以进入 UI 设计？

当需求范围、页面结构、关键状态和主要路径已经确认，且评审中不再反复调整核心布局时，再进入视觉设计更稳妥。