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 Frame
Inline Frame Widget可用來加入Axure RP 目前不支援的內容，例如：Flash物件；只要在Inline Frame Widget上連續滑鼠左鍵兩下就可以讓您指定想要載入到框架的網頁，如果您要建立一個包含Flash物件的HTML 檔，您可以將檔案嵌入到Inline Frame中，這樣他就可以在Prototype中呈現了。
秘技四. 快速繪製網站架構圖：
以”Generate Flow Diagram”的功能，請看快速繪製網站架構圖 (Sitemap)教學影片。
(版權聲明：歡迎引用及複製Axure RP 中文教學內容，必須註明出處為悠識數位顧問有限公司及原始文章網址 UserXper.com)
張貼留言
* 為必填，您的email並不會被顯示