进行 Web 界面原型设计的一种方法-UML软件工程组织-火龙果软件

UML软件工程组织

进行 Web 界面原型设计的一种方法

作者：Scott W. Ambler　文章来源：IBM

进行 Web 界面原型设计常用的工具如下：

白纸、铅笔、橡皮，有时候还需要剪刀。可惜大部分情况下保真度不高而且难以表述页面流程；
Word，可以制作 wireframe，还可以批注或者加大段文字说明。可以在一定程度上表述页面流程，但是依赖于文字功底；
PPT，使用起来比较麻烦，但是可以动态的表达出交互流程，可惜文字表达能力不足；
Flash，同 PPT，更加难以使用。适合制作小屏幕界面原型；
HTML，本文就是想讲如何使用 HTML 快速进行 Web 界面原型设计。

HTML 作为 Web 的基础，也是大部分项目开发过程中，设计师最终要向程序员提交的成果。使用 HTML 进行原型的设计，有相当大的优势在于可以节省一些制作的时间。但是这里面还是遇到几个问题：设计师如何管理 HTML 文件？最后提交给程序员后，如果要修改怎么办？因为大部分情况下，HTML 一旦交付，可能就四分五裂不成样子了。要修改的话可能要先改设计稿，好了之后再次提交给程序员，同时程序员要确认哪里修改了，哪几个文件修改了。如果使用 SVN 来协同开发，情况还好一些，但是设计师就要花上一段时间来理解程序结构。

我常戏称这种方法为页面驱动型开发，因为在开发前（确切说是编码前）大部分工作是处理界面、交互，并且制作出高保真的 HTML 页面原型。它基于 Web 标准设计，完全分离结构和表现，这样当程序员在原型基础上进行编码的同时，设计师可以进一步完善 UI 设计，而只用到 CSS 文件和 images 文件夹。通常情况下需要 CVS 或 SVN 的支持。

这种高保真的 HTML 页面原型，包括：

页面布局和内容：一致的布局和界面上的文字（与用户的对话），不包括详细的 UI；
页面流：页面原型上所有链接可点，并且可理解，比如 href="/posts/add" 这样的链接；
提示信息：利用 JS 模拟用户操作，有成功操作或失败操作的提示；
小元素：比如弹出小窗口的提示和帮助等。

这样的原型交付给程序员，相信他也会相当的开心的 :D，不会因为页面去向不明或者缺少提示等而询问产品经理或者设计师，因为实际操作一下就明白了。

在设计这样的原型时，主要的思想是 MVC。因为一开始程序员在编码前会有一份代码设计的文档，包括一些约定和类的设计。设计师可以借助这份文档一瞥程序结构。以 Blog 管理后台为例，如 Posts 具有 add、edit、list、del 等功能。那么在本地就可以相应的建立 Posts 目录，目录下分别新建 add.html、edit.html、list.html 和 del.html 页面。现在设计师通常也配有 IIS 或者 apache 用来调试。那么在省略扩展名的情况下，我们就可以通过 http://localhost/blogadmin/posts/add 来测试添加 post 的页面。这与后期程序约定是一致的。

接下来我们要统一页面的布局（layouts）。以 CakePHP 这个 PHP 框架为例，布局模版一般放在 \app\views\layouts 下面。一般是默认的 default.thtml。仿照这个结构，在原型设计根目录下设 Posts、Categories、Comments 和 Layouts 等目录。统一的小代码块放在 Elements 目录下。

目录理清楚后，接下来就是如何连接起来。这里用到了 SSI(Server Side Include)，可以用简单的注释实现文件包含、代码重用。只需使用例如  的代码就可以包含文件。为什么不直接使用 PHP 的 include？显然让设计师学习 PHP 有些困难，而这种注释形式的“程序”更加容易理解。

为了让所有的页面使用同一个布局，我们用到了系统变量 $QUERY_STRING，即 URL 中的查询字符串，比如 http://example.com/?home，那么 $QUERY_STRING=home。有了查询字符串，布局的问题就解决了，URL 统一的问题也能够解决。

在原型设计的根目录下新建简单的 index.html 文件，加入 ，也可以直接用 index.html 作为统一布局文件。然后在 /layouts/default.html 文件中加上统一的布局代码，动态变化的区域用  代替。之后你就可以通过 http://localhost/blogadmin/?posts/add 来测试添加 post 的页面（$QUERY_STRING=posts/add）。虽然与之前的 URL 不同，但是已经基本一致了。如果你是一个完美主义者，可以配一下 mod_rewrite，可以实现完全的 friendly URLs。

基本上就是如此，最后不要忘了 JS 的小提示、重用代码的整理。在原型设计的过程中可以不断地和程序员沟通，了解他的需求，这样子可以减少不少后期的沟通成本和返工的情况。

新增加 UCD 目录，将以前写的/转的相关文章放进去了。