AxureRP操作手冊

1、三. Axure RP基本操作(1) 認(rèn)識Axure RP操作介面下圖是Axure RP 環(huán)境與介面中各區(qū)塊的簡單描述。主選單/工具列： 在主選單與工具列中，可以執(zhí)行常用的動(dòng)作指令，例如：開啟與儲存檔案、輸出Prototype或Spec文件。Sitemap 窗格： Sitemap窗格將您所設(shè)計(jì)的網(wǎng)頁以樹狀結(jié)構(gòu)的方式呈現(xiàn)，您可以在這里新增、移除、重新命名和組織設(shè)計(jì)的網(wǎng)頁。Widgets窗格： 包含一系列常用的使用者介面對象，例如：按鈕、影像、Text Panel與矩形，您可以直接透過拖拉的方式來設(shè)計(jì)網(wǎng)頁。Masters窗格：在這里您可以新增、移除、重新命名和組織設(shè)計(jì)好的Master。Master

2、是一種可以容納多項(xiàng)界面元素的集合樣板(Temlate)，您可以將常用的共享區(qū)塊設(shè)計(jì)成Master，未來在設(shè)計(jì)Wireframe時(shí)重復(fù)使用Master，來提高規(guī)劃的效率。Wireframe窗格： 您可以在這個(gè)窗格中設(shè)計(jì)網(wǎng)頁信息元素，編排內(nèi)容，設(shè)計(jì)介面，設(shè)計(jì)交互特性等等。未來可以將這些設(shè)計(jì)好的頁面，輸出成Prototype或Spec文件。交互設(shè)計(jì) (Interaction) 窗格：交互的范圍很廣，從最基本的超級鏈接、pop-ups，一直到動(dòng)態(tài)顯示和隱藏widget。您可以在這個(gè)窗格中定義Widget的交互。物件批注(Annotation) 窗格： 您可以為Widget加上批注來指定功能，您可以在這

3、個(gè)窗格中增加和自訂Widget的批注。網(wǎng)頁說明及交互(Pages Notes & Interactions)窗格：您可以在這個(gè)窗格中加入網(wǎng)頁層級的說明與交互效果到設(shè)計(jì)中。1.定義Sitemap企劃一個(gè)網(wǎng)站或Web AP，在動(dòng)手開始繪制網(wǎng)站頁面的示意圖(Wireframe)或流程圖之前，您應(yīng)該事先思考網(wǎng)站架構(gòu)，并決定信息內(nèi)容與層級。當(dāng)您心中已經(jīng)有了明確的網(wǎng)站架構(gòu)，接下來就可以利用Sitemap窗格來定義您所設(shè)計(jì)的網(wǎng)站頁面。Sitemap窗格是用來管理設(shè)計(jì)中網(wǎng)頁的工具，您可以在Sitemap 窗格中可以新增、刪除和調(diào)整網(wǎng)頁層級。新增/刪除網(wǎng)頁：想要新增網(wǎng)頁的話，請點(diǎn)選Sitemap 工具列

4、上的【Add Child Page】鈕。 在網(wǎng)頁上按鼠標(biāo)右鍵，然后選擇Rename Page或慢慢的在網(wǎng)頁上連續(xù)按鼠標(biāo)左鍵兩下可編輯網(wǎng)頁名稱。 想要?jiǎng)h除網(wǎng)頁的話，請點(diǎn)選想要?jiǎng)h除的網(wǎng)頁，然后按下Sitemap 工具列上的【Delete Page】鈕，或是在網(wǎng)頁上按下鼠標(biāo)右鍵，然后選擇Delete Page。調(diào)整網(wǎng)頁層級： 您可以將網(wǎng)頁從Sitemap 中拖曳到目標(biāo)母網(wǎng)頁中來移動(dòng)網(wǎng)頁位置，您也可以使用Sitemap 工具列上的箭頭按鈕來上下移動(dòng)網(wǎng)頁，或改變網(wǎng)頁的階層。 開啟網(wǎng)頁：在 Sitemap中的任一網(wǎng)頁上連續(xù)按鼠標(biāo)左鍵兩下，網(wǎng)頁會在Wireframe 窗格中開啟。2. 以介面物件(Widge

5、ts)繪制示意圖(Wireframe)介面物件(Widget)是用來設(shè)計(jì)Wireframe的使用者介面元素， 您可以在Widgets 窗格中找到一些常用的Wireframe Widget，例如：Button、Image和 Text Panel。 Axure RP 各種Widgets呈現(xiàn)效果，請參考Widgets效果總覽在Wireframe中新增介面物件(Widget):想在Wireframe中新增物件的話，只要從Widgets 窗格中將想要新增的物件 拖曳(drag&drop)到Wireframe窗格上就可以了。您也可以在Wireframe中利用復(fù)制(Ctrl+C)與貼上(Ctrl+V

6、)的方式來新增物件。提醒: 熟悉PowerPoint操作方式的使用者剛開始可能不太習(xí)慣，因?yàn)锳xure RP的操作方式類似Visio選擇圖形的作法，是利用拖放(Drag & Drop)的方式，跟PowerPoint是不一樣的。移動(dòng)物件(Widget)在Wireframe中新增物件之后，您可以拖放Widget來移動(dòng)的位置，拖曳Widget四周的控制點(diǎn)來改變Widget的大小。您也可以一次選取多個(gè)物件，一次改變所有被選取的物件的位置和大小。除此之外，您還可以在選取的Widget上按下鼠標(biāo)右鍵，使用快捷菜單(context menu)來設(shè)定Widgets的群組(Grouping)、順序(Or

7、der)、對齊(Align)、分散(Distribute)與鎖定(Lock)；您也可以利用Object工具列來做這些設(shè)定，請先利用菜單View->Toolbars->Object將Object工具列叫出。編輯物件(Widget)的樣式與屬性編輯Widget的樣式與屬性有下列3種方式：a. 連續(xù)按鼠標(biāo)左鍵兩下： 在Widget上連續(xù)按鼠標(biāo)左鍵兩下可以讓您變更一些基本的Widget屬性，例如：在Image Widget上連續(xù)按鼠標(biāo)左鍵兩下可以讓您匯入影像；在Droplist或List Box Widget上連續(xù)按鼠標(biāo)左鍵兩下可以讓您編輯選單項(xiàng)目。 b. 工具列： 使用工具列可編輯Wid

8、get 的樣式，例如：外框色彩、填滿色彩、字型和字體大小。 c. 快捷菜單(Context Menu)： 在Widget上按下鼠標(biāo)右鍵會出現(xiàn)快捷菜單，您可以透過菜單中的選項(xiàng)來設(shè)定Widget的特殊屬性，這些選項(xiàng)也會因Widget的類型而有所不同。3. 撰寫物件批注(Annotation )您可以在Wireframe中為任何物件(Widget)加上批注。 新增批注想要幫物件加上批注的話，請先選擇Wireframe中的物件，如圖箭頭1所示，被選取的物件呈現(xiàn)綠色框線狀態(tài)，然后在物件批注窗格(Annotations & Interactions Pane)的 Specification字段(箭

9、頭2)，輸入對這個(gè)物件的解釋內(nèi)容，您也可以在窗格最上方的Label字段(箭頭3)輸入名稱來幫物件命名。 自定字段您可以透過菜單Wireframe -> Customize Annotation Fields and Views，或是按一下Annotations & Interactions的標(biāo)頭來自訂批注字段。腳注(Footnote)一旦在Widget上加上后，Widget 右上方會多一個(gè)黃色小方塊，里面有一個(gè)腳注號碼(Footnote number)，您可以在Widget上按下鼠標(biāo)右鍵，使用Footnotes次菜單來增加或減少這個(gè)編號數(shù)字。4. 網(wǎng)頁說明(Page Notes)

10、網(wǎng)頁說明可以用來收集網(wǎng)頁層級的描述或需求。撰寫網(wǎng)頁說明(Page Notes)網(wǎng)頁說明會被保留在Wireframe下方的窗格內(nèi)。管理網(wǎng)頁說明類別Axure RP本身預(yù)設(shè)的網(wǎng)頁說明類別是default，您可以透過新增額外的說明類別，輕易的區(qū)分出您自己的說明與要輸出到Prototype與規(guī)格中的說明。比如您可以新增Test Case，操作說明，SD等不同類別的網(wǎng)頁說明。而當(dāng)您要輸出規(guī)格文件時(shí)，可以個(gè)別指定哪些種類的網(wǎng)頁說明要輸出到文件，如此一來，您就可以輸出專屬于Test Case, 操作說明或SD文件了。想要新增/編輯網(wǎng)頁說明類別的話，請點(diǎn)選菜單Wireframe->Manage Page

11、 Notes，或按一下Page Notes Default右方的向下箭頭并選擇Manage Page Notes，此時(shí)會出現(xiàn)Page Notes 對話框，利用這個(gè)對話框，您可以新增、移除、更名或重新排列說明字段。想要切換說明類別的話，請按一下Page Notes Default右方的向下箭頭，來選擇說明類別。 5. 秘技(Quick Tips)秘技一. 超快速挪動(dòng)畫面：當(dāng)您設(shè)計(jì)的網(wǎng)頁畫面變大時(shí)，為了選取不同位置的物件，您必須經(jīng)常使用垂直與水平的滾動(dòng)條，這會使得選取物件的動(dòng)作變慢。請?jiān)囋囘@招，鼠標(biāo)光標(biāo)focus在Wireframe，按住鍵盤的空格鍵，這么一來就會切換成Hand tool，此時(shí)鼠標(biāo)

12、光標(biāo)會切換成手狀，您可以用來抓著畫面任意滑動(dòng)，而且不會打亂任何物件的位置，輕松愉快。秘技二. 穿透物件(Widget)選取下層的物件：以鼠標(biāo)左鍵稍慢速度按一下物件，當(dāng)您放開鼠標(biāo)左鍵時(shí)，可以穿透上層物件，選取到位于下層的物件 。操作速度如下圖所示：秘技三. 引用Microsoft Office或其它軟件的物件：您可以利用復(fù)制/貼上(Coyp/Paste)的功能，將其軟件中的物件，例如：PowerPoint, Excel, Visio, Photoshop 與Illustrator貼到Axure RP中。一般來說，這些貼上的物件會變成Wireframe中的圖像物件。反之亦然，您也可以復(fù)制Axure

13、 RP中的物件或畫面，貼到其它軟件。秘技四. 單選群組(收音機(jī)按鈕群組 Radio Button Group)： 您可以一次選取多個(gè)Radio Button，按下鼠標(biāo)右鍵，并選擇Edit Radio Button->Assign Radio Group來設(shè)定Radio Button的群組關(guān)系。如此一來，當(dāng)這些Radio Button輸出到Prototype時(shí)，就會形成真正的單選使用者介面。· 一. 認(rèn)識Axure RP · 二. 下載 / 安裝 o 安裝授權(quán)序號 · 三. Axure RP基本操作 o 示意圖及批注 o 初級交互設(shè)計(jì) o 使用共享區(qū)塊 (Ma

14、ster) o 輸出網(wǎng)站/應(yīng)用程序原型 o 輸出規(guī)格文件(Word) · 四. 架構(gòu)圖&流程圖 o 1-click繪制架構(gòu)圖 o 流程圖&連接線 · 五. 中級交互設(shè)計(jì) o 控制Dynamic Panel o 鼠標(biāo)移入移出及圖像變換的交互設(shè)計(jì) o 設(shè)計(jì)多層選單 · 首頁 · > · 在線教程 · > · 三. Axure RP基本操作 · > · 初級交互設(shè)計(jì) 初級交互設(shè)計(jì)1. 交互(Interaction)2. 定義基本連結(jié)3. 動(dòng)作型態(tài)(Action)及實(shí)際動(dòng)作(Ac

15、tion Description)4. 多重條件(Multiple Cases )5. 網(wǎng)頁層級的交互: OnPageLoad 6. 秘技(Quick Tips)1. 交互(Interaction)Interactions窗格是用來定義Widget在Wireframe中的交互表現(xiàn)方式，交互表現(xiàn)的方式包含簡單的連結(jié)到Rich Internet Application (RIA)的復(fù)雜行為，而且這些交互表現(xiàn)都可以在Prototype中執(zhí)行。觸發(fā)事件(Event)、假設(shè)條件(Case)、動(dòng)作型態(tài)(Action)在Axure RP中的交互設(shè)計(jì)是由觸發(fā)事件(Event)、假設(shè)條件(Case)與動(dòng)作型態(tài)(

16、Action)所組成。當(dāng)使用者對網(wǎng)頁進(jìn)行某些人機(jī)介面的操作時(shí)，就會對網(wǎng)頁觸發(fā)一個(gè)事件(Event)。每一個(gè)觸發(fā)事件都可以有一或多個(gè)假設(shè)條件(Case)，例如，一個(gè)按鈕的OnClick 觸發(fā)事件可以有兩個(gè)假設(shè)條件：其中一個(gè)導(dǎo)引至某個(gè)網(wǎng)頁，另一個(gè)則導(dǎo)引至另一個(gè)網(wǎng)頁 。而每一個(gè)假設(shè)條件(Case)又可以執(zhí)行一或多個(gè)動(dòng)作型態(tài)(Action)，舉例來說：Open Link in Current Window的動(dòng)作就是一個(gè)基本連結(jié)。觸發(fā)事件(Event)目前Axure RP 5支持的人機(jī)介面觸發(fā)事件，及相對應(yīng)的觸發(fā)事件(Event)名稱如下：· 以鼠標(biāo)點(diǎn)擊 OnClick · 鼠標(biāo)的指

17、針移動(dòng)到對象之上 OnMouseEnter · 鼠標(biāo)的指針移動(dòng)出對象之外 OnMouseOut · 鼠標(biāo)的指針進(jìn)入文字輸入狀態(tài) OnFocus · 鼠標(biāo)的指針離開文字輸入狀態(tài) OnLostFocus · 敲鍵盤 OnKeyUp · 瀏覽器加載網(wǎng)頁 OnPageLoad 大多數(shù)的對象，只具備最常見的三種觸發(fā)事件(Event) OnClick、OnMouseEnter 與OnMouseOut。某些特定的Widget的可觸發(fā)事件有些不同：· Button對象只有OnClick。 · Radio Button，CheckBox 這2

18、種對象則具有OnFocus / OnLostFocus 觸發(fā)事件。 · Text Field，Text Area這2種對象則具備 OnKeyUp / OnFocus / OnLostFocus 觸發(fā)事件。 · Droplist，List Box這2種對象則具備 OnChange / OnFocus / OnLostFocus 觸發(fā)事件。 · 網(wǎng)頁加載瀏覽器時(shí)，則有 OnPageLoad觸發(fā)事件。(請參考5. 網(wǎng)頁層級的交互: OnPageLoad) 您不需要硬背上述的對象及對應(yīng)的Event，在Axure RP的操作介面上，您只要點(diǎn)選對象，就可以查看Interact

19、ion窗格所顯示的對應(yīng)Event。1. 認(rèn)識共享區(qū)塊 (Master)共享區(qū)塊 (Master) 是一組在設(shè)計(jì)過程中可以重復(fù)使用的Widget，一些常用的Master包括了頁首(Header)、頁尾(Footer)與導(dǎo)覽(Navigation)， Master 可以被放置在網(wǎng)頁或是其它的Master中，只要Master做了修改，其它使用到這個(gè)Master的地方也會跟著修改。 我們也可以從其它的軟件/程序技術(shù)經(jīng)驗(yàn)來認(rèn)識Axure RP的Master。如果您熟悉PowerPoint的母片功能，那么Axure RP的Master功能，在”重復(fù)使用”的這一點(diǎn)特性上，有一點(diǎn)點(diǎn)類似PowerPoint的母

20、片，但不完全是。如果您熟悉ASP或PHP程序語言的”Include”語法，或DreamWeaver的Template(DWT)，那么Axure RP的Master就是同樣的概念，您只要使用Master，其它頁面把Master放進(jìn)來，就可以產(chǎn)生共享的特性。若想要提升企劃的速度跟效率，讓Axure RP在Web/AP規(guī)畫項(xiàng)目的效益展現(xiàn)出來，那么Master肯定是您必須要學(xué)會并熟練運(yùn)用的功能。新增、組織與設(shè)計(jì)MasterMaster要在Masters 窗格中管理。想要新增Master的話，請按一下Masters窗格工具列上的【Add Master】鈕，或在窗格中按鼠標(biāo)右鍵并選擇Add Master。

21、Masters 窗格利用數(shù)據(jù)夾(Folder)來組織Master，然后透過工具列、快捷菜單或是拖拉的方式重新排列Master。在Master上連續(xù)按鼠標(biāo)左鍵兩下可以開啟Master來進(jìn)行設(shè)計(jì)，您可以像網(wǎng)頁一樣，將Widget拖拉到Wireframe中來設(shè)計(jì)Master。2. 套用 Master到網(wǎng)頁中想要在網(wǎng)頁或其它Master 的Wireframe 中套用Master，只要將Master窗格中的Master拖拉到Wireframe中即可。根據(jù)Master的特性， Master 對象會有淡紅或灰色的屏蔽，想要移除屏蔽的話，可以使用主選單中的Wireframe->Mask Masters功

22、能。 Master預(yù)設(shè)的行為是Normal，您可以在Master上按鼠標(biāo)右鍵，然后利用Behavior子選單將它變更為Place In Background或Custom Widget。Masters的行為說明如下： Normal: 可以被移動(dòng)與放置在 Wireframe上的任何地方，對Master的變更會立即反映出來。Place in Background: Master被鎖定在Wireframe的最底層，所包含的Widget 與Master 位在相同的位置，通常在制作樣板(Template)時(shí)會用到這個(gè)功能。Custom Widget: 當(dāng)Custom Widget放到Wireframe上

23、時(shí)，Widget就會失去與Master的關(guān)聯(lián)，可以像一般Widget一樣被編輯，這個(gè)功能適合將經(jīng)常使用到的Widget，連同預(yù)設(shè)定義好的屬性、注釋和交互建立一個(gè)樣式庫(UI Design Pattern Library)，例如：白色文字的藍(lán)色按鈕。3. 應(yīng)用實(shí)例Axure RP能夠快速提高網(wǎng)站策劃的效率，除了個(gè)人在單一網(wǎng)站項(xiàng)目上應(yīng)用Master的功能，來大量減低重復(fù)編輯的工作之外，還可以利用Master的Custom Widget自訂對象的功能，來建立網(wǎng)站介面元素的介面庫(UI Design Pattern Library)。這里有一篇Axure RP應(yīng)用于網(wǎng)站界面庫的實(shí)際案例 利用Axure

24、封裝視覺標(biāo)準(zhǔn)，非常值得學(xué)習(xí)。4. 密技(Quick Tips)秘技一.在建立項(xiàng)目的初期就開始定義Master項(xiàng)目一開始啟動(dòng)，如果可以稍微掌握哪些介面區(qū)塊未來將是共享區(qū)塊，那么就開始建立Master，比如網(wǎng)站的Header / Footer / 導(dǎo)覽選單(Navigation)，或者廣告版位等等。越早使用，越可以節(jié)省其它頁面設(shè)計(jì)的重復(fù)工作。至于如何判斷什么樣的介面區(qū)塊適合放在Master？您可以觀察自己會經(jīng)常把哪些區(qū)塊Copy/Paste到其它頁面去使用，那些經(jīng)常會被Copy/Paste的區(qū)塊，往往就是網(wǎng)站共享的區(qū)塊，就適合被設(shè)計(jì)到Master中。秘技二. 將所有頁面都套用Master(或移除M

25、aster)在您想要套用(或移除)的Master名稱上按鼠標(biāo)右鍵，找到選單”Add to Pages.”及”Remove From Pages.”，就可以一次把想要套用Master的許多頁面，一次加完。反之，可以一口氣把不要的共享區(qū)塊，從許多頁面中快速移除。秘技三.使用數(shù)據(jù)夾(Folder)資料夾(Folder)可以幫助您分門別類整理Master，尤其是如果您想要建立Master library的話，這個(gè)功能絕對讓您事半功倍。您可以在Axure RP的Masters窗格第一個(gè)Icon (Add Folder)找到這個(gè)功能。秘技四.建立影像 Master在Master 中建立常用的影像(例如：i

26、con圖標(biāo))有助于重復(fù)使用這些影像，您就不需要反復(fù)的復(fù)制貼上，或不斷的匯入影像文件，而且，如果您想要更換掉這個(gè)影像的話，也只需要在一個(gè)地方變更就好了。 編注： Axure RP的”Master”功能想要以中文精準(zhǔn)表達(dá)有些困難。在PowerPoint中，Master被翻譯成”母片”，但是Axure RP如果把Master翻譯成”母片”，會失去Axure RP的Master多種功能的涵義。Axure RP的Master，可以是整頁的母片，這是一種型態(tài)。Axure RP的Master，也可以是Header區(qū)塊或Footer區(qū)塊，使用在很多頁面一起共享的時(shí)候，這是第二種型態(tài)。Axure RP的Mast

27、er還可以當(dāng)作獨(dú)立的Widget來使用，用來建立樣式庫Library。1. 什么是網(wǎng)站/應(yīng)用程序原型 (HTML Prototype)?在Axure中完成有批注的Wireframe和Interaction之后，您可以產(chǎn)生可交互且支持多種瀏覽器的Web/AP原型(HTML Prototype)。(注: AP是Application的縮寫，通常指的是應(yīng)用程序)Axure RP網(wǎng)站原型是由HTML和Javascript組成，可以在IE 6(或以上的版本)、Mozilla或Firefox中瀏覽。換句話說，觀看網(wǎng)站原型的人僅需要一般瀏覽器，不需要安裝Axure RP。如下圖范例所示。解除IE中的Acti

28、ve X 警告訊息：使用IE開啟在自己計(jì)算機(jī)里頭的HTML Prototype檔案時(shí)，瀏覽器中可能會出現(xiàn)Active X 警告訊息，想要暫時(shí)解除IE中的警告訊息，請點(diǎn)選IE瀏覽器出現(xiàn)的Active X警示訊息，接著選擇允許被封鎖的內(nèi)容，這樣子就可以在IE瀏覽器上看到自己計(jì)算機(jī)里頭的HTML Prototype了。想要永久解除Active X警告訊息，請參考秘技一。2. 輸出網(wǎng)站原型/格式設(shè)定想要輸出原型或設(shè)定(Configure HMTL Prototype)輸出格式的話，請按下Axure RP軟件上方主功能選單Generate菜單，選擇Prototype(F5)?；蚴前聪鹿ぞ吡兄械腜roto

29、type鈕，系統(tǒng)會開啟Configure HTML Prototype對話框，并顯示預(yù)設(shè)的原型輸出格式設(shè)定，您可透過這個(gè)對話框來設(shè)定輸出原型的格式。格式設(shè)定中的選項(xiàng)可分成下面幾區(qū)：General：在Destination Folder處輸入網(wǎng)站原型的HTML檔案的存放位置，因?yàn)锳xure RP的網(wǎng)站原型包含許多檔案，最好指定一個(gè)windows檔案系統(tǒng)內(nèi)的檔案夾來存放。Notes(網(wǎng)頁說明)：選擇和排序想要顯示在網(wǎng)站原型中的網(wǎng)頁層級說明。Annotations(物件批注)：選擇和排序想要顯示在網(wǎng)站原型中的批注字段。Interactions (交互)：指定交互的行為，例如：指定是否需要預(yù)設(shè)顯示條件

30、描述(case)，或是只在多個(gè)條件存在的情形才顯示。Distribution：選擇是否產(chǎn)生CHM 檔。Advanced：選擇是否將Text Panel轉(zhuǎn)成影像，這是一個(gè)舊版本的功能，現(xiàn)在很少有需要這樣處理。初次輸出原型，您可以直接使用預(yù)設(shè)的設(shè)定值，除了指定輸出的檔案夾之外，不用費(fèi)心去調(diào)整?；蛘弋?dāng)您完成網(wǎng)站原型輸出格式的設(shè)定，只要按一下【Generate】鈕就可將這個(gè)Prototype輸出了。如果您越來越熟練，您可以兩個(gè)動(dòng)作就完成網(wǎng)站原型的輸出了，第一個(gè)動(dòng)作是按下【F5】，接著再按下【Generate】。3.展示與操作網(wǎng)站原型Axure RP輸出的網(wǎng)站原型(HTML Prototype) 總共可

31、區(qū)分成三個(gè)框架。左側(cè): Sitemap 框架您可以按Sitemap中的網(wǎng)頁列表，循序展示網(wǎng)站原型中的任何一個(gè)網(wǎng)頁。如果您不需要顯示左側(cè)的Sitemap，那么就應(yīng)該底部: 網(wǎng)頁說明(Page Notes)框架這個(gè)框架顯示該網(wǎng)頁的文字說明，這些文字說明來自于您寫在網(wǎng)頁批注(Page Notes)的文字。中間: 主框架主框架包含了Wireframe和流程圖，Wireframe是可以交互的，舉例來說，按一下設(shè)定有網(wǎng)頁連結(jié)的按鈕，那么就會連結(jié)到所設(shè)定的網(wǎng)頁。您也可以按一下加有附注的Widget旁邊的黃色便利貼小Icon圖示來檢視批注。4. 分享原型檔案給其它人因?yàn)锳xure RP的Prototype是標(biāo)

32、準(zhǔn)的HTML、Javascript和影像文件，所以您的同事和客戶不需要安裝Axure RP或任何播放器就可以直接檢視Prototype。發(fā)布Prototype的方式有很多種，以下是三種不同的分享方式的介紹。a. 放到網(wǎng)站服務(wù)器第一種方式是發(fā)布網(wǎng)站原型的HTML Prototype到Web Server上，您只要將網(wǎng)址給客戶或工作伙伴其它人，他們在他們的瀏覽器上瀏覽Prototype。b. 壓縮成Zip檔第二種方式是將包含Prototype檔案的檔案夾壓縮成Zip檔，然后將Zip檔寄給相關(guān)的人。收到檔案的人，將Zip檔解壓縮后，便可以直接在自己的計(jì)算機(jī)瀏覽HTML Prototype，通常是開啟

33、 index.html或從 XXX_Start.html檔開始瀏覽 (XXX指的是該RP Project的名稱)。c. CHM 檔第三種方式是產(chǎn)生包含Prototype的CHM檔，就像zip檔一樣，這種方式讓您可以檔案的方式發(fā)布Prototype，而且不需要安裝任何軟件來檢視。CHM是Microsoft HTML Help檔的格式，所以大多數(shù)的Windows計(jì)算機(jī)已經(jīng)安裝了瀏覽器，使用者只要在檔案上連續(xù)按兩下鼠標(biāo)左鍵就可以檢視它。想要將Prototype輸出成CHM檔的話，請?jiān)贑onfigure HTML Prototype對話框中，進(jìn)入Distribute區(qū)，勾選Create HTML He

34、lp File(.chm)選項(xiàng)。如果您目前已經(jīng)安裝的Microsoft系統(tǒng)中沒有HTML Help Workshop的話，就必須安裝它才能產(chǎn)生CHM檔，您可從這里免費(fèi)下載，一旦完成安裝以后，所安裝的數(shù)據(jù)夾中將會出現(xiàn)一個(gè)hhc.exe的檔案，按一下Locate hhc.exe來告訴Axure RP這個(gè)程序在計(jì)算機(jī)中的位置。一旦Prototype和.chm檔產(chǎn)生之后，您將會在存放Prototype的數(shù)據(jù)夾中找到一個(gè) .chm檔，您現(xiàn)在就可以將 .chm檔發(fā)布出去，讓接收者在HTML Help檢視器中檢視。秘技(Quick Tips)秘技一. 只更新現(xiàn)在開啟的頁面到網(wǎng)站原型：當(dāng)您設(shè)計(jì)網(wǎng)站原型的技巧越

35、純熟，網(wǎng)站項(xiàng)目會越來越大，導(dǎo)致輸出網(wǎng)站原型的時(shí)間會隨著項(xiàng)目而變大。萬一您只是調(diào)整其中的某一頁，卻得等待整個(gè)網(wǎng)站重新全部輸出，那就太浪費(fèi)時(shí)間了。想要重新產(chǎn)生某一頁網(wǎng)頁，只要在Axure RP打開該頁Wireframe，接著按下Axure RP主功能選單Generate菜單，選擇Regenerate Current Page to Prototype(CTRL+F5)(如下圖)。當(dāng)您選擇這個(gè)動(dòng)作，或者直接按下熱鍵CTRL+F5，Axure RP不會產(chǎn)生任何對話窗口，您只會感覺到鼠標(biāo)指針閃了一下，此時(shí)，再回到網(wǎng)站原型(HTML Prototype)上去reload這一頁，或click這一頁網(wǎng)頁名稱，

36、就會看到已經(jīng)更新的頁面了。秘技二. 關(guān)閉IE中的Active X 警告訊息：使用IE瀏覽器在自己的計(jì)算機(jī)上開啟存放于檔案夾中的HTML Prototype時(shí)，瀏覽器中可能會出現(xiàn)Active X 警告訊息，想要永久解除IE中的警告訊息，請點(diǎn)選工具菜單中的Internet選項(xiàng)，切換到高級標(biāo)簽頁中，找到安全的設(shè)定中，勾選允許活動(dòng)內(nèi)容在我的計(jì)算機(jī)上的文件中運(yùn)行*選項(xiàng)即可 (如上圖)。秘技三. 嵌入外部Flash檔案Inline FrameInline Frame Widget可用來加入Axure RP 目前不支持的內(nèi)容，例如：Flash物件；只要在Inline Frame Widget上連續(xù)鼠標(biāo)左鍵兩

37、下就可以讓您指定想要加載到框架的網(wǎng)頁，如果您要建立一個(gè)包含F(xiàn)lash對象的HTML 文件，您可以將檔案嵌入到Inline Frame中，這樣他就可以在Prototype中呈現(xiàn)了。1. 什么是規(guī)格文件 (Specification)?在Axure RP 中設(shè)計(jì)完Wireframe之后，我們可以輸出Microsoft Word格式的需求書或功能性規(guī)格文件(Specification)。輸出Word格式規(guī)格文件之前，您的計(jì)算機(jī)必須事先安裝好Microsoft Word 2000或更新的版本。如果您在設(shè)計(jì)Wireframe的同時(shí)，也把需求說明或規(guī)格敘述寫在網(wǎng)頁說明(Page Notes)或Widget

38、的對象批注(Annotations)，輸出成規(guī)格文件時(shí)，Axure RP會自動(dòng)幫您匯整文字?jǐn)?shù)據(jù)以及畫面，并且按照網(wǎng)頁順序整理在Word檔案里頭。(如下圖)您可以下載下列網(wǎng)站策劃書范例，很快就可以了解Axure RP輸出的規(guī)格書大概是長成什么型態(tài):· Axure RP Prototype范例-旅游網(wǎng)站策劃書(Word 2000格式) 1.7 M bytes · Axure RP Prototype范例-旅游網(wǎng)站策劃書(Word 2007格式) 700 k Bytes 2. 輸出規(guī)格文件/格式設(shè)定想要輸出規(guī)格文件或設(shè)定(Configure Specification)輸出格式的

39、話，請按下Axure RP軟件上方主功能選單Generate菜單，選擇Specification(F6)?；蚴前聪鹿ぞ吡兄械腟pecification鈕，系統(tǒng)會開啟Configure Word 2007 Specification或Configure Word 2000 Specification對話框，并顯示預(yù)設(shè)的規(guī)格文件輸出格式，您可透過這個(gè)對話框來設(shè)定其它格式。如同輸出網(wǎng)站原型(HTML Prototype)一樣，需求書或規(guī)格書也可依不同的用途進(jìn)行設(shè)定，比如設(shè)定一種格式專門給客戶確認(rèn)需求及規(guī)格，設(shè)定另一種格式專門產(chǎn)生測試計(jì)劃與測試步驟，再另外設(shè)定一種格式用來介紹操作步驟。如果您不另外指定

40、輸出格式，可以直接按下【Generate】來輸出規(guī)格書，您唯一須留意的是輸出文件名稱(Destination File)必須是一個(gè)文件名稱，比如 Untitled.docx (Word 2007格式) 或 Untitled.doc (Word 2000格式)，不能只給目錄名稱?？梢员徽{(diào)整設(shè)定的項(xiàng)目包括，Pages(網(wǎng)頁)相關(guān) / Masters(共享區(qū)塊)相關(guān) / Notes(網(wǎng)頁說明)相關(guān)/ Screenshot (畫面)相關(guān)/ Annotations (對象批注)相關(guān) / Widgets(對象)相關(guān) / Word Template (Word文件樣板)相關(guān)。套用Word文件樣板可以客制化您

41、輸出的規(guī)格文件，讓文件的呈現(xiàn)更專業(yè)，您也可以事先設(shè)定好前言以及附錄文件，比如封面，附錄或簽名頁。您可以修改Word模板來配置規(guī)格中的文字樣式，變更文件的排版或加入頁首或頁尾。一但您設(shè)定好規(guī)格文件格式，請按一下【Generate】鈕來產(chǎn)生這份規(guī)格。3. 秘技(Quick Tips)秘技一. 只要把必要的項(xiàng)目輸出到規(guī)格文件中規(guī)格文件輸出時(shí)如果選擇輸出的項(xiàng)目太細(xì)，很有可能會產(chǎn)出一份好幾百頁的Word檔案，而難以閱讀。因此，輸出之前，最好透過格式的設(shè)定將不需要的項(xiàng)目取消勾選，保留有意義的部份。秘技二. 預(yù)設(shè)規(guī)格文件標(biāo)題改成中文將Axure RP預(yù)設(shè)格式的文件標(biāo)題改成中文，比如將Pages格式設(shè)定的 S

42、ection Header名稱 Pages 改成 網(wǎng)站策劃說明 ，把 Page Tree 改成 網(wǎng)頁列表；或者把Screenshot格式設(shè)定的 Section Header名稱User Interface 改成 網(wǎng)頁畫面。如此一來輸出成規(guī)格文件時(shí)，會更方便閱讀這些段落標(biāo)題。1. Axure RP實(shí)現(xiàn)更豐富的交互設(shè)計(jì)網(wǎng)站開發(fā)技術(shù)越來越豐富了，這是我們正在經(jīng)歷的過程，也是未來的趨勢。不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，這些都被歸類為RIA(Rich Internet Application)的技術(shù)，能夠讓網(wǎng)站介面更豐富，展現(xiàn)更優(yōu)質(zhì)的人機(jī)交互

43、。同時(shí)，這個(gè)趨勢也挑戰(zhàn)了傳統(tǒng)的文書軟件或繪圖軟件，當(dāng)這些軟件受限于僅能表現(xiàn)單一畫面與單一狀態(tài)的情況下，您很難把心目中最友善的交互方式表達(dá)清楚并設(shè)計(jì)出來。Axure RP與其它的wireframe軟件，最大的差異在于能夠進(jìn)行交互設(shè)計(jì)(Interaction Design)，且可以立即將結(jié)果呈現(xiàn)于prototype上，而不是只有文字?jǐn)⑹?。更棒的一點(diǎn)是，學(xué)習(xí)Axure RP的交互設(shè)計(jì)，您并不需要學(xué)習(xí)HTML或Java Script語法，只要透過一些設(shè)定與操作，便可以完成多樣而創(chuàng)新的交互介面設(shè)計(jì)。在Axure RP設(shè)計(jì)出來的Prototype中，最簡單的交互設(shè)計(jì)是網(wǎng)頁連結(jié)，透過鼠標(biāo)的click來串起使

44、用者與網(wǎng)站的交互流程。然而，真正發(fā)揮Axure RP在交互設(shè)計(jì)上的驚人特色，并不是只有連結(jié)這么簡單的交互，您可以藉由學(xué)習(xí)Dynamic Panel (動(dòng)態(tài)面板)對象的操作與控制，來做到更豐富更友善的交互介面設(shè)計(jì)。2. 認(rèn)識Dynamic Panel WidgetDynamic Panel (動(dòng)態(tài)面板) 這種對象是專門用在設(shè)計(jì)Prototype動(dòng)態(tài)功能的Widget，Dynamic Panel可以包含一或多個(gè)狀態(tài)(State)，每個(gè)狀態(tài)本身是一個(gè)小頁面，藉由控制狀態(tài)(State)的順序或隱藏/顯示Dynamic Panel來達(dá)成交互介面的整個(gè)表現(xiàn)。就像其它Widget一樣，Dynamic Pan

45、el可以用拖放的方式從Wireframe窗格加入到畫布中。學(xué)習(xí)Dynamic Panel的交互設(shè)計(jì)之前，有2個(gè)重要的概念必須先認(rèn)識：(1) Dynamic Panel (動(dòng)態(tài)面板)：一種透明的對象，本身可以包含很多個(gè)狀態(tài)(State)，而每個(gè)狀態(tài)都是一個(gè)小網(wǎng)頁。被放置在最上層的狀態(tài)就是該面板的長相。(2) State (狀態(tài))：每個(gè)狀態(tài)都是一個(gè)小網(wǎng)頁，而這個(gè)小網(wǎng)頁的邊界與大小，與所屬的Dynamic Panel大小相同。不同的State可以重迭在同一個(gè)Dynamic Panel里頭，唯有被控制放在最上層的State，才會呈現(xiàn)于Prototype的畫面中。以Axure RP所設(shè)計(jì)出來的多樣交互介

46、面，大多藉由各種觸發(fā)事件(Event)來控制Dynamic Panel顯示或消失，或控制哪個(gè)State在最上層來仿真出實(shí)際的交互介面。3. 編輯Dynamic Panel 的State(狀態(tài))已經(jīng)擺放到畫布中的Dynamic Panel，直接在上頭快速點(diǎn)鼠標(biāo)左鍵兩下，會開啟Dynamic Panel State Manager對話框。在這個(gè)對話窗口中，您可以新增State、更改State名稱、調(diào)整State排序、移除State與編輯State。在Dynamic Panel State Manager對話框中選擇一個(gè)Panel State，然后按下【Edit State】鈕，會開啟這個(gè)Panel

47、 State的Wireframe以供設(shè)計(jì)?；蛘吣梢赃x擇【Edit All States】鈕，一口氣把所有的狀態(tài)頁面通通開啟。開啟后，您就可以像設(shè)計(jì)其它Wireframe一樣的設(shè)計(jì)狀態(tài)頁面(State)， 每個(gè)狀態(tài)頁面的側(cè)邊藍(lán)色虛線外框就表示Dynamic Panel 的邊界。4. 預(yù)設(shè)Dynamic Panel的顯示/隱藏Dynamic Panel 可以預(yù)設(shè)為隱藏(Hidden)，作法是在Dynamic Panel 對象上按鼠標(biāo)右鍵，并選擇Edit Dynamic Panel->Set Hidden，這樣就可以隱藏Panel 的內(nèi)容，而且Dynamic Panel的屏蔽也會從藍(lán)色變成黃

48、色。已經(jīng)預(yù)設(shè)隱藏的Dynamic Panel，可以選擇Edit Dynamic Panel->Set Visible來顯示Dynamic Panel。Dynamic Panel 可以藉由接下來所介紹的交互模式，動(dòng)態(tài)控制在Prototype 中的顯示或隱藏。Axure RP提供交互設(shè)計(jì)的實(shí)現(xiàn)方式，都在 Interaction Case Properties對話框中設(shè)定 (請參考初級交互設(shè)計(jì))。其中有5種交互方式(Action)是專門用來控制Dynamic Panel的，分別是:· Set Panel state(s) to State(s)：將某個(gè)Dynamic Panel的St

49、ate設(shè)定為該P(yáng)anel的顯示狀態(tài) · Show Panel(s)：顯示(設(shè)為visible) 一或多個(gè)Dynamic Panel · Hide Panel(s)：隱藏一或多個(gè)Dynamic Panel · Toggle Visibility for Panel(s)：根據(jù)目前的顯示狀態(tài)來顯示或隱藏Dynamic Panel · Move Panel(s)：移動(dòng)Dynamic Panel，可根據(jù)絕對坐標(biāo)或相對坐標(biāo)來移動(dòng) 1. Axure RP實(shí)現(xiàn)更豐富的交互設(shè)計(jì)網(wǎng)站開發(fā)技術(shù)越來越豐富了，這是我們正在經(jīng)歷的過程，也是未來的趨勢。不管是AJAX或JavaSc

50、ript，甚至是Flash、Silverlight、JavaFX，這些都被歸類為RIA(Rich Internet Application)的技術(shù)，能夠讓網(wǎng)站介面更豐富，展現(xiàn)更優(yōu)質(zhì)的人機(jī)交互。同時(shí)，這個(gè)趨勢也挑戰(zhàn)了傳統(tǒng)的文書軟件或繪圖軟件，當(dāng)這些軟件受限于僅能表現(xiàn)單一畫面與單一狀態(tài)的情況下，您很難把心目中最友善的交互方式表達(dá)清楚并設(shè)計(jì)出來。Axure RP與其它的wireframe軟件，最大的差異在于能夠進(jìn)行交互設(shè)計(jì)(Interaction Design)，且可以立即將結(jié)果呈現(xiàn)于prototype上，而不是只有文字?jǐn)⑹?。更棒的一點(diǎn)是，學(xué)習(xí)Axure RP的交互設(shè)計(jì)，您并不需要學(xué)習(xí)HTML或Java Script語法，只要透過一些設(shè)定與操作，便可以完成多樣而創(chuàng)新的交互介面設(shè)計(jì)。在Axure RP設(shè)計(jì)出來的Prototype中，最簡單的交互設(shè)計(jì)是網(wǎng)頁連結(jié)，透過鼠標(biāo)的click來串起使用者與網(wǎng)站的交互流程。然而，真正發(fā)揮Axure RP在交互設(shè)計(jì)上的驚人特色，