所谓线框图，是数字产品结构的低保真或中保真视觉表达，在细致视觉设计开始前展示页面布局、信息层级、内容组织和用户流程。与效果图不同，它侧重界面如何工作，而非外观。在更完整的AI 产品设计工作流中，线框图也为高保真实现提供结构基础。

线框图帮助设计师、产品经理、开发者及相关方，在投入色彩、字体、素材或开发前解决结构问题。分析 UX 过程及产品设计工作流后，一个反复出现的认识是：价值不在于画方框，而在于用低成本环境测试想法、发现可用性问题，避免后期代价高昂的产品决策。因此，线框设计也常适合与文档化的设计系统配合。

本指南介绍线框图的定义、价值、与原型和效果图的区别、有效制作方法，以及现代AI 辅助设计工作流如何改变团队探索产品的方式。我也会说明AI 设计智能体如何支持早期探索，而不替代人的产品思考。

设计中的线框图是什么？

所谓线框图，是数字界面的简化蓝图，用于传达结构、布局和功能，不着重视觉风格。

它回答这些问题：

• 内容应出现在何处？
• 哪些信息最重要？
• 用户应如何在产品中移动？
• 每个页面需要哪些功能？

线框图通常侧重：

• 页面结构
• 导航
• 内容层级
• 交互关系
• 用户旅程

通常不侧重：

• 品牌色彩
• 精细插画
• 最终文字排版
• 精致视觉效果

例如，电商产品页线框图可能定义：

页头
↓
产品图片区
↓
产品信息
↓
购买操作
↓
评价

但不会决定：

• 具体的产品摄影风格
• 按钮颜色
• 最终间距
• 品牌视觉

从产品设计角度看，线框图是思考工具，让团队先讨论产品是否合理，再讨论是否好看。

为什么线框图对 UX 设计很重要？

它帮助团队在投入详细设计和开发前，验证产品结构。

UX 社区常讨论的错误，是从调研直接跳到高保真 UI。

这常带来问题：

• 尚未解决用户流程，就开始细化视觉
• 相关方关注颜色，而不是功能
• 后期结构修改成本高

线框图将决策提前。

尽早解决结构问题

制作精致界面前，可以测试：

• 信息层级
• 导航模式
• 功能优先级
• 内容组织

例如：

设计仪表盘的团队可能在线框阶段发现，用户无法快速找到重要信息。

这时改布局很容易。

完成视觉设计和开发后再改，成本就高得多。

改善协作

不同团队关注不同方面：

线框图提供共享视觉语言。

大家可以先讨论：

“这条信息应该放在这里吗？”

再讨论：

“这个按钮应该是蓝色还是绿色？”

谁使用线框图？

常见使用者包括：

UX 设计师

用于探索：

• 用户流程
• 页面关系
• 交互模式

产品设计师

用于连接：

• 用户需求
• 业务目标
• 界面结构

产品经理

用于传达：

• 功能需求
• 产品概念
• 工作流决策

开发者

用于理解：

• 页面结构
• 功能要求
• 技术约束

研究人员

UX 研究人员可在早期用户测试中，用简单线框图评估：

• 导航
• 内容组织
• 任务完成情况

线框图类型：低保真与高保真

线框图常分为低保真和高保真。

区别不在质量。

而在于回答的问题。

什么是低保真线框图？

它是关注想法而非细节的简单界面草图。

特点：

• 简单形状
• 占位文字
• 极少样式
• 快速迭代

例如：

设计师可以只用以下元素创建多个首页布局：

• 矩形
• 文本块
• 基础导航标签

目标是回答：

“结构是否正确？”

而非：

“看起来是否完成了？”

根据 UX 流程分析和产品团队的常见实践，从低保真线框图开始仍很有效：能快速测试想法、尽早淘汰较弱方案，在视觉制作前关注用户流程。

什么是高保真线框图？

它包含更多细节：

• 接近真实的内容
• 精确布局
• 交互状态
• 更接近最终页面的表达

适合评估：

• 具体交互
• 复杂流程
• 可用性细节

不过，应先明确主要结构，再制作高保真线框图。

线框图与原型有什么区别？

两者相关，但目的不同。

线框图可能展示：

登录页
用户名字段
密码字段
提交按钮

原型展示：

用户点击按钮 → 出现验证 → 打开仪表盘

两者可以配合：

线框图
↓
交互原型
↓
视觉设计
↓
开发

不过，这并不是严格规则。

有些团队直接从线框图创建原型，有些在 Figma 等工具中将两者结合。

线框图与效果图有什么区别？

主要区别在视觉细节。

线框图问：

“体验是否可行？”

效果图问：

“界面看起来是否正确？”

如何逐步创建线框图

步骤 1：明确用户目标

画页面前，明确：

• 谁使用产品
• 他们要完成什么
• 哪个操作最重要

例如：

用户目标：

“快速找到并购买产品。”

步骤 2：梳理用户流程

定义旅程：

落地页
↓
搜索
↓
产品页
↓
结账

流程比单个页面更重要。

步骤 3：创建基础布局结构

从以下内容开始：

• 导航区域
• 内容区块
• 按钮
• 表单
• 信息块

避免视觉细节。

步骤 4：加入内容层级

决定：

• 用户首先看到什么
• 哪些信息支持决策
• 哪些操作是主要操作

好的线框图能传达优先级。

步骤 5：测试并迭代

与以下人员分享：

• 用户
• 利益相关者
• 开发者

询问：

• 用户能理解流程吗？
• 重要操作可见吗？
• 结构支持目标吗？

线框设计最佳实践与技巧

保持简单

线框图应鼓励讨论。

如果看起来过于精致，人们可能不愿质疑它。

不要追求像素级完美

线框图不是最终设计。

试图完善：

• 间距
• 文字排版
• 图标

如果过早进行，会减少探索。

结构依赖文字时，使用真实内容

占位文本很实用，但有些布局取决于实际文字长度。

例如：

新闻首页需要接近真实的标题，因为字数影响布局。

让线框图容易修改

好的线框图应当可以舍弃。

目标是学习，而不是再做一份设计素材。

适合 UX 设计师的线框工具

UX 社区常提到 Figma，因为它支持：

• 线框设计
• 原型设计
• UI 设计
• 协作

不过，灵活性也可能让团队跳过思考，直接制作精致页面。

AI 如何改变线框设计流程

AI 开始通过加快想法探索，影响早期产品设计。

实际用途包括：

AI 辅助概念探索

AI 可以帮助生成：

• 替代布局
• 用户流程变体
• 信息架构想法

团队能在决定前比较更多方向。

更快的线框迭代

无需手动重建多个版本，AI 工具可帮助探索：

• 不同页面结构
• 内容排列
• 工作流选项

维持设计上下文

现代 AI 设计流程正超越简单的提示词生成。

专业团队的挑战不是生成一个页面，而是维持以下方面的上下文：

• 产品目标
• 品牌规则
• 先前决策
• 团队偏好

AI 设计智能体正通过与设计师协作而非替代他们，探索这个方向。例如，Virse 聚焦画布协作，让人与智能体处于相同创作上下文，而不只依赖聊天提示词。

未来可能结合人的产品思考与 AI 辅助探索。

常见问题

UX 设计中的线框图是什么？

它是数字界面的简化表达，侧重布局、结构、信息层级和用户流程，而非视觉风格。

使用 Figma 后还需要线框图吗？

需要。Figma 虽然加快高保真设计，但线框图仍能帮助团队在细化视觉前解决结构问题。

线框图与原型有什么区别？

线框图展示界面结构，原型演示交互和用户行为。前者回答有什么，后者展示如何交互。

线框图应该有颜色和图片吗？

通常不需要。多数线框图避免精细视觉样式，因为目的是测试结构与功能。

设计师先做线框图再做效果图吗？

通常流程是：

线框图 → 原型 → 效果图/UI 设计

不过，团队可根据项目复杂度调整。

线框图应多详细？

应足够支持布局、功能和用户流程讨论，同时保持容易修改。

AI 能自动创建线框图吗？

AI 能辅助生成布局想法和探索变体，但用户目标、产品策略和交互逻辑仍需设计师决定。

线框图与草图一样吗？

不完全一样。草图通常是非正式的想法探索，线框图则是用于沟通和测试的更结构化表达。