最近接觸了Expression Blend 4，一個關(guān)于交互設(shè)計的軟件（免費的），從功能上看，Expression Blend 4相當于Flash+Dreamweaver，但是比這兩個軟件更適合設(shè)計師。

Expression Blend 4簡介

Expression Blend 4更加適合設(shè)計師自己來完成自己的設(shè)計，把自己的設(shè)計真正的實現(xiàn)到產(chǎn)品中去，可以避免很多開發(fā)人員與設(shè)計師之間的爭執(zhí)，而讓設(shè)計師可以自己完成從設(shè)計到前端和交互的實現(xiàn)，從某種意義上說，也是把開發(fā)人員的精力更多的解放到功能的實現(xiàn)中去。

在安裝Expression Blend 4之后（如果需要做Windows Phone 7的設(shè)計，則還要安裝Windows Phone Developer Tools），打開，首先進入的是歡迎頁面：

在這個頁面中，Project是一個新的概念，Project相當于整個開發(fā)所需的所有的文件總和，包括代碼，頁面，交互，圖片……，而創(chuàng)建一個新的Project，也就相當于在電腦里創(chuàng)建了一個新的文件夾，而與此Project相關(guān)的所有文件，都包含于這個文件夾內(nèi)。

本頁面中還包括Help和Samples，Help是軟件的幫助文檔，Samples是一部分系統(tǒng)自帶的范例。

新建一個Project，進入下一頁：

這個頁面中，可以選擇創(chuàng)建Project的類型，同時命名，存儲路徑以及開發(fā)語言都是在這頁可以決定的。包括Silverlight，WPF以及Windows Phone（必須安裝Windows Phone Developer Tools），在Silverlight和WPF文件中，可以創(chuàng)建SketchFlow的Project，這個類型，類似于草圖模型，這個類型可以用來快速創(chuàng)建一個項目的模型（可以含有一部分交互），來展示，并且得到UX方面的反饋意見。而真正對于開發(fā)者有幫助的，一般都是其他類型的文件。

創(chuàng)建一個新的Project以后，可以開始介紹相關(guān)的功能了。

首先看工具欄：

熟悉PS，AI的同學想必不會很陌生，工具欄依次為：選取，路徑選取，移動，縮放，攝像機位置（不太懂），吸管，油漆桶，漸變，鋼筆，形狀，布局工具，文字工具，按鈕（包括其他交互工具），更多。

其用法大致與PS，AI相同，甚至有部分快捷鍵也與PS，AI相同，因此，對于廣大設(shè)計師而言，上手Blend，至少在工具欄方面，應(yīng)該不存在多少障礙。

下面是整體操作區(qū)域的劃分：

在這里，主面板與Dreamweaver相似，同樣有設(shè)計模式，代碼模式和分欄模式，左下為圖層和時間軸，時間軸的設(shè)置和操作類似于Flash，而圖層的概念，相比PS要略微復(fù)雜一點兒。右側(cè)的屬性欄，如果要對比，基本上相當于PS的圖層樣式吧。

而在菜單欄的Windows菜單下，可以調(diào)整顯示的區(qū)域和內(nèi)容，也可以切換工作區(qū)得設(shè)計模式與動畫模式。在Project菜單下，包含了運行，部署工程等選項。

Expression Blend 4 基礎(chǔ)繪圖應(yīng)用

雖然不是一個專業(yè)的繪圖軟件，但是Expression Blend 4的繪圖功能也是可以完成部分簡單的圖形繪制，并且，Expression Blend 4支持PSD以及AI文件的導(dǎo)入，這也讓我們在繪圖的時候可以有多種選擇，本人還是更傾向于用PS或AI把需要的圖形畫好導(dǎo)入Blend。

我們這里只介紹簡單的繪圖，因此這個例子可能讓很多高手嗤之以鼻，不過本人功力尚淺，大家就請將就一下吧。

首先，我們需要介紹一下Expression Blend 4的文件放置方式。

#p#

在操作區(qū)的左上部分，有Projects面板，在這個面板中包含了工程的全部文件，建議在工程文件夾中創(chuàng)建Images文件夾用來放置所有的圖片資源文件，因為有些工程是比較復(fù)雜的，如果不創(chuàng)建文件夾，很可能出現(xiàn)到最后連自己也找不到圖片文件的情況。在工程上右鍵單擊，選擇Add New Folder創(chuàng)建新文件夾并命名為Images，后右鍵單擊Images文件夾選擇Add Existing Item便可以向工程中添加JPG，PNG，GIF等等類型的圖片，在使用時，從這個文件夾里選中文件并拖入主面板就可以了。

這個底層的Logo，就是png的導(dǎo)入圖片。

下面我們來制作Logo上方的標題背景：

首先在工具欄中選用Rectangle（形狀工具），拖出一個矩形。

然后用選取工具選中矩形，右鍵單擊，選擇path----convert to path，這是為了讓矩形成為路徑，相信熟悉AI的同學們對這個操作不會陌生。

使用路徑選取工具（工具欄第二個），來調(diào)整錨點，調(diào)整到我們滿意的形狀。

下面關(guān)注屬性欄（右側(cè)），建議給對象一個命名，這樣便于以后調(diào)整。Brushes（筆刷）中的Fill為填充色，Stroke為描邊色，下方為填充方式，依次為無，單色填充，漸變填充，（沒搞懂），系統(tǒng)自帶樣式。

我們用漸變來調(diào)整出所需的填充顏色。

拖動箭頭可以調(diào)整漸變的方向，右側(cè)屬性欄中色板下方可以調(diào)整漸變兩端顏色與位置（與PS基本相同），在此，單擊漸變顏色條本身可以添加新的漸變點，將漸變顏色點拖離顏色面板可以刪除漸變點。漸變顏色條下方為漸變樣式，有線性和放射兩種。

按照這個方法，就可以做出標題的背景效果了。

對于矩形，多說一句，可以拖動矩形上方的手柄，來制作圓角矩形。

另外，在屬性欄中，RGB顏色下，最后一項的A代表alpha通道，也就是透明度，這個透明度，與下方的Opacity的區(qū)別在于：Alpha通道只負責所在部分的透明（填充色或描邊色），而Opacity則負責整體對象的透明。

當然，用Expression Blend 4也可以做出更加復(fù)雜的效果，在此我就不逐步做范例了，但是勸誡各位，如果有PS或AI基礎(chǔ)，強烈建議使用專業(yè)繪圖軟件繪圖并導(dǎo)入，效率會高很多。

上面是兩個較為復(fù)雜的圖形的繪制，粗略估算，耗時大概是AI繪制的4-5倍。