交互設(shè)計師的一項重要工作就是進行產(chǎn)品原型設(shè)計(Prototype Design)。而產(chǎn)品原型設(shè)計最基礎(chǔ)的工作，就是畫出站點的大體wireframe(框架圖)并結(jié)合批注、大量的說明以及流程圖等，將自己的產(chǎn)品原型完整而準(zhǔn)確的表述給產(chǎn)品、UI、重構(gòu)/開發(fā)工程師等等，并通過溝通反復(fù)修改prototype 直至最終確認(rèn)，然后進入后續(xù)的設(shè)計開發(fā)流程。

要完成以上復(fù)雜的設(shè)計和溝通工作，需要一個好的原型設(shè)計工具。這里就目前常用的和比較熱門的工具來分享一下：
Word（產(chǎn)品經(jīng)理比較常用）
Fireworks（交互組內(nèi)推廣的）
Balsamiq Mockups（近期曝光率比較高）
Auxre RP（業(yè)界圈子內(nèi)廣為流傳）

一、優(yōu)勢劣勢對比

二、操作界面對比
Word：基本是通過繪圖工具欄的各種線框來畫wireframe。

Fireworks：通過公共庫的WEB原型組件庫畫wireframe。

Balsamiq Mockups：操作類似FW，通過頂部的控件庫拉取到工作區(qū)域畫wireframe。

Auxre RP：基本操作也和FW，Mockups類似，3是工作區(qū)域，從5控件庫里拉取到工作區(qū)域畫wireframe。

控件庫內(nèi)含了許多會經(jīng)常使用到的widget物件，例如：按鈕(Button)、圖片(Image)、文字面板(Text Panel)、單選按鈕(Radio Button)、復(fù)選框(Checkbox)、下拉式選單(Droplist)。甚至可以藉由Dynamic Panel的功能，來設(shè)計動態(tài)介面，例如：下拉式選單、頁簽，甚至是更進階的AJAX或RIA的功能。

Axure RP相對于其他原型工具，比較有特色的有以下幾個方面：

·區(qū)域4站點地圖（頁面列表）
可以自動根據(jù)頁面列表，快速繪制樹狀的網(wǎng)站架構(gòu)圖，而且可以讓架構(gòu)圖中的每一個頁面節(jié)點，直接連結(jié)到對應(yīng)網(wǎng)頁。

·區(qū)域6 Masters共用模板功能。
在設(shè)計Wireframe時，如果能善用Masters共用模板功能，您可以節(jié)省下不少重復(fù)修改的時間，Master可以是經(jīng)常被使用到的widget集合，例如：頁首、頁尾、或是一個登入的畫面。

·區(qū)域8為高級交互操作區(qū)域
Wireframe里的大多數(shù)的widget可以對一個或多個事件產(chǎn)生動作，包括 OnClick、OnMouSEOver和OnMouseLeave諸如此類。模擬出逼真的交互工作，十分方面的進行演示和講解。

·自動輸出網(wǎng)站原型 (HTML Prototype)
Axure RP可以將您設(shè)計的wireframe，輸出成符合Internet Explorer或Firefox等不同瀏覽器的HTML prototype。

也就是說，您不需要安裝Axure RP或任何其它軟件，就可直接將產(chǎn)生的Prototype檔案email給客戶，或是發(fā)布到網(wǎng)頁服務(wù)器讓客戶或使用者檢視和操作，Prototype包括 Sitemap、Page Notes、Annotations和功能性的交互效果，是一個能有效測試所提議的功能和清楚溝通設(shè)計的工具。

·自動輸出Word格式規(guī)格文件(Functional Specification)

Axure RP可以輸出Microsoft Word的格式的文件，不只容易閱讀，更可以展現(xiàn)規(guī)格文件的專業(yè)，能有效的記錄、溝通和取得設(shè)計的最后確認(rèn)。

規(guī)格文件包含了目錄、網(wǎng)頁清單、網(wǎng)頁和附有批注的Master、擷取的畫面、Annotation、Interaction和Widget特定的信息，以及結(jié)尾文件(例如：附錄)，規(guī)格的內(nèi)容與格式也可以依據(jù)不同的閱讀物件來變更。

三、實例操作對比

這里，我們利用以上各工具，實際操作一次，制作一個簡單的原型設(shè)計實例，看看各個工具的表現(xiàn)。
我們將實際制作一個Tab View的例子。

Word：

不足：對交互表達不好，也不利于演示。（一個基本的頁面要分3頁，且一頁一頁看才能表達交互效果）；沒有標(biāo)準(zhǔn)樣式，各種線框畫的很隨意。

FW：頁面效果同Word。

不足：對交互表達不好，也不利于演示。（一個基本的頁面要分3頁，且一頁一頁看才能表達交互效果）；控件的擴展和修改不便利。

Balsamiq Mockups：

不足：對交互表達不好，也不利于演示。（一個基本的頁面要分3頁，且一頁一頁看才能表達交互效果）；輸出界面手繪風(fēng)格，隨意性較大。

Axure RP：基本的外觀和Word、FW相差不大。

但最奇妙的是他能生成一個真實的頁面，可以演示Tab切換的效果，同時生成一份word格式的交互說明文檔（實例暫不提供下載）。

四、總結(jié)
通過以上幾個方面的比較，4個原型工具在繪制wireframe的基本操作上不相上下，各具特色。但Axure RP快捷而簡便的創(chuàng)建基于目錄組織的原型文檔、功能說明、交互界面以及帶注釋的wireframe網(wǎng)頁，并可自動生成用于演示的網(wǎng)頁文件和word文檔，以提供演示與開發(fā)等方面完勝，我們給于其★★★★★評價，不愧為產(chǎn)品經(jīng)理基本基本原型設(shè)計和交互設(shè)計師做快速高保真原型的一把利器。

原文：http://webteam.tencent.com/?p=1741