1. Axu??r(′?｀*)e，產(chǎn)品產(chǎn)品支持流程圖和示意圖，原型有?原┐(′?｀)┌型但流程圖不能直接點(diǎn)擊跳轉，工具工具支持中文，設計輸出??HTML、推???薦DOC、產(chǎn)品產(chǎn)品JPG格式。原型有?原型

2. iRise，工具工具支持流程圖和示意圖，設計流程圖非常靈活，推薦直接跳轉，產(chǎn)品產(chǎn)品不支持中文。原型有?原型輸出HTML、工具工具DOC、設計J(╯°□°）╯︵ ┻━┻PG格式。推薦

4. GUI Design Studio，GDS可以做WEB原型或者客戶(hù)端軟件原型設計，內置了很多系統組件，并且自帶了流程控制(zhi)和命令觸發(fā)判斷。

網(wǎng)友推薦：

以前曾嘗試找一個(gè)很理想的原型圖設計工具，但因為條件倉促，總是用Word, 或VISIO就草草應付了，今天看到Scott McDowel??l 的這篇Visio Replacement? You Be the Judge 。就在這里整理一下，順便做一個(gè)同行調查。

除去我們已經(jīng)熟知的微軟Visio ，下面是一些更針??對交互設計的原型設計工具（都付有預覽和試驗下載）：

· 預覽動(dòng)畫(huà)

· 試用版下載地址

Elegance Tech

· 預覽動(dòng)畫(huà)

· 試用版下載地址

iRise

看起來(lái)是功能最完整和專(zhuān)業(yè)的一套提供， 不像一般的軟件公司，iRise更注重產(chǎn)品服務(wù)和技術(shù)支持，所以提供的是一套企業(yè)分析和相關(guān)咨詢(xún)服務(wù)，并擁有自己的需求管理平臺，和交互原型文件閱讀??工具 。

· 預覽動(dòng)畫(huà)

Serena

&a(′_ゝ`)mp;midd(╯°□°）╯ot; 預覽動(dòng)畫(huà)

· 試用版下載地址

Simunication

目前被使用較多的一款軟件，具(′?｀*)有簡(jiǎn)易創(chuàng )建和維護特性的項目模擬工具， 從項目經(jīng)理，界面設計，程序開(kāi)發(fā)到項目測試，通過(guò)這個(gè)工具，可以

· 預覽

· 試用版下載地址

Sofea

· 產(chǎn)品特性

MockupScreens

· 預覽

· 試用版下(xia)載地址

Om(′_｀)niGraffle

· 預覽

· 試用版下載地址

選擇原型設計工具

2008年12月1??日

在程序、網(wǎng)頁(yè)被實(shí)現之前，一定需要把界面給”畫(huà)”出來(lái)，成為原型設計，就像動(dòng)畫(huà)(′?_?`)片要畫(huà)分(fen)鏡頭、手稿一樣。原型設計能起到有效溝通的作用，漂亮，直觀(guān)的原型圖更是讓人賞心悅目。

我最常用的原型設計工具，幾乎是Windows平臺?下惟一的̶??1;最佳”選擇。有很多的模板可以選擇，可以制作包括流程圖、平面布置圖、工程ˉ\_(ツ)_/ˉ繪圖、日程圖、軟件界面?、UML、靈感腦圖……

Visio的優(yōu)點(diǎn)很明顯，上手很快，能比較快的畫(huà)出不同種類(lèi)的圖，??但缺點(diǎn)也非常明顯，由于要支持不同的”模板”，Visio的外觀(guān)功能不夠強大，而且Visio2007和Visio2003相比，并沒(méi)有很大的改變，實(shí)在對??Visio有些失望，不過(guò)在Windows下還有其他的選擇嗎？

Offヾ(′▽?zhuān)??ice2007最值得稱(chēng)道的是對顏色和形狀的快速樣式，PowerPoint同樣是，這個(gè)特點(diǎn)能夠幫助用戶(hù)很快的制作一套UI規范；同時(shí)，在展示原型設計是PowerPoint的老本行。

但是畢竟PowerPoint不是專(zhuān)門(mén)的原型設計工具，所以一些配套的功能不夠，比如(ru)界面的文檔管理，界面的上下文標識等等。另外有人，還是不錯的。(°o°)

Axure?除??了提供低保真的形狀外，還提供ヽ(′?｀)ノ了注釋?zhuān)缑嫔舷挛牡膶?shí)現，等等。其中界面上下文非常有用，如果要演示一些(?⊿?)界面效果的話(huà)，Axure提供的界面上下文是非常直觀(guān)的。

另外Axure(′▽?zhuān)?能夠導出HT(′?ω?`)M(?????)L和DOC的文件，能很方便的將其文檔化。

當然低保真的界面效果總有一天會(huì )成為高保真的界面效果圖，這個(gè)時(shí)候，你同樣能夠利用Axure來(lái)滿(mǎn)足：即擁有高保真界面，又擁有界面上??下文的功能。

Axure的模板(′?ω?`)功能很有特點(diǎn)，Axure擁有兩種模板的類(lèi)型，一個(gè)是傳統意義上的模板，隨著(zhù)模板的改變，應用這個(gè)模板的??頁(yè)面，也會(huì )得到改變；二是小部件（Widget）類(lèi)型，當應用這種類(lèi)型的模板的時(shí)候，這個(gè)模板中的所有控件??，都成為應用該模板的頁(yè)面的獨立控件，改變這種類(lèi)型的模板后，其相關(guān)字頁(yè)面是不會(huì )發(fā)生變化的。??簡(jiǎn)單的說(shuō)，就是Widget類(lèi)型是一個(gè)控件包，你(′?｀*)可以在新的頁(yè)面中把這個(gè)包解開(kāi)，把里面的東西仍在新的頁(yè)面中，此后，這些東西就和Widget沒(méi)有關(guān)系了。

能畫(huà)出很漂亮的流程圖、原(yuan)型設計，可以說(shuō)是最好的原型設計軟件了，但只限在Mac OS上，不能說(shuō)是一種遺憾，在Windows上的用戶(hù)沒(méi)有辦法享受到這(╥_╥)款軟??件。自己也沒(méi)有用過(guò)，對于它的介紹也是從它的和中獲得的。

溫伯格曾經(jīng)在他的一本書(shū)中講到（具體哪一本實(shí)在想不起來(lái)）：”我工作只用筆和紙，力圖對??復雜現象做出簡(jiǎn)單的解??釋。R(′?｀)21;有時(shí)候離開(kāi)電腦屏幕，你會(huì )發(fā)現你的思考力會(huì )上升( ?ヮ?)。

, ,

（編者注：自這篇博文發(fā)布后，得到不少業(yè)界朋友的關(guān)注，并且想得知UIDesigner是否會(huì )對外發(fā)布，這里告訴大家：UIDesigner是會(huì )免費對外發(fā)布的。為了方便我們制定下一步的發(fā)布計劃，請大家先填寫(xiě)一份，最后再次感謝大家對UIDesigner的關(guān)注。）

在軟件設計階段，交互設計師或者產(chǎn)品經(jīng)理等常常需要使用一些工具（比如Visio、Axure RP、Flash或者Omni??Graffle等）制作出靜態(tài)稿或者原型來(lái)表達設計思想。這些工具是各有各的優(yōu)勢，當然也??各有各的缺點(diǎn)啦。那么騰訊CDC是如何設計軟件原型的呢？這里向大家介紹我們正在研發(fā)的原型設計利器UIDesigner。

推薦一個(gè)原型設計工具GUI De??sign Studio

來(lái)源：作者：姜思淼時(shí)??間：2008-10-23Tag：GDS點(diǎn)擊：(′?｀*)49

GDS可以做WEB原型或者客戶(hù)端軟件原型設計，內置了很多系統組件，并且自帶了流程控制和命令觸發(fā)判斷。研究一下就可以上手?？梢杂蒔M或者UE完全脫離開(kāi)程序員來(lái)把整個(gè)客戶(hù)端軟件的流程全部設計完畢。調整所有的邏輯(??ヮ?)?*:???順暢之后，再交由(╬?益?)技術(shù)人員開(kāi)發(fā)。

可在此(ci)下載GUI Design Studio的demo：

紹??給大家一個(gè)免費的原型工具——Serena Prototype C&#??8230;

Axure RP

網(wǎng)址

網(wǎng)址

摘要

&??;middot; 此工具故意使用手繪的效果做出用戶(hù)界面元素，使人們不被「漂亮的顏色」所吸引 ，也不會(huì )誤認為是「幾乎完成的產(chǎn)出」。參考：推(′?ω?`)薦免費而強??大的產(chǎn)??品交互原型設計軟件—Ba??lsamiq Mockupshttp://hi.baidu.com/inetpm/blog/item/36262813b595e6866438db4d.html

標題

Prototype Composer

網(wǎng)址

摘要

免費使用，功能強大，但使用複雜度高。

標題

Pencil

網(wǎng)址

摘要

Firefox 的插件 (Add-ons) 工具，檔案只有 400K，免費??使用！Wi??th the power of the underlying Mozilla Gecko engine, Pencil turns yo??ur excellent Firefox 3 browser into a sketching tool with just a 400-kilobyte installation package.Penci??l will always be free and can run on vir??tually all platforms that Firefox 3 supports.

·幾個(gè)Web應用原型設計工具 – [IT筆記](méi)

：轉載時(shí)請以超鏈接形式標明文章原始出處和作者信息及

找到幾個(gè)產(chǎn)品來(lái)比較：Axure RP、Balsamiq Mockups和Serena Composer，記下試用嘅感覺(jué)：

S產(chǎn)品，貌似很專(zhuān)業(yè)，安裝后，已經(jīng)迷失在界面當中了，誰(shuí)學(xué)會(huì )了，就教?我吧。

比較結果，還是覺(jué)得??Axure比較合適，在簡(jiǎn)用??、實(shí)用中找到平衡的感覺(jué)

依據ICONIX過(guò)程??與AMDD方法，敏捷設計的過(guò)程可以大致總結為以下的幾個(gè)步驟：??

1. 進(jìn)行用例分析（或者用戶(hù)故事），同時(shí)設計初步的域（domain）模型。輸出：初步用例、領(lǐng)域模型

2. 同時(shí)參照用例和領(lǐng)域模型進(jìn)行系統健壯性分析（robust）。輸出：健壯性分析圖、更新的用例、初步細化的系統類(lèi)圖（由領(lǐng)域模型而來(lái)）。

3. 參照健壯性分析圖，進(jìn)行系統詳細設計——畫(huà)(T_T)出UML順序圖。輸出：順序圖（針對每一個(gè)用例至少一個(gè)順序圖）、最終細化(hua)的系統類(lèi)圖。

以上過(guò)程比較清晰，??其中robust分析過(guò)程是為ヽ(′?｀)ノ了彌補用例分析用順序圖之間的GAP而??加入的過(guò)程??。不過(guò)，在第二步與第三步之間，如果能夠加入原型分析（界面草圖與頁(yè)面流程），則其輸出文檔顯然比系統順序圖更加直觀(guān)。系統原型分析的結果能夠更加有助于編程人員對與系統需求的理解，而這一步也是AMDD方法建議的步驟。所??以建議加入一步：2.5. 依據用(′?ω?`)例分析文檔，健壯性分析進(jìn)行系統原型設計輸出：原型分析文檔（頁(yè)面流程圖、系統界面草稿）你現在在使用什么工具進(jìn)行系統原型設計？MS Visio, Powerpoint, yEd, Dreamwaver, Flash還(?????)是紙和筆？（Sparx EA中雖然集成了界面設計工具，但是畢竟太過(guò)簡(jiǎn)單了）其實(shí)現在已經(jīng)有很多專(zhuān)業(yè)的原型設計工具了，主要的有以下幾種：

2. Car(?Д?)etta GUI Design Studio

3. iRise Studio

4. Elegance Lucid Spec

5. Mockup Scre(′?ω?`)ens

6. OmniGraffle (only for MAC)

7. Balsamiq Mockups有免費版本，但是有功能限制（不能保存，只能其他工?具進(jìn)行抓圖了）。但是畫(huà)出來(lái)的圖是手寫(xiě)風(fēng)格的，真的非常漂亮。

9.?? Pencil (firefox addon)居然是作為(wei)firefox插??件形(xing)式的產(chǎn)品。免費。雖然只有界面設計功能，但是已經(jīng)足夠令人(′?_?`)驚奇的了。

以上產(chǎn)品功能各具特色，都是很成熟的┐(′ー｀)┌產(chǎn)品，而且非常容易使用。但是值得提到??的是Serena Prototype Composer，使我們可以免費的使用到高品質(zhì)的產(chǎn)品，強烈建議使用。