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

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

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

白纸、铅笔、橡皮，有时候还需要剪刀。可惜大部分情况下保真度不高而且难以表述页面流程；

Word，可以制作 wireframe，还可以批注或者加大段文字说明。可以在一定程度上表述页面流程，但是依赖于文字功底；

PPT，使用起来比较麻烦，但是可以动态的表达出交互流程，可惜文字表达能力不足；

Flash，同 PPT，更加难以使用。适合制作小屏幕界面原型；

HTML，本文就是想讲如何使用 HTML 快速进行 Web 界面原型设计。

HTML 作为 Web 的基础，也是大部分项目开发过程中，设计师最终要向程序员提交的成果。使用 HTML 进行原型的设计，有相当大的优势在于可以节省一些制作的时间。但是这里面还是遇到几个问题：设计师如何管理 HTML 文件？最后提交给程序员后，如果要修改怎么办？因为大部分情况下，HTML 一旦交付，可能就四分五裂不成样子了。要修改的话可能要先改设计稿，好了之后再次提交给程序员，同时程序员要确认哪里修改了，哪几个文件修改了。如果使用 SVN 来协同开发，情况还好一些，但是设计师就要花上一段时间来理解程序结构。

我常戏称这种方法为页面驱动型开发，因为在开发前(确切说是编码前)大部分工作是处理界面、交互，并且制作出高保真的 HTML 页面原型。它基于 Web 标准设计，完全分离结构和表现，这样当程序员在原型基础上进行编码的同时，设计师可以进一步完善 UI 设计，而只用到 CSS 文件和