Kiven's Blog™

进行 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)，可以用简单的注释实现文件包含、代码重用。只需使用例如 <!--#include virtual="/path/to/file" --> 的代码就可以包含文件。为什么不直接使用 PHP 的 include？显然让设计师学习 PHP 有些困难，而这种注释形式的“程序”更加容易理解。

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

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

基本上就是如此，最后不要忘了 JS 的小提示、重用代码的整理。在原型设计的过程中可以不断地和程序员沟通，了解他的需求，这样子可以减少不少后期的沟通成本和返工的情况。 本文是Kiven原创或精心挑选来的，请您回复一下或推荐给你的QQ、MSN上的好友！谢谢