线框图是什么？作用、组成与绘制方法

线框图（Wireframe）是用线条、区块、占位文字和基础控件表达页面结构、信息层级与功能布局的低保真设计稿。它要解决的不是“页面最终有多好看”，而是“页面应该放什么、用户先看什么、主要操作在哪里、不同状态如何呈现”。

产品经理、交互设计师和 UI/UX 设计师通常在线框图阶段确认需求边界和页面骨架，再进入可点击原型与视觉设计。这样可以把结构问题尽早暴露出来，避免团队在颜色、图标和视觉细节已经投入较多时间后，才发现流程或内容需要重做。

如果你已经明确需求并准备开始制作，可以直接使用墨刀在线线框图工具；需要更具体的制作参考，可继续查看线框图制作教程和线框图设计步骤。

线框图是什么

线框图可以理解为界面的“结构草图”。建筑施工前会先确认空间、动线和功能区域，产品页面也需要先确认导航、内容和操作关系。线框图通过简单图形把这些关系画出来，让抽象需求变成可讨论的页面方案。

在线框图中，图片通常使用灰色占位块，文字可以使用接近真实长度的内容，按钮、输入框、列表和导航采用基础样式。是否使用颜色并没有硬性限制，但通常会保持克制，只在需要强调主要操作或状态时使用少量颜色。

线框图由哪些内容组成

线框图、流程图、原型图和 UI 设计稿有什么区别

复杂产品通常先梳理流程，再画关键页面线框图，随后将重要路径连接为可点击原型，最后进入 UI 设计。项目简单时可以合并步骤，但不应跳过对结构和状态的确认。

为什么要在线框图阶段确认方案

• 让需求可以被看见：“需要一个用户中心”很抽象，线框图会迫使团队确认具体模块、数据和操作。
• 减少视觉干扰：暂时不讨论颜色和装饰，更容易聚焦信息层级、内容缺失和操作路径。
• 降低方案修改成本：结构仍在探索时，调整区块和页面比修改完整视觉稿更直接。
• 帮助跨角色沟通：产品、设计、研发和业务可以围绕同一页面确认范围、状态和规则。
• 为测试提供材料：将关键页面连接后，可以观察用户是否能找到入口、理解反馈并完成任务。

线框图怎么画

明确用户、场景和任务

先写一句完整任务：“谁，在什么场景下，要完成什么事情，成功结果是什么。”如果任务本身含糊，页面通常也会堆叠很多无法判断优先级的内容。

建立内容与功能清单

分别列出必须展示的信息、用户可以执行的操作、系统需要返回的结果和业务限制。把需求分成必须、应该和可选，避免所有功能同时进入首个版本。

梳理页面路径

确定任务入口、关键节点、返回路径和结束状态。涉及多个角色或复杂判断时，可以先画流程图，再将关键节点转换为页面。

安排信息层级

先放用户完成任务必须知道的信息和主要操作，再安排解释、推荐、帮助和低频入口。标题大小和区块位置应该服务于任务优先级，而不是单纯追求版面均衡。

用基础控件搭建页面

使用文本、按钮、输入框、列表、表格、卡片、标签和图片占位表达结构。相同内容应使用一致组件，重复区域可以整理为复用模块。

补齐状态与规则

为输入、提交、搜索、筛选、上传和删除等操作补充必要状态，包括加载、为空、错误、无权限和成功。说明按钮何时可用、字段如何校验、错误后怎样恢复。

用任务评审线框图

让评审者按照具体任务查看页面：从哪里开始、下一步点哪里、看到什么反馈、怎样结束。记录无法理解、找不到入口和需要反复解释的位置，再迭代方案。

用注册任务举例说明线框图

假设目标是“新用户使用手机号注册并进入工作台”，线框图至少需要考虑：

• 用户从哪个入口进入注册；
• 手机号、验证码和协议确认如何排列；
• 验证码发送前后按钮状态如何变化；
• 手机号格式错误、验证码错误和请求失败怎样提示；
• 用户已有账号时如何切换登录；
• 注册成功后进入哪里，是否需要补充资料；
• 隐私协议和授权说明是否容易找到。

这个例子说明，线框图不只是一个静态页面。即使视觉保持简单，也要覆盖任务路径、状态反馈和异常恢复。

不同产品怎样处理线框图

网页产品

重点关注顶部导航、首屏信息、内容分区、页面长度和不同宽度下的变化。信息型页面要先确定内容优先级，工具型页面要保证主要任务入口清晰。

移动端 APP

需要考虑底部导航、系统键盘、返回方式、手势、弹层和单手操作范围。不要直接把桌面结构缩小到手机，应根据移动任务重新安排信息。

小程序

需要结合平台导航、登录授权、分享和返回层级，减少过深路径。线框图阶段就应标明哪些步骤依赖授权或外部能力。

后台管理系统

通常包含多级导航、筛选、表格、表单、批量操作和权限。应先梳理模块与角色，再确定列表页、详情页和编辑页之间的关系。

线框图应该做到什么保真度

保真度取决于当前要验证的问题，而不是项目越重要就画得越精细。

• 探索多个方向时，用草图表达区块和主要操作；
• 确认页面结构时，使用统一灰阶组件和接近真实的内容；
• 验证任务路径时，连接关键页面并补充状态；
• 讨论品牌和视觉规范时，再进入高保真设计。

如果团队已经确认线框结构，可继续查看低保真原型转高保真设计稿。

线框图工具怎么选

个人草图、在线协作、复杂交互和视觉设计需要的工具并不相同。选择时可检查以下问题：

• 是否能快速使用基础控件搭建页面；
• 是否方便组织多页面和重复组件；
• 是否支持预览、评论和团队评审；
• 是否需要复杂条件、变量或高保真动效；
• 文件如何交付，团队成员是否容易学习；
• 是否需要 AI 根据文字生成候选页面。

需要完整对比时，可阅读线框图软件哪个好；更看重快速上手时，可查看快速画线框图的软件；希望从文字生成候选方案时，可参考AI线框图生成工具。

如何用墨刀制作线框图

在墨刀中建立对应终端的项目后，可以使用文本、按钮、输入框、图片占位、列表、表格和导航等组件搭建页面。将重复区域整理为组件，按任务顺序组织页面；需要评审流程时，再为关键页面增加跳转并通过预览检查。

制作过程中建议保持页面命名一致，并在评论或说明中记录需要确认的问题。线框图确认后，再逐步增加交互和视觉细节，不必在第一个版本中一次完成全部设计。

怎样评审一张线框图

• 页面是否有明确的主要任务和主要操作；
• 用户能否理解页面内容和当前位置；
• 重要信息是否比辅助信息更容易被发现；
• 导航、返回和跨页面路径是否完整；
• 输入、提交、筛选和删除等操作是否有反馈；
• 空、错、加载、权限和成功状态是否覆盖；
• 不同角色和权限看到的内容是否清楚；
• 线框图中的说明是否足以支持下一阶段工作。

线框图常见误区

把线框图当作缩小版 UI 设计稿

过早处理颜色、图标和图片，会让评审偏向视觉喜好。线框阶段应先确认结构与任务。

只画页面，不画状态

真实产品不会永远有数据且操作成功。缺少异常和空状态，会把大量决策推迟到开发阶段。

全部使用无意义占位文案

关键标题、字段和按钮应尽量接近真实内容，否则无法判断文字长度、信息层级和操作含义。

每个页面都塞入所有功能

线框图的目标不是展示需求数量，而是帮助用户完成任务。低频功能可以放在次级页面或后续版本。

评审时只问“感觉怎么样”

使用明确任务和检查问题，才能得到可执行反馈，而不是偏好表达。

线框图常见问题

线框图是产品经理还是设计师负责？

不同团队分工不同。产品经理常用线框图明确需求和页面逻辑，交互或 UX 设计师会进一步优化信息架构、状态和任务路径。重要的是共同确认产物标准，而不是只看职位名称。

线框图需要写尺寸吗？

页面整体尺寸和关键布局约束需要明确；普通结构探索不必标注所有像素。进入视觉和研发交付后，再补充更精确的规范。

线框图需要做响应式吗？

如果产品同时覆盖桌面和移动端，应至少说明关键区块在不同宽度下如何排列、隐藏或切换，不能默认桌面页面会自动适配。

线框图多久能画完？

取决于任务范围、页面数量、状态复杂度和需求清晰度。与其追求固定时间，不如先限定评审范围，优先完成关键路径。

线框图完成后下一步是什么？

先完成内部评审和必要的任务测试，确认结构与流程后，再制作可点击原型或进入 UI 视觉设计。

开始制作线框图

选择一个真实任务，写下用户目标和成功结果，列出页面必须包含的内容与操作，再用墨刀在线线框图工具搭建页面骨架。先让页面结构和任务路径说得通，再逐步增加交互和视觉细节。