线框图是对页面中所有的组成部分以及它们如何结合到一起的、最直观的

今天为大家更新《用户体验要素》的第六章——框架层，界面设计、导航设计和信息设计——线框图

本小结关键词：线框图

主要观点：线框图是对页面中所有的组成部分以及它们如何结合到一起的、最直观的描述

线框图

页面布局是将信息设计、界面设计和导航设计放置到一起，形成一个统一的、有内在凝聚力的架构的地方。页面布局必须结合所有类型的导航系统，每一个旨在传达在不同结构中的视图设计；也必须结合任何 一个在这个页面上的功能所需要的所有界面元素；还包括支持以上这些内容的信息设计，当然也包括在这个页面上内容的信息设计本身。

这一次需要平衡很多东西。这就是为什么页面布局被纳入一个详细的文档，并称为页面示意图或线框图（wire frame）的原因。这个线框图是对一个页面中所有的组成部分以及它们如何结合到一起的、最直观的描述（正如它的名字一样）

线框图捕获所有在框架层做出的决定，并用一个文档来展现它们。它作为视觉设计和网站实施的参考来使用。线框图可以包括各种不同程度细节—你看到的这个是非常粗略的。

这些简单的线条绘制的图一般要着重注明、建议读者在必要的时候参考结构图表或其他交互设计文档、内容需求或功能规格说明，或者其他类型的详细文档。举例来说，如果一个线框图涉及个别已有的内容元素，它也许会给出指示，说明他们在哪儿能找到这些内容。另外，线框图通常还包括附加说明，用于说明在线框图和结构图表看得不太明显的网站行为。

现在，让我们再回去看看结构层的结构图示，它是这个项目的一个宏伟远景；而在框架层，线框图是正是展示那些远景如何完成的详细文档。线框图有时也需要导航规格的支持，以便能更详细、准确地描述各种导航元素的每一个组成成分。

对于更小或更简单的产品来说，一个线框图就足够作为所有即将建立界面的模板。对于大多数项目来说，无论如何，都需要用多个线框图来传达复杂的预期结果。不过，你不需要为网站的每一个界面都准备一 个线框图。正如结构设计流程允许我们把内容要素总结成不同的类别或类型一样，一个数量相对较少的标准界面类型，将根据你的功能或导航的不同，在绘制线框图的过程中慢慢浮现。

线框图在正式建立网站的视觉设计的流程中，是必要的第一步，但是几乎每一个参与这个开发过程的人都会在其他任务点中使用它。负责战略层、范围层和结构层的设计者可以借助线框图来保证最终产品能满足他们的期望。真正负责建设这个网站的人，则使用线框图来回答关于网站应该如何运作的问题。

作为信息架构和视觉设计汇集的地方，线框图变成了争论和纠纷的中心。用户体验设计师抱怨创建线框图的设计师将导航系统背后的结构描绘得模糊不清，不能正确反映结构的基本概念。视觉设计师抱怨绘制线框图的用户体验设计师将他们的功能减少成一个数码绘画师的角色， 浪费了他们为信息设计问题带来的、在视觉传达方面的经验和专长。

当你有两个独立的信息架构师和设计师的时候，绘制出成功的线框图的唯一办法就是“协作”。在共同协作做出线框图的细节的过程中，双方都可以站在对方的角度来看待件事，并且在这个过程中还有助于及早地揭示出问题（而不是到后来，在这个网站正在建设的时候，每个人都纳闷为什么没有像计划中那样运作）。

所有的这些使线框图听起来像是一件非常庞大的工作。这不一定的。文档本身并不是目的；它只是达到目的一种手段。为了文档本身而创建文档不仅仅是在浪费时间——它可能还会降低生产力和打击工作积极性。根据你的需求来撰写正确级别的文档（同时不要欺骗自己可以用较少的文档糊弄过去）才能将文档从一件麻烦事变成一件有益的事。

我曾经画过一些成功的线框图，仅仅是用即时贴和画在它们上面的架构就完成了。对于一个设计师和程序员座位紧挨在一起的小团队而 言，这种级别的文档已经完全足够了。但是当程序员对整个团队负责而不是一个人的时候（甚至这个团队在地球的另一端）那么就需要一些较 为正式的文档了。

线框图是整合在结构层的全部三种要素的方法：通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计；通过放置和排列信息组成部分的优先级来整合信息设计。把这三者放到一个文档中，线框图就可以确定一个建立在基本概念结构上的架构，同时指出了表现层的设计应该前进的方向。

今天就更新完了框架层啦，下周开始更新——表现层。

表现层是在这个五层模型的顶端，是产品用户会首先注意到的地方：感知设计。在表现层，内容、功能和美学汇集到一起来产生一个最终设计，完成其他四个层面的所有目标，并同时满足用户的感官感，敬请期待~。