SketchFlow 概觀

重要訊息：
只有 Expression Studio Ultimate 才提供 SketchFlow。

SketchFlow 是一套特別設計的功能，目的是為了簡化及加速針對互動應用程式和互動內容，建立、傳遞與檢閱原型的工作。

SketchFlow 原型是真正的 Windows Presentation Foundation (WPF) 或 Microsoft Silverlight 應用程式。就算只有原型的初稿草圖，您還是可以建置並執行原型專案，然後再瀏覽整個原型。

SketchFlow 原型可以簡單，也可以複雜，端視您所處理的專案而定。例如，原型可能是一張內含備註的概念草圖；可能是附上幾項備註的一系列線性順序投影片，用來展示利用畫板繪製的工作流程；也有可能是一張在 [SketchFlow 地圖] 面板中勾勒的複雜圖形，包括單一螢幕 (元件螢幕) 上可重複使用的元素，以及各螢幕之間的導覽關係 (導覽連線)。

SketchFlow 包含幾種讓原型產生互動功能的工具，以便更精確模擬實際執行的應用程式流程。例如，您可以透過 SketchFlow 進行下列工作：

• 一開始只用大綱架構和記在應用程式螢幕上的幾點備註建立原型，然後再繼續調整您的原型。

• 繪製使用者介面 (UI) 元素，或是從一般繪圖程式匯入元素。

• 在原型中加上動畫，以視覺效果呈現使用者與應用程式之間的互動狀況。

• 使用完整的標準 UI 元素庫和自訂控制項庫。

• 即時製作範例資料、輕鬆建置資料導向 UI，並新增樣式至資料。

• 使用內建行為建立互動功能，而不需撰寫程式碼。行為具有可延伸特性，使您能夠輕鬆地在原型設計工具箱中加入自訂行為。

• 撰寫程式碼以建立自訂元素，或使用研發團隊預先建立的元素。

畫板

SketchFlow 提供兩種設計檢視：畫板和 [SketchFlow 地圖] 面板。畫板顯示個別的螢幕檢視，您可使用 Expression Blend 中的任何一種繪圖工具在這些螢幕上繪圖、從 Adobe Photoshop 匯入影像，並使用 Expression Blend 針對 WPF 和 Silverlight 提供的所有控制項。您也可以使用狀態來顯示特定元素的不同狀態，或利用動畫在螢幕上呈現各元素的互動狀況。

如需詳細資訊，請參閱在畫板上建立內容。

SketchFlow 地圖面板

您可透過 [SketchFlow 地圖] 面板輕鬆草擬出原型的結構；使用 SketchFlow 時，此面板會出現在 Expression Blend 應用程式底部。在您處理其他類型的 Expression Blend 專案時，這個面板並不會出現。

[SketchFlow 地圖] 面板透過視覺效果呈現應用程式流程，從第一個螢幕開始，隨著使用者互動到完成最後一個動作為止。

如需詳細資訊，請參閱建立應用程式流程。

螢幕

原型中的每個螢幕都是以 [SketchFlow 地圖] 面板中的一個節點來代表。建立新的元件螢幕或導覽螢幕既不費時也不費力。您可使用獨立節點代表個別螢幕，並建立連線來代表個別螢幕之間的關聯。

SketchFlow 有兩種螢幕，一種是標準螢幕 (也稱為導覽螢幕)，另一種是元件螢幕。標準螢幕代表您可以瀏覽的位置。元件螢幕則是可以在多個導覽螢幕重複使用的內容或功能區塊 (例如功能表或播放清單)。您可直接在 [SketchFlow 地圖] 面板中建立元件螢幕，或是將螢幕上的內容變成元件。

換句話說，您可透過在 [SketchFlow 地圖] 面板中直接建立新的元件螢幕、元件連線、導覽螢幕和導覽連線，直接在 [SketchFlow 地圖] 面板定義應用程式的導覽和組合。

導覽連線

導覽連線代表螢幕之間的導覽關係。兩個螢幕間的導覽連線意指應用程式使用者能夠透過連線指示的導覽關係，從其中一個螢幕導覽到另一個。

透過導覽連線，您可直接在 [SketchFlow 地圖] 面板中，快速建立應用程式流程的高層次檢視。

如需詳細資訊，請參閱建立應用程式流程。

元件連線

如同導覽連線一樣，元件連線也可直接在 [SketchFlow 地圖] 面板中建立。導覽連線代表應用程式各處的導覽，而元件連線則是指元件會顯示在其連接的導覽螢幕上。例如，如果您的設計包含重要的頁面元素，例如頁首、頁尾和導覽列，您可以直接在畫板繪製這些元素，或是建立三個不同的元件節點，分別代表這三個重要的元素，然後在整個專案中重複使用這些節點。

如需詳細資訊，請參閱建立應用程式流程。

SketchFlow 動畫

您可以使用 [SketchFlow 動畫] 面板，輕鬆建立呈現螢幕互動元素的動畫。SketchFlow 動畫可讓您快速又輕鬆地製作動畫簡單的翻頁式動畫，而不需要知道如何使用 Expression Blend 提供的主要畫面格動畫工具。

如需詳細資訊，請參閱新增互動功能。

範例資料

Expression Blend 可讓您輕鬆設計資料導向的使用者介面原型，而不需要存取即時的資料。您可以使用 [資料] 面板產生有意義的範例資料，或是從 XML 檔案匯入範例資料。在設計階段中，範例資料可供畫板上的控制項使用。您可大幅自訂範例資料細節，而且可以在執行階段輕易切換使用範例資料以及使用即時資料。

如需詳細資訊，請參閱建立範例資料。

SketchFlow 樣式

在建立原型時，您可能希望創造手繪風格的外觀。SketchFlow 隨附一組適用於 WPF 和 Silverlight 標準控制項的面板，可賦與應用程式如手繪般的外觀。您可以使用基本圖案，針對您可能擁有的任何自訂控制項，建立個人專屬的素描風格範本。透過在原型中使用 SketchFlow 樣式，您可以突顯應用程式流程的重要性高於精美的外觀，讓檢閱者能夠專注在應用程式的互動設計上，而非圖形設計。這種作法可避免設計階段初期由於原型過於美觀，而可能產生不當預期以及造成誤導的意見反應。

SketchFlow 播放程式

SketchFlow 播放程式是一種執行階段環境，它會按照原有的設計播放應用程式流程，因此您可以隨時建置、執行，然後在 SketchFlow 播放程式中檢視您的專案。

SketchFlow 透過在獨立播放程式中執行原型來實現這項功能，而這個播放程式能夠讓您點選原型、變更 UI 內的狀態，以及執行動畫。SketchFlow 播放程式也可輕易將原型分送給檢閱者並收集意見反應。您可以直接在原型中繪圖並加上註解。透過 SketchFlow 播放程式收集的意見反應可以在 Expression Blend 中檢視，並由設計人員進行評估及採用。

如需詳細資訊，請參閱預覽原型。

註解與意見反應

註解是 Expression Blend 中的功能，這項功能也可以在 SketchFlow 專案中使用。透過使用註解功能，您可以留言給自己和其他人，或是在使用 [設計] 檢視的同時追蹤其他小組成員提出的意見反應。您可以隱藏註解，以方便檢視目前的專案，等到想檢閱時再將它們設為顯示。

檢閱者也可以使用 [意見反應] 面板在 SketchFlow 播放程式留下意見。意見反應可以儲存成 .feedback 檔案，隨後再以個別檔案的形式傳送給設計人員。

如需有關註解的詳細資訊，請參閱註解文件。

如需有關意見反應的詳細資訊，請參閱留下原型的意見反應。

發佈到 SharePoint

建立 Expression Blend SketchFlow 專案之後，您可以將專案發佈到 Microsoft SharePoint 文件庫。任何人只要具有在 SharePoint 網站上檢視內容的權限，就可以使用此 SketchFlow 專案。

檢閱者可以將他們的意見反應發佈到 SharePoint 網站，以便和其他專案關係人分享。

如需有關發佈到 SharePoint 的詳細資訊，請參閱發佈到 SharePoint。

轉換原型

您可以從 Microsoft Office PowerPoint 簡報建立 SketchFlow 原型。您也可以將 Adobe Photoshop (.psd) 和 Adobe Illustrator (.ai) 影像匯入 SketchFlow 原型中。不論何時，您都可以直接從原型建立 Microsoft Word 文件。

SketchFlow 專案是標準的 Microsoft Visual Studio 方案，因此可以在 Visual Studio 中進行編輯。一旦原型經過核准，即可從原型檔案中移除 SketchFlow 資料，將原型專案轉換成實際執行的專案。移除 SketchFlow 資料之後，專案的運作方式便與其他 Expression Blend 專案相同。

如需詳細資訊，請參閱轉換原型。

總結

總而言之，SketchFlow 簡化了草擬概念性應用程式的程序。一開始，您只要建立一系列的螢幕，然後開始繪圖。隨著您的構思逐漸成形，您可以加入互動元素，讓原型更加接近所需的成品，以傳遞您想表達的設計概念。檢閱者可以使用 SketchFlow 播放程式來檢視應用程式流程，然後直接在專案中留下意見反應。在納入意見反應並完成原型之後，原型專案便可交給開發人員，供其轉換成最終的 Expression Blend 專案。

Copyright © 2011 by Microsoft Corporation. All rights reserved.