SketchFlow:第一款真正意義上的原型設(shè)計(jì)工具
譯文【51CTO精選譯文】上周五微軟發(fā)布了最新的Microsoft Expression Blend 3 + SketchFlow RC（60天試用版下載，與Silverlight 3的正式版同一天發(fā)布）。本文將會(huì)SketchFlow的新方向進(jìn)行簡要介紹。SketchFlow是新加入Expression Blend的一個(gè)插件，主要用于程序的原型設(shè)計(jì)。在此以前，我們?cè)O(shè)計(jì)程序的原型時(shí)有兩個(gè)主要問題讓人頭痛：一是創(chuàng)建能引起人們興趣的原型非常耗時(shí)，二是不能準(zhǔn)確地溝通設(shè)計(jì)思想，讓人信服很難。由于在原型設(shè)計(jì)的初期，很多僅僅是一個(gè)初步的想法，具有不確定性，就不能向正式設(shè)計(jì)軟件那樣弄得有模有樣，只需要準(zhǔn)確地將設(shè)計(jì)人員所想表達(dá)出來即可。SketchFlow是第一款真正意義上的原型設(shè)計(jì)工具。一起來領(lǐng)略一下它的強(qiáng)大功能吧。
51CTO編輯推薦：走向銀光 —— 一步一步學(xué)Silverlight
SketchFlow映射
在SketchFlow中，你可以使用SketchFlow映射展示建模流程，導(dǎo)航和應(yīng)用程序結(jié)構(gòu)。SketchFlow原型是由一組屏幕組成的，你可以講屏幕想象為窗口或?qū)υ捒颍谠驮O(shè)計(jì)的早期，我更愿意將其看做一塊白板，我可以在上面天馬行空地繪制草圖，隨著原型的不斷優(yōu)化和改進(jìn)，漸漸在腦海中勾勒出了真正的UI模樣，然后使用真正的UI替代草圖，在SketchFlow映射中，一個(gè)屏幕表示一個(gè)有顏色的方框。
圖 1 SketchFlow映射中的屏幕
在映射中的屏幕可以相互連接，原型在運(yùn)行時(shí)可以由一個(gè)屏幕導(dǎo)航到另一個(gè)屏幕，看起來和PowerPoint中幻燈片播放差不多，但映射并不是一個(gè)單一的列表，它可以將幻燈片連接到任何你喜歡的圖片，一個(gè)屏幕可以導(dǎo)航到多個(gè)其它屏幕，也可以從其它屏幕導(dǎo)航回來，導(dǎo)航是用光滑的彩色箭頭從一個(gè)屏幕連接到另一個(gè)屏幕的。
圖 2 SketchFlow映射中的導(dǎo)航連接
SketchFlow映射中總有一個(gè)開始屏幕，當(dāng)你開始運(yùn)行原型時(shí)第一個(gè)顯示的就是這個(gè)屏幕，你可以使用任何屏幕作為開始屏幕。
圖 3 SketchFlow映射中開始屏幕
許多時(shí)候，當(dāng)你構(gòu)思UI時(shí)往往想到的是組件，例如，當(dāng)你構(gòu)思一個(gè)購物頁面時(shí)，你想到的會(huì)是目錄區(qū)域、購物車和菜單，在你的原型中以思維導(dǎo)圖的方式顯示這些應(yīng)用組件是非常有用的。這里要用到的就是SketchFlow的組件屏幕，組件屏幕和其它屏幕類似，但它不能導(dǎo)航，相反，它們可以插入到一般的屏幕中，插入方式和在頁面中插入菜單一樣，或者說象在建筑設(shè)計(jì)軟件中在廚房地板規(guī)劃時(shí)插入一個(gè)表符號(hào)一樣，在多個(gè)屏幕上可以使用相同的組件，組件屏幕在SketchFlow映射中顯示為油罐模樣。
圖 4 SketchFlow映射中的組件
組件和使用它的屏幕之間使用虛線箭頭連接?？梢詫?dǎo)入PowerPoint幻燈片創(chuàng)建一系列屏幕，但目前導(dǎo)入的每張幻燈片只能是一張圖片。
SketchFlow風(fēng)格
因?yàn)镾ketchFlow是放在Blend中的，因此可以使用內(nèi)置的WPF或Silverlight UI控件或布局面板，而且還有大量的第三方控件可以使用。
標(biāo)準(zhǔn)控件用于準(zhǔn)開發(fā)上非常好，但用于原型設(shè)計(jì)就有點(diǎn)不恰當(dāng)了，因?yàn)樵椭饕潜磉_(dá)結(jié)構(gòu)和概念，為此SketchFlow專門引入一套風(fēng)格，讓標(biāo)準(zhǔn)控件看起來和原型一致，彎曲的線條，潦草的字體，但控件的作用是一致的，只是外觀上看起來有點(diǎn)不同而已，控件模板允許我們快速更換其皮膚。
圖 5 草圖風(fēng)格和標(biāo)準(zhǔn)風(fēng)格的控件外觀
播放器
只要原型中有SketchFlow映射，不管映射中是否有屏幕，這時(shí)原型都是可以運(yùn)行的。SketchFlow播放器是用于執(zhí)行原型的程序，在播放原型時(shí)就可以進(jìn)行人機(jī)交互了，如果你的原型是WPF，那么播放器就是一個(gè)應(yīng)用程序，如果你的原型是Silverlight，那么播放器就運(yùn)行在瀏覽器中。
無論哪種方式，播放器都是原型的一部分，你可以同時(shí)分發(fā)它們。SketchFlow播放器有兩個(gè)重要的功能：探索和反饋。這樣可以多人同時(shí)對(duì)原型交流自己的意見，并進(jìn)行標(biāo)記，也可以提交反饋，并可以導(dǎo)出這些內(nèi)容。
圖 6 在播放器中進(jìn)行直觀的交流，表達(dá)自己的意見
在上面這個(gè)圖中紅色和綠色的標(biāo)記就是在播放器中增加的反饋，當(dāng)然也可以在左邊輸入文本注釋。
設(shè)計(jì)文檔
幾乎所有設(shè)計(jì)項(xiàng)目都需要設(shè)計(jì)文檔，SketchFlow可以將原型導(dǎo)出為Word文檔，文檔包含了映射的屏幕截圖，也包含了組件和組件屏幕，還有一個(gè)內(nèi)容表和圖片表，這可以省去不少工作時(shí)間，因?yàn)樵跍?zhǔn)備項(xiàng)目報(bào)告時(shí)就需要這些資料。SketchFlow使用你計(jì)算機(jī)上的默認(rèn)Word模板，你可以進(jìn)行模板定制。
動(dòng)畫制作
在原型設(shè)計(jì)早期，我們希望能夠快速簡單地溝通設(shè)計(jì)理念，動(dòng)畫就是進(jìn)行快速溝通的有效方式，SketchFlow提供了一整套動(dòng)畫制作工具，你可以為一個(gè)屏幕創(chuàng)建許多動(dòng)畫，也可以在播放器中顯示動(dòng)畫，因此在展示原型時(shí)又多了一個(gè)有力的表現(xiàn)方法。
SketchFlow提供動(dòng)畫是基于幀的，但它與一般的關(guān)鍵幀方式有點(diǎn)不一樣，SketchFlow提供了一個(gè)特殊的動(dòng)畫方法“SketchFlow動(dòng)畫”，它以動(dòng)畫的形式一步一步顯示這些UI是什么，它和粘土動(dòng)畫有點(diǎn)類似，首先增加一個(gè)故事板幀，然后按你喜歡的方式布局屏幕，再反復(fù)重復(fù)這個(gè)過程。
對(duì)每個(gè)故事板幀，你可以設(shè)置一個(gè)停留時(shí)間（幀的顯示時(shí)間）和過渡時(shí)間（從上一幀到本幀的過渡時(shí)間）。
圖 7 SketchFlow動(dòng)畫
狀態(tài)
如果你以前曾經(jīng)用過Blend，那你一定了解SketchFlow中狀態(tài)的概念，狀態(tài)是從Blend 2 SP1才引入的概念，狀態(tài)在所有UI上都非常流行，如按鈕在按下、經(jīng)過和禁用時(shí)都可以有不同的視覺狀態(tài)，一個(gè)Web頁面可以根據(jù)用戶的登錄和注銷狀態(tài)來顯示不同的顏色，屏幕上的組件也可以放大縮小等等。
原則上我們可以在原型中通過使用不同的屏幕構(gòu)建不同的狀態(tài)，例如我們有一個(gè)屏幕顯示網(wǎng)站的正常狀態(tài)，還有一個(gè)屏幕顯示用戶登錄后的狀態(tài)。
實(shí)際上視覺狀態(tài)就是屏幕的快照，當(dāng)你在視覺狀態(tài)之間切換時(shí)，實(shí)際上是從一個(gè)快照切換到另一個(gè)快照，狀態(tài)很容易創(chuàng)建，只需添加一個(gè)，然后按你的意愿規(guī)劃屏幕的內(nèi)容即可。
狀態(tài)也可以使用組進(jìn)行管理，這樣你就可以在一個(gè)屏幕上重疊多個(gè)狀態(tài)。狀態(tài)也可以包括動(dòng)畫，狀態(tài)之間可以實(shí)現(xiàn)平滑的過渡，下面的截圖顯示了預(yù)置的過渡功能。
圖 8 預(yù)置的過渡功能
線路導(dǎo)航和狀態(tài)改變
使用播放器探索原型真的非常有用，但在某些時(shí)候需要在屏幕的真實(shí)UI控件上實(shí)現(xiàn)線路導(dǎo)航和狀態(tài)改變，在SketchFlow中，你可以不用編碼就可以與線路導(dǎo)航，狀態(tài)改變和其它行為進(jìn)行交互，因?yàn)閷?dǎo)航和狀態(tài)改變?cè)谠烷_發(fā)中是公用的，SketchFlow引入的捷徑UI也就是為了這個(gè)目的。
Blend 3特性簡介
Adobe Photoshop和Illustrator導(dǎo)入：能夠一層不變地導(dǎo)入，保持文件的圖層、矢量數(shù)據(jù)和文本信息，同時(shí)還可以轉(zhuǎn)換PSD文件；
數(shù)據(jù)綁定：建立工作數(shù)據(jù)綁定列表和主從細(xì)信息視圖；
行為：行為和數(shù)據(jù)一起可以創(chuàng)建更深層次的交互，以前是需要手工編碼才能實(shí)現(xiàn)的；
工作區(qū)：可以在Blend中創(chuàng)建并保存自己的工作區(qū)，在不同原型設(shè)計(jì)階段可以定義不同的工作區(qū)。
更多SketchFlow的功能介紹可參考Expression Blend 3新工具：用SketchFlow來設(shè)計(jì)原型一文。
原文：SketchFlow Concepts: An Overview
作者：electric beach網(wǎng)站
【編輯推薦】
