SketchFlow原型系統(tǒng)

原型系統(tǒng)是非常重要而有效的一個(gè)手段，那么有什么好的方法來實(shí)現(xiàn)“原型”呢？

當(dāng)然，最基本的方法就是手工繪制一些圖紙了，此外，比如Fireworks軟件中，提供了一些更為方便的進(jìn)行原型設(shè)計(jì)的功能，但是這些方法和軟件還是停留在“靜態(tài)”展示的層面，本質(zhì)上和手工繪制一些圖給客戶，進(jìn)行紙上談兵是一樣的。

由于網(wǎng)站的交互功能越來越強(qiáng)，一些基于Web的信息管理系統(tǒng)，操作起來就跟們更為復(fù)雜，比如各個(gè)頁面之間的跳轉(zhuǎn)，如果使用了Ajax等技術(shù)，頁面還會(huì)局部刷新，如果都要用靜態(tài)的圖像來表達(dá)，實(shí)際上是非常困難的。因此，如果我們可以方便地制作出，可以模擬最終的動(dòng)態(tài)效果的原型，那么就好多了！正是基于這個(gè)原因，近年來出現(xiàn)了一些具有模擬效果的原型設(shè)計(jì)軟件 ，而其中微軟公司的SketchFlow，是一款非常棒的軟件！實(shí)際上這不是一個(gè)獨(dú)立的軟件，而是附屬于 Expression Blend 的一部分。而 Expression Blend則是微軟的Expression Studio 套件中的一個(gè)。如果再往下說，就要到大名鼎鼎的 Silverlight （微軟指望靠它和Flash大干一場呢）上了—— Expression Blend 正是用來設(shè)計(jì)和開發(fā) Silverlight應(yīng)用的軟件，因此對(duì)于微軟來說，這可是一個(gè)重頭戲。

在 Expression Blend 3 中，包括了一個(gè)部分叫做“SkechFlow”，這個(gè)軟件的全稱叫做“Microsoft Expression 3 SketchFlow”。

Sketch 就是草圖的意思，F(xiàn)low就是流程的意思，因此合在一起，就是“流程草圖”的意思。那么它具有什么用呢？

首先，這個(gè)Blend這個(gè)軟件本身就是可以繪制矢量圖形和動(dòng)畫的，因此用它來繪制頁面的草圖是很方便的，比如我們要做一個(gè)網(wǎng)站，首先是一個(gè)登錄頁面，然后進(jìn)入到一個(gè)內(nèi)容頁，我們就可以非常方便地繪制出如下的圖形，注意這種風(fēng)格是專門為此設(shè)計(jì)的草圖風(fēng)格，看起來就像是手繪的風(fēng)格，主要的目的就是給用戶展現(xiàn)的是頁面的核心概念和功能，而不會(huì)是非常細(xì)節(jié)的樣式。這種風(fēng)格，看起來十分舒服。

當(dāng)然，如果只是把圖像繪制的看起來手繪風(fēng)格，那么也就沒有太的改進(jìn)了，更更為重要的是，使用SketchFlow制作的網(wǎng)站原型，可以精確地模擬實(shí)際操作過程，比如上面圖中，登錄框中的用戶名輸入框、密碼輸入框、滑動(dòng)條、選擇框、按鈕都是可以實(shí)際操作的，而且通過簡單控制，就可以非常方便地使他實(shí)際工作起來。在比如，上面的右圖中，“作者介紹”和“讀者評(píng)價(jià)”部分，各有一個(gè)滾動(dòng)條，而這些滾動(dòng)條都是有實(shí)際作用的，因此使用這種方式制作出來的原型，可以使客戶非常直觀而精確地了解最終這個(gè)網(wǎng)站完成以后，會(huì)是什么樣子的，這樣如果他又不滿意的地方，在一開始就可以明確地指出來，這樣對(duì)于我們開發(fā)成本的控制就大有好處了。

此外，軟件中給出了方便的導(dǎo)航圖，以顯示各個(gè)頁面之間的導(dǎo)航關(guān)系，也非常清晰實(shí)用。也非常清晰實(shí)用，如圖1所示。此外，SketchFlow還可以自動(dòng)生成Word格式文檔，包括目錄、文字、導(dǎo)航圖、各個(gè)頁面都準(zhǔn)備好了，這樣稍作修改后，提供給客戶交流，就非常方便，也非常專業(yè)了。

當(dāng)然，這個(gè)軟件的功能還遠(yuǎn)遠(yuǎn)不止于添加幾個(gè)導(dǎo)航鏈接的功能，因?yàn)樗旧碛肅#或者VB就可以進(jìn)行深入而靈活的控制了?？傊?，使用 SketchFlow 可以比較方便地制作出高度模擬實(shí)際效果的原型系統(tǒng)，給我們帶來很大的益處。2100433B