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制作的网站原型，可以精确地模拟实际操作过程，比如上面图中，登录框中的用户名输入框、密码输入框、滑动条、选择框、按钮都是可以实际操作的，而且通过简单控制，就可以非常方便地使他实际工作起来。在比如，上面的右图中，“作者介绍”和“读者评价”部分，各有一个滚动条，而这些滚动条都是有实际作用的，因此使用这种方式制作出来的原型，可以使客户非常直观而精确地了解最终这个网站完成以后，会是什么样子的，这样如果他又不满意的地方，在一开始就可以明确地指出来，这样对于我们开发成本的控制就大有好处了。
此外，软件中给出了方便的导航图，以显示各个页面之间的导航关系，也非常清晰实用，如下图所示。
有兴趣的读者可以在浏览器中实际看一下演示的效果，如果没有安装Silverlight插件的话，需要安装一下。请点击这里查看实际效果，在登录页面随意输入，然后按Login按钮，导航至内容页面，可以在左侧调整大小。
此外，SketchFlow还可以自动生成Word格式文档，包括目录、文字、导航图、各个页面都准备好了，这样稍作修改后，提供给客户交流，就非常方便，也非常专业了。如下图所示。
当然，这个软件的功能还远远不止于添加几个导航链接的功能，因为它本身用C#或者VB就可以进行深入而灵活的控制了，不过我自己也没有深入学习过Silverlight的开发，并不能说的非常清楚，此外这些操作并非几句话可以说清的了，有兴趣的读者，可以参看前不久的微软开发者大会上关于 SketchFlow 的讲演： http://microsoftpdc.com/Sessions/CL23 。讲演者说的英语不算快，还比较容易听懂，另外有很多屏幕操作，也很有帮助。
本文小结
今天重点介绍了两个问题，1）在实际开发之前，制作原型系统的重要性，以及能够给我们带来的好处。 2）使用 SketchFlow 可以比较方便地制作出高度模拟实际效果的原型系统，给我们带来很大的益处。
9,392
Hands down, Apple鈥檚 app store wins by a mile. It鈥檚 a huge selection of all sorts of apps vs a rather sad selection of a handful for Zune. Microsoft has plans, especially in the realm of games, but I鈥檓 not sure I鈥檇 want to bet on the future if this aspect is important to you. The iPod is a much better choice in that case.
这个东西感觉是不错的。就是不知道是不是大众化的东西。。有没得一个在线的，而且是开源的。
请问您能看得出什么意思么,如果看不出请通过如何,不要翻译拉!
i don鈥檛 have an opinion on this issueReview site
I鈥檝e just walking from every page to page until I met hot topic in this page. From first impression, I underestimate your topic ideas, but it is my fault, sorry for thinking this (I told you what I thought in my mind).
SkecthFlow，看起来很强大，用用试试。
好强大的解说，拜读了
感觉非常不错，有下载地址吗？最近在发愁这个呢
拜读楼主大作，感谢分享好东西！
还处于初步阶段，这个还从来没用，不过将来肯定会用到，受教了
支持喽！博客不错！
没试过这个呢。
这段时间天天研究那块。。头都大了。。结果没研究出啥结果。。郁闷死了。
感谢楼主分享的好文章！！！
主要产品：尼龙扎带，不锈钢扎带，魔术扎带， 钢钉电线卡、墙壁开关，粘式固定座、热收缩套管、尼龙电缆固定头、接线端子、汽车附件、小型断路器
资格证书：公司1998年6月通过ISO9001国际质量体系认证
2001年5月通过产品TUV认证
2002年12月产品通过CE认证
2003年1月产品通过美国UL认证
2005年7月产品通过SGS认证
产品开发：能独立开发、生产各种塑料、冲制产品。
公司宗旨：竭诚奉献、卓越品质；百年宏泰、永绩经营。
222
主要产品：尼龙扎带，不锈钢扎带，魔术扎带， 钢钉电线卡、墙壁开关，粘式固定座、热收缩套管、尼龙电缆固定头、接线端子、汽车附件、小型断路器
资格证书：公司1998年6月通过ISO9001国际质量体系认证
2001年5月通过产品TUV认证
2002年12月产品通过CE认证
2003年1月产品通过美国UL认证
2005年7月产品通过SGS认证
产品开发：能独立开发、生产各种塑料、冲制产品。
公司宗旨：竭诚奉献、卓越品质；百年宏泰、永绩经营。
中国宏泰电器有限公司 | 专业生产 | 尼龙扎带 | 不锈钢扎带 | 小型断路器等…
感谢分享！！！苹果iPhone价格
文章写的不错，特来顶一下！！！
支持喽！博客不错！
文章写的不错，很受启发，感谢，特来顶一下！！！
对我有帮助~谢谢了
学习了，管用
牛逼啊
很好的说~
我想知道为什么百度没有收录本站……搜都搜不到……
我发现这个网站很好。我也是通过视频的水印照过来的。
这么好的网站没有收入很可惜啊。
我要让笑容成为自己的招牌动作
不错，不过具体我还没有用过SkecthFlow，现在就下载下来试试看，现在，感觉用户体验越来越重要了，感觉这也将是一种趋势。
慢慢看 不懂学习一下
学习了
这本书老师写的更棒。 有时候看的比较费力。
不是很懂，支持一下啊
写的不错。楼主花不少心思。 谢谢分享
很好的教程，已经看完，非常支持，建议买本书继续学习！
WEB 前端技术交流 总群：63417830
你们知道温老师到哪里去了，现在他都不回复了，我还要买书，买空间那
在《CSS设计彻底研究》一书教程中，视频教程上讲师用一个在线画树状图的网站在线画树状图，那个的网站是什么啊~！
博客做的真好 每天进步一点学习好东西
名爵到此一游
http://www.jilinzc.com/
博主分析真透彻！收藏下来！
谢谢！
看来Blend比直接用PS好多了
以前的同事用这个做过一套草图给我，不过没有你做的这么好，他的就是图片，没有交互，没有操作流程。
我下载来试一试。顺便问一下：界面能不能换成蓝色？Expression Web 2 是蓝色的，Expression Web 3 就成黑色的了，黑的太夸张了，刺眼。去年我把 Expression Web 3 换成蓝色的了，但今天去微软官网下载安装后，不会换了，不知道是我没找到还是新版换不了了。
另外：是不是有几个错别字：“比如假设我们要租一个网站”、“看起来分舒服”。
青色 ,
我试一下 Expression Web 3 好像确实没有办法更换主题，没有相关选项。不过我这里看着感觉不是很深。
倒是 Expression Blend 非常深，很扎眼，不过 Blend 是可以更换主题的，从默认的 神色 主题 换成 浅色 主题感觉好一些。
估计这些软件也是微软的不同团队开发的，不是完全一致。
一直还在Axure RP blend3系列很大吧 微软的东西从前到后我都没发现有容量小的。。
微软的 Expression 系列软件的确很强大，现在的super preview更是网页兼容性测试的绝佳工具。
这个太好了，正想了解一下这方面的东西呢，在整个网站设计稿出来之前有这样一个好的原型设计工具的确节省了不少时间和精力，也确保下一步工作的正常进行。
提个错别字，“适量图形”应该是“矢量图形”吧 ：）
现在的原型设计软件基本都提供手绘风格了 ：）如果这个软件做出来的原型实际可用，那当然是很大的优势，不过我有两个疑问：1）做的过程是否方便，2）究竟可用到什么程度，链接跳转功能其他软件也支持的 ：）
还有，这个软件是免费还是收费的呢？
小骆驼商队 ，
1： 多谢提醒，已经改正了，应该是 矢量 。
2：我个人感觉算是相当方便了，我以前做原型设计只用过 Photoshop/Fireworks 和 Axure RP Pro ，我感觉 SketchFlow 比起这两者来说要方便不少，而且也灵活得多。
3：和实际接近到什么程度，我个人的理解，如果不怕麻烦的话，可以做到和实际非常接近，只是一般来说是否必要，毕竟能说清就可以了吧。这个软件的功能当然还远远不止于添加几个导航链接，因为它本身用C#或者VB就可以进行深入而灵活的控制了。本质上说，就是用Blend开发WPF或者Silverlight程序，只是提供了一些原型设计的辅助功能。如果有兴趣，推荐您参看一下前不久的微软开发者大会上关于 SketchFlow 的讲演： http://microsoftpdc.com/Sessions/CL23 。
4：这个软件是收费的，我参加了微软的一个叫做 Website Spark 的计划， http://www.microsoft.com/WEB/websitespark/ ，可以获得很多软件的License ，按照他的规则，三年后支付100美元即可。
您还用过这方面的什么比较使用的软件？欢迎交流～
Website Spark 计划要付600多？！ 你目前使用情况怎样？
我用的也不多，尝试过Balsamiq Mockups，这个可能是比较早的使用手绘风格的原型设计软件。好像后来出现了很多类似的，还有不少基于浏览器的，比如Mockingbird。
据说Mac上的OmniGraffle非常好，可惜没用过~