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

进行 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 文件中加上统一的布局代码，动态变化的区域用 代替。之后你就可以通过

来测试添加 post 的页面($QUERY_STRING=posts/add)。

虽然与之前的 URL 不同，但是已经基本一致了。如果你是一个完美主义者，可以配一下 mod_rewrite，可以实现完全的 friendly URLs。

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

相关文章

“页面驱动型开发”是最常见的开发模式了，几乎大部分网站开发都是采用这个模式，我们团队开发网站，就是基于PHP MVC开发，虽然也无逻辑层做的还不好，但是前端设计师和后台程序员，通过Smarty模板引擎，几乎可以达到同时开发。

在Web标准结构和表现分离的思想下，UI设计和结构的异步，更加提高了效率，根据PSD效果图，先确定布局(layout)，也就是基本的结构，css和php就可以同步了。

如果就单纯做界面原型的话，用visio比较好，用它可以画出整个界面的大体布局和所要呈现的内容和功能，而且甚至可以制定一套专门为项目的图形库，这样就可以更好的表现初始原型了。当基本确定以后就可以用具体图形工具譬如fw,ps,ai这些做详细的效果图也可以叫后期原型吧。

FW/PS/AI这些是UI设计阶段了；

在实际项目中，要平衡设计师和程序员的工作分配。本文写的有一些理想化，一般项目中很少有机会完全做到，只要做到能够表达清楚意思就足够了。进一步的细化不属于原型的范畴了。而且大家都推崇快速原型，即以界面为中心的原型设计，有一个很重要的特点，就是快速。

我现在使用webwave来做前期原形界面，感觉还不错

不知道为什么有了Axure不用呢。难道一定是用个铅笔和纸才显高雅。