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

前段時間，有幸參加一次進階軟體架構師的教育訓練，授課老師介紹了兩個很好玩的界面原型設計工具：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 中的版本