读过信息架构《Information Architecture》的朋友都知道信息架构的交付物为四个，其中一只就是线框图（Wireframes），在产品经理的交付物中就有线框图，又被称为设计原型（Prototype Design）。

设计原型，以下我将称为线框图（在某些方面我认为他们有不同之处，后面的文章会做介绍），是信息架构内容（Concepts）和系统（System）两部分思考和设计的体现形式。在实际的工作过程中这两部分更多的是集体智慧的成果。

线框图的实现工具有很多种。在网上传的很多的iPhone的设计图纸，就是纸质的交付物。一般产品经理用的软件工具有word、excel、Visio、 Publish、Photoshop、Dreamweaver等，用苹果的朋友应该非常熟悉OmniGraffle——能够完成Windows下的工具不能完成的很多工作制作出精致的线框图。

线框图只是展示形式，是最终的结果。以下介绍的每一部分，将会单独撰文描述。

通常情况下我把线框图本身的描述物分为1）功能设计，2）流程设计，3）层次设计，4）状态设计，5）导航设计，6）布局设计，7）文字设计。

这七部分放在页面中的每一块都是线框图的一部分，综合在一起就是完整的线框图了。

功能设计部分主要是将每一个功能点要包含的元素设计好，保证元素均为有效元素，在功能点之间的衔接元素给予特殊描述注明。例如：设计一个分类网站的用户注册，必须的元素有：登录名、登录密码，有一项：现居住地址，是为了保证用户在登录页面后显示的信息都是他居住地的信息避免其它信息的干扰。最终的线框图展示为：

流程设计，有两个方面1）某一个功能的实现流程，2）用户的访问流程。用户的访问流程设计在导航设计中将详细体现，所有流程设计一般指某个功能的流程实现，不过该流程是用于实现的页面流程并非逻辑流程；逻辑流程主要用于开发。例如：注册流程的实现。

层次设计是指页面的内容、功能等是包含不同层次的，在前面的一篇文章中已经描述了把层次设计分为三个方面。（阅读：《页面信息层级》）

状态设计是一个值得琢磨的过程，这个过程有很多时候被认为是交互设计的工作。我认为这是交互设计师和产品经理共同的工作，需要产品经理提出需要的状态，然后和交互设计师协商状态的必要性，确定最终状态，此后交互设计师去实现该状态。通常情况下我们会将状态分为默认状态（Normal）、过程状态（Process）和完成状态（Finish）。列表状态是我经常使用的一个说明例证，简单但是过程描述需要非常清晰，如图示。

状态设计的另一部分内容是格式设计，例如：同时时间元素，显示在不同的页面将有不同的现实格式，现在常见的有：2008年2月12日、2008-2-12、15分钟钱、2008年2月12日 13：02、2008-2-12 下午1：02等。在某一个页面要显示时间时显示那个格式的时间是需要产品经理根据页面内容来确定的。

导航设计是一个独立的过程，在线框图中展示的时候显示的是页面的组织形式和结构。如：在填写登录信息的页面，有注册链接等。导航一般分为： Global Navigation systems / Local Navigation Systems / Contextual navigation / Implementing Embedded navigation / Supplemental Navigation Systems / Site indexes / Wizards and Configurators 等。（参考《Designing Web Navigation Optimizing  the  User Experience》）

布局设计是线框图的基础，这部分布局是由交互设计师提出，通过讨论确定，产品经理更多的是一个参与角色；当然有些组织认为产品经理需要非常了解设计工作，这部分也可能是产品经理来承担的。

文字设计是一个非常细致的工作，涉及到的内容有导航、提示信息、功能点命名等诸多方面。这部分工作是有产品经理在设计之初提出通过对线框图的完善由文字工作者完成并进行整合。不过实际工作中多是产品经理确定，大家讨论后进行适当的修订和调整，并不作为独立的工作来完成。

这七部分是线框图的组成元素，线框图是这七部分内容的综合体。在线框图的设计过程中最主要的一个因素就是各个元素放的位置。例如：在页面中最长用的时间元素放置的位置，新浪放在了新闻标题的下方，CNN放在了新闻标题的左上侧；同时他们对时间的格式描述也是不同的。新浪的格式告诉了我们在什么时间上传了这则新闻，对于我们的直观感觉很平淡；CNN的时间格式就给了我们一种紧迫的感觉，事件发生距离现在多长时间了。

在线框图的描述过程中，并非所有的线框图描述都是有产品经理完成的，是在产品经理的主导下有设计师、交互设计师和（较弱）开发部门共同完成的。

本文为概述，后续每项内容将详细说明，请关注：原型设计之系列。

转载请注明来自：赢在产品@SuccessPM。

打印  |  相关话题：原型(Prototype)   |  类别：信息和交互  |  源地址