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