线框图是什么？设计师和产品团队完整指南

线框图是屏幕、页面或界面的低保真度视觉呈现。它展示设计的布局、结构和内容层级，而不包含颜色、图片或视觉风格。线框图看起来像蓝图——标注好的方框和占位符，而不是完成的界面。

线框图的目的是在任何人投入时间思考「看起来怎样」之前，先确定「什么放在哪里」。这种关注点分离正是它的核心价值：结构决策和视觉决策是不同的决策，最好在不同时间、有时由不同的人来做。

先把结构确定好，成本远低于在精美的视觉设计完成之后才发现结构问题。修改线框图只需几分钟。重新设计已经精心打磨过的视觉稿以修复布局问题则需要数小时。

线框图包含什么

方框和矩形。 图片以矩形表示，有时带有 X 或相机图标。视频以带播放按钮的矩形表示。这个阶段实际内容是什么不重要——它占用多少空间才重要。

真实文字（有时）。 标题、按钮标签和导航项通常用真实文字而非占位文本（「Lorem ipsum」）书写。这一点很重要，因为文字长度影响布局——10 个字的标题和 30 个字的标题占用的空间截然不同。

布局结构。 线框图展示页面的组织方式：导航在哪里、各个区块如何堆叠或划分、内容块之间的关系。

交互提示。 简单的注释或箭头可以指示点击、悬停或表单提交时会发生什么。这些通常是简短的说明，而不是详细的规格——详细的交互会在单独的规格文档或原型中记录。

注释说明。 线框图旁边解释行为、边缘情况、条件逻辑或待解决问题的备注。

线框图刻意排除的内容：色彩方案、字体选择、图片素材、品牌元素和高保真视觉精良感。过早加入这些内容会把讨论从「这个结构合理吗？」转移到「我们喜欢这个美学风格吗？」——这是在线框图阶段不该有的讨论。

线框图保真度层次

不同的线框图粗糙程度各不相同。合适的细节层次取决于你在设计流程的哪个阶段，以及需要做出什么决策。

草图线框图（最低保真度）。 手绘或非常粗糙的数字草图。用于早期探索阶段，当你需要快速测试结构想法、不想承诺任何东西的时候。目标是快速生成和丢弃选项。

灰度线框图（中等保真度）。 使用方框、占位符和真实标签的数字线框图，但没有颜色或视觉风格。最常见的类型。用于利益相关方评审、开发人员交接和可用性测试。

带注释的线框图（中高保真度）。 带有详细注释的灰度线框图，说明行为、状态和边缘情况。用作开发人员交接文档。

高保真度线框图。 包含最终内容和准确比例，但仍然缺少视觉风格的线框图。在视觉设计开始之前需要确定内容决策和布局时使用。

合适的层次并不总是最详细的那种。项目初期，粗糙的草图速度更快，也更容易丢弃。只有在结构稳定、需要在视觉设计开始前确定细节时，高保真度线框图才有意义。

线框图 vs. 设计稿 vs. 原型

这三个概念经常被混淆。它们代表设计流程中不同的阶段：

线框图： 回答「什么放在哪里、如何组织」？可以以极少代价修改。

设计稿： 回答「这看起来会是什么样子」？展示应用于结构的视觉设计。修改成本变高，因为视觉风格已经融入其中。

原型： 回答「用户会按预期使用吗」？可点击的交互式模拟。创建成本最高，也是最接近真实产品的东西。

关键关系：在商定的线框图基础上构建设计稿；在商定的设计稿基础上构建原型。跳过线框图直接做设计稿并不总是错的——对于小的、成熟的改动，这往往是正确的选择——但对于任何重要的新功能或页面，跳过线框图几乎总是意味着在设计稿阶段才发现结构问题，那时代价更大。

真实线框图示例

电商商品详情页

商品页面的线框图可能展示：

• 页头：Logo、搜索框、购物车图标、账户链接
• 面包屑导航
• 商品图片（大图框，左侧）
• 商品名称、价格、评分（右侧）
• 加入购物车按钮（突出，右侧）
• 商品描述标签（描述 / 评价 / 配送）
• 相关商品网格（主内容下方）

线框图不展示是什么商品、颜色是什么、图片长什么样。它展示的是：图片在左侧，购买操作与商品信息并排立即可见，次要内容（评价、配送）可以访问但不突出。

移动端 App 引导流程

引导流程的线框图：

第 1 屏： 欢迎语（居中文字）、大图插画占位符、「开始使用」按钮（突出）、「登录」链接（次级）

第 2 屏： 权限申请——麦克风图标、说明文字、「允许」按钮、「暂不授权」链接

第 3 屏： 个人资料设置——姓名输入框、可选照片上传占位符、「继续」按钮

第 4 屏： 教程第 1 步（共 3 步）——可交互元素占位符、说明文字、「下一步」按钮、进度指示

线框图确定了引导流程有几个屏幕、每个屏幕有什么内容，以及操作的层级关系。这一切不需要先决定品牌色彩或字体。

数据分析仪表盘

仪表盘的线框图：

• 左侧导航栏，带图标和标签
• 顶部栏：搜索、通知铃、用户头像
• 主内容区划分为：
  • 汇总数据卡片行（4 个指标）
  • 主图表（最大元素，占 60% 宽度）
  • 次级图表（40% 宽度，紧靠主图表）
  • 图表下方的数据表格（全宽）
• 右侧面板（可折叠）：筛选控件

线框图表明了筛选器在右侧是次要的，主图表获得最多视觉权重，汇总数字显示在最上方。这些结构决策影响用户如何体验仪表盘——应该在任何视觉工作开始之前就确定好。

线框图的设计流程

第一步：理解目标。 用户在这个屏幕上要完成什么？他们需要什么信息？应该执行什么操作？在画任何东西之前，把答案写下来。

第二步：列出内容元素。 这个页面上必须有什么？写出每个元素——标题、正文、图片、按钮、表单字段、导航。在有完整列表之前不要开始画图。

第三步：确定优先级。 不是所有元素都同等重要。对于用户目标来说，哪个元素最关键？哪个是次要的？这种优先级层次应该通过大小、位置和视觉权重在线框图中体现出来。

第四步：草绘粗略布局。 在纸上或数字草图中尝试多种排列，再确定下来。目标是探索选项，而不是第一次就做对。

第五步：数字化细化。 把最好的粗糙布局在线框图工具中正式构建。用标准的方框和标签替换草图元素，添加足够的细节让不熟悉项目的人能理解意图。

第六步：添加注释。 为布局中不明显的行为添加说明：表单验证失败时会发生什么，这个元素在移动端如何呈现，这个状态下显示什么文字。

第七步：评审和修改。 与团队分享。线框图评审的目标是结构反馈——层级是否正确、有没有遗漏什么、流程是否合理？而不是「我觉得按钮应该是蓝色的」。

线框图最有价值的时候

新功能或新页面。 任何没有以定义形式存在过的东西，都受益于在视觉设计开始之前进行线框图。

重构现有页面。 当你重新思考页面的组织方式时，先画新结构的线框图，可以防止过早锁定结构决策。

复杂的交互。 多步骤流程、表单和数据密集型界面受益于线框图，因为结构决策足够复杂，值得在视觉打磨之前仔细思考。

跨团队对齐。 当设计师、开发者和产品经理需要在工作开始前就工作内容达成一致时，线框图是共同的参考。

什么时候跳过线框图

简单、成熟的改动。 移动按钮、修改标签、在现有表单中添加字段通常不需要线框图——结构已经确定了。

快速迭代。 当速度比文档更重要时，直接做设计稿或原型是合理的。

强大的现有设计系统。 如果设计系统定义了每个元素的构建方式，新功能只是组合现有模式，线框图几乎没有附加价值。

常见问题

最好的线框图工具是什么？ 对于会从线框图延伸到高保真设计的设计师：Figma（行业标准，个人免费）。对于低保真草图：Balsamiq、Wireframe.cc 或 CodePic。对于嵌入 Google Docs 的场景：Google Drawings。

线框图应该是可点击的吗？ 只有在用它们进行可用性测试时才需要。可点击的线框图模糊了线框图和原型的边界。在你准备好创建原型之前，保持线框图是静态的。

谁来创建线框图？ 通常是设计师或产品经理。创建线框图的人应该理解用户需求、技术约束和业务要求——不只是什么看起来好看。

线框图应该花多长时间？ 简单页面线框图：几小时。有多个屏幕的复杂流程：几天。如果线框图要花好几周，说明出了问题——要么是范围太大，要么是太多本该更早决定的事情被推迟到了线框图阶段。