« 如果无法在线播放本站的视频教程，请告知，谢谢 |

Web开发杂谈(10) —— 原型设计与工具

任何一个网站都是经过一定的过程，才能逐渐由头脑中的概念成为一个真正的网站的。一个网站的设计过程往往是需要经过大量的修改、甚至若干次的推翻重来，才可以达到最终的结果。今天来简单谈谈这个过程中使用的方法和工具。

问题的背景

在最初的设计阶段，最重要的一点是与客户进行良好而充分的沟通。尤其是现在的网站功能越来越复杂，而客户往往只能描述一些非常抽像的概念、想法和特征。

因此需要我们做设计和开发的人充分理解客户的想法，但是一个重要的问题是，我们如何验证我们是否真正理解了客户的想法呢？当然我们通常会写一些文档，作为与客户签订合同的附件。但是即使用再多的文字描述，毕竟客户看不到最终的效果，而最终开发出来的网站或系统如果不符合客户的心意，就是一件非常麻烦的事情了。要么为了符合客户的要求，而进行大量的修改工作，其中的成本是非常巨大的，而你向客户追加费用是很困难的事情了，即使客户同意，也不是件令人非常开心的事。要么就只能凑了，也许这并不是设计和开发公司的责任，但是毕竟问题发生了。

那么从比较理想的方式应该是如何的呢？显然，如果我们能够在还没有真正开始投入大量人力进行设计和开发之前，就可以让用户看到最终的效果和功能，那就是最好的了！这就是所谓的“原型设计”的作用。

我们用尽可能小的代价，把我们理解的用户需求表现出来，或者叫“模拟”出来，甚至用户可以实际操作，就好象这个系统已经做好了一样，这样将来做出来的系统和这个“原型”系统非常接近，那么在开发完成后在发现问题的可能性就小多了。

静态原型

因此，原型系统是非常重要而有效的一个手段，那么有什么好的方法来实现“原型”呢？

当然，最基本的方法就是手工绘制一些图纸了，此外，比如Fireworks软件中，提供了一些更为方便的进行原型设计的功能，但是这些方法和软件还是停留在“静态”展示的层面，本质上和手工绘制一些图给客户，进行纸上谈兵是一样的。

而现在网站的交互功能越来越强，一些基于Web的信息管理系统，操作起来就跟们更为复杂，比如各个页面之间的跳转，如果使用了Ajax等技术，页面还会局部刷新，如果都要用静态的图像来表达，实际上是非常困难的。

SkecthFlow 增加原型系统的动态性

因此，如果我们可以方便地制作出，可以模拟最终的动态效果的原型，那么就好多了！这是基于这个原因，近年来出现了一些具有模拟效果的原型设计软件，比如我们以前介绍过的Axure RP Pro，不我实际使用过一两个项目以后，感觉这个工具还是不够方便。而今天介绍一个我刚刚开始使用的软件 SketchFlow，感觉非常棒！实际上这不是一个独立的软件，而是附属于 Expression Blend 的一部分。而 Expression Blend则是微软的 Expression Studio 套件中的一个。如果再往下说，就要到大名鼎鼎的 Silverlight （微软指望靠它和Flash大干一场呢）上了—— Expression Blend 正是用来设计和开发 Silverlight应用的软件，因此对于微软来说，这可是一个重头戏。

而在 Expression Blend 3 中，包括了一个部分叫做“SkechFlow”，我们今天要讲的就是它了。 因此现在这个软件的全称叫做“Microsoft Expression 3 + SketchFlow”，够长的名字。

Sketch 就是草图的意思，Flow就是流程的意思，因此合在一起，就是“流程草图”的意思。那么它具有什么用呢？

SkecthFlow 的用途

首先，这个Blend这个软件本身就是可以绘制矢量图形和动画的，因此用它来绘制页面的草图是很方便的，比如假设我们要租一个网站，首先是一个登录页面，然后进入到一个内容页，我们就可以非常方便地绘制出如下的图形，注意这种风格是专门为此设计的草图风格，看起来就像是手绘的风格，主要的目的就是给用户展现的是页面的核心概念和功能，而不会是非常细节的样式。我个人非常喜欢这种风格，看起来分舒服。

Sketchflow

当然，如果只是把图像绘制的看起来手绘风格，那么也就没有太的改进了，更更为重要的是，使用SketchFlow制作的网站原型，可以精确地模拟实际操作过程，比如上面图中，登录框中的用户名输入框、密码输入框、滑动条、选择框、按钮都是可以实际操作的，而且通过简单控制，就可以非常方便地使他实际工作起来。在比如，上面的右图中，“作者介绍”和“读者评价”部分，各有一个滚动条，而这些滚动条都是有实际作用的，因此使用这种方式制作出来的原型，可以使客户非常直观而精确地了解最终这个网站完成以后，会是什么样子的，这样如果他又不满意的地方，在一开始就可以明确地指出来，这样对于我们开发成本的控制就大有好处了。

此外，软件中给出了方便的导航图，以显示各个页面之间的导航关系，也非常清晰实用，如下图所示。

Sketchflow 2

有兴趣的读者可以在浏览器中实际看一下演示的效果，如果没有安装Silverlight插件的话，需要安装一下。请点击这里查看实际效果，在登录页面随意输入，然后按Login按钮，导航至内容页面，可以在左侧调整大小。

此外，SketchFlow还可以自动生成Word格式文档，包括目录、文字、导航图、各个页面都准备好了，这样稍作修改后，提供给客户交流，就非常方便，也非常专业了。如下图所示。

Sketchflow 2 word

当然，这个软件的功能还远远不止于添加几个导航链接的功能，因为它本身用C#或者VB就可以进行深入而灵活的控制了，不过我自己也没有深入学习过Silverlight的开发，并不能说的非常清楚，此外这些操作并非几句话可以说清的了，有兴趣的读者，可以参看前不久的微软开发者大会上关于 SketchFlow 的讲演： http://microsoftpdc.com/Sessions/CL23 。讲演者说的英语不算快，还比较容易听懂，另外有很多屏幕操作，也很有帮助。

本文小结

今天重点介绍了两个问题，1）在实际开发之前，制作原型系统的重要性，以及能够给我们带来的好处。 2）使用 SketchFlow 可以比较方便地制作出高度模拟实际效果的原型系统，给我们带来很大的益处。

2,008

这篇文章发表于 2009年12月09日 星期三 7:20 pm，并被分类于Web开发杂谈。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。

欢迎您发表留言

(须填写)
(须填写,不公开)

请注意：这里输入的HTML代码会被屏蔽，如果需要讨论复杂的具体代码问题，请到我们的论坛发贴，谢谢！

17条留言