产品设计：线框图和原型图有什么区别？

各位下午好！我对“网站设计的5个主要阶段”系列没能按时更新感到抱歉。主要是因为我最近自己也在忙于网站设计项目，没有太多的时间来写啦！

今天我们来聊聊网站设计的第三个阶段--为你的网站创建线框图和原型图来展示给你的客户看。希望你已经和你的客户合作沟通并且思考过你的网站，对于该项目要用的元素和特点有了个清晰的思路和想法。那么现在就该来开始构建你的网站，决定它的布局和基本设计了。

线框

--什么是线框图？

线框图是一个网站图形化的骨架，能够引导一个页面的内容及概念。线框看上去就像你不用或用很少的颜色，在纸上绘制出的网站基本层次架构。线框能够帮助你和客户来讨论网站层次和导向。

--为什么我们要用线框图？

我之所以用线框图是为了长远地节省时间，减少和客户之间的沟通障碍。哪怕是你在和他们面对面地讨论了他们想要的网站效果后，你们各自想象到的结果还是很可能有较大差别。在开始设计或为网站编码之前使用线框图来进行说明，你能够保证你和客户想法一致。

有时候，你和客户可能需要在线框图这个阶段上来回讨论好多次，但是这样仍然比在开始敲代码后来修改整个网站容易得多！

--我是如何创造和使用线框图？

你能用好多方式来绘制你的线框图。现在有好多在线工具让你能够很快很容易地绘制线框图。我通常使用的是：https://gomockingbird.com/

如果你愿意，你也能用photoshop或firework来完成这项工作。你所需要做的就是要对网站层次及布局（在哪里放图片，导航，文本。。。）有一个好的想法。

经常你会需要绘制两到三个不同的框架来为客户展示不同的布局和导航选项。客户能够选择他们想要的，并且提出一些修改意见（在你合同里就是这么写的。。。）直到你们双方都对它满意为止。一旦用户采纳了你的布局和方案，你就可以进行下一步了--做出你网站的原型来。

原型图

--什么是原型图？

我更愿意称其为装饰模块。它基于客户接受的框架，但包含有色彩和其他的设计元素（比如说你网站想要用的字体，背景图片等等）。

这里摘录了一段样板的定义，来自PSDFanExtra.com的一篇优秀文章：

你可以说线框图更像物理架构，而原型图更偏向于设计。你可以在线框图的基础上用蹩脚的文字，颜色和修饰来进行构建原型图，可以轻微调试各布局，但一切都要在线框图规定的结构范围内。原型化通常是基于前面提到的线框图，使用Photoshop来创建的图像结构。

我希望这段话能够清晰地指出线框图和原型图的不同--线框图是用来描绘网站的布局，原型图是用来展示网站的图像元素和外形的。

--为什么使用原型图

我使用原型图的原因和我使用线框图的原因基本一样--长远地看能节省时间，消除我和客户之间可能存在的沟通上的误解。在开始编码前和客户一起决定最后完成的网站大致的样子，能够节省好多你返工重写代码的时间。在PhotoShop里调试一下颜色和元素尺寸比在实际网站中做这些事情要容易得多。

--我是怎样创建并使用原型图

我个人比较喜欢在PhotoShop或Fireworks里制作原型图。也可能有其他各种方式来完成这项工作（如果说你有其他喜欢的方法，请分享出来！），但我一直都是用图片编辑的方式来完成它，觉得没用什么必要去改变。

你的原型图板需要做得多深入，有多少细节，完全取决于你个人，客户和项目。我的原型图一般不会和最后出来的完成品一般细节化，但还是那句话--它取决于你的客户和项目。

Note：当你在设计过程中使用线框图和原型图的时候，我强烈建议你在合同中标出你会去创造多少个模板原型，会对客户选择的那个做多少次改版，以及客户能有多少时间来改动。

所以我们现在应该大致对在网站设计及项目过程中使用线框图和原型图的原因有了个大致了解了。

原创译文 @一笔一画的小胡子

原文链接：http://blog.thelibzter.com/designing-a-website-wireframes-and-mockups