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

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

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

1. 白纸、铅笔、橡皮，有时候还需要剪刀。可惜大部分情况下保真度不高而且难以表述页面流程；
2. Word，可以制作 wireframe，还可以批注或者加大段文字说明。可以在一定程度上表述页面流程，但是依赖于文字功底；
3. PPT，使用起来比较麻烦，但是可以动态的表达出交互流程，可惜文字表达能力不足；
4. Flash，同 PPT，更加难以使用。适合制作小屏幕界面原型；
5. 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 的小提示、重用代码的整理。在原型设计的过程中可以不断地和程序员沟通，了解他的需求，这样子可以减少不少后期的沟通成本和返工的情况。

相关文章

• 为何XHTML原型会失败？
• 进行 Web 界面原型设计的一种方法（续）
• 途牛之旅（一）
• Web标准在中国
• 谈谈Web前端工程师的定位

“页面驱动型开发”是最常见的开发模式了，几乎大部分网站开发都是采用这个模式，我们团队开发网站，就是基于PHP MVC开发，虽然也无逻辑层做的还不好，但是前端设计师和后台程序员，通过Smarty模板引擎，几乎可以达到同时开发。
在Web标准结构和表现分离的思想下，UI设计和结构的异步，更加提高了效率，根据PSD效果图，先确定布局(layout)，也就是基本的结构，css和php就可以同步了。

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

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

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