推薦兩個界面原型設(shè)計工具

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

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

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

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

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

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

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

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

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