作者:

进行 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 具有 addeditlistdel 等功能。那么在本地就可以相应的建立 Posts 目录,目录下分别新建 add.htmledit.htmllist.htmldel.html 页面。现在设计师通常也配有 IIS 或者 apache 用来调试。那么在省略扩展名的情况下,我们就可以通过 http://localhost/blogadmin/posts/add 来测试添加 post 的页面。这与后期程序约定是一致的。

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

目录理清楚后,接下来就是如何连接起来。这里用到了 SSI(Server Side Include),可以用简单的注释实现文件包含、代码重用。只需使用例如 <!--#include virtual="/path/to/file" --> 的代码就可以包含文件。为什么不直接使用 PHPinclude?显然让设计师学习 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 的小提示、重用代码的整理。在原型设计的过程中可以不断地和程序员沟通,了解他的需求,这样子可以减少不少后期的沟通成本和返工的情况。

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

转: http://www.junchenwu.com/2006/11/a_method_of_using_html_to_design_web_prototype.html

 

viagra

发表评论

评论