线框原型的概念和本质:将网站架构形象化

家里小猫生病，从周二开始一直折腾到现在，仍在治疗与观察中。几年来经历过几次这样的状况，虽然每次都会恢复健康平安，但一旦再次置身这样的过程里，怎样也无法停止焦虑与担心。除了尽心尽力以外，能做的只有不断祈祷，期盼着一切安好平安的状态早日回来。

篇幅不长的一篇文章，也因为这样的状况而拖沓了多日；一方面没时间，一方面没有任何心力的感觉。不多说了，我们来看今次的译文。

如今的设计圈子里，线框原型(线框图)这个词正在越来越多的被提起。过去几年中，在软件和Web设计等相关行业里，线框原型得到了迅速的普及，同时也带来了很多的误解。它的概念甚至在慢慢的被扭曲，使新手在入行时往往不能正确的理解它的用途。

问题出在哪里呢？最近，我(原文作者)与一些设计专业的学生进行了交流，他们问到不少关于线框原型的问题。通过这些问题，我发现他们对于“线框原型”这个概念的心智模型与其本质相去甚远——在他们的理解中，这个概念包括很多涉及视觉设计方面的因素。更糟的是，他们甚至不愿意去做线框原型方面的事情，他们只知道这是流程中的一个需要执行环节，却不明白它的重要性。这事弄的我相当郁闷，最初，我觉得这搞不好只是个例而已，但通过对行业内的现状进行观察，我逐渐发现，线框原型在很多项目流程中的执行情况真是够惨不忍睹的；原因来自很多方面，包括客户、设计新手、产品决策者等等。

实际上，线框原型的规划是Web设计中必不可少的重要步骤，设计师们应该真正了解它，并学会正确的运用它。

线框原型就是蓝图(blueprints)

设计师们通常都会明白，对于那些结构复杂的东西——比如建筑或是汽车——计划与架构设计工作是必不可少的；而涉及到互联网工业时，这些工作的重要性仿佛降低了。网站虽然不是汽车，但它本质上仍是一种复杂的综合项目。如果忽视了良好的蓝图规划，那么整个项目将会对时间、人力和金钱造成巨大的浪费。

在进一步了解线框原型的正确的实际应用方式之前，我们有必要首先了解一下它本质上究竟是什么，它的存在有哪些目的。

我个人认为，蓝图是对线框原型最恰当的比喻。人们不会将蓝图看作建筑物实际效果的渲染图，也不会通过它来制定视觉风格方面的决策。线框原型是纯粹的功能与信息的示意图。

对线框原型概念的误解

在实际应用中，我们还需要明白线框原型在概念上不是什么，并且最好可以对需求方、团队成员及相关合作部门进行解释说明。

线框原型不是设计

线框图应该彻底与字体字号、配色、图片等无关。多数人习惯进行形象思维，他们很容易将线框原型理解为在一定程度上表达了设计方案的设计稿。在线框图中过多的使用视觉化的元素，会干扰其对功能的呈现。始终要记住，线框图的作用是组织并呈现信息，要避免在视觉上过度的保真。

线框原型不代表最终布局结构

另外一个误解，就是人们时常觉得，视觉设计师要做的只是在线框图提供的布局结构的基础上进行美化工作；甚至在多数视觉设计师的观念中也是这样。从语义上讲，线框图所展示的布局，最主要的作用应该是描述功能与内容的逻辑关系，视觉设计师并不需要在所有的细节中受其制约。

线框原型不是交互原型

这两个概念之间的区别和联系确实容易让人混淆，从项目流程角度说，它们甚至是完全不同的两种工具。简单的说，线框图用来组织及呈现信息，而交互原型，顾名思义，用来展示及评估交互方式。多数时候，它们在形式上很相似，并且都应该避免使用那些容易造成干扰的高保真视觉元素。

线框原型的实际应用

正如在前文中提到的，很多设计师并不了解制作线框原型这个步骤在项目流程中的重要性，因为他们不清楚线框原型的本质和制作它的目的是什么。实际上，线框原型在项目流程中的目的性是很强的。下面，我们来看看线框原型在实际中的几个重要应用方面。