【编者按】本文译者@小轰同学 。文中介绍了线框图 (Wireframe)、原型 (Prototype) 和视觉稿 (Mockup) 它们三者之间严谨的功能区别。

　　对于很多搞信息技术的朋友们(非设计师)在交付设计时，就混淆了这几个词汇，认为它们都代表同一样东西：表达自己创意的线框手绘设计稿。那么如果希望在工作中更好的表达自己的想法，我们需要对这三者有更好的认识。

　　混淆概念便带来麻烦：他们分不清用户体验设计师的作品，常常感到困惑。「这按钮他妈的怎么点不了?」「我不知道这个地方可以按啊!」类似这样的问题在用户体验的项目中屡见不鲜。误把线框图当成原型，有点像建筑里分不清蓝图(指导如何建筑施工的方案)和演示厅。你完全可以试着在演示厅里小住一会(它的妙处就在于能直观传达房间之美)，但你没法舒服地躺在蓝图上—蓝图不过是一张纸罢了。

　　在建筑学上，演示厅和蓝图服务于不同的交流对象：

　　蓝图，即施工方案，详细描述该如何建造建筑

　　演示厅，给未来的居民提供测试和体验的机会

　　演示厅和蓝图的共同之处是，它们都代表着最终的产品，即建筑(房屋)。线框图、原型和视觉稿亦是如此，这些文档都是最终产品的不同展现方式。

　　不管你信不信，我向用户体验设计团队授课的第一件事，就是告诉他们分清这三个概念。因为，这实在太重要了。

　　接下来，让我们详细讨论三者的区别，以后你就懂得在什么样的场合下用什么词汇了。

　　线框图

　　1、什么是线框图?

　　线框图 (Wireframe) 是低保真的设计图，当明确表达：

　　内容大纲(什么东西)

　　信息结构(在哪)