前段時間，有幸參加一次高級軟件架構師的培訓，授課老師介紹了兩個很好玩的界面原型設計工具：GUIDesignStudio 和 Mockups For Desktop，現分享一下，截圖說明，洗洗眼球，權當娛樂。

以前在做界面原型設計的時候（不多，但有時候要做的），印象中多數用Visio或者一些UML工具來大致描述一下，效果及交互性較差，不知您是否做過這方面的工作，不管有沒有，我們來了解下這兩個比較有意思的東西吧。
GUIDesignStudio 運行後，隨便畫上幾個控件，界面如下：

運行設計好的內容後，界面如下所示：

Mockups For Desktop 運行後，塗鴉設計後的界面如下：


運行後的界面：

再看看網上其它人的一個設計圖：

一般人做界面原型設計的時候，可能會存在下面幾種設計方式：

紙質：很多人比較推崇紙質原型設計，就是用筆和紙進行產品原型描繪（白板也常常起到類似的作用），不過我認為這只是產品經理進行原型 構思階段使用的最佳方式，不過這才是原型設計的第一步，構思和框架基本確定之後，就需要將這個"紙上談兵"的框架轉移到更形象直觀的電子文檔上，便於後續的研討、設計、開發和備案。

WORD：這是原型設計時常用的一種方式，在WORD文檔建立一塊畫布，用文本框、圖片、控件等等組合起來形成一個原型設計方案。WORD文檔門檻低，使用方便，功能效果豐富，如果一個熟練者甚至可以達到一個很好的類似實際頁面的表現力，我的同事做出來的原型連設計師都誇獎它好比PS設計圖一般(不過原型設計不講求美觀，不推薦花費過多精力去修飾)。但是WORD文檔的WEB控件不是太好用，交互性也較弱。

VISIO：這也是常用的原型設計工具，它的操作比WORD更加方便快捷，可以進行快速原型設計，但表現力弱一些，畢竟它不是專門的網頁原型設計工具。

Photoshop：也有人使用，不過用PS進行原型設計，費時費力，改動很不方便，容易降低效率，PM還是不要搶了UI設計師的飯碗。

Dreamweaver：這是網頁設計工具，但是對於功能復雜並且交互性很強的產品，可以通過DW去設計簡單的HTML交互稿，這樣更有說服力。

如果是設計原型，采用專門的原型設計工具，應該事半功倍的，當然原型設計工具，好用的應該還有不少，除了GUI Design Studio和Mockups For Desktop外，Axure Rp 好像也是一個不錯的原型設計工具。在此放上一個Axure Rp的軟件截圖，感興趣的可以也去了解一下。

下面我們先看看這兩款軟件的介紹內容：

GUI Design Studio是一個給應用軟件設計圖形用戶界面（GUIs）的專業工具。 它是一個不需要軟件開發和編碼的完整的設計工具。屏幕上的一切都通過圖形方式創建，你可以設計整個應用程序或單個窗體，對話框和組件。並組合它們來創建更多的設計，和典型界面。我們也可以將它們鏈接在一起做為一個故事板，然後通過模擬器來運行，形成交互原型。 GUI Design Studio 將會支持所有基於微軟 Windows 平臺的軟件環境。這個意味著，你可以先自由的設計，設計完後再選擇實現工具。 按照這種方法，你可以快速聚焦到應用程序設計中，而不會被實現細節幹擾。GUI Design Studio 可以被用於，任何你需要畫程序界面，或著想展示這些界面是如何流轉和配合的時候，例如： ·設計整個應用程序 ·文檔化產品創意 ·創建項目建議 ·需求捕捉 ·創建模擬界面 ·給開發者的產品詳細規格說明 ·註解現有產品的可用性 ·給現有產品提供建議 ·構建用戶手冊時候的臨時屏幕截圖等。

Balsamiq mockup主要是做界面原型設計，是一款免費的帶有手繪塗鴉風格的原型設計軟件，這也是他獨特的地方—可以手繪，當然也有豐富的各種控件元素，可以幫助你設計桌面應用軟件，Web 2.0 站點，RIA富網絡應用程序, Web站點和Web應用軟件。
這個軟件是由意大利人Peldi開發的，本來是他自己用它來做設計，滿足自己的需求。而在經濟寒冷的2008年，從1,322位付費用戶那卻獲得了162,302美元的收入（其中12月份就有39,000美元）;可見其受歡迎的程度。
雖然是由個人設計的，但功能卻一點不弱於其他大牌的原型設計工具：操作方面，拖拽，控件分組，甚至元素之間的對齊都做得很貼心；預制了很多界面元素，從簡單的輸入框，下拉框，瀏覽器主要元素，到經常用得到的導航條，日歷，表格，到復雜的Tag Cloud，Cover Flow, 地圖，WYSWYG的格式工具欄等，有了這些不用從頭畫起，往往比用白板都快；下面是它的一些特性介紹，參考了解一下：

• 易操作：從 Balsamiq Mockups 自帶的元素裏可以很方便地拖拽，效果圖輕易形成；元素對齊很貼心；
• 可偷懶：根據 Balsamiq Mockups 提供的 Wiki 風格的代碼規則，畫圖時可以「偷懶」，輸入文本符號則能生成圖標。因此相比其它繁瑣的軟件操作，Balsamiq Mockups 也能更快地完成畫圖任務。
• 控件足：Balsamiq Mockups 軟件包括 50 多個控件， 70 多個圖標。基本自帶了所有常用的小控件，並在導航處進行分類；圖標設計賞心悅目。要是 Balsamiq Mockups 允許用戶導入自定義的控件就更好了，當然現有的也足夠了 -:)
• 新風格：讓人眼前一亮的塗鴉風格，很能還原手繪效果；
• 可中文：在菜單欄 View 裏將 Use System Fonts 勾上，就能完美支持中文輸入（註：非 Balsamiq Mockups 中文版）；
• 其它點：Balsamiq Mockups 使用 xml 記錄，方便移植、二次利用；可導出為 png 格式圖片。

另外還有跨平臺與多版本兩個優點：

• 跨平臺：Balsamiq Mockups 基於 Air ，因此能同時在 Windows、Mac OS 及 Linux 下使用；
• 多版本：包括桌面版本，以及集成於 Confluence、JIRA、XWiki、FogBugz 中的版本；

推薦兩個界面原型設計工具--GUIDesignStudio 和 Mockups For Desktop