1、推薦兩個界面原型設計工具-GUIDesignStudio 和 Mockups For DesktopPosted on 2010-01-22 19:33 伍華聰 閱讀(9781) 評論(22) 編輯 收藏 前段時間，有幸參加一次高級軟件架構師的培訓，授課老師介紹了兩個很好玩的界面原型設計工具：GUIDesignStudio 和 Mockups For Desktop，現分享一下，截圖說明，洗洗眼球，權當娛樂。以前在做界面原型設計的時候（不多，但有時候要做的），印象中多數用Visio或者一些UML工具來大致描述一下，效果及交互性較差，不

2、知您是否做過這方面的工作，不管有沒有，我們來了解下這兩個比較有意思的東西吧。GUIDesignStudio 運行后，隨便畫上幾個控件，界面如下：運行設計好的內容后，界面如下所示： Mockups For Desktop 運行后，涂鴉設計后的界面如下：運行后的界面：再看看網上其它人的一個設計圖： 一般人做界面原型設計的時候，可能會存在下面幾種設計方式：紙質：很多人比較推崇紙質原型設計，就是用筆和紙進行產品原型描繪（白板也常常起到類似的作用），不過我認為這只是產品經理進行原型 構思階段使用的最佳方式，不過這才是原型設計的第一步，構思和框架基本確定之后，就需要將這個"紙

3、上談兵"的框架轉移到更形象直觀的電子文檔上，便于后續的研討、設計、開發和備案。 WORD：這是原型設計時常用的一種方式，在WORD文檔建立一塊畫布，用文本框、圖片、控件等等組合起來形成一個原型設計方案。WORD文檔門檻低，使用方便，功能效果豐富，如果一個熟練者甚至可以達到一個很好的類似實際頁面的表現力，我的同事做出來的原型連設計師都夸獎它好比PS設計圖一般(不過原型設計不講求美觀，不推薦花費過多精力去修飾)。但是WORD文檔的WEB控件不是太好用，交互性也較弱。 VISIO：這也是常用的原型設計工具，它的操作比WORD更加方便快捷，可以進行快速原型設計，但表現力弱

4、一些，畢竟它不是專門的網頁原型設計工具。 Photoshop：也有人使用，不過用PS進行原型設計，費時費力，改動很不方便，容易降低效率，PM還是不要搶了UI設計師的飯碗。 Dreamweaver：這是網頁設計工具，但是對于功能復雜并且交互性很強的產品，可以通過DW去設計簡單的HTML交互稿，這樣更有說服力。 如果是設計原型，采用專門的原型設計工具，應該事半功倍的，當然原型設計工具，好用的應該還有不少，除了GUI Design Studio和Mockups For Desktop外，Axure Rp 好像也是一個不錯的原型設計工具。在此放上一個Axure Rp的軟件

5、截圖，感興趣的可以也去了解一下。 下面我們先看看這兩款軟件的介紹內容：GUI Design Studio是一個給應用軟件設計圖形用戶界面（GUIs）的專業工具。 它是一個不需要軟件開發和編碼的完整的設計工具。屏幕上的一切都通過圖形方式創建，你可以設計整個應用程序或單個窗體，對話框和組件。并組合它們來創建更多的設計，和典型界面。我們也可以將它們鏈接在一起做為一個故事板，然后通過模擬器來運行，形成交互原型。 GUI Design Studio 將會支持所有基于微軟 Windows 平臺的軟件環境。這個意味著，你可以先自由的設計，設計完后再選擇實現工具。 按照這種方法，你可以快速聚焦到應用

6、程序設計中，而不會被實現細節干擾。GUI Design Studio 可以被用于，任何你需要畫程序界面，或著想展示這些界面是如何流轉和配合的時候，例如： ·設計整個應用程序 ·文檔化產品創意 ·創建項目建議 ·需求捕捉 ·創建模擬界面 ·給開發者的產品詳細規格說明 ·注解現有產品的可用性 ·給現有產品提供建議 ·構建用戶手冊時候的臨時屏幕截圖等。Balsamiq mockup主要是做界面原型設計，是一款免費的帶有手繪涂鴉風格的原型設計軟件，這也是他獨特的地方可以手繪，當然也有豐富的各種控件元素，可以幫助你

7、設計桌面應用軟件，Web 2.0 站點，RIA富網絡應用程序, Web站點和Web應用軟件。這個軟件是由意大利人Peldi開發的，本來是他自己用它來做設計，滿足自己的需求。而在經濟寒冷的2008年，從1,322位付費用戶那卻獲得了162,302美元的收入（其中12月份就有39,000美元）;可見其受歡迎的程度。雖然是由個人設計的，但功能卻一點不弱于其他大牌的原型設計工具：操作方面，拖拽，控件分組，甚至元素之間的對齊都做得很貼心；預制了很多界面元素，從簡單的輸入框，下拉框，瀏覽器主要元素，到經常用得到的導航條，日歷，表格，到復雜的Tag Cloud，Cover Flow, 地圖，WYSWYG的格

8、式工具欄等，有了這些不用從頭畫起，往往比用白板都快；下面是它的一些特性介紹，參考了解一下：· 易操作：從 Balsamiq Mockups 自帶的元素里可以很方便地拖拽，效果圖輕易形成；元素對齊很貼心；· 可偷懶：根據 Balsamiq Mockups 提供的 Wiki 風格的代碼規則，畫圖時可以偷懶，輸入文本符號則能生成圖標。因此相比其它繁瑣的軟件操作，Balsamiq Mockups 也能更快地完成畫圖任務。· 控件足：Balsamiq Mockups 軟件包括 50 多個控件， 70 多個圖標。基本自帶了所有常用的小控

9、件，并在導航處進行分類；圖標設計賞心悅目。要是 Balsamiq Mockups 允許用戶導入自定義的控件就更好了，當然現有的也足夠了 -:)· 新風格：讓人眼前一亮的涂鴉風格，很能還原手繪效果；· 可中文：在菜單欄 View 里將 Use System Fonts 勾上，就能完美支持中文輸入（注：非 Balsamiq Mockups 中文版）；· 其它點：Balsamiq Mockups 使用 xml 記錄，方便移植、二次利用；可導出為 png 格式圖片。另外還有跨平臺與多版本兩個優點：· 跨平臺：Balsamiq Mockups 基