交互設(shè)計(jì)師的一項(xiàng)重要工作就是進(jìn)行產(chǎn)品原型設(shè)計(jì)(Prototype Design)。而產(chǎn)品原型設(shè)計(jì)最基礎(chǔ)的工作，就是畫出站點(diǎn)的大體wireframe(框架圖)并結(jié)合批注、大量的說(shuō)明以及流程圖等，將自己的產(chǎn)品原型完整而準(zhǔn)確的表述給產(chǎn)品、UI、重構(gòu)/開發(fā)工程師等等，并通過(guò)溝通反復(fù)修改prototype 直至最終確認(rèn)，然后進(jìn)入后續(xù)的設(shè)計(jì)開發(fā)流程。
要完成以上復(fù)雜的設(shè)計(jì)和溝通工作，需要一個(gè)好的原型設(shè)計(jì)工具。這里就目前常用的和比較熱門的工具來(lái)分享一下：
Word（產(chǎn)品經(jīng)理比較常用）
Fireworks（交互組內(nèi)推廣的）
Balsamiq Mockups（近期曝光率比較高）
Auxre RP（業(yè)界圈子內(nèi)廣為流傳）
一、優(yōu)勢(shì)劣勢(shì)對(duì)比
二、操作界面對(duì)比
Word：基本是通過(guò)繪圖工具欄的各種線框來(lái)畫wireframe。
Fireworks：通過(guò)公共庫(kù)的WEB原型組件庫(kù)畫wireframe。
Balsamiq Mockups：操作類似FW，通過(guò)頂部的控件庫(kù)拉取到工作區(qū)域畫wireframe。
Auxre RP：基本操作也和FW，Mockups類似，3是工作區(qū)域，從5控件庫(kù)里拉取到工作區(qū)域畫wireframe。
控件庫(kù)內(nèi)含了許多會(huì)經(jīng)常使用到的widget物件，例如：按鈕(Button)、圖片(Image)、文字面板(Text Panel)、單選按鈕(Radio Button)、復(fù)選框(Checkbox)、下拉式選單(Droplist)。甚至可以藉由Dynamic Panel的功能，來(lái)設(shè)計(jì)動(dòng)態(tài)介面，例如：下拉式選單、頁(yè)簽，甚至是更進(jìn)階的AJAX或RIA的功能。
Axure RP相對(duì)于其他原型工具，比較有特色的有以下幾個(gè)方面：
·區(qū)域4站點(diǎn)地圖（頁(yè)面列表）
可以自動(dòng)根據(jù)頁(yè)面列表，快速繪制樹狀的網(wǎng)站架構(gòu)圖，而且可以讓架構(gòu)圖中的每一個(gè)頁(yè)面節(jié)點(diǎn)，直接連結(jié)到對(duì)應(yīng)網(wǎng)頁(yè)。
·區(qū)域6 Masters共用模板功能。
在設(shè)計(jì)Wireframe時(shí)，如果能善用Masters共用模板功能，您可以節(jié)省下不少重復(fù)修改的時(shí)間，Master可以是經(jīng)常被使用到的widget集合，例如：頁(yè)首、頁(yè)尾、或是一個(gè)登入的畫面。
·區(qū)域8為高級(jí)交互操作區(qū)域
Wireframe里的大多數(shù)的widget可以對(duì)一個(gè)或多個(gè)事件產(chǎn)生動(dòng)作，包括 OnClick、OnMouseOver和OnMouseLeave諸如此類。模擬出逼真的交互工作，十分方面的進(jìn)行演示和講解。
·自動(dòng)輸出網(wǎng)站原型 (HTML Prototype)
Axure RP可以將您設(shè)計(jì)的wireframe，輸出成符合Internet Explorer或Firefox等不同瀏覽器的HTML prototype。
也就是說(shuō)，您不需要安裝Axure RP或任何其它軟件，就可直接將產(chǎn)生的Prototype檔案email給客戶，或是發(fā)布到網(wǎng)頁(yè)服務(wù)器讓客戶或使用者檢視和操作，Prototype包括 Sitemap、Page Notes、Annotations和功能性的交互效果，是一個(gè)能有效測(cè)試所提議的功能和清楚溝通設(shè)計(jì)的工具。
·自動(dòng)輸出Word格式規(guī)格文件(Functional Specification)
Axure RP可以輸出Microsoft Word的格式的文件，不只容易閱讀，更可以展現(xiàn)規(guī)格文件的專業(yè)，能有效的記錄、溝通和取得設(shè)計(jì)的最后確認(rèn)。
規(guī)格文件包含了目錄、網(wǎng)頁(yè)清單、網(wǎng)頁(yè)和附有批注的Master、擷取的畫面、Annotation、Interaction和Widget特定的信息，以及結(jié)尾文件(例如：附錄)，規(guī)格的內(nèi)容與格式也可以依據(jù)不同的閱讀物件來(lái)變更。
三、實(shí)例操作對(duì)比
這里，我們利用以上各工具，實(shí)際操作一次，制作一個(gè)簡(jiǎn)單的原型設(shè)計(jì)實(shí)例，看看各個(gè)工具的表現(xiàn)。
我們將實(shí)際制作一個(gè)Tab View的例子。
Word：
不足：對(duì)交互表達(dá)不好，也不利于演示。（一個(gè)基本的頁(yè)面要分3頁(yè)，且一頁(yè)一頁(yè)看才能表達(dá)交互效果）；沒(méi)有標(biāo)準(zhǔn)樣式，各種線框畫的很隨意。
FW：頁(yè)面效果同Word。
不足：對(duì)交互表達(dá)不好，也不利于演示。（一個(gè)基本的頁(yè)面要分3頁(yè)，且一頁(yè)一頁(yè)看才能表達(dá)交互效果）；控件的擴(kuò)展和修改不便利。
Balsamiq Mockups：
不足：對(duì)交互表達(dá)不好，也不利于演示。（一個(gè)基本的頁(yè)面要分3頁(yè)，且一頁(yè)一頁(yè)看才能表達(dá)交互效果）；輸出界面手繪風(fēng)格，隨意性較大。
Axure RP：基本的外觀和Word、FW相差不大。
但最奇妙的是他能生成一個(gè)真實(shí)的頁(yè)面，可以演示Tab切換的效果，同時(shí)生成一份word格式的交互說(shuō)明文檔（實(shí)例暫不提供下載）。
四、總結(jié)
通過(guò)以上幾個(gè)方面的比較，4個(gè)原型工具在繪制wireframe的基本操作上不相上下，各具特色。但Axure RP快捷而簡(jiǎn)便的創(chuàng)建基于目錄組織的原型文檔、功能說(shuō)明、交互界面以及帶注釋的wireframe網(wǎng)頁(yè)，并可自動(dòng)生成用于演示的網(wǎng)頁(yè)文件和word文檔，以提供演示與開發(fā)等方面完勝，我們給于其★★★★★評(píng)價(jià)，不愧為產(chǎn)品經(jīng)理基本基本原型設(shè)計(jì)和交互設(shè)計(jì)師做快速高保真原型的一把利器。
聯(lián)系客服
