Axure RP操作手冊.doc

三. Axure RP基本操作(1) 認識Axure RP操作介面下圖是Axure RP 環(huán)境與介面中各區(qū)塊的簡單描述。主選單/工具列： 在主選單與工具列中，可以執(zhí)行常用的動作指令，例如：開啟與儲存檔案、輸出Prototype或Spec文件。Sitemap 窗格： Sitemap窗格將您所設計的網(wǎng)頁以樹狀結(jié)構(gòu)的方式呈現(xiàn)，您可以在這里新增、移除、重新命名和組織設計的網(wǎng)頁。Widgets窗格： 包含一系列常用的使用者介面對象，例如：按鈕、影像、Text Panel與矩形，您可以直接透過拖拉的方式來設計網(wǎng)頁。Masters窗格：在這里您可以新增、移除、重新命名和組織設計好的Master。Master是一種可以容納多項界面元素的集合樣板(Temlate)，您可以將常用的共享區(qū)塊設計成Master，未來在設計Wireframe時重復使用Master，來提高規(guī)劃的效率。Wireframe窗格： 您可以在這個窗格中設計網(wǎng)頁信息元素，編排內(nèi)容，設計介面，設計交互特性等等。未來可以將這些設計好的頁面，輸出成Prototype或Spec文件。交互設計 (Interaction) 窗格：交互的范圍很廣，從最基本的超級鏈接、pop-ups，一直到動態(tài)顯示和隱藏widget。您可以在這個窗格中定義Widget的交互。物件批注(Annotation) 窗格： 您可以為Widget加上批注來指定功能，您可以在這個窗格中增加和自訂Widget的批注。網(wǎng)頁說明及交互(Pages Notes & Interactions)窗格：您可以在這個窗格中加入網(wǎng)頁層級的說明與交互效果到設計中。1.定義Sitemap企劃一個網(wǎng)站或Web AP，在動手開始繪制網(wǎng)站頁面的示意圖(Wireframe)或流程圖之前，您應該事先思考網(wǎng)站架構(gòu)，并決定信息內(nèi)容與層級。當您心中已經(jīng)有了明確的網(wǎng)站架構(gòu)，接下來就可以利用Sitemap窗格來定義您所設計的網(wǎng)站頁面。Sitemap窗格是用來管理設計中網(wǎng)頁的工具，您可以在Sitemap 窗格中可以新增、刪除和調(diào)整網(wǎng)頁層級。新增/刪除網(wǎng)頁：想要新增網(wǎng)頁的話，請點選Sitemap 工具列上的【Add Child Page】鈕。 在網(wǎng)頁上按鼠標右鍵，然后選擇Rename Page或慢慢的在網(wǎng)頁上連續(xù)按鼠標左鍵兩下可編輯網(wǎng)頁名稱。 想要刪除網(wǎng)頁的話，請點選想要刪除的網(wǎng)頁，然后按下Sitemap 工具列上的【Delete Page】鈕，或是在網(wǎng)頁上按下鼠標右鍵，然后選擇Delete Page。調(diào)整網(wǎng)頁層級： 您可以將網(wǎng)頁從Sitemap 中拖曳到目標母網(wǎng)頁中來移動網(wǎng)頁位置，您也可以使用Sitemap 工具列上的箭頭按鈕來上下移動網(wǎng)頁，或改變網(wǎng)頁的階層。 開啟網(wǎng)頁：在 Sitemap中的任一網(wǎng)頁上連續(xù)按鼠標左鍵兩下，網(wǎng)頁會在Wireframe 窗格中開啟。2. 以介面物件(Widgets)繪制示意圖(Wireframe)介面物件(Widget)是用來設計Wireframe的使用者介面元素， 您可以在Widgets 窗格中找到一些常用的Wireframe Widget，例如：Button、Image和 Text Panel。 Axure RP 各種Widgets呈現(xiàn)效果，請參考Widgets效果總覽在Wireframe中新增介面物件(Widget):想在Wireframe中新增物件的話，只要從Widgets 窗格中將想要新增的物件 拖曳(drag&drop)到Wireframe窗格上就可以了。您也可以在Wireframe中利用復制(Ctrl+C)與貼上(Ctrl+V)的方式來新增物件。提醒: 熟悉PowerPoint操作方式的使用者剛開始可能不太習慣，因為Axure RP的操作方式類似Visio選擇圖形的作法，是利用拖放(Drag & Drop)的方式，跟PowerPoint是不一樣的。移動物件(Widget)在Wireframe中新增物件之后，您可以拖放Widget來移動的位置，拖曳Widget四周的控制點來改變Widget的大小。您也可以一次選取多個物件，一次改變所有被選取的物件的位置和大小。除此之外，您還可以在選取的Widget上按下鼠標右鍵，使用快捷菜單(context menu)來設定Widgets的群組(Grouping)、順序(Order)、對齊(Align)、分散(Distribute)與鎖定(Lock)；您也可以利用Object工具列來做這些設定，請先利用菜單View-Toolbars-Object將Object工具列叫出。編輯物件(Widget)的樣式與屬性編輯Widget的樣式與屬性有下列3種方式：a. 連續(xù)按鼠標左鍵兩下： 在Widget上連續(xù)按鼠標左鍵兩下可以讓您變更一些基本的Widget屬性，例如：在Image Widget上連續(xù)按鼠標左鍵兩下可以讓您匯入影像；在Droplist或List Box Widget上連續(xù)按鼠標左鍵兩下可以讓您編輯選單項目。 b. 工具列： 使用工具列可編輯Widget 的樣式，例如：外框色彩、填滿色彩、字型和字體大小。 c. 快捷菜單(Context Menu)： 在Widget上按下鼠標右鍵會出現(xiàn)快捷菜單，您可以透過菜單中的選項來設定Widget的特殊屬性，這些選項也會因Widget的類型而有所不同。3. 撰寫物件批注(Annotation )您可以在Wireframe中為任何物件(Widget)加上批注。 新增批注想要幫物件加上批注的話，請先選擇Wireframe中的物件，如圖箭頭1所示，被選取的物件呈現(xiàn)綠色框線狀態(tài)，然后在物件批注窗格(Annotations & Interactions Pane)的 Specification字段(箭頭2)，輸入對這個物件的解釋內(nèi)容，您也可以在窗格最上方的Label字段(箭頭3)輸入名稱來幫物件命名。 自定字段您可以透過菜單Wireframe - Customize Annotation Fields and Views，或是按一下Annotations & Interactions的標頭來自訂批注字段。腳注(Footnote)一旦在Widget上加上后，Widget 右上方會多一個黃色小方塊，里面有一個腳注號碼(Footnote number)，您可以在Widget上按下鼠標右鍵，使用Footnotes次菜單來增加或減少這個編號數(shù)字。4. 網(wǎng)頁說明(Page Notes)網(wǎng)頁說明可以用來收集網(wǎng)頁層級的描述或需求。撰寫網(wǎng)頁說明(Page Notes)網(wǎng)頁說明會被保留在Wireframe下方的窗格內(nèi)。管理網(wǎng)頁說明類別Axure RP本身預設的網(wǎng)頁說明類別是default，您可以透過新增額外的說明類別，輕易的區(qū)分出您自己的說明與要輸出到Prototype與規(guī)格中的說明。比如您可以新增Test Case，操作說明，SD等不同類別的網(wǎng)頁說明。而當您要輸出規(guī)格文件時，可以個別指定哪些種類的網(wǎng)頁說明要輸出到文件，如此一來，您就可以輸出專屬于Test Case, 操作說明或SD文件了。想要新增/編輯網(wǎng)頁說明類別的話，請點選菜單Wireframe-Manage Page Notes，或按一下Page Notes Default右方的向下箭頭并選擇Manage Page Notes，此時會出現(xiàn)Page Notes 對話框，利用這個對話框，您可以新增、移除、更名或重新排列說明字段。想要切換說明類別的話，請按一下Page Notes Default右方的向下箭頭，來選擇說明類別。 5. 秘技(Quick Tips)秘技一. 超快速挪動畫面：當您設計的網(wǎng)頁畫面變大時，為了選取不同位置的物件，您必須經(jīng)常使用垂直與水平的滾動條，這會使得選取物件的動作變慢。請試試這招，鼠標光標focus在Wireframe，按住鍵盤的空格鍵，這么一來就會切換成Hand tool，此時鼠標光標會切換成手狀，您可以用來抓著畫面任意滑動，而且不會打亂任何物件的位置，輕松愉快。秘技二. 穿透物件(Widget)選取下層的物件：以鼠標左鍵稍慢速度按一下物件，當您放開鼠標左鍵時，可以穿透上層物件，選取到位于下層的物件 。操作速度如下圖所示：秘技三. 引用Microsoft Office或其它軟件的物件：您可以利用復制/貼上(Coyp/Paste)的功能，將其軟件中的物件，例如：PowerPoint, Excel, Visio, Photoshop 與Illustrator貼到Axure RP中。一般來說，這些貼上的物件會變成Wireframe中的圖像物件。反之亦然，您也可以復制Axure RP中的物件或畫面，貼到其它軟件。秘技四. 單選群組(收音機按鈕群組 Radio Button Group)： 您可以一次選取多個Radio Button，按下鼠標右鍵，并選擇Edit Radio Button-Assign Radio Group來設定Radio Button的群組關系。如此一來，當這些Radio Button輸出到Prototype時，就會形成真正的單選使用者介面。 一. 認識Axure RP 二. 下載 / 安裝 o 安裝授權(quán)序號 三. Axure RP基本操作 o 示意圖及批注 o 初級交互設計 o 使用共享區(qū)塊 (Master) o 輸出網(wǎng)站/應用程序原型 o 輸出規(guī)格文件(Word) 四. 架構(gòu)圖&流程圖 o 1-click繪制架構(gòu)圖 o 流程圖&連接線 五. 中級交互設計 o 控制Dynamic Panel o 鼠標移入移出及圖像變換的交互設計 o 設計多層選單 首頁 在線教程 三. Axure RP基本操作 初級交互設計 初級交互設計1. 交互(Interaction)2. 定義基本連結(jié)3. 動作型態(tài)(Action)及實際動作(Action 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)的復雜行為，而且這些交互表現(xiàn)都可以在Prototype中執(zhí)行。觸發(fā)事件(Event)、假設條件(Case)、動作型態(tài)(Action)在Axure RP中的交互設計是由觸發(fā)事件(Event)、假設條件(Case)與動作型態(tài)(Action)所組成。當使用者對網(wǎng)頁進行某些人機介面的操作時，就會對網(wǎng)頁觸發(fā)一個事件(Event)。每一個觸發(fā)事件都可以有一或多個假設條件(Case)，例如，一個按鈕的OnClick 觸發(fā)事件可以有兩個假設條件：其中一個導引至某個網(wǎng)頁，另一個則導引至另一個網(wǎng)頁 。而每一個假設條件(Case)又可以執(zhí)行一或多個動作型態(tài)(Action)，舉例來說：Open Link in Current Window的動作就是一個基本連結(jié)。觸發(fā)事件(Event)目前Axure RP 5支持的人機介面觸發(fā)事件，及相對應的觸發(fā)事件(Event)名稱如下： 以鼠標點擊 OnClick 鼠標的指針移動到對象之上 OnMouseEnter 鼠標的指針移動出對象之外 OnMouseOut 鼠標的指針進入文字輸入狀態(tài) OnFocus 鼠標的指針離開文字輸入狀態(tài) OnLostFocus 敲鍵盤 OnKeyUp 瀏覽器加載網(wǎng)頁 OnPageLoad 大多數(shù)的對象，只具備最常見的三種觸發(fā)事件(Event) OnClick、OnMouseEnter 與OnMouseOut。某些特定的Widget的可觸發(fā)事件有些不同： Button對象只有OnClick。 Radio Button，CheckBox 這2種對象則具有OnFocus / OnLostFocus 觸發(fā)事件。 Text Field，Text Area這2種對象則具備 OnKeyUp / OnFocus / OnLostFocus 觸發(fā)事件。 Droplist，List Box這2種對象則具備 OnChange / OnFocus / OnLostFocus 觸發(fā)事件。 網(wǎng)頁加載瀏覽器時，則有 OnPageLoad觸發(fā)事件。(請參考5. 網(wǎng)頁層級的交互: OnPageLoad) 您不需要硬背上述的對象及對應的Event，在Axure RP的操作介面上，您只要點選對象，就可以查看Interaction窗格所顯示的對應Event。1. 認識共享區(qū)塊 (Master)共享區(qū)塊 (Master) 是一組在設計過程中可以重復使用的Widget，一些常用的Master包括了頁首(Header)、頁尾(Footer)與導覽(Navigation)， Master 可以被放置在網(wǎng)頁或是其它的Master中，只要Master做了修改，其它使用到這個Master的地方也會跟著修改。 我們也可以從其它的軟件/程序技術(shù)經(jīng)驗來認識Axure RP的Master。如果您熟悉PowerPoint的母片功能，那么Axure RP的Master功能，在”重復使用”的這一點特性上，有一點點類似PowerPoint的母片，但不完全是。如果您熟悉ASP或PHP程序語言的”Include”語法，或DreamWeaver的Template(DWT)，那么Axure RP的Master就是同樣的概念，您只要使用Master，其它頁面把Master放進來，就可以產(chǎn)生共享的特性。若想要提升企劃的速度跟效率，讓Axure RP在Web/AP規(guī)畫項目的效益展現(xiàn)出來，那么Master肯定是您必須要學會并熟練運用的功能。新增、組織與設計MasterMaster要在Masters 窗格中管理。想要新增Master的話，請按一下Masters窗格工具列上的【Add Master】鈕，或在窗格中按鼠標右鍵并選擇Add Master。Masters 窗格利用數(shù)據(jù)夾(Folder)來組織Master，然后透過工具列、快捷菜單或是拖拉的方式重新排列Master。在Master上連續(xù)按鼠標左鍵兩下可以開啟Master來進行設計，您可以像網(wǎng)頁一樣，將Widget拖拉到Wireframe中來設計Master。2. 套用 Master到網(wǎng)頁中想要在網(wǎng)頁或其它Master 的Wireframe 中套用Master，只要將Master窗格中的Master拖拉到Wireframe中即可。根據(jù)Master的特性， Master 對象會有淡紅或灰色的屏蔽，想要移除屏蔽的話，可以使用主選單中的Wireframe-Mask Masters功能。 Master預設的行為是Normal，您可以在Master上按鼠標右鍵，然后利用Behavior子選單將它變更為Place In Background或Custom Widget。Masters的行為說明如下： Normal: 可以被移動與放置在 Wireframe上的任何地方，對Master的變更會立即反映出來。Place in Background: Master被鎖定在Wireframe的最底層，所包含的Widget 與Master 位在相同的位置，通常在制作樣板(Template)時會用到這個功能。Custom Widget: 當Custom Widget放到Wireframe上時，Widget就會失去與Master的關聯(lián)，可以像一般Widget一樣被編輯，這個功能適合將經(jīng)常使用到的Widget，連同預設定義好的屬性、注釋和交互建立一個樣式庫(UI Design Pattern Library)，例如：白色文字的藍色按鈕。3. 應用實例Axure RP能夠快速提高網(wǎng)站策劃的效率，除了個人在單一網(wǎng)站項目上應用Master的功能，來大量減低重復編輯的工作之外，還可以利用Master的Custom Widget自訂對象的功能，來建立網(wǎng)站介面元素的介面庫(UI Design Pattern Library)。這里有一篇Axure RP應用于網(wǎng)站界面庫的實際案例 利用Axure封裝視覺標準，非常值得學習。4. 密技(Quick Tips)秘技一.在建立項目的初期就開始定義Master項目一開始啟動，如果可以稍微掌握哪些介面區(qū)塊未來將是共享區(qū)塊，那么就開始建立Master，比如網(wǎng)站的Header / Footer / 導覽選單(Navigation)，或者廣告版位等等。越早使用，越可以節(jié)省其它頁面設計的重復工作。至于如何判斷什么樣的介面區(qū)塊適合放在Master？您可以觀察自己會經(jīng)常把哪些區(qū)塊Copy/Paste到其它頁面去使用，那些經(jīng)常會被Copy/Paste的區(qū)塊，往往就是網(wǎng)站共享的區(qū)塊，就適合被設計到Master中。秘技二. 將所有頁面都套用Master(或移除Master)在您想要套用(或移除)的Master名稱上按鼠標右鍵，找到選單”Add to Pages.”及”Remove From Pages.”，就可以一次把想要套用Master的許多頁面，一次加完。反之，可以一口氣把不要的共享區(qū)塊，從許多頁面中快速移除。秘技三.使用數(shù)據(jù)夾(Folder)資料夾(Folder)可以幫助您分門別類整理Master，尤其是如果您想要建立Master library的話，這個功能絕對讓您事半功倍。您可以在Axure RP的Masters窗格第一個Icon (Add Folder)找到這個功能。秘技四.建立影像 Master在Master 中建立常用的影像(例如：icon圖標)有助于重復使用這些影像，您就不需要反復的復制貼上，或不斷的匯入影像文件，而且，如果您想要更換掉這個影像的話，也只需要在一個地方變更就好了。 編注： Axure RP的”Master”功能想要以中文精準表達有些困難。在PowerPoint中，Master被翻譯成”母片”，但是Axure RP如果把Master翻譯成”母片”，會失去Axure RP的Master多種功能的涵義。Axure RP的Master，可以是整頁的母片，這是一種型態(tài)。Axure RP的Master，也可以是Header區(qū)塊或Footer區(qū)塊，使用在很多頁面一起共享的時候，這是第二種型態(tài)。Axure RP的Master還可以當作獨立的Widget來使用，用來建立樣式庫Library。1. 什么是網(wǎng)站/應用程序原型 (HTML Prototype)?在Axure中完成有批注的Wireframe和Interaction之后，您可以產(chǎn)生可交互且支持多種瀏覽器的Web/AP原型(HTML Prototype)。(注: AP是Application的縮寫，通常指的是應用程序)Axure RP網(wǎng)站原型是由HTML和Javascript組成，可以在IE 6(或以上的版本)、Mozilla或Firefox中瀏覽。換句話說，觀看網(wǎng)站原型的人僅需要一般瀏覽器，不需要安裝Axure RP。如下圖范例所示。解除IE中的Active X 警告訊息：使用IE開啟在自己計算機里頭的HTML Prototype檔案時，瀏覽器中可能會出現(xiàn)Active X 警告訊息，想要暫時解除IE中的警告訊息，請點選IE瀏覽器出現(xiàn)的Active X警示訊息，接著選擇允許被封鎖的內(nèi)容，這樣子就可以在IE瀏覽器上看到自己計算機里頭的HTML Prototype了。想要永久解除Active X警告訊息，請參考秘技一。2. 輸出網(wǎng)站原型/格式設定想要輸出原型或設定(Configure HMTL Prototype)輸出格式的話，請按下Axure RP軟件上方主功能選單Generate菜單，選擇Prototype(F5)?；蚴前聪鹿ぞ吡兄械腜rototype鈕，系統(tǒng)會開啟Configure HTML Prototype對話框，并顯示預設的原型輸出格式設定，您可透過這個對話框來設定輸出原型的格式。格式設定中的選項可分成下面幾區(qū)：General：在Destination Folder處輸入網(wǎng)站原型的HTML檔案的存放位置，因為Axure RP的網(wǎng)站原型包含許多檔案，最好指定一個windows檔案系統(tǒng)內(nèi)的檔案夾來存放。Notes(網(wǎng)頁說明)：選擇和排序想要顯示在網(wǎng)站原型中的網(wǎng)頁層級說明。Annotations(物件批注)：選擇和排序想要顯示在網(wǎng)站原型中的批注字段。Interactions (交互)：指定交互的行為，例如：指定是否需要預設顯示條件描述(case)，或是只在多個條件存在的情形才顯示。Distribution：選擇是否產(chǎn)生CHM 檔。Advanced：選擇是否將Text Panel轉(zhuǎn)成影像，這是一個舊版本的功能，現(xiàn)在很少有需要這樣處理。初次輸出原型，您可以直接使用預設的設定值，除了指定輸出的檔案夾之外，不用費心去調(diào)整。或者當您完成網(wǎng)站原型輸出格式的設定，只要按一下【Generate】鈕就可將這個Prototype輸出了。如果您越來越熟練，您可以兩個動作就完成網(wǎng)站原型的輸出了，第一個動作是按下【F5】，接著再按下【Generate】。3.展示與操作網(wǎng)站原型Axure RP輸出的網(wǎng)站原型(HTML Prototype) 總共可區(qū)分成三個框架。左側(cè): Sitemap 框架您可以按Sitemap中的網(wǎng)頁列表，循序展示網(wǎng)站原型中的任何一個網(wǎng)頁。如果您不需要顯示左側(cè)的Sitemap，那么就應該底部: 網(wǎng)頁說明(Page Notes)框架這個框架顯示該網(wǎng)頁的文字說明，這些文字說明來自于您寫在網(wǎng)頁批注(Page Notes)的文字。中間: 主框架主框架包含了Wireframe和流程圖，Wireframe是可以交互的，舉例來說，按一下設定有網(wǎng)頁連結(jié)的按鈕，那么就會連結(jié)到所設定的網(wǎng)頁。您也可以按一下加有附注的Widget旁邊的黃色便利貼小Icon圖示來檢視批注。4. 分享原型檔案給其它人因為Axure RP的Prototype是標準的HTML、Javascript和影像文件，所以您的同事和客戶不需要安裝Axure RP或任何播放器就可以直接檢視Prototype。發(fā)布Prototype的方式有很多種，以下是三種不同的分享方式的介紹。a. 放到網(wǎng)站服務器第一種方式是發(fā)布網(wǎng)站原型的HTML Prototype到Web Server上，您只要將網(wǎng)址給客戶或工作伙伴其它人，他們在他們的瀏覽器上瀏覽Prototype。b. 壓縮成Zip檔第二種方式是將包含Prototype檔案的檔案夾壓縮成Zip檔，然后將Zip檔寄給相關的人。收到檔案的人，將Zip檔解壓縮后，便可以直接在自己的計算機瀏覽HTML Prototype，通常是開啟 index.html或從 XXX_Start.html檔開始瀏覽 (XXX指的是該RP Project的名稱)。c. CHM 檔第三種方式是產(chǎn)生包含Prototype的CHM檔，就像zip檔一樣，這種方式讓您可以檔案的方式發(fā)布Prototype，而且不需要安裝任何軟件來檢視。CHM是Microsoft HTML Help檔的格式，所以大多數(shù)的Windows計算機已經(jīng)安裝了瀏覽器，使用者只要在檔案上連續(xù)按兩下鼠標左鍵就可以檢視它。想要將Prototype輸出成CHM檔的話，請在Configure HTML Prototype對話框中，進入Distribute區(qū)，勾選Create HTML Help File(.chm)選項。如果您目前已經(jīng)安裝的Microsoft系統(tǒng)中沒有HTML Help Workshop的話，就必須安裝它才能產(chǎn)生CHM檔，您可從這里免費下載，一旦完成安裝以后，所安裝的數(shù)據(jù)夾中將會出現(xiàn)一個hhc.exe的檔案，按一下Locate hhc.exe來告訴Axure RP這個程序在計算機中的位置。一旦Prototype和.chm檔產(chǎn)生之后，您將會在存放Prototype的數(shù)據(jù)夾中找到一個 .chm檔，您現(xiàn)在就可以將 .chm檔發(fā)布出去，讓接收者在HTML Help檢視器中檢視。秘技(Quick Tips)秘技一. 只更新現(xiàn)在開啟的頁面到網(wǎng)站原型：當您設計網(wǎng)站原型的技巧越純熟，網(wǎng)站項目會越來越大，導致輸出網(wǎng)站原型的時間會隨著項目而變大。萬一您只是調(diào)整其中的某一頁，卻得等待整個網(wǎng)站重新全部輸出，那就太浪費時間了。想要重新產(chǎn)生某一頁網(wǎng)頁，只要在Axure RP打開該頁Wireframe，接著按下Axure RP主功能選單Generate菜單，選擇Regenerate Current Page to Prototype(CTRL+F5)(如下圖)。當您選擇這個動作，或者直接按下熱鍵CTRL+F5，Axure RP不會產(chǎn)生任何對話窗口，您只會感覺到鼠標指針閃了一下，此時，再回到網(wǎng)站原型(HTML Prototype)上去reload這一頁，或click這一頁網(wǎng)頁名稱，就會看到已經(jīng)更新的頁面了。秘技二. 關閉IE中的Active X 警告訊息：使用IE瀏覽器在自己的計算機上開啟存放于檔案夾中的HTML Prototype時，瀏覽器中可能會出現(xiàn)Active X 警告訊息，想要永久解除IE中的警告訊息，請點選工具菜單中的Internet選項，切換到高級標簽頁中，找到安全的設定中，勾選允許活動內(nèi)容在我的計算機上的文件中運行*選項即可 (如上圖)。秘技三. 嵌入外部Flash檔案Inline FrameInline Frame Widget可用來加入Axure RP 目前不支持的內(nèi)容，例如：Flash物件；只要在Inline Frame Widget上連續(xù)鼠標左鍵兩下就可以讓您指定想要加載到框架的網(wǎng)頁，如果您要建立一個包含F(xiàn)lash對象的HTML 文件，您可以將檔案嵌入到Inline Frame中，這樣他就可以在Prototype中呈現(xiàn)了。1. 什么是規(guī)格文件 (Specification)?在Axure RP 中設計完Wireframe之后，我們可以輸出Microsoft Word格式的需求書或功能性規(guī)格文件(Specification)。輸出Word格式規(guī)格文件之前，您的計算機必須事先安裝好Microsoft Word 2000或更新的版本。如果您在設計Wireframe的同時，也把需求說明或規(guī)格敘述寫在網(wǎng)頁說明(Page Notes)或Widget的對象批注(Annotations)，輸出成規(guī)格文件時，Axure RP會自動幫您匯整文字數(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ī)格文件/格式設定想要輸出規(guī)格文件或設定(Configure Specification)輸出格式的話，請按下Axure RP軟件上方主功能選單Generate菜單，選擇Specification(F6)?；蚴前聪鹿ぞ吡兄械腟pecification鈕，系統(tǒng)會開啟Configure Word 2007 Specification或Configure Word 2000 Specification對話框，并顯示預設的規(guī)格文件輸出格式，您可透過這個對話框來設定其它格式。如同輸出網(wǎng)站原型(HTML Prototype)一樣，需求書或規(guī)格書也可依不同的用途進行設定，比如設定一種格式專門給客戶確認需求及規(guī)格，設定另一種格式專門產(chǎn)生測試計劃與測試步驟，再另外設定一種格式用來介紹操作步驟。如果您不另外指定輸出格式，可以直接按下【Generate】來輸出規(guī)格書，您唯一須留意的是輸出文件名稱(Destination File)必須是一個文件名稱，比如 Untitled.docx (Word 2007格式) 或 Untitled.doc (Word 2000格式)，不能只給目錄名稱?？梢员徽{(diào)整設定的項目包括，Pages(網(wǎng)頁)相關 / Masters(共享區(qū)塊)相關 / Notes(網(wǎng)頁說明)相關/ Screenshot (畫面)相關/ Annotations (對象批注)相關 / Widgets(對象)相關 / Word Template (Word文件樣板)相關。套用Word文件樣板可以客制化您輸出的規(guī)格文件，讓文件的呈現(xiàn)更專業(yè)，您也可以事先設定好前言以及附錄文件，比如封面，附錄或簽名頁。您可以修改Word模板來配置規(guī)格中的文字樣式，變更文件的排版或加入頁首或頁尾。一但您設定好規(guī)格文件格式，請按一下【Generate】鈕來產(chǎn)生這份規(guī)格。3. 秘技(Quick Tips)秘技一. 只要把必要的項目輸出到規(guī)格文件中規(guī)格文件輸出時如果選擇輸出的項目太細，很有可能會產(chǎn)出一份好幾百頁的Word檔案，而難以閱讀。因此，輸出之前，最好透過格式的設定將不需要的項目取消勾選，保留有意義的部份。秘技二. 預設規(guī)格文件標題改成中文將Axure RP預設格式的文件標題改成中文，比如將Pages格式設定的 Section Header名稱 Pages 改成 網(wǎng)站策劃說明 ，把 Page Tree 改成 網(wǎng)頁列表；或者把Screenshot格式設定的 Section Header名稱User Interface 改成 網(wǎng)頁畫面。如此一來輸出成規(guī)格文件時，會更方便閱讀這些段落標題。1. Axure RP實現(xiàn)更豐富的交互設計網(wǎng)站開發(fā)技術(shù)越來越豐富了，這是我們正在經(jīng)歷的過程，也是未來的趨勢。不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，這些都被歸類為RIA(Rich Internet Application)的技術(shù)，能夠讓網(wǎng)站介面更豐富，展現(xiàn)更優(yōu)質(zhì)的人機交互。同時，這個趨勢也挑戰(zhàn)了傳統(tǒng)的文書軟件或繪圖軟件，當這些軟件受限于僅能表現(xiàn)單一畫面與單一狀態(tài)的情況下，您很難把心目中最友善的交互方式表達清楚并設計出來。Axure RP與其它的wireframe軟件，最大的差異在于能夠進行交互設計(Interaction Design)，且可以立即將結(jié)果呈現(xiàn)于prototype上，而不是只有文字敘述。更棒的一點是，學習Axure RP的交互設計，您并不需要學習HTML或Java Script語法，只要透過一些設定與操作，便可以完成多樣而創(chuàng)新的交互介面設計。在Axure RP設計出來的Prototype中，最簡單的交互設計是網(wǎng)頁連結(jié)，透過鼠標的click來串起使用者與網(wǎng)站的交互流程。然而，真正發(fā)揮Axure RP在交互設計上的驚人特色，并不是只有連結(jié)這么簡單的交互，您可以藉由學習Dynamic Panel (動態(tài)面板)對象的操作與控制，來做到更豐富更友善的交互介面設計。2. 認識Dynamic Panel WidgetDynamic Panel (動態(tài)面板) 這種對象是專門用在設計Prototype動態(tài)功能的Widget，Dynamic Panel可以包含一或多個狀態(tài)(State)，每個狀態(tài)本身是一個小頁面，藉由控制狀態(tài)(State)的順序或隱藏/顯示Dynamic Panel來達成交互介面的整個表現(xiàn)。就像其它Widget一樣，Dynamic Panel可以用拖放的方式從Wireframe窗格加入到畫布中。學習Dynamic Panel的交互設計之前，有2個重要的概念必須先認識：(1) Dynamic Panel (動態(tài)面板)：一種透明的對象，本身可以包含很多個狀態(tài)(State)，而每個狀態(tài)都是一個小網(wǎng)頁。被放置在最上層的狀態(tài)就是該面板的長相。(2) State (狀態(tài))：每個狀態(tài)都是一個小網(wǎng)頁，而這個小網(wǎng)頁的邊界與大小，與所屬的Dynamic Panel大小相同。不同的State可以重迭在同一個Dynamic Panel里頭，唯有被控制放在最上層的State，才會呈現(xiàn)于Prototype的畫面中。以Axure RP所設計出來的多樣交互介面，大多藉由各種觸發(fā)事件(Event)來控制Dynamic Panel顯示或消失，或控制哪個State在最上層來仿真出實際的交互介面。3. 編輯Dynamic Panel 的State(狀態(tài))已經(jīng)擺放到畫布中的Dynamic Panel，直接在上頭快速點鼠標左鍵兩下，會開啟Dynamic Panel State Manager對話框。在這個對話窗口中，您可以新增State、更改State名稱、調(diào)整State排序、移除State與編輯State。在Dynamic Panel State Manager對話框中選擇一個Panel State，然后按下【Edit State】鈕，會開啟這個Panel State的Wireframe以供設計?；蛘吣梢赃x擇【Edit All States】鈕，一口氣把所有的狀態(tài)頁面通通開啟。開啟后，您就可以像設計其它Wireframe一樣的設計狀態(tài)頁面(State)， 每個狀態(tài)頁面的側(cè)邊藍色虛線外框就表示Dynamic Panel 的邊界。4. 預設Dynamic Panel的顯示/隱藏Dynamic Panel 可以預設為隱藏(Hidden)，作法是在Dynamic Panel 對象上按鼠標右鍵，并選擇Edit Dynamic Panel-Set Hidden，這樣就可以隱藏Panel 的內(nèi)容，而且Dynamic Panel的屏蔽也會從藍色變成黃色。已經(jīng)預設隱藏的Dynamic Panel，可以選擇Edit Dynamic Panel-Set Visible來顯示Dynamic Panel。Dynamic Panel 可以藉由接下來所介紹的交互模式，動態(tài)控制在Prototype 中的顯示或隱藏。Axure RP提供交互設計的實現(xiàn)方式，都在 Interaction Case Properties對話框中設定 (請參考初級交互設計)。其中有5種交互方式(Action)是專門用來控制Dynamic Panel的，分別是: Set Panel state(s) to State(s)：將某個Dynamic Panel的State設定為該Panel的顯示狀態(tài) Show Panel(s)：顯示(設為visible) 一或多個Dynamic Panel Hide Panel(s)：隱藏一或多個Dynamic Panel Toggle Visibility for Panel(s)：根據(jù)目前的顯示狀態(tài)來顯示或隱藏Dynamic Panel Move Panel(s)：移動Dynamic Panel，可根據(jù)絕對坐標或相對坐標來移動 1. Axure RP實現(xiàn)更豐富的交互設計網(wǎng)站開發(fā)技術(shù)越來越豐富了，這是我們正在經(jīng)歷的過程，也是未來的趨勢。不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，這些都被歸類為RIA(Rich Internet Application)的技術(shù)，能夠讓網(wǎng)站介面更豐富，展現(xiàn)更優(yōu)質(zhì)的人機交互。同時，這個趨勢也挑戰(zhàn)了傳統(tǒng)的文書軟件或繪圖軟件，當這些軟件受限于僅能表現(xiàn)單一畫面與單一狀態(tài)的情況下，您很難把心目中最友善的交互方式表達清楚并設計出來。Axure RP與其它的wireframe軟件，最大的差異在于能夠進行交互設計(Interaction Design)，且可以立即將結(jié)果呈現(xiàn)于prototype上，而不是只有文字敘述。更棒的一點是，學習Axure RP的交互設計，您并不需要學習HTML或Java Script語法，只要透過一些設定與操作，便可以完成多樣而創(chuàng)新的交互介面設計。在Axure RP設計出來的Prototype中，最簡單的交互設計是網(wǎng)頁連結(jié)，透過鼠標的click來串起使用者與網(wǎng)站的交互流程。然而，真正發(fā)揮Axure RP在交互