使用GUIDesignStudio進行原型設計

15/15使用GUIDesignStudio進行原型設計如何制作界面圖在實際開發(fā)中，我們常常會用很多工具，繪制界面圖。用于描述我們的產(chǎn)品的某個功能對應的界面，將來會是什么樣子?？梢允褂玫墓ぞ吆芏啵╲isio、smartdraw等），也有用excel畫框圖，來標明程序的各個區(qū)域的。其實使用guidesignstudio，可以很容易的話界面圖。不僅輕松，而且十分的真實，既獲得一個很好的效果，也能削減溝通上的一些不便。不僅可以向非開發(fā)人員展現(xiàn)，也可以向開發(fā)人員展現(xiàn)你的設計。1、新建設計

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

右邊的面板叫設計器面板，它由多個頁簽構成。分別對應的功能是：工程面板、元素面板、圖標面板、注釋面板、故事板、備注面板。而我們要用的是其次個面板“元素面板”。在這個面板上分為上下兩部分，上部分是一個分類列表，下部分為各個分類下的元素。當你選擇一個分類后，下面的面板就會顯示該分類的元素。要將元素添加到設計文檔中，有兩種方法。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),這個頁簽主要是上中下三部分構成，上部分是分類列表，中間是過濾條件（可以通過文件大小和顏色深度來過濾），下部分則是圖標列表。我們選擇toolbar類別在里面拖一個人物圖標出來。

在圖標列表上方有個工具條

分別是“新建圖標、編輯圖標、刷新列表、和刪除圖標”。也就是說我們在這里可以維護這個圖標庫，可以通過studio供應的工具，自己來加入圖標和修改現(xiàn)有的圖標。4、重用已有程序的界面元素其實我們很多的設計都不是白手起家，一般的情況都是修改原有的界面或基于原有的界面做改進。那么從新使用studio，一個一個元素的拖拉和擺放還原原先的界面的話，工作量是驚人的，細節(jié)調整工是巨大的。有沒有什么好的方法重用原有的界面呢？答案是有！最好的方式就是截圖。在這里有三種方法使用屏幕截圖，第一種：使用截圖軟件先將圖截好，然后通過design菜單下的addBitmap菜單命令，完成圖片的插入。其次種方法：將截后的圖片放在工程名目下，然后直接拖動出來。第三種：現(xiàn)截現(xiàn)用，就是截完圖后，使用工程面板下的pasteimgfromclipboard命令，存放在工程名目下，然后拖動到設計中。

我這里演示的是拷貝的左邊背景圖，其它界面是類似的，只要先前規(guī)劃好界面大小即可。4、導出圖片當我們的界面設計好后，要放入設計文檔中，此時我們可以將我們先前制作的gui文檔，導出成圖片，然后就可以插入到設計文檔中了。

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

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

總結到此我們就利用guidesignstudio完成了界面圖的制作，做界面效果圖基本上不用總是麻煩美工了，而且也是十分的快速和具有比較真實的效果。這些也只是利用到了guidesignstudio的一些皮毛功能。GUIDESIGNSTUDIO3中文幫助(1)-歡迎使用GUIDesignStudio3.02009-06-2812:02:44標簽：GUIDesignStudio中文歡迎[推送到技術圈]

Design設計Specify簡略規(guī)格Prototype原型Demonstrate演示Document文檔

GUIDesignStudio是一個給應用軟件設計圖形用戶界面（GUIs）的專業(yè)工具。它是一個不需要軟件開發(fā)和編碼的完整的設計工具。屏幕上的一切都通過圖形方式創(chuàng)建，你可以設計整個應用程序或單個窗體，對話框和組件。并組合它們來創(chuàng)建更多的設計，和典型界面。我們也可以將它們鏈接在一起做為一個故事板，然后通過模擬器來運行，形成交互原型。

GUIDesignStudio將會支持全部基于微軟Windows平臺的軟件環(huán)境。這個意味著，你可以先自由的設計，設計完后再選擇實現(xiàn)工具。依據(jù)這種方法，你可以快速聚焦到應用程序設計中，而不會被實現(xiàn)細節(jié)干擾。.GUIDesignStudio可以被用于，任何你需要畫程序界面，或著想展現(xiàn)這些界面是如何流轉和協(xié)作的時候，例如：·設計整個應用程序·文檔化產(chǎn)品創(chuàng)意·創(chuàng)建項目建議·需求捕獲·創(chuàng)建模擬界面·給開發(fā)者的產(chǎn)品簡略規(guī)格說明·注解現(xiàn)有產(chǎn)品的可用性·給現(xiàn)有產(chǎn)品供應建議·構建用戶手冊時候的臨時屏幕截圖·+更多其它用途我們可以創(chuàng)建如下的報告給用戶、主管甚至是自己：:·驗證設計·展現(xiàn)候選方案·評估不同的使用場景guidesignstudio3中文幫助（2）-獵取幫助如果你在使用GUIDesignStudio時有困難或想需要更多信息。下面有幾條可以獲得幫助的途徑：?ContextHelp上下文幫助?OnlineReference聯(lián)機參考?OnlineTutorials聯(lián)機教學?WebSite網(wǎng)站?CustomerSupport客戶支持

上下文幫助

也被稱為“這是什么”的幫助。實際上用戶界面都被關聯(lián)了幫助信息，這些信息告知你它是什么或它能干什么。它們消失在如下類似的彈出窗體中。在聯(lián)機參考中，主題和與其相關的主題或頁面都鏈接在一起。

上下文幫助可以依據(jù)你需要幫助的地方，使用多種方式訪問：

1.在對話框里，可以被如下訪問::?

在你需要幫助的控件上使用右鍵（這項在有右鍵菜單的編輯控件上無效）。?在控件獲得輸入焦點的時候，按F1鍵。?點擊標題欄上的幫助按鈕，進入“這是什么”的模式，然后點擊控件。

2.在標題欄上沒有“這是什么”幫助按鈕的屬性編輯對話框：?在你需要幫助的控件上使用右鍵（同樣這項在有右鍵菜單的編輯控件上無效）。?在控件獲得輸入焦點的時候，按F1鍵。?點擊標題欄上的幫助按鈕，獵取一般幫助信息。

3.用戶界面的其他地方:?在窗體或菜單上時候，當控件獲得輸入焦點的時候，按F1鍵。?按Shift+F1進入“這是什么”的模式，然后點擊控件。?使用幫助菜單中的"What'sThis?"命令，進入“這是什么”的模式，然后點擊控件。?點擊工具條上的"What'sThis?"按鈕，進入“這是什么”的模式，然后點擊控件。

聯(lián)機參考

這就是你現(xiàn)在閱讀的幫助文件。這是獲得在使用軟件時候如何操作簡略內(nèi)容概覽的好途徑。幫助菜單包含了文件索引和內(nèi)容的鏈接。如果你在內(nèi)容中找不到你要的，可以嘗試使用索引。如果你任然找不到你想要的，可以試著使用關鍵字查詢。

聯(lián)機教學

如果你是使用GUIDesignstudio的新手，我們強烈推舉你使用幫助菜單中的"QuickStartTutorial".這個教學掩蓋了很多基本內(nèi)容，能讓你在簡短的時間內(nèi)生疏軟件的很多方面。更多的教學將會被制作并可以到CarettaSoftware網(wǎng)站下載.這些將掩蓋在使用軟件進行GUI設計的一些特定方面。

網(wǎng)站

如果你嘗試使用上下文幫助、翻遍聯(lián)機參考、學習了在線教學，仍然無法找到你想要的信息，你可能會在CarettaSoftware網(wǎng)站上有所收獲。.

客戶支持

當以上全部方法都無效的時候，請使用郵件聯(lián)系我們的客戶支持部門（）獲得進一步的幫助。guidesignstudio3中文幫助（3）-用戶界面（上）2009-07-1222:13:07標簽：guidesign用戶界面中文[推送到技術圈]用戶界面下面就是GUIDesignStudio工作區(qū)。向下滾動滾動條看簡略的說明。

多文檔你可以在同一時間里打開和編輯多個設計文檔，并可以通過如下方式，輕松的切換：使用工具條下的文檔標簽；使用Ctrl+Tab激活隊列中的下一個文檔；Shift+Ctrl+Tab激活隊列中的上一個文檔。全部打開的文檔也可以通過window菜單來選擇和激活。設計工具條

設計工具條可以被停放在主程序窗口的左邊或右邊，也可以通過view菜單來設置成為浮動。每一個面板供應了訪問制作設計的不同元素，簡略如下：Project工程用于訪問工程中的全部設計文檔和圖片文件.Elements元素分門別類的擺放著GUI設計中的各個組成部分，其中包括窗體和控件。Icons圖標用于訪問，可以被用于設計中的工程圖標和其它類別的公用圖標。.Annotations注釋使用浮動文本框、高亮的圈和其它標記注釋你的設計中的各個部分。tboxes,highlightringsandothermarkers.Storyboard故事板通過在設計中構建流程掌握，來實現(xiàn)模擬原型。.Notes備注用于記錄關聯(lián)到設計文檔的備注。.guidesignstudio3中文幫助（4）-用戶界面（中）-工具面板2009-07-1910:42:54標簽：gui用戶界面design中文面板[推送到技術圈]工具面板工程面板設計工具條上的工程面板，可以訪問工程全部設計文檔和圖片文件。在這里你可以快速做如下事情：創(chuàng)建新的工程名目來組織你的文件；創(chuàng)建新的設計文檔；復制已有的設計和從剪貼板上導入圖片。你也可以加入其它工程和文件夾得鏈接，來獲得訪問它們的全部設計文檔和圖片文件。這個功能，在你使用庫工程的公共組件或使用存在別處的圖片時候特別好用。當你選擇了列表中的工程或文件夾時候，其對應的文件樹將消失在下方。雙擊設計文件打開它，或者拖拉它作為組件到另外打開的設計中。使用鼠標右鍵進行拖拉來加入組件的縮略圖。雙擊或拖拉圖片文件，來將它們加入到打開的設計中。

元素面板設計工具條上的元素面板，供應了全部可以用于創(chuàng)建應用程序GUI的窗體和控件。元素被分成了好幾個類別。當你從列表中選擇一個類別時候，該類別的元素將消失在下面的調色板窗口中。每個元素都是十分典型的，并且為了便利使用，一些類別中包含了同一個元素的不同變形形式。當你將一個元素放在你的設計上時候，你能轉變它的屬性，如文本、元素的外觀樣式。雙擊或拖拽出元素，可以講元素加入到打開的設計文檔中。在設計文檔中，雙擊一個元素來編輯它的屬性。.

圖標面板設計工具條的圖標面板，供應了訪問公共的和在主工程中，以及其它在通過工程面板鏈接近來的工程或名目中的圖標。.公共圖標按類別存放著。你可以創(chuàng)建新的類別名目來存放新的圖標。當你從列表中選擇了類別時，該類別的圖標將消失在下面的窗體中。你可以通過大小、顏色深度來過濾這些圖標。從這個面板中，你也可以通過外部編輯器，創(chuàng)建新的圖標，或編輯存在的圖標。雙擊或拖放圖標來加到打開的設計文檔中。使用命令按鈕，來