Web界面原型设计的一种方法
Web界面原型设计中常用的工具如下：
白纸、铅笔、橡皮，有时还需要剪刀。 遗憾的是，大多数情况下，保真度不高，很难表现页面的流动
可以创建Word、wireframe，可以进行评论，也可以增大段落的说明。 能够在一定程度上表现页面的流动，但取决于文字的基础；
PPT，虽然使用起来很麻烦，但是可以动态地表现交互式的流程。 很遗憾，文字表达能力不足；
Flash、PPT，更难使用。 适合制作小屏幕界面原型；
HTML，本文介绍如何使用HTML快速进行Web界面原型设计。
HTML既是Web的基础，也是大部分项目开发过程中设计师最终提交给程序员的成果。 使用HTML进行原型设计具有节约制作时间的巨大优势。 但是，这里面有几个问题。 设计师如何管理HTML文件？ 最后提交给程序员后，要修改该怎么办？ 因为在大多数情况下，如果HTML被交付，就有可能变得零散。 修改时，首先需要变更设计稿，完成后再次提交给程序员，同时程序员可能需要确认哪里被修改了，哪些文件被修改了。 如果使用SVN共同开发的话，情况就没问题，但是设计师需要时间来理解程序的结构。
我经常把这种方法称为页面驱动开发。 因为开发前(准确地说是编码前)的大部分工作都是处理界面、交互和创建高保真的HTML页面原型。 它基于Web标准设计，完全隔离了结构和表示形式，因此在程序员基于原型进行编码的同时，设计人员只需使用CSS文件和images文件夹即可进一步完善UI设计。 通常需要CVS或SVN支持。
这个高保真的HTML页面原型包括页面布局和内容。 一致的布局和界面字符(与用户的对话)，不包含详细的UI。
页面流：页面原型上的所有链接都是可单击和理解的。 例如，href='/posts/add '这样的链接；
提示信息：利用JS模拟用户操作，有成功操作或失败操作提示；
小元素：例如，显示小窗口的提示和帮助。
我相信这样的原型一旦交付给程序员，他也会相当高兴：D。 我们不会因为页面失踪或提示不足等原因询问产品经理或设计师。 因为实际操作的话马上就知道了。
设计这种样机时，主要思想是MVC。 首先，程序员在编码之前，有一些代码设计文档，包括一些约定和类的设计。 设计师可以使用本文档一瞥程序的结构。 以Blog管理后台为例，例如Posts具有添加、编辑、列表、戴尔等功能。 作为响应，可以在本地创建Posts目录，并在目录下分别创建add.html、edit.html、list.html和del.html页面。 目前，设计师也配备了IIS和apache用于调试。 如果省略扩展名，则可以在http://localhost/blog admin/posts/add中测试添加开机自检的页面。 这与后期手续的约定一致。
然后统一“页面布局”。 以名为CakePHP的PHP框架为例，布局模板通常位于appviewslayouts下。 一般为默认的default.thtml。 根据这一结构，在原型设计途径下设置Posts、Categories、Comments、Layouts等目录。 统一的小代码块位于元素目录下。
目录清楚后，接下来是如何连接。 在这里，服务器端包含(SSI )可以通过简单的注释实现文件的包含和代码的重用。 例如，只要使用中的代码就可以包含文件。 为什么不直接使用PHP的include？ 显然让设计师学习PHP有点困难，但这个注释格式的“程序”更容易理解。
$QUERY_STRING (如http://example.com/)系统变量中的查询字符串，以在所有页面上使用相同的布局？ home，那么$QUERY_STRING=home。 有了查询字符串，可以解决布局问题，也可以解决URL统一问题。
也可以在原型设计的根目录下创建并添加新的简单index.html文件，或直接使用index.html作为统一布局文件。 然后，在/layouts/default.html文件中添加统一的布局代码，并用替换动态变化的区域。 在那之后，你可以通过
测试要添加开机自检的页面$QUERY_STRING=posts/add。
与以前的URL不同，但几乎一致。 如果你是完美主义者，可以打开mod_rewrite，实现完整的friendly URLs。
基本上是这样，但最后不要忘记整理JS提示、复用代码。 在原型设计过程中可以与程序员不断交流，了解他的需求，这样可以减少后期的交流成本和返工。
相关报道
“页面驱动开发”是最常见的开发模式，大多数网站开发都采用这种模式。 我们的团队开发网站是基于PHP MVC进行开发。 没有逻辑层，还行不通，但是前端设计师和后台程序员可以通过使用Smarty模板引擎几乎同时开发。
p>在Web标准结构和表现分离的思想下，UI设计和结构的异步，更加提高了效率，根据PSD效果图，先确定布局(layout)，也就是基本的结构，css和php就可以同步了。
如果就单纯做界面原型的话，用visio比较好，用它可以画出整个界面的大体布局和所要呈现的内容和功能，而且甚至可以制定一套专门为项目的图形库，这样就可以更好的表现初始原型了。当基本确定以后就可以用具体图形工具譬如fw,ps,ai这些做详细的效果图也可以叫后期原型吧。
FW/PS/AI这些是UI设计阶段了；
在实际项目中，要平衡设计师和程序员的工作分配。本文写的有一些理想化，一般项目中很少有机会完全做到，只要做到能够表达清楚意思就足够了。进一步的细化不属于原型的范畴了。而且大家都推崇快速原型，即以界面为中心的原型设计，有一个很重要的特点，就是快速。
我现在使用webwave来做前期原形界面，感觉还不错
不知道为什么有了Axure不用呢。难道一定是用个铅笔和纸才显高雅。