1 基本概念
1.1 定义
线框图是用于描述界面、页面或产品结构的低保真设计图示。它通常以简化的线条、方块和占位符呈现内容布局，重点展示信息组织方式、模块位置以及用户操作路径，而不强调颜色、字体、图像质感等视觉细节。
在设计流程中，线框图常被视为结构沟通工具。它既可以手绘，也可以借助数字工具制作，常见于网页、移动应用、软件界面以及服务流程的前期规划阶段。
1.2 核心作用
线框图的核心价值在于帮助相关人员快速统一对结构和功能的理解。相较于直接进入高保真视觉设计，它更便于讨论布局、流程和信息优先级，也更容易在早期发现逻辑问题。
1.2.1 需求沟通
线框图能够将抽象需求转化为可视化结构，使产品、设计、研发等角色更容易围绕同一方案展开讨论。通过明确按钮位置、页面分区和跳转关系，团队可以更高效地确认需求范围。
1.2.2 结构验证
在线框阶段，设计者可以检查页面是否具备合理的信息层次，功能是否分布得当，操作路径是否顺畅。若结构存在冗余或遗漏，通常可以在这一阶段及时调整。
1.2.3 早期迭代
由于制作成本较低，线框图适合快速试错。团队可以基于初稿进行多轮修改，在不投入大量视觉制作资源的前提下，不断优化整体方案。
1.3 与其他设计产物的区别
线框图与草图、原型、高保真设计稿都存在联系，但用途和表达深度并不相同。其区别主要体现在精细程度、交互表现以及视觉完成度上。
1.3.1 与草图的区别
草图更偏向随手记录和灵感表达，通常没有严格的结构规则，形式也较为自由。线框图则更强调信息组织和可读性，具有较明确的页面框架与模块关系。
1.3.2 与原型的区别
原型通常用于模拟交互行为，可能包含可点击区域、页面跳转和操作反馈。线框图主要展示静态结构，即使标注交互逻辑，也不一定具备完整的可操作体验。
1.3.3 与高保真设计稿的区别
高保真设计稿更接近最终成品，往往包含精细的视觉风格、配色、字体、图标和细节装饰。线框图则刻意弱化这些元素，把注意力集中在功能布局与信息层级上。
2 类型与层级
2.1 低保真线框图
低保真线框图以最简化的方式表达页面结构，常使用方框、线条和文字占位来说明内容位置。它适合讨论初步想法，便于快速生成和修改。
2.1.1 手绘线框图
手绘线框图通常在纸张或白板上完成，强调即时性和表达自由。它适合头脑风暴、现场讨论和快速记录，是最常见的早期表达形式之一。
2.1.2 简单数字线框图
简单数字线框图借助基础设计软件制作，结构比手绘更整齐，便于保存、分享和反复修改。虽然仍保持较低保真度，但在团队协作中更利于统一理解。
2.2 中保真线框图
中保真线框图在结构清晰度上进一步提升，开始体现组件之间的关系和信息优先级。它比低保真版本更完整，但仍不追求最终视觉效果。
2.2.1 组件化布局表达
这类线框图通常会以模块为单位组织内容，例如导航区、内容区、侧栏和操作区等。通过组件化表达，页面结构更容易被拆解和复用。
2.2.2 更完整的信息层次
中保真线框图会更明确地呈现标题、正文、辅助信息和操作入口之间的层级关系。这样可以帮助团队判断哪些内容应当优先显示，哪些内容适合作为补充说明。
2.3 高保真线框图
高保真线框图介于结构稿与视觉稿之间，在保持线框思路的同时，增加了更多接近成品的表达方式。它常用于较成熟方案的确认阶段。
2.3.1 接近成品的结构展示
这类线框图在排版、比例和组件布局上较为接近最终界面，能够较准确地反映真实使用时的空间关系。它适合用于临近开发前的细化确认。
2.3.2 兼顾部分视觉细节
高保真线框图有时会加入基础图标、简化配色或更具体的字体层次，以增强理解效率。不过其重点仍是结构与信息，而不是完整的品牌视觉呈现。
3 应用场景
3.1 网站设计
线框图在网站设计中应用广泛，尤其适合处理首页、内容页和导航体系等结构性较强的部分。它能帮助团队建立清晰的网站信息框架。
3.1.1 首页结构规划
首页通常承担入口聚合和重点展示的作用。通过线框图可以提前规划主视觉、核心栏目、推荐内容和行动按钮的位置关系。
3.1.2 内容页布局
内容页的重点在于信息展示是否清楚、阅读路径是否顺畅。线框图可用于安排正文、侧栏、相关链接和补充信息的分布方式。
3.1.3 导航系统设计
导航系统决定用户在网站中的浏览路线。线框图能够帮助设计者判断菜单层级、入口数量以及不同页面之间的跳转逻辑是否合理。
3.2 移动应用设计
移动应用界面空间有限，因此更需要通过线框图提前规划首屏、功能入口和页面流转方式。它能有效减少后期因空间不足而产生的调整。
3.2.1 首屏布局
首屏通常是用户进入应用后首先看到的区域。线框图可用于确定首屏应展示哪些核心信息，以及哪些元素应当优先被注意到。
3.2.2 功能入口规划
移动应用往往包含较多功能模块，入口组织尤为重要。通过线框图，可以将高频功能、次级功能和辅助入口进行合理区分。
3.2.3 多页面流程串联
当应用涉及注册、下单、设置等连续步骤时，线框图有助于梳理页面之间的先后关系。它可以让团队更直观地检查流程是否顺滑、是否存在中断点。
3.3 产品与服务设计
线框图不仅用于屏幕界面，也可用于更广义的产品与服务流程设计。它适合梳理终端界面、自助服务以及复杂系统中的信息关系。
3.3.1 终端界面规划
在自助终端、信息屏或交互设备中，线框图可帮助确定显示区域、操作区和提示区的分布。这样能够提升界面使用的直观性。
3.3.2 自助服务流程设计
在自助查询、预约、办理等服务中，线框图可用于拆解步骤顺序，减少流程冗长或操作反复的问题。它有助于提升整体效率。
3.3.3 复杂信息系统梳理
面对多角色、多模块的信息系统，线框图可以作为结构梳理工具，帮助团队厘清不同模块之间的关联。它尤其适合在早期整理庞杂需求。
4 制作流程
4.1 需求收集
制作线框图前，需要先明确设计对象、使用场景和核心任务。需求收集的目标是避免图面结构与实际目标脱节。
4.1.1 用户目标分析
用户目标决定页面或产品应优先解决什么问题。通过分析用户最常执行的任务，可以为后续结构设计提供依据。
4.1.2 业务目标梳理
业务目标涉及产品希望达成的效果，例如提升转化、减少操作步骤或增强信息触达。将业务目标理清后，线框图才能更好地服务整体策略。
4.1.3 功能清单整理
功能清单是线框图的重要输入。它把需要展示或支持的内容逐项列出，便于后续分组、排序和布局安排。
4.2 信息架构搭建
信息架构决定内容如何组织与呈现，是线框图设计中的关键步骤。良好的架构能让页面更容易理解，也更利于扩展。
4.2.1 内容分组
内容分组是把相关信息归并到同一模块中，减少页面零散感。通过合理分组，用户更容易找到所需内容。
4.2.2 层级排序
层级排序用于确定哪些信息最重要，哪些信息可以后置。它直接影响页面的视觉重心和阅读顺序。
4.2.3 导航路径规划
导航路径规划关注用户如何在不同页面或模块之间移动。线框图阶段若能明确路径，后续交互设计会更加顺畅。
4.3 线框绘制
完成需求与架构整理后，即可进入线框绘制阶段。此时重点不是美化，而是把结构准确地落到页面上。
4.3.1 页面骨架搭建
页面骨架是线框图最基础的部分，通常先确定整体框架，再逐步补充内容块。这样有助于保持结构稳定。
4.3.2 模块占位设计
模块占位设计会用简化图形标示标题、图片、文字和按钮等区域。它让参与者能够快速理解每个区域的用途。
4.3.3 交互节点标注
当页面存在跳转、展开、切换等行为时，线框图通常会附加标注说明。这样可以减少对口头解释的依赖。
4.4 评审与迭代
线框图完成初稿后，通常需要经过评审和修改。这个过程可以持续暴露问题，并逐步提高方案成熟度。
4.4.1 团队评审
团队评审有助于从不同专业角度检查结构是否合理。产品、设计和开发人员的意见往往能够补充彼此忽略的细节。
4.4.2 用户反馈收集
在条件允许的情况下，线框图也可用于获取用户反馈。用户往往更关注任务是否清晰、操作是否方便，这些意见对优化结构很有价值。
4.4.3 多轮修改优化
线框图通常不会一次定稿，而是经过多轮修订逐步完善。每一轮迭代都可能涉及模块调整、路径优化或层级重排。
5 常用元素
5.1 导航元素
导航元素用于指示当前位置、入口和页面之间的关系，是线框图中最常见的结构部件之一。
5.1.1 顶部导航
顶部导航通常位于页面上方，承载主要栏目或核心功能入口。它有助于建立全站或全应用的一致访问路径。
5.1.2 侧边栏
侧边栏适合放置次级导航、分类列表或辅助信息。在线框图中，它常用于表达较复杂的内容组织方式。
5.1.3 面包屑
面包屑用于显示当前页面在层级结构中的位置。它能增强用户对路径的判断，尤其适合多层级信息系统。
5.2 内容模块
内容模块是线框图的主体部分，用来承载标题、正文、图像和相关信息。它们决定了页面的主要阅读节奏。
5.2.1 标题与副标题
标题与副标题用于表达信息主题和补充说明。在线框图中，这两类元素常以不同长度或层级标识区分。
5.2.2 图文占位区
图文占位区用于表示图片、插图、视频或文字内容将出现的位置。它能帮助团队在早期判断页面容量是否合适。
5.2.3 卡片与列表
卡片和列表常用于展示多个条目或模块集合。它们适合表达信息密度较高的界面，也便于后续组件化复用。
5.3 交互控件
交互控件决定用户如何执行操作，是功能线框中不可缺少的组成部分。其布局合理与否会直接影响使用效率。
5.3.1 按钮
按钮通常承担提交、确认、返回、切换等操作。在线框图中，按钮的位置、数量和优先级都需要被明确标出。
5.3.2 表单输入框
表单输入框用于收集文本、数字或其他信息。线框图中常借此检查字段是否过多、排列是否合理。
5.3.3 下拉菜单
下拉菜单适合容纳选项较多但不宜直接铺开的内容。它在节省空间的同时，也需要在结构上保持清晰可见。
5.4 状态与提示
状态与提示元素用于说明页面当前情况，能够提升用户对系统反馈的理解。它们在异常场景和边界场景中尤为重要。
5.4.1 空状态
空状态是指页面暂时没有内容或数据的情形。线框图可用于预设空状态文案和引导操作的位置。
5.4.2 错误提示
错误提示用于显示输入错误、加载失败或操作受阻等情况。通过提前规划错误提示，能减少用户在异常场景中的困惑。
5.4.3 加载占位
加载占位用于表现内容正在生成或请求中的状态。它常帮助设计者在信息未完全到位时，仍然维持页面的结构稳定感。
6 设计原则
6.1 清晰性
清晰性是线框图最基本的要求。无论采用何种表现方式，目标都应是让结构一目了然。
6.1.1 信息分区明确
页面中的各类内容应有清楚分区，避免元素堆叠在一起。分区明确能显著提升阅读和讨论效率。
6.1.2 重点层级突出
重点内容应在位置、尺寸或排列顺序上更易被识别。线框图通过层级差异引导注意力，使核心任务更突出。
6.2 一致性
一致性有助于建立稳定的认知规则，让页面更容易被理解和使用。它体现在结构、命名和交互方式等多个方面。
6.2.1 组件风格统一
相同功能的模块应尽量采用一致的表达方式，避免在不同页面中出现过多差异。统一的组件风格有助于提高复用性。
6.2.2 交互逻辑统一
相似操作应遵循相近的交互逻辑，例如同类按钮位置、同类表单反馈方式等。这样可以减少学习成本。
6.3 可扩展性
可扩展性意味着线框图不仅适用于当前需求，也能为后续变化留出余地。对于持续演进的产品来说，这一点十分重要。
6.3.1 适应多屏幕尺寸
在不同屏幕尺寸下，线框图应能较好地说明内容重排方式。尤其在移动设备、平板和桌面端并存的场景中，这种适配很关键。
6.3.2 支持后续功能扩展
结构设计时应预留适度空间，方便未来新增模块或功能入口。过于紧凑的布局往往会增加后续调整难度。
6.4 可测试性
线框图应便于团队讨论和验证，这也是它区别于单纯视觉草图的重要特征。结构越清晰，测试和反馈就越容易进行。
6.4.1 便于快速讨论
线框图能把复杂想法压缩为直观画面，方便团队快速指出问题并提出修改建议。它非常适合会议和评审场景。
6.4.2 便于用户验证
在线框阶段进行用户验证，可以及早发现理解偏差和流程障碍。由于图面简洁，用户更容易专注于任务本身而非视觉干扰。
7 工具与表达方式
7.1 手绘工具
手绘工具具有灵活、快捷的特点，适合早期构思和即时讨论。它们常用于低成本表达和现场协作。
7.1.1 纸笔
纸笔是最基础的线框绘制工具，几乎不需要准备成本。它适合随时记录想法，并进行快速修改。
7.1.2 白板
白板适合多人共同参与的讨论场景，便于擦改和重画。它常见于头脑风暴、工作坊和需求会议中。
7.2 数字工具
数字工具能够提升线框图的规范性、复用性和共享效率，因此在实际工作中应用十分广泛。
7.2.1 设计软件
设计软件可以绘制较为整齐的线框图，并支持图层、对齐和组件管理。它适合对结构有一定要求的团队使用。
7.2.2 原型工具
原型工具不仅能绘制结构，还可模拟部分交互。对于需要同时讨论页面关系和操作流程的项目，它较为实用。
7.2.3 协作平台
协作平台便于多人在线查看、评论和同步修改。它能减少版本传递中的信息损耗，提高协同效率。
7.3 表达规范
表达规范决定线框图是否容易被他人正确理解。即便是简化图，也需要保持基本的说明规则。
7.3.1 标注说明
标注说明用于解释元素含义、尺寸关系或内容来源。简洁准确的标注可以减少歧义。
7.3.2 交互注释
交互注释用于说明点击、滑动、展开等动作会触发什么结果。它是连接静态图与动态行为的重要桥梁。
7.3.3 版本管理
版本管理有助于记录方案演变过程，便于追踪修改依据。对于需要反复讨论的项目来说，版本清晰尤为重要。
8 评价与优化
8.1 可用性检查
可用性检查主要关注线框图是否支持用户顺畅完成目标任务。它从结构可理解性和操作效率两个方面进行判断。
8.1.1 导航是否直观
导航是否直观，决定用户能否快速找到入口和路径。若导航关系模糊，整体使用体验往往会受到影响。
8.1.2 操作是否顺畅
操作是否顺畅，取决于步骤安排是否合理、控件位置是否符合预期。线框图阶段发现这类问题，通常能节省后续成本。
8.1.3 信息是否完整
信息是否完整，关系到页面能否支持用户完成关键任务。缺失必要内容，往往会导致流程中断或理解偏差。
8.2 反馈渠道
反馈渠道为线框图优化提供依据，通常来自团队内部、用户测试和技术实现三方面。多源反馈有助于形成更稳妥的方案。
8.2.1 设计评审意见
设计评审意见通常关注结构合理性、层级清晰度和页面一致性。它是最常见的专业反馈来源之一。
8.2.2 用户测试结果
用户测试结果能反映真实使用者是否能够理解页面并完成任务。与内部判断相比，这类反馈更贴近实际体验。
8.2.3 开发实现建议
开发实现建议主要涉及技术可行性、组件复用和交互成本。及早考虑这些因素，可以减少后期返工。
8.3 常见问题
线框图在实践中常出现若干典型问题，多与信息控制不当或阶段边界不清有关。及时识别这些问题，有助于提升方案质量。
8.3.1 信息过载
信息过载是指页面中包含过多内容或过多入口，导致阅读负担增加。解决这一问题通常需要重新分组和删减。
8.3.2 层级混乱
层级混乱会使用户难以分辨主次，进而影响浏览效率。通过调整排序和强调重点，可以改善这一情况。
8.3.3 过早陷入视觉细节
如果在线框阶段过度关注颜色、装饰和风格，容易偏离结构讨论的重点。此时应回到信息布局和交互逻辑本身。