用戶界面設計有很多工具，比如axure rp、irise studio等等。而且國內已經有組織開始推行axure RP，而且傳言國內幾個互聯網公司開始使用axure RP了。本人試用了axure RP,和GUI Design Studio后，還是推薦使用GUI Design Studio到實際應用開發中。GUI Design Studio可以幫你快速的把思路以可視化的方式來表現出來，并可以和他人和客戶來交流想法。

　　為什么呢，因為GUI Design Studio 提供了比較多的繪制元素（按鈕、輸入框、網格、office2007效果），不用為了繪制元素去花費太多功夫，因為我們更多的是先確定思路，而不是細節。正是這種方式才合乎原型法的真諦，關鍵的是交互過程和產品樣子，而不是界面的細節（顏色、背景等）。而且該工具比較簡單，直接拖拉就可以了，就像搭積木一樣。十分的像vb開發環境，但是它卻不像vb那樣的專業，必須是懂編程人員才會用。

　　如何使用GUI Design Studio進行用戶界面設計呢？

　　GUI Design Studio使用起來其實相當容易，并且可以獲得一個十分真實的效果，也能減少溝通上的一些不便。不僅可以向非開發人員展示，也可以向開發人員展示你的設計。

　　1、新建設計

　　打開GUI Design Studio，其默認會打開welcome工程。由于我們只是做一個界面效果圖，所以不會用到工程那一塊的功能。我們就直接使用File菜單下的new菜單項（CTRL+N）新建一個設計。

　　2、添加界面控件

　　右邊的面板叫設計器面板，它由多個頁簽構成。分別對應的功能是：工程面板、元素面板、圖標面板、注釋面板、故事板、備注面板。而我們要用的是第二個面板“元素面板”。在這個面板上分為上下兩部分，上部分是一個分類列表，下部分為各個分類下的元素。當你選擇一個分類后，下面的面板就會顯示該分類的元素。

　　要將元素添加到設計文檔中，有兩種方法。1）用鼠標雙擊要加入的元素 2）用鼠標單選要加入的元素，不要放鼠標左鍵，將對應的元素拖拉到文檔中。
 

　　整個設計文檔中間有一個紅色線條圍成的矩形，這個區域代表屏幕區域。在這個區域里的元素，在模擬器運行中將顯示在屏幕中，對于不在這個區域的元素將不會顯示。那么其他區域到底放什么呢，主要是放置在作為事件等動作，觸發后被切換進入屏幕區的元素。

　　我們拖拉一個窗體作為整個設計的開始，你會發現這個窗體邊緣有淡淡的綠色。這個綠色表示是整個設計的主元素，默認的情況studio認為第一個就是主元素。當然你也可以使用F10或使用右鍵菜單來指明主元素（此時淡綠色會變為深綠色）。主元素是模擬器作為顯示的起始元素，也是當該設計作為其他設計文檔的組件時候，展現的起始元素。如下圖所示：

　　好了我們模擬一個制作一個登錄界面。

　　雙擊拖出的主窗體，則會彈出屬性編輯器（所有的設計元素，雙擊后都會彈出屬性窗體，當然你也可以選擇點右鍵菜單來完成該工作），我們輸入“xxxx協同辦公系統”，其它屬性不用修改。依此類推，我們放入標簽和文本輸入窗，來完成用戶名和密碼。最后加入一個按鈕，將它的文本改成登錄。效果如下：

　　3、添加圖標

　　登錄按鈕看上去比較平淡，一般的程序在按鈕旁都有圖標的。所以我們也想加入圖標。這里我們直接使用studio自帶的圖標。我們選擇設計面板的第三個頁簽(Icons),這個頁簽主要是上中下三部分構成，上部分是分類列表，中間是過濾條件（可以通過文件大小和顏色深度來過濾），下部分則是圖標列表。我們選擇toolbar類別在里面拖一個人物圖標出來。

　　在圖標列表上方有個工具條分別是“新建圖標、編輯圖標、刷新列表、和刪除圖標”。也就是說我們在這里可以維護這個圖標庫，可以通過studio提供的工具，自己來加入圖標和修改現有的圖標。

　　4、重用已有程序的界面元素

　　其實我們很多的設計都不是白手起家，一般的情況都是修改原有的界面或基于原有的界面做改進。那么從新使用studio，一個一個元素的拖拉和擺放還原原先的界面的話，工作量是驚人的，細節調整工是巨大的。有沒有什么好的方法重用原有的界面呢？

　　答案是有！最好的方式就是截圖。在這里有三種方法使用屏幕截圖，第一種：使用截圖軟件先將圖截好，然后通過design菜單下的add Bitmap菜單命令，完成圖片的插入。第二種方法：將截后的圖片放在工程目錄下，然后直接拖動出來。第三種：現截現用，就是截完圖后，使用工程面板下的paste img from clipboard命令，存放在工程目錄下，然后拖動到設計中。

　　我這里演示的是拷貝的左邊背景圖，其它界面是類似的，只要先前規劃好界面大小即可。

　　4、導出圖片

　　當我們的用戶界面設計好后，要放入設計文檔中，此時我們可以將我們先前制作的GUI文檔，導出成圖片，然后就可以插入到設計文檔中了。

　　打開設計好的GUI文檔，選擇File下的Export菜單項。

　　在彈出來的導出窗體，選擇導出路徑及文件名。studio支持導出的格式有：BMP、GIF、JPG、PNG、EMF這些在制作文檔方面是夠用了。

　　總結

　　到此我們就利用GUI Design Studio完成了用戶界面設計，做界面效果圖基本上不用總是麻煩美工了，而且也是十分的快速和具有比較真實的效果。

　　這些也只是利用到了 GUI Design Studio的一些皮毛功能。

你可能感興趣的文章

• 軟件界面設計三大流程
• 界面設計基礎原則總結
• 10款最佳用戶界面設計/網站線框圖工具介紹和比較
• 20個經典iOS界面設計案例激發iPhone應用UI設計靈感