交互設計師的一項重要工做就是進行產品原型設計(Prototype Design)。而產品原型設計最基礎的工做,就是畫出站點的大致wireframe(框架圖)並結合批註、大量的說明以及流程圖等,將本身的產品原型完整而準確的表述給產品、UI、重構/開發工程師等等,並經過溝通反覆修改prototype 直至最終確認,而後進入後續的設計開發流程。瀏覽器
要完成以上覆雜的設計和溝通工做,須要一個好的原型設計工具。這裏就目前經常使用的和比較熱門的工具來分享一下:
Word(產品經理比較經常使用)
Fireworks(交互組內推廣的)
Balsamiq Mockups(近期曝光率比較高)
Auxre RP(業界圈子內廣爲流傳)服務器
1、優點劣勢對比
架構
2、操做界面對比
Word:基本是經過繪圖工具欄的各類線框來畫wireframe。
框架
Fireworks:經過公共庫的WEB原型組件庫畫wireframe。
工具
Balsamiq Mockups:操做相似FW,經過頂部的控件庫拉取到工做區域畫wireframe。
測試
Auxre RP:基本操做也和FW,Mockups相似,3是工做區域,從5控件庫里拉取到工做區域畫wireframe。
網站
控件庫內含了許多會常常使用到的widget物件,例如:按鈕(Button)、圖片(Image)、文字面板(Text Panel)、單選按鈕(Radio Button)、複選框(Checkbox)、下拉式選單(Droplist)。甚至能夠藉由Dynamic Panel的功能,來設計動態介面,例如:下拉式選單、頁籤,甚至是更進階的AJAX或RIA的功能。spa
Axure RP相對於其餘原型工具,比較有特點的有如下幾個方面:prototype
·區域4站點地圖(頁面列表)
能夠自動根據頁面列表,快速繪製樹狀的網站架構圖,並且可讓架構圖中的每個頁面節點,直接連結到對應網頁。
設計
·區域6 Masters共用模板功能。
在設計Wireframe時,若是能善用Masters共用模板功能,您能夠節省下很多重複修改的時間,Master能夠是常常被使用到的widget集合,例如:頁首、頁尾、或是一個登入的畫面。
·區域8爲高級交互操做區域
Wireframe裏的大多數的widget能夠對一個或多個事件產生動做,包括 OnClick、OnMouseOver和OnMouseLeave諸如此類。模擬出逼真的交互工做,十分方面的進行演示和講解。
·自動輸出網站原型 (HTML Prototype)
Axure RP能夠將您設計的wireframe,輸出成符合Internet Explorer或Firefox等不一樣瀏覽器的HTML prototype。
也就是說,您不須要安裝Axure RP或任何其它軟件,就可直接將產生的Prototype檔案email給客戶,或是發佈到網頁服務器讓客戶或使用者檢視和操做,Prototype包括 Sitemap、Page Notes、Annotations和功能性的交互效果,是一個能有效測試所提議的功能和清楚溝通設計的工具。
·自動輸出Word格式規格文件(Functional Specification)
Axure RP能夠輸出Microsoft Word的格式的文件,不僅容易閱讀,更能夠展示規格文件的專業,能有效的記錄、溝通和取得設計的最後確認。
規格文件包含了目錄、網頁清單、網頁和附有批註的Master、擷取的畫面、Annotation、Interaction和Widget特定的信息,以及結尾文件(例如:附錄),規格的內容與格式也能夠依據不一樣的閱讀物件來變動。
3、實例操做對比
這裏,咱們利用以上各工具,實際操做一次,製做一個簡單的原型設計實例,看看各個工具的表現。
咱們將實際製做一個Tab View的例子。
Word:
不足:對交互表達很差,也不利於演示。(一個基本的頁面要分3頁,且一頁一頁看才能表達交互效果);沒有標準樣式,各類線框畫的很隨意。
FW:頁面效果同Word。
不足:對交互表達很差,也不利於演示。(一個基本的頁面要分3頁,且一頁一頁看才能表達交互效果);控件的擴展和修改不便利。
Balsamiq Mockups:
不足:對交互表達很差,也不利於演示。(一個基本的頁面要分3頁,且一頁一頁看才能表達交互效果);輸出界面手繪風格,隨意性較大。
Axure RP:基本的外觀和Word、FW相差不大。
但最奇妙的是他能生成一個真實的頁面,能夠演示Tab切換的效果,同時生成一份word格式的交互說明文檔(實例暫不提供下載)。
4、總結經過以上幾個方面的比較,4個原型工具在繪製wireframe的基本操做上不相上下,各具特點。但Axure RP快捷而簡便的建立基於目錄組織的原型文檔、功能說明、交互界面以及帶註釋的wireframe網頁,並可自動生成用於演示的網頁文件和word文檔,以提供演示與開發等方面完勝,咱們給於其★★★★★評價,不愧爲產品經理基本基本原型設計和交互設計師作快速高保真原型的一把利器。