共用方式為


關於 Expression Blend

Microsoft Expression Blend 是一套視覺化的工具,可用來設計桌面應用程式和 Web 應用程式,以及製作這些應用程式的原型。建置應用程式的程序包括繪製圖形、繪製控制項 (例如按鈕和清單方塊)、讓應用程式片段回應滑鼠點選動作和其他使用者輸入,以及設計每個部分的樣式使其富有個人專屬的獨特風格。

important note重要訊息:

只有 Expression Studio Ultimate 才提供 SketchFlow。

BeeHive 範例,顯示回應其他物件衝突的物件繪圖

Cc296376.6232ba4d-5aa0-4185-b1cf-fe9fbfe3ed8e(zh-tw,Expression.40).png

您也可以插入 SDK 程式庫或協力廠商提供的影像、音訊和視訊剪輯。您在 Expression Blend 的設計介面看到的內容就是使用者執行您的應用程式時所看到的內容。

Zune3D 範例,顯示在 3D 投影轉換中旋轉的影像和物件。

Cc296376.37f9786c-c8bc-43c3-8789-2e5654c6ae90(zh-tw,Expression.40).png

SketchFlow 是只能在 Expression Studio Ultimate 中找到的一組功能集,透過這組功能集建立的原型是具有運作功能的應用程式,而不是必須逐一點選才能瞭解最終應用程式概況的一連串靜態影像。

PCGaming 範例的開發,顯示文件的進展

Cc296376.7dc469b2-4ab8-4d56-96a6-f30c33370916(zh-tw,Expression.40).png

透過下載 Windows Phone Developer Tools Cc296376.xtlink_newWindow(zh-tw,Expression.40).png 時取得的 Expression Blend for Windows Phone,您可以迅速輕鬆地建置適用於 Windows Phone 的 Silverlight 應用程式。您可以使用 Expression Blend 中的設計工具建立 Windows Phone 應用程式,包括 Windows Phone 範本、圖形和動畫工具、內建行為以及範例資料。建立 Windows Phone 應用程式之後,您可以建置它並在內建的 Windows Phone Emulator 或連接到電腦的 Windows Phone 裝置中預覽。

Expression Blend for Windows Phone

雖然您在 Expression Blend 中處理的是實際的可用應用程式片段,但仍然可以像使用其他繪圖軟體一樣,輕鬆地繪製及設定各部分的樣式。當您想要繪製代表互動控制項的物件時,可以實際選取並繪製功能控制項 (例如按鈕或清單方塊),然後再設定樣式。

ColorSwatchSL 範例,顯示對 ListBox 控制項套用兩個自訂樣式 (先套用 ItemContainerStyle,再套用 ItemsPanel) 以呈現圓形中的扇形排列項目

Cc296376.16d8c960-f49f-46fd-9993-a0d06b4e268a(zh-tw,Expression.40).png

提供應用程式功能的幕後功臣是兩種強大的技術:Microsoft Silverlight 和 Windows Presentation Foundation (WPF)。您可以使用 Expression Blend,建立以 Silverlight 為基礎的網站和應用程式,以及以 WPF 為基礎的桌面應用程式。

tip note秘訣:

開啟 Expression Blend 隨附範例的方法是從 [說明] 功能表按一下 [歡迎畫面],再按 [範例] 索引標籤,然後按一下清單中的範例名稱。若要建置及執行範例,請按 F5。

Expression Blend 如何運作?

在 Expression Blend 中,您可以透過視覺化方式設計應用程式、在畫板上繪製圖形、路徑和控制項,然後修改其外觀與行為。您可以匯入影像、視訊與聲音。您也可以在 Windows 應用程式中匯入 3D 物件,並加以變更。

您可以建立腳本,用來以動畫顯示設計的視覺或音訊元素,並選擇性地在使用者與應用程式互動時觸發這些腳本。當您處理 Windows 或 Silverlight 的應用程式時,您可以重新設計套用至基本控制項的範本,而讓應用程式的外觀與行為更為獨特。

當您處理應用程式時,可以隨時使用程式設計人員所撰寫的程式碼後置檔案或自訂控制項檔案,對您的專案進行更新。若使用 Expression Blend,設計人員和程式設計人員可以在互不干擾的情況下同時處理同一個專案。

還有哪些應用程式可與 Expression Blend 搭配使用?

您可以將 Microsoft Expression Design 所產生的圖形和可延伸應用程式標記語言 (XAML) 資源匯入您的 Expression Blend 專案中。您也可以匯入 Microsoft Expression Encoder 中所建立的 Silverlight 媒體專案,將新功能或視覺化元素新增至專案中,或修改可在 Expression Encoder 中重複使用的媒體播放範本。

在 Microsoft Expression Web 中,您可以匯入 Silverlight 網站和編譯的 Silverlight 應用程式檔案至現有或新的專案中,然後發佈您的作品。

Microsoft Visual Studio 2010 與 Expression Blend 緊密搭配運作,當您同時在 Visual Studio 2010 和 Expression Blend 中修改檔案時,仍可保持同步。在 Expression Blend 中,您可使用 Visual Studio 2010 開啟個別的程式碼後置檔案或整個專案。您也可以使用 Visual Studio 2010 的部署工具,部署您的應用程式。

Expression Blend 會產生哪些項目?

Expression Blend 會產生 Windows Presentation Foundation (WPF) 應用程式、Silverlight 網站 (.xap 與支援檔案) 和 Silverlight 使用者控制項。您的視覺化設計會以 XAML 呈現。正如 HTML 是 Web 應用程式的標記語言,XAML 則是 WPF 的標記語言。

如需有關 XAML 與 WPF 的詳細資訊,請參閱 使用 XAML學習和社群資源

Expression Blend 附有哪些功能?

Expression Blend 包含下列項目:

  • Expression Studio Ultimate 中包含 SketchFlow 功能集,可用來建立真正的 WPF 或 Silverlight 應用程式原型。

  • Expression Blend for Windows Phone,可在下載 Windows Phone Developer Tools Cc296376.xtlink_newWindow(zh-tw,Expression.40).png 時取得。

  • 完整的向量繪圖工具套件,包括文字和 3D 工具。

  • 易於使用且現代化的視覺介面,具有可固定的面板與根據物件顯示的快顯功能表。

  • 即時動畫。

  • 可提升使用者經驗的 3D 與媒體支援。

  • 可提升使用者經驗的效果與切換支援。

  • ViewsViewModels 的專案範本。

  • 各式通用控制項,具有進階、靈活及可重複使用的自訂和外觀元素設定選項。

  • 資料來源和外部資源的強大整合功能。

  • 即時的設計和標記檢視。

  • 從 Expression Design 匯入作品的功能。

  • 從 Expression Encoder 匯入網站的功能。

  • 與 Visual Studio 2010 的互通性有助於設計人員與開發人員密切合作,並提高相互間的團隊效率。

如需 Expression Blend 提供之功能的詳細資訊,請參閱Expression Blend 的新功能

目標應用程式類型

Expression Blend 適合用於建立下列類型的應用程式:

  • 產能應用程式    為更廣泛的客戶群提升產能和效率的應用程式,以及商務應用程式,如 Microsoft Office。

  • Windows Phone 應用程式    設計在 Windows Phone 上執行的應用程式。

  • 消費者應用程式    媒體播放程式、安全性工具及桌面小工具等應用程式。

  • 遊戲    娛樂用途的簡單桌面或線上遊戲。

  • 資訊站    在資訊站上執行的應用程式,可供使用者操作以取得資訊、檢視產品目錄、在機場辦理報到手續等。

  • IT 專業公用程式    用來處理小件工作的工具,例如針對特定公司或客戶需求特別設計的錯誤追蹤工具。

最佳作法

某些設計之所以優異,是因為這些設計可以增進可用性。以下是使用 Expression Blend 與 Microsoft .NET Framework 改善可用性的一些常見作法:

  • 模擬真實世界    您可以使用自訂的視覺效果和互動功能,讓特定控制項在外觀和行為上如同真實世界裡的對應物一樣。這項技巧最適合在使用者熟悉真實世界物品的情況下使用,而模擬真實世界正是執行工作最佳、最有效率的作法。例如,像小算盤這類簡易公用程式如此好用,就是因為它和真實世界裡的對應物一模一樣。

  • 以畫面取代文字    您可以使用動畫和切換效果表達關係、原因及結果。這項技巧最適合用於提供需要文字來說明使用者可能會忽略的資訊。例如,給幼兒看的書籍可以利用翻頁動畫展示控制項的作用。

  • 改善功能可見性    「功能可見性 (Affordance)」是物件的屬性之一,可建議物件使用方式 (而非使用標籤加以說明)。 ** 您可以使用自訂控制項視覺效果和動畫來表示非標準控制項的使用方式。

  • 使用自然對應    自然對應是指使用者心中想要做什麼與如何做之間,顯而易見的一種關係。當標準通用控制項無法建立如此的關係時,即可使用自訂外觀和互動功能建立自然對應。

  • 降低必要知識程度    您可以使用自訂互動功能,對某項操作可能的執行方式數量及執行工作所需的知識加以限制。

  • 改善系統回應    您可以使用自訂控制項視覺效果和動畫呈現系統回應,指出使用者操作是否正確,或顯示執行進度。例如,在 Windows Vista 和 Windows 7 中,Internet Explorer 的 [網址列] 會顯示幕後載入網頁的進度。

  • 簡化物件互動功能    一項名為費茲定律 (Fitts' law) 人體運動模型指出,點按目標所需花費的精力與距離成正比,與大小成反比。例如,您可以利用動畫,在指標接近物件時放大物件,並在指標遠離物件時縮小物件。這樣使用者就更容易按到物件。採用此方式時通常可讓物件變得較小,因此能更有效率地利用螢幕空間。

  • 焦點    您可以使用豐富的版面配置和自訂視覺效果,強調畫面上對工作而言不可或缺的元素,而較不強調次要元素。

Note注意:

在以 Windows 為平台進行設計時,不論應用程式實作方式為何,請盡量遵守 Windows User Experience Interaction Guidelines (Windows 使用者經驗互動指導方針) Cc296376.xtlink_newWindow(zh-tw,Expression.40).png,為所有 Windows 應用程式建立一套高品質且一致的基準。

另請參閱

概念

Expression Blend 的新功能
學習和社群資源

Copyright © 2011 by Microsoft Corporation. All rights reserved.