两三年以前，我发现很多搞信息技术的朋友们（非设计师）交付设计时，用着上面列出的词汇。他们以为线框图 （Wireframe）、原型 （Prototype）和视觉稿（Mockup）是一个东西：表达自己创意的线框手绘设计稿。
混淆概念便带来麻烦：他们分不清用户体验设计师的作品，常常感到困惑。「这按钮他妈的怎么点不了？」「我不知道这个地方可以按啊！」类似这样的问题在用户体验的项目中屡见不鲜。误把线框图当成原型，有点像建筑里分不清蓝图（指导如何建筑施工的方案）和演示厅。你完全可以试着在演示厅里小住一会（它的妙处就在于能直观传达房间之美），但你没法舒服地躺在蓝图上；蓝图不过是一张纸罢了。
在建筑学上，演示厅和蓝图服务于不同的交流对象：
蓝图，即施工方案，详细描述该如何建造建筑
演示厅，给未来的居民提供测试和体验的机会
演示厅和蓝图的共同之处是，它们都代表着最终的产品，即建筑（房屋）。线框图、原型和视觉稿亦是如此，这些文档都是最终产品的不同展现方式。
不管你信不信，我向用户体验设计团队授课的第一件事，就是告诉他们分清这三个概念。因为，这实在太重要了。
接下来，让我们详细讨论三者的区别，以后你就懂得在什么样的场合下用什么词汇了。
线框图
1、什么是线框图？
线框图 （Wireframe）是低保真的设计图，当明确表达：
内容大纲（什么东西）
信息结构（在哪）
用户的交互行为描述（怎么操作）
线框图不仅仅是无意义的线和框的集合；好吧，虽然看上去是的，濉Ｄ憧梢园严呖蛲祭斫馕\0设计图的骨干与核心，它承载着最终产品所有重要的部分。
线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节，但必须表达出设计思想，不能漏掉任何重要的部分。就像给项目以及一起协作的团队成员（开发工程师、视觉设计师、文案作者和项目经理），开辟了一条辅助理解设计的通道。说得再明白点，你是在设计城市地图，地图上能展现出每一条街道，只不过绘制上做了简化。看地图能看出城市的框架，但无法一览城市的美感。
微信扫码上方二维码，可领取2025年最新互联网创业项目！
项目收款截图
