新增互動功能

建立互動功能 (使用者與應用程式間的互動) 模型有助於展示使用者可以和應用程式互動的各種方法。Microsoft Expression Blend 提供多種不同的工具來展示原型的互動行為。例如，您可以執行下列任一項動作：

• 使用動畫來模擬互動行為。

• 將導覽新增至原型中的元素。

• 使用範例資料與資料繫結建立資料導向的使用者介面原型。

• 將行為套用至原型中的元素。

如需有關在 SketchFlow 專案中新增互動功能的詳細資訊，請參閱 SketchFlow 快速入門 (英文)。

動畫

在原型中加入連續動畫來展示互動功能，有時候會很有幫助。您可以使用主要畫面格動畫工具 (例如 [物件與時間軸] 面板中的工具)、[狀態] 面板或 [SketchFlow 動畫] 面板來建立簡單的連續動畫。

如需使用狀態的詳細資訊，請參閱本主題稍後的＜視覺狀態＞。

主要畫面格動畫

您可以使用 Expression Blend 中的主要畫面格動畫工具，在 SketchFlow 專案的任何螢幕中建立連續動畫。您可以使用主要畫面格動畫搭配視覺狀態 (例如，在達到某種狀態時觸發動畫)，或分別使用 (例如，當某個動作觸發動畫時)。

如需有關在 Expression Blend 中建立動畫的詳細資訊，請參閱將物件製作成動畫。

您也可以在 Windows Presentation Foundation (WPF) 應用程式中使用移動路徑來建立連續動畫。如需詳細資訊，請參閱建立、修改或刪除移動路徑。

SketchFlow 動畫

主要畫面格動畫可能非常有用，也可能非常複雜，而超出原型專案的範圍。SketchFlow 動畫是腳本樣式的逐步解說，可以在 [SketchFlow 動畫] 面板中快速又輕鬆地建立。如同主要畫面格動畫與狀態，SketchFlow 動畫也有助於展示使用者的互動。

在 SketchFlow 動畫中，您可以將畫面格新增至 [SketchFlow 動畫] 面板，然後在畫板上調整該畫面格的「場景」，以建立一連串的快照。您可輕鬆地調整每個畫面格之間的切換時間與保留時間。您可以在 [SketchFlow 動畫] 面板中按一下 [播放]，直接在文件視窗中播放動畫序列，或是按 F5 建置及執行專案，然後在 SketchFlow 播放程式中播放動畫。

以下是 SketchFlow 動畫的範例。在下列畫面格中，指標會從右下方移至 Halo 2 影像上，再以紅色星號模擬點擊動作。接著 Halo 2 影像會移到左邊，而指標則會移到右邊。

建立此 SketchFlow 動畫

1. 開啟要新增動畫的螢幕。在 [SketchFlow 動畫] 面板中，按一下 [新增 SketchFlow 動畫] 以建立新的 SketchFlow 動畫。新的畫面格會出現在 [SketchFlow 動畫] 面板中。

   注意事項：
   如果看不到 [SketchFlow 動畫] 面板，請按一下 [視窗] 面板中的 [SketchFlow 動畫]。

   在此範例中，基本狀態 (螢幕的一般狀態) 與第一個畫面格相同。

2. 在第一個畫面格中按一下 [新增狀態] 以新增畫面格。

3. 選取您要移動的物件，並將它移到想要顯示物件的位置。在此範例中，指標會從右下方移到 "Halo" 的 "o" 字母上。

   

4. 您可以讓指標停留在畫面格上方直到 [編輯保留時間] 對話方塊出現，以便修改畫面格的停留時間 (目前狀態的顯示時間)。您可以按兩下畫面格內部再輸入新的值，或按一下畫面格之後，再使用向上鍵與向下鍵來增加或減少停留時間。

5. 您可以按一下畫面格之間的 [編輯切換時間] 對話方塊，以便修改畫面格之間的切換時間 (完成從一個畫面格切換至另一個畫面格所需的時間)。您可以按兩下畫面格內部再輸入新的值，或按一下畫面格之後，再使用向上鍵與向下鍵來增加或減少切換時間。

6. 完成 SketchFlow 動畫後，您可以執行下列其中一項動作來預覽動畫：

   • 按一下 SketchFlow 工具列中的 [播放]。

   • 以滑鼠右鍵按一下畫板，再按一下 [播放 SketchFlow 動畫]，然後選取要播放的動畫。

   • 按 F5 建置及執行專案後，在 SketchFlow 播放程式中檢視動畫。

SketchFlow 動畫工具列

您可以使用 [SketchFlow 動畫] 工具列在 [SketchFlow 動畫] 面板中執行下列動作：

	移至第一個畫面格。
	播放動畫。
	鎖定時間編輯器。
	開啟或關閉流動版面配置。 如需詳細資訊，請參閱平順地在版面配置變更之間切換。
	使用雙箭號可從下拉式清單開啟 SketchFlow 動畫。 使用加號圖示可新增腳本。 使用單箭號可建立、刪除或關閉腳本。
	使用捲軸逐一移動動畫畫面格。

視覺狀態

您也可以使用視覺狀態來定義單一螢幕的不同設計方案，以在原型中展示互動功能。在許多不同的案例中，使單一螢幕具有多個狀態可幫助您建立原型，包括下列範例：

• 應用程式中的螢幕可能會依據使用者是否登入而顯示不同的使用者介面 (UI) 元素。您可以使用視覺狀態在原型中針對單一螢幕建立兩種顯示選項：一種用於使用者登入時，另一種則用於使用者未登入時。原型中的指定螢幕可擁有不同的設計方案。您可以分別針對相同螢幕的這些不同設計方案建立狀態。

• 由於狀態可包含動畫，因此您可以針對相同螢幕建立不同的狀態，並加入動畫。接著您便可透過顯示內含動畫的螢幕狀態，觸發狀態中的動畫。

當您在 SketchFlow 播放程式中執行 SketchFlow 專案時，狀態會以個別命令的形式出現在 [導覽] 面板中。在下列影像中，[切換] 是狀態群組，而 [關閉] 與 [開啟] 是針對螢幕定義的兩種不同狀態。

由於您可以使用命令來導覽狀態，因此不需要建立觸發程序就可以切換在畫板上建立的狀態。

如需有關視覺狀態的詳細資訊，請參閱定義控制項的不同視覺狀態。

行為

行為是內建的程式碼片段，您可以快速且輕鬆地套用在元素上以建立互動功能。行為可以是在事件發生時 (例如，按一下按鈕或開始播放動畫) 觸發的簡單動作，或包含由多個動作觸發的多個事件。

行為是用於建置原型的強大工具。例如，您可以將控制項新增至螢幕，然後再將行為套用至該控制項。接著您可建置及執行專案 (F5)，而已新增行為的控制項在螢幕中的行為將與在最終應用程式中的行為相同。

內建的 SketchFlow 行為包括 [向後] 與 [向前] 導覽，以及可在 SketchFlow 中套用至控制項的 [導覽至] 行為。

如需詳細資訊，請參閱新增行為至物件。

導覽與狀態變更

在 SketchFlow 播放程式中檢視原型時，您可以使用 [導覽] 面板來導覽螢幕與觸發程序狀態變更。此功能代表您可以導覽整個原型而不用新增任何其他的程式碼或 UI 元素，即使原型中只包含幾個概念草圖。

您也可以快速且輕鬆地將 SketchFlow 行為新增至在畫板上繪製的 UI 元素，這可讓您導覽螢幕或播放已新增至原型的動畫。

將播放 SketchFlow 動畫行為新增至控制項

• 以滑鼠右鍵按一下要新增 [播放 SketchFlow 動畫] 行為的控制項，接著按一下 [播放 SketchFlow 動畫]，然後再按一下要在點擊控制項時播放的動畫。

範例資料

許多應用程式都需要依賴資料庫才能產生資訊。若沒有可用來建立原型的實際資料，建立資料導向行為的模型會是個難題。您現在可以使用 Expression Blend 建立範例資料來源，然後再將該資料繫結至控制項。您可以在原型中使用範例資料來建立資料導向使用者介面的模型，而這種使用者介面可模擬實際資料導向使用者案例的動態性質。

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