画好线框图的20个步骤

对于任何一个开发项目来说最大的错误可能就是没有计划。最近，有些人认为开始前无需计划，一个优秀的开发者需要的是随机应变。我敢肯定这样的做法最后注定是要失败的。

线框图是计划中的第一步也是最重要的一步。这是将创意转换成客户使用的程序的第一步。本文将要带你了解线框图整个的流程；包括涉及参与人员，工具等，以便您能够更好的制作计划。

1）了解自己的目标

作为一个开发人员我想大家都有马上坐下来开始编码的冲动。通常最初的想法都很简单，那么你真的可以坐下直接开始吗？答案是否定的，项目很少有那么简单的，任何有经验的人都知道这样做将会有 很多这样的那样的问题等着你。

一个线框图可以有效的提供您的工作效率。修改计划内容远比在工作开始后在更正要来得更容易。

这个过程也有助于对项目更深的理解。事先作出计划，提出问题、意见，以便解决问题。

最终制定一个工作计划，规划设计者，开发者，工程师以及项目经理各自的工作内容，并且要保证各个环节的配合。

2）重功能，轻外观

计划展示的效果不同主要体现在所采用工具的多样性。其实从根本上说都是介绍有关功能部分的应用，例如，一个网页将有3个文本框和2个按钮。 这是功能而不是形式。

在Howard Baines我们严格按照这一原则进行，并且我们的线框图只包括一些功能要素（线框，按钮，下拉菜单等）。我们忽略任何视觉和布局的东西。其他人可能会做的更多一些，包括了布局和其他视觉的元素。这取决于你自己。

3）积累自身经验

并不一定要求您具备设计和开发的能力，而需要的是在网页应用或者网站上的经验。当然经验越丰富越好，并且你不需去理解关系型数据库只要画线框。

4）确定负责人

确保有人对整个计划负责。他们负责跟进和管理反馈，变化等。如果一个项目，那么通常负责人是发起人，因为他们更清楚目标所在。如果为客户提供服务，我们将会负责计划的进程。不管是谁，只要有人负责。

5）涉及每个人

也许不是第一次会议，必须在纸上锁定一个简单的方案并且是涉及关键利益者的想法。很少，参与的人们加快设计进程。同时，线框图的开发涉及你的团队和 客户团队。例如，你正在用你现有的数据库整合你的应用程序或者网站，然后确保数据库所有者可以检测所有数据库中的数据字段在你把他们加入到你的线框之前。 收集用户的传真号码如果无处存放是不好的。同水平的设计师对用户体验有很好的理解，并且在早期流动时会存在潜在的问题。

6）完成期限

预先留出时间和交付期限，对保持项目运行是非常重要的。最初线框图会议可以是一天或是几天，具体取决于应用程序的大小，但都需设定一个时期并且坚持下去。会后按记录跟进，以保持项目进程。

7）保持清洁

如果一个特别的网页要求两个文本框和一个按钮，那么只要有这些即可，不多不少。

8）避免设计的线框图太多

线框图只要阐述如何达到所需功能，不包括任何介绍和设计的内容。应尽量避免任何有关设计的内容，这样很容易分散客户的注意力。例如：为了更生动而增加一些蓝色，那么有可能需要半小时的时间 去解释关于蓝色的用意。这些设计的内容应该是设计师的工作。

9）记住用户界面不是用户体验

想一些使用的介绍方法是极其诱人，比如AJAX。注意：线框图是关于功能元素而不是方案展示或者互动的方法。为了更直观的展示应用，应尽量避免AJAX，应侧重于线框图。

10）想想用户

这是很显然的，但是在规划线框图过程中还是很容易忽略这一点。我们的重点是功能，但是同样要考虑用户的体验。例如，如果你做了一个三页长的注册表单，可能发现很多人都是无法完成的。

11）不要懒惰

我们常听到：登陆页面是简单，可以不用写在线框图内。确保线框图包含计划的所有内容。在项目的末尾你应该有一个详细的说明。每一步都不应被忽略。

12）将线框图分成几个部分

一个网站地图或者应用被经常分为几个部分，比如新闻，产品，和用户账户。这样做更容易理解。

13）页面的数量

一个网页的应用往往包含了若干程序；结算就是一个很好的例子。通常是线性的，但是有时用户会选择不同步骤，例如跳过一步。显然你文档中的一些页面和页面中的标签（例如点击按钮）让用户跳转。

14）重复性

应用中的一致性可以有效地帮助用户，开发和设计者。组的重复元素是一件好事。例如，无论用户输入一个地址，将会是同样的地方在同样的命令。在规划线框图时就可以将其表示出来。

15）全部检查是有意义的

最终文档应该让任何人都能简单的操作。如果只是一个开发可以理解你的线框图，那么肯定是有问题的。最后问一下对这个项目什么都没有做的人，他们是否能理解。

16）广告也是功能

很多网站都有收费广告，这可能和google的广告一样简单，但他是功能而不是设计，所以也包括在内。

17）这不仅仅是公开网站

很多网站有一个管理区域用来管理内容，浏览注册用户概况，重设密码等。这个功能许多人都用不到，但是也很重要。很多时候这可能包含一些不公开的数据（例如用户账户启用按钮）。这对于开发在设计数据库时是很重要的信息。

18）知道什么时候结束

确保所有的利益相关者有机会去给反馈，但不把这种锻炼成画西斯廷教堂。通常情况下，可以说三步就能把工作确定下来。第一，把想法写在纸上；第二，从其他人那里得到反馈意见，比如，开发和设计者；第三定稿。

19）选择正确的工具

用纸和笔比用电脑更能抓住你的想法和创意。

一旦你开始设计你的文档我们建议使用你更喜欢的工具。例如，开发者可以用Microsoft Visio，项目经理用PowerPoint，设计者用AdobeFireworks。

我认为线框图应该是一篇文档而不仅仅是交互交流（像设计，可能被分散注意力）因此设计html可能不是最好的。

有很多线框图的工具，例如Balsamiq提供环境帮助很快的增加和自定义普遍的界面元素。他们可以给它一个手绘的感觉，提供一个视觉工具而不是真正开始的设计。

20）考虑相依性

每个人都知道一个购物车的流程是什么吧？因此很容易画成线框图并且放在一边。如果你用第三方支付工具例如PayPal？那么也许影响部分网站的工作。研究相依性，做出相应的修改。这在开始时更容易做到。

希望这篇文章可以提供一个清晰的画线框的思路，谁参与，如何完成，工具如何使用，最后的输出怎么样。最终的事情是，好的完整的线框可以节省你的时间。

你有其他什么秘籍，可以更快的画出线框图吗？

英文原文：carsonified.com/blog/features/20-steps-to-better-wireframing/

文章来源：ued.alimama.com