進行 Web 界面原型設計常用的工具如下：
- 白紙、鉛筆、橡皮，有時候還需要剪刀�？上Т蟛糠智闆r下保真度不高而且難以表述頁面流程；
- 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 頁面�，F在設計師通常也配有 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 的小提示、重用代碼的整理。在原型設計的過程中可以不斷地和程序員溝通，了解他的需求，這樣子可以減少不少后期的溝通成本和返工的情況。
--
新增加 UCD 目錄，將以前寫的/轉的相關文章放進去了。
文章來源于領測軟件測試網 http://www.kjueaiud.com/