Web 界面原型设计的一种方法
进行 Web 界面原型设计常用的工具如下:
白纸、铅笔、橡皮,有时候还需要剪刀。可惜大部分情况下保真度不高而且难以表述页面流程;
Word,可以制作 wireframe,还可以批注或者加大段文字说明。可以在一定程度上表述页面流程,但是依赖于文字功底;
PPT,使用起来比较麻烦,但是可以动态的表达出交互流程,可惜文字表达能力不足;
Flash,同 PPT,更加难以使用。适合制作小屏幕界面原型;
HTML,本文就是想讲如何使用 HTML 快速进行 Web 界面原型设计。
HTML 作为 Web 的基础,也是大部分项目开发过程中,设计师最终要向程序员提交的成果。使用 HTML 进行原型的设计,有相当大的优势在于可以节省一些制作的时间。但是这里面还是遇到几个问题:设计师如何管理 HTML 文件?最后提交给程序员后,如果要修改怎么办?因为大部分情况下,HTML 一旦交付,可能就四分五裂不成样子了。要修改的话可能要先改设计稿,好了之后再次提交给程序员,同时程序员要确认哪里修改了,哪几个文件修改了。如果使用 SVN 来协同开发,情况还好一些,但是设计师就要花上一段时间来理解程序结构。
我常戏称这种方法为页面驱动型开发,因为在开发前(确切说是编码前)大部分工作是处理界面、交互,并且制作出高保真的 HTML 页面原型。它基于 Web 标准设计,完全分离结构和表现,这样当程序员在原型基础上进行编码的同时,设计师可以进一步完善 UI 设计,而只用到 CSS 文件和