没有UX/UI设计的应用是不完整的——根本不可能存在。首先，我们需要做调研，明确数字产品的目标和用户是谁。为此，在北京心玥软件公司，我们会和客户举办工作坊，尽可能多地了解应用的需求。之后，UX/UI设计师才会开始他们最爱的环节：应用可视化。
可视化的过程会产出3种数字表现形式：线框图（Wireframe）、模型图（Mockup）、原型（Prototype）。
一、这三者是如何产出的？
流程大致如下：
1. 首先，基于用户流程图，我们在纸上或白板上画快速草图，捕捉产品的核心创意。如果用白板，记得拍照留存。
2. 接着，把草图转化为数字线框图。
3. 然后，制作模型图。至于原型，它可以基于线框图或模型图制作，顺序灵活。
二、我们需要全部三种吗？
不——要做产品，线框图和模型图是必需的；原型是“加分项”，但我后面会说服你也投资它。
每一步的耗时取决于项目复杂度，但它们都是产品开发过程中不可或缺的环节。
我们会用一系列设计工具完成这些工作，后文会列出具体工具。
目录
1. 应用设计中的线框图是什么？
2. 为什么要做线框图？谁能做？
3. 线框图vs模型图vs原型：有什么区别？
4. 应用设计中产品的视觉表现类型
4.1 线框图
4.2 模型图
4.3 原型
5. 为什么每个应用都需要线框图、模型图和原型？
6. 结论
应用设计中的线框图是什么？
根据Anton Suprunenko在Smashing杂志的文章，线框图“也叫页面示意图或屏幕蓝图，是代表网站或应用骨架框架的视觉指南”。
由此延伸，线框图设计是：
“设计线框图的过程，常用于布局页面的内容和功能——需结合用户需求和用户旅程。它在开发早期使用，用于在添加视觉设计和内容前，确立页面的基础结构。”
线框图是快速草图的设计过程，是快速呈现产品简化版本的最佳方式。它应在开发前完成，是“收集产品核心信息”后的下一步。线框图基于预先准备的用户流程图（即用户用移动/网页应用实现目标的步骤）制作，帮助梳理核心视图，呈现产品的主流程。
为什么要做线框图？谁能做？
线框图是产品可视化的第一步，也是极其重要的一步。先聚焦这点：投入时间画概念草图是值得的——没有它，我们就像“没建筑师图纸就盖房子”：房子可能建起来，但没有坚实的地基和合理的结构。
其实任何人都能做线框图：不需要是技术极客或设计师，在纸上画快速草图就行。我们的客户经常给我们发自己画的初始概念草图，这非常有帮助——作为UX设计师，我能更理解客户的想法，这为后续更详细的线框图打下好基础。草图也是一种“视觉确认”，让我们和客户对文档内容的理解一致。
UX/UI设计师做线框图时，常用带预制UI元素的工具（像拼图一样快速组装），比如：
• Miro
• Figma
• Whimsical
这些工具直观易用，还有一个优势：可以标记设计元素、留评论。多人还能同时协作——我们常在工作坊里和客户一起用这些工具画线框图。
（图：Miro工作坊截图，我们常用来和客户一起画线框图）
线框图vs模型图vs原型：有什么区别？
这三个词常被提及，都用于展示应用的工作方式，但核心区别在于：
• 细节程度：从线框图（最基础）到原型（最详细）逐步递增；
• 交互性：线框图/模型图是静态的，原型是交互式的。
具体差异：
1. 线框图：最基础的静态页面，通常用灰度呈现——此阶段只需关注“要显示哪些元素”。
2. 模型图：客户最常期待的静态视图，比线框图更详细（比如有logo、品牌色、图片），基本还原了最终产品的外观和工作方式。如果给模型图加交互，就变成了高保真原型。
3. 原型：包含交互的产品视图，分两种：
• 低保真原型：用线框图或草图测试核心流程；
• 高保真原型：用模型图制作，用于用户测试，收集用户对设计/功能的反馈。
应用设计中产品的视觉表现类型
前面提到了三种类型，下面逐一拆解：
1. 线框图
何时做：设计流程的最开始。
作用：快速验证产品概念和主流程，展示“应用的核心流程是什么”“页面上该有哪些元素和内容”。不注重视觉细节，是“收集完产品核心信息”后的第一步。也可用来做可点击原型。
如何做：
• 第一步：在纸上画——最快速、最便宜的方式，能快速捕捉初始想法，易修改。
• 第二步：转数字——用带预制元素的工具（如Figma、Whimsical），可以标记元素、留评论，多人协作。
耗时：快——如果已收集完用户流程和核心步骤，画线框图很快。
何时用：永远！每个项目都必须做。如果想向投资者展示想法（未实现前），线框图足够。对开发者来说，线框图是“项目文档的一部分”——即使还没最终外观，开发者也能开始后端实现（因为线框图覆盖了所有功能）。
例子：为内部管理后台画线框图——只需给开发者标出“图表、表格”的位置，他们就知道要用外部库实现什么功能。
2. 模型图
何时做：线框图通过、概念确认后。
作用：补充细节，让产品更接近最终外观——对齐网格、选字体大小、加颜色和图案。
如何做：
• 如果有品牌指南（比如logo、色板、字体），会省很多时间——设计师不用再纠结“用什么字体/颜色”，直接按品牌书来。
• 用数字工具制作（和线框图工具通用，比如Figma、Adobe XD、Invision、Sketch），可以分享链接或给客户“画板权限”，让客户留评论。
耗时：取决于项目复杂度和平台数量：
• 移动应用：通常一种分辨率（可能区分Android/iOS）；
• 网页应用：必须同时设计移动和网页版——先做移动端，再适配网页（如果元素在小屏幕上合适，桌面端肯定没问题）。
何时用：几乎所有场景都需要！如果想让产品落地，模型图是前端实现的必需。作为设计师，我们还会附“前端开发指南”——说明设计元素在不同状态（比如激活/未激活）下的样子。
模型图也是制作高保真原型的基础。
3. 原型
何时做：模型图完成后。
作用：交互式展示产品，用于用户测试——收集用户对主流程、信息架构或具体元素（比如搜索框）的反馈。
如何做：
• 低保真原型：用草图或线框图，测试基础流程（比如页面切换）——可以用Figma做，再用Figma Mirror在手机上测试；
• 高保真原型：用模型图，测试更复杂的交互（比如下拉菜单）——可以用UXPin，耗时更长，但交互更逼真。
例子：我们联系表单的高保真原型截图（Figma制作）
耗时：简单原型几天，复杂交互超过一周。
何时用：
• 测试前：用原型验证核心流程或设计元素；
• 演示/路演：交互式原型比静态图更有说服力，能打动投资者；
• 节省成本：提前发现产品缺陷，避免开发后再修改的浪费。
为什么每个应用都需要线框图、模型图和原型？
现在你应该理解了UX/UI设计的重要性，总结三者的重要性：
1. 捕捉产品概念：线框图帮你明确“产品到底是什么”；
2. 测试核心流程：原型让你在开发前验证用户是否接受主流程；
3. 项目文档：线框图/模型图是团队共识的基础；
4. 节省预算：提前测试能避免开发“没人要的功能”；
5. 易修改：在草图/线框图/原型阶段改，比改已实现的产品容易得多。
结论
投资线框图、模型图和原型的制作，是打造有价值市场产品的关键一步。没错，这会增加前期成本，但远低于“开发了用户不想要的功能”的浪费。
数字可视化成果要清晰、符合用户流程、及时更新，必要时加注释——帮开发者理解功能逻辑，避免误解。
客户会拿到线框图/模型图的“图片版”和“可编辑文件”——既能用来给投资者做演示，也能作为开发文档。
画线框图、模型图和原型，是每个UX/UI设计的必需环节——不管做移动还是网页应用，都不能跳过。
