如何制作界面圖

在實(shí)際開(kāi)發(fā)中，我們常常會(huì)用很多工具，繪制界面圖。用于描述我們的產(chǎn)品的某個(gè)功能對(duì)應(yīng)的界面，將來(lái)會(huì)是什么樣子。

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

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

你的設(shè)計(jì)。

1、新建設(shè)計(jì)

打開(kāi)gui design studio，其默認(rèn)會(huì)打開(kāi)welcome工程。由于我們只是做一個(gè)界面效果圖，所以不會(huì)用到工程那一塊的功能。我們就直接使用File菜單下的new菜單項(xiàng)（CTRL+N）新建一個(gè)設(shè)計(jì)。

2、添加界面控件

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

要將元素添加到設(shè)計(jì)文檔中，有兩種方法。1）用鼠標(biāo)雙擊要加入的元素 2）用鼠標(biāo)單選要加入的元素，不要放鼠標(biāo)左鍵，將對(duì)應(yīng)的元素拖拉到文檔中。

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

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

好了我們模擬一個(gè)制作一個(gè)登錄界面。

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

3、添加圖標(biāo)

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

在圖標(biāo)列表上方有個(gè)工具條
  分別是“新建圖標(biāo)、編輯圖標(biāo)、刷新列表、和刪除圖標(biāo)”。也就是說(shuō)我們?cè)谶@里可以維護(hù)這個(gè)圖標(biāo)庫(kù)，可以通過(guò)studio提供的工具，自己來(lái)加入圖標(biāo)和修改現(xiàn)有的圖標(biāo)。

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

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

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

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

4、導(dǎo)出圖片

當(dāng)我們的界面設(shè)計(jì)好后，要放入設(shè)計(jì)文檔中，此時(shí)我們可以將我們先前制作的gui文檔，導(dǎo)出成圖片，然后就可以插入到設(shè)計(jì)文檔中了。

打開(kāi)設(shè)計(jì)好的gui文檔，選擇File下的Export菜單項(xiàng)。

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

總結(jié)

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

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