Axure RP基本操作.doc

Axure RP基本操作(1) 認識Axure RP操作介面下圖是Axure RP 環境與介面中各區塊的簡單描述。1.主選單/工具列：在主選單與工具列中，可以執行常用的動作指令，例如：開啟與儲存檔案、輸出Prototype或Spec文件。2. Sitemap窗格：Sitemap窗格將您所設計的網頁以樹狀結構的方式呈現，您可以在這裡新增、移除、重新命名和組織設計的網頁。3. Widgets窗格：包含一系列常用的使用者介面物件，例如：按鈕、影像、Text Panel與矩形，您可以直接透過拖拉的方式來設計網頁。4. Masters窗格：在這裡您可以新增、移除、重新命名和組織設計好的Master。Master是一種可以容納多項介面物件集合的樣板(Temlate)，您可以將常用的物件組合設計成Master，未來在設計Wireframe時重複使用Master，來提高規劃的效率。5. Wireframe窗格：您可以在這個窗格中設計網頁資訊元素，編排內容，設計介面，設計互動特性等等。未來可以將這些設計好的頁面，輸出成Prototype或Spec文件。6.網頁說明/互動/格式(Pages Notes & Interactions & Formatting)窗格：您可以在這個窗格中加入網頁層級的說明與互動效果到設計中，也可以改變頁面格式、調整成素描效果(Sketch Effects)等。7.物件屬性(Widget Properties)窗格： 物件註解(Annotation)：您可以為Widget加上註解來指定功能，您可以在這個窗格中增加和自訂Widget的註解。 互動設計(Interaction)：互動的範圍很廣，從最基本的超連結、pop-ups，一直到動態顯示和隱藏widget。您可以在這個窗格中定義Widget的互動。 物件格式(Formatting)：您可以為Widget改變字體、樣式及群組等，也可以在此手動輸入數值改變物件的位置。8.動態面板管理(Dynamic Panel Manager)窗格：可以在此窗格管理當下編輯頁面中所有的Dynamic Panel。示意圖及圖解1.定義Sitemap2.以介面物件(Widgets)繪製示意圖(Wireframe)3.撰寫物件註解(Annotation )4.撰寫網頁說明(Page Notes )5.秘技(Quick Tips)1.定義Sitemap企劃一個網站或Web AP (注: AP是Application的縮寫，通常指的是應用程式)，在動手開始繪製網站頁面的示意圖(Wireframe)或流程圖之前，您應該事先思考網站架構，並決定資訊內容與層級。當您心中已經有了明確的網站架構，接下來就可以利用Sitemap窗格來定義您所設計的網站頁面。Sitemap窗格是用來管理設計中網頁的工具，您可以在Sitemap 窗格中可以新增、刪除和調整網頁層級。新增/刪除網頁：想要新增網頁的話，請點選Sitemap工具列上的【Add Child Page】鈕。在網頁上按滑鼠右鍵，然後選擇Rename Page或慢慢的在頁面名稱上連續按滑鼠左鍵兩下可編輯網頁名稱。想要刪除網頁的話，請點選想要刪除的網頁，然後按下Sitemap 工具列上的【Delete Page】鈕，或是在網頁上按下滑鼠右鍵，然後選擇Delete Page。調整網頁層級：您可以將網頁從Sitemap 中拖曳到目標母網頁中來移動網頁位置，您也可以使用Sitemap 工具列上的箭頭按鈕來上下移動網頁，或使用左右箭頭按鈕改變網頁的階層。開啟網頁：在 Sitemap中的任一網頁上連續按滑鼠左鍵兩下，網頁會在Wireframe 窗格中開啟。2. 以介面物件(Widgets)繪製示意圖(Wireframe)介面物件(Widget)是用來設計Wireframe的使用者介面元素， 您可以在Widgets 窗格中找到一些常用的Wireframe Widget，例如：Button、Image和 Text Panel。在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的樣式與屬性有下列4種方式：a. 連續按滑鼠左鍵兩下：在Widget上連續按滑鼠左鍵兩下可以讓您變更一些基本的Widget屬性，例如：在Image Widget上連續按滑鼠左鍵兩下可以讓您匯入影像；在Droplist或List Box Widget上連續按滑鼠左鍵兩下可以讓您編輯選單項目。b. 工具列：使用工具列可編輯Widget 的樣式，例如：外框色彩、填滿色彩、字型和字體大小。c. 快顯功能表(Context Menu)：在Widget上按下滑鼠右鍵會出現快顯功能表，您可以透過功能表中的選項來設定Widget的特殊屬性，這些選項也會因Widget的類型而有所不同。d. 物件格式(Formatting)：在選取您想要編輯的Widget後，可在Widget Properties下的Formatting窗格修改該Widget的屬性及樣式，例如：在Button Shape Widget裡輸入一些文字後，想要讓邊框與文字間有留白的效果，您可以透過Formatting窗格編輯padding的效果。 想要讓頁面上Widget呈現一致的效果，工具列中的Format Painter讓您可以方便地複製物件格式來套用到別的Widget。選取您要複製格式的物件，按下Format Painter開啟對話框後，勾選您要複製的格式類別，再按下Copy。接著直接選取您要套用格式的物件，按下Apply。 若希望直接更改物件(Widget)預設的樣式，可以開啟工具列上的Widget Style Editor。更動後，這將會影響到所有選用該類型的介面物件。3. 撰寫物件註解(Annotation )您可以在Wireframe中為任何物件(Widget)加上註解。新增註解想要幫物件加上註解的話，請先選擇Wireframe中的物件(如箭頭所示)，被選取的物件呈現藍色框線狀態，然後在物件屬性(Widget Properties)窗格的物件註解(Annotation)中的Description欄位(箭頭2)，輸入對這個物件的解釋內容，您也可以在窗格最上方的Label欄位(箭頭3)輸入名稱來幫物件命名。自定欄位您可以透過功能表Wireframe - Customize Annotation Fields and Views，或是按一下Annotations的Customize連結來自訂註解欄位。註腳(Footnote)一旦在Widget上加上註解後，Widget 右上方會多一個黃色小方塊，裡面有一個註腳編號(Footnotes)，您可以在Widget上按下滑鼠右鍵，使用Footnotes次功能表來增加或減少這個編號數字，也可以直接在箭頭4的地方修改編號。4. 網頁說明(Page Notes)網頁說明可以用來收集網頁層級的描述或需求。撰寫網頁說明(Page Notes)網頁說明會被保留在Wireframe下方的窗格內。您也可以使用主工具欄或標準的捷徑，用粗體、斜體、底線、字體和字體顏色等來改變網頁說明的格式。在產出的Word規格文件中，仍然會先遵從網頁說明的這些格式，去定義您的Word版型。管理網頁說明類別Axure RP本身預設的網頁說明類別是default，您可以透過新增額外的說明類別，輕易的區分出您自己的說明與要輸出到Prototype與規格中的說明。比如您可以新增Test Case、操作說明、SD等不同類別的網頁說明。而當您要輸出規格檔時，可以個別指定哪些種類的網頁說明要輸出到規格檔，如此一來，您就可以輸出專屬於Test Case, 操作說明或SD文件了。想要新增/編輯網頁說明類別的話，請點選功能表Wireframe-Manage Page Notes，或點擊Manage Notes(如箭頭所示)，此時會出現Page Notes對話方塊，利用這個對話方塊，您可以新增、移除、更名或重新排列說明欄位。想要切換說明類別的話，請按一下左側的下拉式選單，來選擇說明類別。5. 秘技(Quick Tips)秘技一. 超快速挪動畫面-按住空白鍵，用滑鼠挪動頁面：當您設計的網頁畫面變大時，為了選取不同位置的物件，您必須經常使用垂直與水準的捲軸，這會使得選取物件的動作變慢。請試試這招，滑鼠游標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時，就會形成單選的Button。初級互動設計1. 互動(Interaction)2. 定義基本連結3. 動作型態(Action)及實際動作(Action Description)4. 多重條件(Multiple Cases )5. 網頁層級的互動: OnPageLoad6. 秘技(Quick Tips)1. 互動(Interaction)Interactions窗格是用來定義Widget在Wireframe中的互動表現方式，互動表現的方式包含簡單的連結到Rich Internet Application (RIA)的複雜行為，而且這些互動表現都可以在Prototype中執行。觸發事件(Event)、假設條件(Case)、動作型態(Action)在Axure RP中的互動設計是由觸發事件(Event)、假設條件(Case)與動作型態(Action)所組成。當使用者對網頁進行某些人機介面的操作時，就會對網頁觸發一個事件(Event)。每一個觸發事件都可以有一或多個假設條件(Case)，例如，一個按鈕的OnClick 觸發事件可以有兩個假設條件：其中一個導引至某個網頁，另一個則導引至另一個網頁 。而每一個假設條件(Case)又可以執行一或多個動作型態(Action)，舉例來說：Open Link in Current Window的動作就是一個基本連結。觸發事件(Event)目前Axure RP 5支援的人機介面觸發事件，及相對應的觸發事件(Event)名稱如下： 以滑鼠點擊 OnClick 滑鼠的指標移動到物件之上 OnMouseEnter 滑鼠的指標移動出物件之外 OnMouseOut 滑鼠的指標進入文字輸入狀態 OnFocus 滑鼠的指標離開文字輸入狀態 OnLostFocus 敲鍵盤 OnKeyUp 瀏覽器載入網頁 OnPageLoad大多數的物件，只具備最常見的三種觸發事件(Event) OnClick、OnMouseEnter 與OnMouseOut。某些特定的Widget的可觸發事件有些不同： Button物件只有OnClick。 Radio Button，CheckBox 這2種物件則具有OnFocus / OnLostFocus 觸發事件。 Text Field，Text Area這2種物件則具備 OnKeyUp / OnFocus / OnLostFocus 觸發事件。 Droplist，List Box這2種物件則具備 OnChange / OnFocus / OnLostFocus 觸發事件。 網頁載入瀏覽器時，則有 OnPageLoad觸發事件。您不需要硬背上述的物件及對應的Event，在Axure RP的操作介面上，您只要點選物件，就可以查看Interaction窗格所顯示的對應Event。2. 定義基本連結下列步驟說明如何新增一個基本連結到Button Widget。加入基本連結最快的方法就是按一下Interactions窗格中的Quick Link，彈出Sitemap窗格的網頁清單後，你可以為選定的物件(Widget)指定連結到哪一個網頁。如果不是透過Quick Link的話，那麼請按照下列步驟(對照下圖) 進行互動的設定。步驟一：指定物件於畫布中放置一個Button Widget並選取它。步驟二：新增假設條件(Add Case)在 Interactions窗格中選擇OnClick ，並點選Add Case (或在OnClick上連續按滑鼠左鍵兩下)以增加一個假設條件(Case)到按鈕的OnClick觸發事件，這時會出現Interaction Case Properties對話窗，您可以在此處選擇想要執行的動作。步驟三：選擇動作型態(Select Action)在Interaction Case Properties對話窗的Step 2. Select Actions，勾選Open Link in Current Window這個動作型態。步驟四：編輯實際動作(Edit Action Description)按一下Interaction Case Properties對話窗的下方，step 3 的Link ，並選擇實際執行動作時要開啟的網頁。3. 動作型態(Action)及實際動作(Action Description)除了基本連結之外，Axure RP還提供了許多的動作型態，這些動作都可以在任何觸發事件的假設條件中被執行。你可以同時指定一種/多種動作型態(Action)之後，接著定義實際動作(Action Description)，這樣子才能完成展現在Prototype上的一個/多個實際動作。以下是 Axure RP 5.0版所提供的動作型態 (Action)：1. Open link in Current Window開啟網頁2. Open link in Popup Window開啟網頁在Popup視窗3. Open link in Parent Window開啟網頁在Parent視窗4. Close Current Window關閉目前視窗5. Open link in Frame開啟網頁在inline frame中6. Set Panel state(s) to State(s)指定某個Dynamic Panel的顯示狀態7. Show Panel(s)顯示Dynamic Panel8. Hide Panel(s)隱藏Dynamic Panel9. Toggle Visibitdty for Panel(s)切換Dynamic Panel顯示或隱藏10. Move Panel(s)移動Dynamic Panel11. Set Variable and Widget value(s) equal to Value(s)設定變數或Widget 的值12. Open link in Parent Frame開啟網頁在上層內嵌框架中13. Scroll to Image Map Region捲動畫面到Image Map的位置14. Enable Widget(s)把Widgets變成可用狀態15. Disable Widget(s)把Widgets變成變成不可用狀態16. Wait Time(s)動作之前先等候(毫秒)17. Other以文字說明來描述實際動作4. 多重假設條件(Multiple Cases)一個觸發事件(Event)可以加入多個假設條件(Multiple Cases)，以進行不同條件判斷的差異化流程或互動表現。舉例來說，您可以在一個按鈕的OnClick觸發事件中加入兩個假設條件，第一個假設條件 Case 1 命名為 “If Yes，選擇這個假設條件時會開啟第一頁；第二個假設條件 Case 2 命名為 If No，選擇這個假設條件時會開啟第二頁。當按紐在Prototype中被按下時，會顯示出這兩個條件的說明(If Yes 與If No)，此時點選其中一個條件的說明，就會執行該條件所關連的動作。使用條件說明可以有效溝通條件流程，但是，如果需要建立一個高親合力的Prototype，則必需在條件中定義條件邏輯，根據在表單Widget中輸入的值或變數值來執行動作。5. 網頁層級的互動: OnPageLoadAxure RP支援一個網頁層級的觸發事件(Event)-OnPageLoad，這個觸發事件發生在Prototype載入網頁時。OnPageLoad 互動必須在Page Notes 窗格的Interactions 窗格中定義，加入假設條件的方式與在Widget中相同。6. 秘技(Quick Tips)秘技一. 快速連結(Quick Link)選擇 Widget ，然後按一下Interactions 窗格中的Quick Link並選擇目標網頁，可以快速地在Widget中加入一個基本連結。秘技二. 連結外部實際網址或網頁你可以讓prototype的hyperlink動作去連結到外部的實際網址或網頁。如果使用Axure RP 5.0版在Link Properties對話方塊中指定網頁連結的時候，勾選Link to an external url or file選項，然後在Hyperlink欄位指定一個外部實際網址的URL。如果使用Axure RP 4.6版在Link Properties對話方塊中指定網頁連結的時候，取消勾選Link to a page in this design選項，然後在Hyperlink欄位指定一個外部實際網址的URL。秘技三. 重複應用類似的互動設計如果你要進行一連串類似的互動設定，可以在Interaction窗格上，對著某個Case按滑鼠右鍵選擇Copy的動作，然後到你想加上互動設定的另一個Case，以滑鼠右鍵選Paste動作，然後再修改這個新的互動設定。如此一來，就可以更快速的完成物件的互動設定。使用共用區塊 (Master)1. 認識共用區塊 (Master)2. 套用 Master到網頁中3. 應用實例4. 秘技 (Quick Tips)1. 認識共用區塊 (Master)共用區塊 (Master) 是一組在設計過程中可以重複使用的Widget，一些常用的Master包括了頁首(Header)、頁尾(Footer)與導覽(Navigation)， Master 可以被放置在網頁或是其他的Master中，只要Master做了修改，其他使用到這個Master的地方也會跟著修改。我們也可以從其他的軟體/程式技術經驗來認識Axure RP的Master。如果您熟悉PowerPoint的母片功能，那麼Axure RP的Master功能，在重複使用的這一點特性上，有一點點類似PowerPoint的母片，但不完全是。如果您熟悉ASP或PHP程式語言的Include語法，或DreamWeaver的Template(DWT)，那麼Axure RP的Master就是同樣的概念，您只要使用Master，其他頁面把Master放進來，就可以產生共用的特性。若想要提升企劃的速度跟效率，讓Axure RP在Web/AP規畫專案的效益展現出來，那麽Master肯定是您必須要學會並熟練運用的功能。新增、組織與設計MasterMaster要在Masters 窗格中管理。想要新增Master的話，請按一下Masters窗格工具列上的【Add Master】鈕，或在窗格中按滑鼠右鍵並選擇Add Master。Masters 窗格利用資料夾(Folder)來組織Master，然後透過工具列、快顯功能表或是拖拉的方式重新排列Master。在Master上連續按滑鼠左鍵兩下可以開啟Master來進行設計，您可以像網頁一樣，將Widget拖拉到Wireframe中來設計Master。2. 套用 Master到網頁中想要在網頁或其他Master 的Wireframe 中套用Master，只要將Master窗格中的Master拖拉到Wireframe中即可。根據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的關聯，可以像一般Widget一樣被編輯，這個功能適合將經常使用到的Widget，連同預設定義好的屬性、註釋和互動建立一個樣式庫(UI Design Pattern Library)，例如：白色文字的藍色按鈕。3. 應用實例Axure RP能夠快速提高網站企劃的效率，除了個人在單一網站專案上應用Master的功能，來大量減低重複編輯的工作之外，還可以利用Master的Custom Widget自訂物件的功能，來建立網站介面元素的介面庫(UI Design Pattern Library)。4. 密技(Quick Tips)秘技一.在建立專案的初期就開始定義Master專案一開始啟動，如果可以稍微掌握哪些介面區塊未來將是共用區塊，那麼就開始建立Master，比如網站的Header / Footer / 導覽選單(Navigation)，或者廣告版位等等。越早使用，越可以節省其他頁面設計的重複工作。至於如何判斷什麼樣的介面區塊適合放在Master？您可以觀察自己會經常把哪些區塊Copy/Paste到其他頁面去使用，那些經常會被Copy/Paste的區塊，往往就是網站共用的區塊，就適合被設計到Master中。秘技二. 將所有頁面都套用Master(或移除Master)在您想要套用(或移除)的Master名稱上按滑鼠右鍵，找到選單”Add to Pages.”及”Remove From Pages.”，就可以一次把想要套用Master的許多頁面，一次加完。反之，可以一口氣把不要的共用區塊，從許多頁面中快速移除。秘技三.使用資料夾(Folder)資料夾(Folder)可以幫助您分門別類整理Master，尤其是如果您想要建立Master library的話，這個功能絕對讓您事半功倍。您可以在Axure RP的Masters窗格第一個Icon (Add Folder)找到這個功能。秘技四.建立影像 Master在Master 中建立常用的影像(例如：icon圖示)有助於重覆使用這些影像，您就不需要反覆的複製貼上，或不斷的匯入影像檔，而且，如果您想要更換掉這個影像的話，也只需要在一個地方變更就好了。輸出網站/應用程式原型1. 什麼是網站/應用程式原型 (HTML Prototype)?2. 輸出網站原型/格式設定3. 展示與操作網站原型4. 分享原型檔案給其他人5. 秘技(Quick Tips)1. 什麼是網站/應用程式原型 (HTML Prototype)?在Axure中完成有註解的Wireframe和Interaction之後，您可以產生可互動且支援多種瀏覽器的Web/AP原型(HTML Prototype)。(注: AP是Application的縮寫，通常指的是應用程式)Axure RP網站原型是由HTML和Javascript組成，可以在IE 6(或以上的版本)、Mozilla或Firefox中瀏覽。換句話說，觀看網站原型的人僅需要一般瀏覽器，不需要安裝Axure RP。如下圖範例所示。解除IE中的Active X 警告訊息：使用IE開啟在自己電腦裡頭的HTML Prototype檔案時，瀏覽器中可能會出現Active X 警告訊息，想要暫時解除IE中的警告訊息，請點選IE瀏覽器出現的Active X警示訊息，接著選擇允許被封鎖的內容，這樣子就可以在IE瀏覽器上看到自己電腦裡頭的HTML Prototype了。想要永久解除Active X警告訊息，請參考密技一。2. 輸出網站原型/格式設定想要輸出原型或設定(Configure HMTL Prototype)輸出格式的話，請按下Axure RP軟體上方主功能選單Generate功能表，選擇Prototype(F5)。或是按下工具列中的Prototype鈕，系統會開啟Configure HTML Prototype對話方塊，並顯示預設的原型輸出格式設定，您可透過這個對話方塊來設定輸出原型的格式。格式設定中的選項可分成下面幾區：General：在Destination Folder處輸入網站原型的HTML檔案的存放位置，因為Axure RP的網站原型包含許多檔案，最好指定一個windows檔案系統內的檔案夾來存放。Notes(網頁說明)：選擇和排序想要顯示在網站原型中的網頁層級說明。Annotations(物件註解)：選擇和排序想要顯示在網站原型中的註解欄位。Interactions (互動)：指定互動的行為，例如：指定是否需要預設顯示條件描述(case)，或是只在多個條件存在的情形才顯示。Distribution：選擇是否產生CHM 檔。Advanced：選擇是否將Text Panel轉成影像，這是一個舊版本的功能，現在很少有需要這樣處理。初次輸出原型，您可以直接使用預設的設定值，除了指定輸出的檔案夾之外，不用費心去調整。或者當您完成網站原型輸出格式的設定，只要按一下【Generate】鈕就可將這個Prototype輸出了。如果您越來越熟練，您可以兩個動作就完成網站原型的輸出了，第一個動作是按下【F5】，接著再按下【Generate】。3.展示與操作網站原型Axure RP輸出的網站原型(HTML Prototype) 總共可區分成三個框架。左側: Sitemap 框架您可以按Sitemap中的網頁列表，循序展示網站原型中的任何一個網頁。如果您不需要顯示左側的Sitemap，那麼就應該底部: 網頁說明(Page Notes)框架這個框架顯示該網頁的文字說明，這些文字說明來自於您寫在網頁註解(Page Notes)的文字。中間: 主框架主框架包含了Wireframe和流程圖，Wireframe是可以互動的，舉例來說，按一下設定有網頁連結的按鈕，那麼就會連結到所設定的網頁。您也可以按一下加有附註的Widget旁邊的黃色便利貼小Icon圖示來檢視註解。4. 分享原型檔案給其他人因為Axure RP的Prototype是標準的HTML、Javascript和影像檔，所以您的同事和客戶不需要安裝Axure RP或任何播放器就可以直接檢視Prototype。發佈Prototype的方式有很多種，以下是三種不同的分享方式的介紹。a. 放到網站伺服器第一種方式是發佈網站原型的HTML Prototype到Web Server上，您只要將網址給客戶或工作夥伴其他人，他們在他們的瀏覽器上瀏覽Prototype。b. 壓縮成Zip檔第二種方式是將包含Prototype檔案的檔案夾壓縮成Zip檔，然後將Zip檔寄給相關的人。收到檔案的人，將Zip檔解壓縮後，便可以直接在自己的電腦瀏覽HTML Prototype，通常是開啟 index.html或從 XXX_Start.html檔開始瀏覽 (XXX指的是該RP Project的名稱)。c. CHM 檔第三種方式是產生包含Prototype的CHM檔，就像zip檔一樣，這種方式讓您可以檔案的方式發佈Prototype，而且不需要安裝任何軟體來檢視。CHM是Microsoft HTML Help檔的格式，所以大多數的Windows電腦已經安裝了瀏覽器，使用者只要在檔案上連續按兩下滑鼠左鍵就可以檢視它。想要將Prototype輸出成CHM檔的話，請在Configure HTML Prototype對話方塊中，進入Distribute區，勾選Create HTML Help File(.chm)選項。如果您目前已經安裝的Microsoft系統中沒有HTML Help Workshop的話，就必須安裝它才能產生CHM檔，您可從這裡免費下載，一旦完成安裝以後，所安裝的資料夾中將會出現一個hhc.exe的檔案，按一下Locate hhc.exe來告訴Axure RP這個程式在電腦中的位置。一旦Prototype和.chm檔產生之後，您將會在存放Prototype的資料夾中找到一個 .chm檔，您現在就可以將 .chm檔發佈出去，讓接收者在HTML Help檢視器中檢視。秘技(Quick Tips)秘技一. 只更新現在開啟的頁面到網站原型：當您設計網站原型的技巧越純熟，網站專案會越來越大，導致輸出網站原型的時間會隨著專案而變大。萬一您只是調整其中的某一頁，卻得等待整個網站重新全部輸出，那就太浪費時間了。想要重新產生某一頁網頁，只要在Axure RP打開該頁Wireframe，接著按下Axure RP主功能選單Generate功能表，選擇Regenerate Current Page to Prototype(CTRL+F5)(如下圖)。當您選擇這個動作，或者直接按下熱鍵CTRL+F5，Axure RP不會產生任何對話視窗，您只會感覺到滑鼠指標閃了一下，此時，再回到網站原型(HTML Prototype)上去reload這一頁，或click這一頁網頁名稱，就會看到已經更新的頁面了。秘技二. 關閉IE中的Active X 警告訊息：使用IE瀏覽器在自己的電腦上開啟存放於檔案夾中的HTML Prototype時，瀏覽器中可能會出現Active X 警告訊息，想要解除IE中的警告訊息，請點選工具功能表中的網際網路選項，切換到進階標籤頁中，找到安全性的設定中，勾選第二項允許主動式內容在我的電腦上的檔案中執行*選項即可 (如圖)。秘技三. 嵌入外部Flash檔案Inline FrameInline Frame Widget可用來加入Axure RP 目前不支援的內容，例如：Flash物件；只要在Inline Frame Widget上連續滑鼠左鍵兩下就可以讓您指定想要載入到框架的網頁，如果您要建立一個包含Flash物件的HTML 檔