產品原型設計工具

產品原型設計工具

推薦：

1. Axure，支持流程圖和示意圖，但流程圖不能直接點擊跳轉，支持中文，輸出HTML、DOC、JPG格式。

2. iRise，支持流程圖和示意圖，流程圖非常靈活，直接跳轉，不支持中文。輸出HTML、DOC、JPG格式。

3. Prototype Composer，功能非常齊全（建立項目、多層次的流程設計、界面設計、數據流轉設計等等）免費使用，但使用複雜度高，支持中文。不支持HTML輸出，但可以在演示。

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

網友推薦：

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

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

Axure

· 預覽動畫

· 試用版下載地址

Elegance Tech

· 預覽動畫

· 試用版下載地址

iRise

看起來是功能最完整和專業的一套提供， 不像一般的軟體公司，iRise更注重產品服務和技術支持，所以提供的是一套企業分析和相關諮詢服務，並擁有自己的需求管理平台，和交互原型文件閱讀工具 。

· 預覽動畫

Serena

· 預覽動畫

· 試用版下載地址

Simunication

目前被使用較多的一款軟體，具有簡易創建和維護特性的項目模擬工具， 從項目經理，界面設計，程序開發到項目測試，通過這個工具，可以

· 預覽

· 試用版下載地址

Sofea

· 產品特性

MockupScreens

· 預覽

· 試用版下載地址

OmniGraffle

這是一個蘋果MAC平台的界面設計工具，配合omnigroup 的系列產品，可以有效的完成包括網頁在內的商務設計工作。

· 預覽

· 試用版下載地址

選擇原型設計工具

2008年12月1日

在程序、網頁被實現之前，一定需要把界面給"畫"出來，成為原型設計，就像動畫片要畫分鏡頭、手稿一樣。原型設計能起到有效溝通的作用，漂亮，直觀的原型圖更是讓人賞心悅目。

我最常用的原型設計工具，幾乎是Windows平台下惟一的"最佳"選擇。有很多的模板可以選擇，可以製作包括流程圖、平面布置圖、工程繪圖、日程圖、軟體界面、UML、靈感腦圖……

Visio的優點很明顯，上手很快，能比較快的畫出不同種類的圖，但缺點也非常明顯，由於要支持不同的"模板"，Visio的外觀功能不夠強大，而且Visio2007和Visio2003相比，並沒有很大的改變，實在對Visio有些失望，不過在Windows下還有其他的選擇嗎？

Office2007最值得稱道的是對顏色和形狀的快速樣式，PowerPoint同樣是，這個特點能夠幫助用戶很快的製作一套UI規範；同時，在展示原型設計是PowerPoint的老本行。

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

可以說Axure是Windows上最出色的原型設計軟體，原因是：夠快，夠簡單，比Visio更加快，既然是原型設計，當然是低保真的。Axure提供的幾個形狀能滿足基本的需求，但是形狀的定製功能太弱，比如大尺寸的圓角框，Axure就不能很好的處理，需要用4個形狀拼接起來。

Axure除了提供低保真的形狀外，還提供了註釋，界面上下文的實現，等等。其中界面上下文非常有用，如果要演示一些界面效果的話，Axure提供的界面上下文是非常直觀的。

另外Axure能夠導出HTML和DOC的文件，能很方便的將其文檔化。

當然低保真的界面效果總有一天會成為高保真的界面效果圖，這個時候，你同樣能夠利用Axure來滿足：即擁有高保真界面，又擁有界面上下文的功能。

Axure的模板功能很有特點，Axure擁有兩種模板的類型，一個是傳統意義上的模板，隨著模板的改變，應用這個模板的頁面，也會得到改變；二是小部件（Widget）類型，當應用這種類型的模板的時候，這個模板中的所有控制項，都成為應用該模板的頁面的獨立控制項，改變這種類型的模板后，其相關字頁面是不會發生變化的。簡單的說，就是Widget類型是一個控制項包，你可以在新的頁面中把這個包解開，把裡面的東西仍在新的頁面中，此後，這些東西就和Widget沒有關係了。

能畫出很漂亮的流程圖、原型設計，可以說是最好的原型設計軟體了，但只限在Mac OS上，不能說是一種遺憾，在Windows上的用戶沒有辦法享受到這款軟體。自己也沒有用過，對於它的介紹也是從它的和中獲得的。

最後

溫伯格曾經在他的一本書中講到（具體哪一本實在想不起來）："我工作只用筆和紙，力圖對複雜現象做出簡單的解釋。"有時候離開電腦屏幕，你會發現你的思考力會上升。

, ,

軟體原型設計DIY——揭秘利器UIDesigner

[ 2008.11.25 | by 亨利 | 交互設計 ]

（編者注：自這篇博文發布后，得到不少業界朋友的關注，並且想得知UIDesigner是否會對外發布，這裡告訴大家：UIDesigner是會免費對外發布的。為了方便我們制定下一步的發布計劃，請大家先填寫一份，最後再次感謝大家對UIDesigner的關注。）

　　　在軟體設計階段，交互設計師或者產品經理等常常需要使用一些工具（比如Visio、Axure RP、Flash或者OmniGraffle等）製作出靜態稿或者原型來表達設計思想。這些工具是各有各的優勢，當然也各有各的缺點啦。那麼騰訊CDC是如何設計軟體原型的呢？這裡向大家介紹我們正在研發的原型設計利器UIDesigner。

推薦一個原型設計工具GUI Design Studio

來源： 作者：姜思淼 時間：2008-10-23 Tag：GDS 點擊： 49

GDS可以做WEB原型或者客戶端軟體原型設計，內置了很多系統組件，並且自帶了流程式控制制和命令觸發判斷。研究一下就可以上手。可以由PM或者UE完全脫離開程序員來把整個客戶端軟體的流程全部設計完畢。調整所有的邏輯順暢之後，再交由技術人員開發。

可在此下載GUI Design Studio的demo：

http://www.carettasoftware.com/demos/overview1.html

紹給大家一個免費的原型工具——Serena Prototype C...

標題

Axure RP

網址

摘要

Axure RP是一個快速繪製Wireframe 和Prototyping的工具，主要用來定義應用程式的需求與規格，以及設計使用者介面與功能，使用者包括User Experience Designers、商業分析師、資訊架構師、Usability Expert與產品經理等專業人士。.在Axure RP中建立Wireframe和Prototype可以幫助您快速且有效地分析需求、驗證設計並傳達給所有參與者，以確保在有限的專案時間與資源下，開發出有用和可用的應用程式。

Balsamiq Mockups

網址

摘要

· 此工具故意使用手繪的效果做出用戶界面元素，使人們不被「漂亮的顏色」所吸引 ，也不會誤認為是「幾乎完成的產出」。參考：推薦免費而強大的產品交互原型設計軟體—Balsamiq Mockupshttp://hi.baidu.com/inetpm/blog/item/36262813b595e6866438db4d.html

標題

Prototype Composer

網址

摘要

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

標題

Pencil

網址

摘要

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

· 幾個Web應用原型設計工具 - [IT筆記]

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

找到幾個產品來比較：Axure RP、Balsamiq Mockups和Serena Composer，記下試用嘅感覺：

A產品據說國內很多大型IT公司都在用，為了不免費賣廣告，所以不說他們的名稱了，用起來還是比較適合開發人員的風格，該有的東西基本上都有，常用的頁面轉向、滑鼠事件等都有，還可以定製模版，在不同的地方套用，如果header和footer之類的東西，比較方便，而且界面正規，可以生成HTML代碼，適合拿去給正規客戶演示。不過入門時需要稍為看看教程，否則還是會有點問題的。

B產品，界面很Q，有點塗雅的感覺，事實上在創意階段就是應該這樣子，控制項很多，用起來很簡單方便，例如創建一個Tab面板，只需要拉一下控制項，再寫向個Tab名稱就行了，非常簡單，而且找控制項時很方便，直接在搜索欄中輸入，還可自動添加控制項。缺點是比較簡單，不夠規範，如果要拿去政府、金融、保險等單位，就可能會出問題了，還有就是不支持中文，在中國，這就麻煩大了。

S產品，貌似很專業，安裝后，已經迷失在界面當中了，誰學會了，就教我吧。

比較結果，還是覺得Axure比較合適，在簡用、實用中找到平衡的感覺

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

1. 進行用例分析（或者用戶故事），同時設計初步的域（domain）模型。輸出：初步用例、領域模型

2. 同時參照用例和領域模型進行系統健壯性分析（robust）。輸出：健壯性分析圖、更新的用例、初步細化的系統類圖（由領域模型而來）。

3. 參照健壯性分析圖，進行系統詳細設計——畫出UML順序圖。輸出：順序圖（針對每一個用例至少一個順序圖）、最終細化的系統類圖。

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

1. Axure RP

2. Caretta GUI Design Studio

3. iRise Studio

4. Elegance Lucid Spec

5. Mockup Screens

6. OmniGraffle (only for MAC)

7. Balsamiq Mockups有免費版本，但是有功能限制（不能保存，只能其他工具進行抓圖了）。但是畫出來的圖是手寫風格的，真的非常漂亮。

8. Serena Prototype Composer (free)免費版本，功能非常齊全（建立項目、多層次的流程設計、界面設計、數據流轉設計等等）。

9. Pencil (firefox addon)居然是作為firefox插件形式的產品。免費。雖然只有界面設計功能，但是已經足夠令人驚奇的了。

以上產品功能各具特色，都是很成熟的產品，而且非常容易使用。但是值得提到的是Serena Prototype Composer，使我們可以免費的使用到高品質的產品，強烈建議使用。