如何制作界面圖

在實際開發(fā)中，我們常常會用很多工具，繪制界面圖。用于描述我們的產(chǎn)品的某個功能對應的界面，將來會是什么樣子。

可以使用的工具很多（visio、smartdraw等），也有用excel畫框圖，來標明程序的各個區(qū)域的。其實使用gui design studio，可以很容易的

話界面圖。不僅輕松，而且十分的真實，既獲得一個很好的效果，也能減少溝通上的一些不便。不僅可以向非開發(fā)人員展示，也可以向開發(fā)人員展示

你的設計。

1、新建設計

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

2、添加界面控件

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

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

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

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

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

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

3、添加圖標

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

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

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

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

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

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

4、導出圖片

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

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

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

總結(jié)

到此我們就利用gui design studio完成了界面圖的制作，做界面效果圖基本上不用總是麻煩美工了，而且也是十分的快速和具有比較真實的效果。

這些也只是利用到了 gui design studio的一些皮毛功能。