軟件中有不完善的地方，要靠自己的經驗來規避和克服，還算好用。
熟練了Axure，對軟件設計文檔的編寫大有幫助，因爲可以有一些界面圖出來。
畫界面圖時多用Axure，畫流程圖時多用Visio，爲的是熟練Axure，並且Axure畫界面要簡便許多，節約時間。
範本複用
masters和sitemap面板很相似，文檔操作也一樣，它們的本質區別是，sitemap裏的檔是最終展示頁面，masters裏的文件卻只是一個模塊，是頁面的一個部分。
masters的英文直譯是主人或僱主，但是我認爲這裏可以叫做模板，或者複用模塊。masters的文件，是頁面中重複的模塊，由於在不同頁面中這些模塊是一樣的，所以拿出來作爲一個模塊編輯，然後在不同頁面中進行調用。
這 個功能類似於網頁程序開發中的程序複用，不同頁面中調用同一段程序，一般把這段程序單獨做成一段頁面程序，然後用include命令進行調用。 master的檔就相當於這段被調用的頁面程序。dreamweaver也有類似的功能，就是template，可以參照理解。
一、功能條
master的功能條功能基本和sitemap一模一樣，功能也基本一樣。唯一不同的是master可以創建檔夾，可以通過檔夾收納不同的檔，因此唯一不同的就是第一個功能按鈕，功能作用是增加一個檔夾。
behavior是行爲的意思，這個功能是axure升級到4版本後加入的，是針對master的不同使用情況而添加的一個功能，也是要重點介紹的功能。
1、normal：普通檔。就是一般的複用檔。是默認創建的複用文件。
2、place in background：定位的複用模板，這類模板的特點是定位於頁面的底層，並且鎖定模板中的widgets在他原來創建的位置。這類複用模塊主要用於創建head、foot、側邊欄等明確定位的複用模塊。
3、custom widgets behavior：自定義模塊。這類模塊就類似於自創了一個widgets。
這類模塊與其它類型的複用模塊的不同在於，其它模塊與複用到頁面的模塊是完全相同的，模塊的功能設置是什麼，功能說明是什麼，頁面中的模塊設置和功能說明就是什麼。
而自定義模塊與頁面中被複用的模塊是母子關係。自定義模塊只決定了模塊的功能和位置，但是進入到特定的頁面中，模塊中的各自部分的說明和功能可以重新定義。
充分理解三種不同類型的複用模塊的區別，根據不同環境有效的選擇，也是非常重要的。
四、右鍵單擊文件——其它
1、2、3功能都是文文件文文件操作功能，和sitemap一樣，分別是刪除、重命名和編輯master。
4、5功能是對應的。前者是將所選範本文件批量運用於頁面，後者是將所選範本文件，批量從頁面中去除。通過選擇此功能，會彈出sitemap文件的樹形目錄，你可以通過選擇需要添加模板的頁面，從而完成模板使用或移除。
check all：選擇所有頁面
uncheck all：所有頁面都不選擇
check all children：選擇所選頁面以及其所有子頁面
uncheck all children：不選擇所選頁面以及其所有字頁面
在4中有特殊的position設置和options命令，
position中有兩個命令
place in blackground：將檔至於頁面背景
specify location：是特殊定位，可以通過設置距離左側和上邊的距離，來將模板文件放入特定的位置。
options裏的多選框的意思是“只有頁面中沒有此模板時才置入”，默認是選擇的。如果不選擇而置入頁面，就會出現如果頁面中已經有模板，模板被再次置入的情況。當然如果有特殊需要的模塊，就可以這麼使用了。
6、usage report：使用報告，點擊後彈出面板，顯示所有使用了此複用模板的列表，顯示的是文件名稱，通過雙擊文件名，可以在工作區打開，直接編輯。
（五）widgets工具-上
Axure RP的widgets工具欄，就是我們用來畫線框圖wireframe、流程圖flow的工具，也可以說是組成我們最終輸出圖表的零件。好比我們小時候玩 的組裝積木，這些工具就是組裝積木裏的一個個小部件，組成什麼？組合得怎樣？完全依靠個人的經驗和智慧。因此，熟悉每一個工具的用法和用途，才能隨心所欲 的畫出腦海中的圖形。
Widgets工具欄，下分兩類工具：
wireframe線框圖工具：基本上對應着web頁面中的各種圖形。針對頁面中交互行爲的表達，Axure RP專門增加了image map region 圖像映像區、dynamic panel動態面版、menu（vertical/horizontal）水平/垂直菜單等幾個特殊的工具。
Flow工具：流程圖所需的基本圖形框架。
我們先談wireframe線框圖工具。學習這部分工具，如果事先有html基礎，或者對web頁面元素有比較充分的理解，就很容易入手。以下我根據圖片中的編碼，依次講解。
1、image圖片：給wireframe中插入一個圖片站位，也可以直接置入真實的圖片。
2、text panel文本：插入文本。相當於插入了一個< text >標籤。是不帶鏈接的文本。但是其實也可以帶鏈接，在interactions中我們會提到。
3、hyperlink超鏈接：插入帶鏈接的文本。相當於插入了一段帶< a >卷標的文字。但其實在Axure中它與普通文本除了外型不同，沒有本質區別。
之所以將兩類文字區分開來，目的還是爲了在視覺表達中讓人直觀的理解鏈接文本和普通文本，而這對於設計人員理解也非常重要，因此建議畫圖時儘量標準的區分鏈接文本和普通文本。
4、rectangle矩形：插入一個矩形。可以對其進行圖形樣式編輯。此圖形通常被用來表達板塊的邊界。
5、placeholder佔位符：插入一個佔位符。佔位符通常用來表達在頁面中某些特殊區域，比如情況複雜，或者在系統升級中不需要修改，又或者無關緊要的區域等等。作者需要結合說明文字，進行對應的詳細表達。
6、button按鈕：插入一個按鈕，相當於< button >卷標。按鈕一般結合窗體使用，當然也可以作爲強化的提示鏈接使用。
7、 teble表格：插入一個表格。Axure的表格使用起來不是很方便，增加行、列，修改行、列寬度都不方便，算是一個敗筆。期待在下一個版本的時候能夠有 更好的進步。與標準化製作網頁一樣，表格的使用在畫wireframe的時候就應該明確其作用，是用來作爲數據列表展示使用，而不是作爲網頁佈局的控件。
8、text field文本輸入框：結合窗體使用。一般用作窗體中提交數據。比如搜索框、用戶登錄框、註冊信息填寫框等。用作字段提交或單行數據提交。
9、text area文本區：結合窗體使用。一般用作大段文字編輯、提交。比如文章編輯、留言等板塊。
10、droplist下拉列表框：結合窗體使用。一般用作下拉菜單或者下拉列表選項，比如在搜索中，可以通過下拉列表框來定位搜索分類的範圍。也有人用它來做友情鏈接，可以通過下拉選擇直接進行頁面跳轉。
11、listbox列表選擇框：結合窗體使用。通過文本框列表選項，通常使用在多項列表選擇，比如在填寫簡歷表的時候，選擇你所感興趣的行業，會提供列表選擇框。不過列表選擇框都會結合按鈕使用。
12、checkbox多項選擇：多項選擇通常使用在窗體中，以提供多項選擇。比如在有些有些註冊要求用戶選擇興趣愛好，會提供十多個選項，因爲選項可以並列進行，因此使用的是多項選擇。
13、raido button單項選擇：在一組選擇中選擇適合選項，選項關係非此即彼。比如在填寫性別的時候提供男女選擇，用戶非男即女，只取一項。當然，不排除再多提供一個雙性選擇，這樣就是三選一，但是同樣是非此即彼的單一選擇。
14、15、horizontal line水平線、vertical line垂直線：用以分割頁面中的不同板塊區域。由於web頁面中只能存在垂直與水平線，爲了系統生成用於演示的html檔，特將兩種線條分開使用。
16、button shape形狀按鈕：相當於圖形按鈕，多用於導航，或者多幀切換的版面切換按鈕。可進行邊角編輯。
17、 image map region圖像映像區：它用於在web頁面中製造一片不可見的區域，一般是圖片的部分區域，相當於圖片的熱區，從而添加說明與互動。在現實的網頁中經常 會有一張大圖中有某個區域是觸發按鈕，而圖像映像區就可以用來說明這個區域的的功能和互動內容。
18、inline frame框架：類似於html中的< iframe >對象。用於在頁面中製造頁面框架，每個框架中嵌入不同的頁面。我們經常看到後臺系統分左右兩欄，一般都是使用了框架，左側加載的是導航頁面，右側是加載的管理頁面。
Axure的缺點是，暫時不支持百分比，因此iframe都是按像素度量的，和實際頁面效果還是有差距。
19、 dynamic panel動態面版：是Axure爲了表現多幀區域內容而製造的一個工具。它的圖標很形象的說明了它的結構。它是不同的state迭加的一個動態區域，默 認顯示其中一個state，當用戶觸發按鈕、圖片或者下拉列表等時，可以設置相應動態面版切換到不同的state。不同state的關係，類似於 photoshop的層，也類似於html中的css屬性layer。
我們可以通過右擊dynamic panel進行state編輯，然後通過打開對應state進行編輯，編輯方式和編輯頁面相同。
20、21、menu（vertical/horizontal）水平/垂直菜單：用於製作水平或者垂直的菜單，可以添加漂浮的的子菜單，添加方法很簡單，就是選擇所要添加的菜單項，添加submenu。
（六）widgets工具-下
對於畫流程圖，是我們經常會遇到的問題。我們和程序工程師溝通，用再多的口水，也無法挑明的事情，畫一張簡明的流程圖，就能很直白的說明關鍵問題。
有 時候你可能會懊惱，因爲程序員的思維猶如計算機，你告訴他爲什麼沒有用，你就告訴他該怎麼做，是左是右，是0是1就好了。這個時候，產品經理需要的是理性 思維，清晰的思路，如果你不清晰，工程師大多數會跟着你的思路亂做一團。所以多畫幾個流程，多根據頁面需求畫清晰的流程，就能解決實際的問題。
話不多說，本章主要介紹flow裏面的工具，因爲圖形其實很好介紹，簡單的英文翻譯就好了，所以也順帶說說這些圖形在流程裏的作用。方式還和以前一樣，編號，對號入座，咱們來一個蘿蔔，一個坑：
1、rectangle：矩形
作用：一般用作要執行的處理（process），在程序流程圖中做執行框。
在axure中如果是畫頁面框架圖，那麼也可以指代一個頁面。有時候我會把頁面和執行命令放在同一個流程中做說明，這個時候將兩類不同的矩形做色彩區別，然後做說明就好了。
2、rounded rectangle：圓角矩形或者扁圓
作用：表示程序的開始或者結束，在程序流程圖中用作爲起始框或者結束框。
3、beveled rectangle：斜角矩形
作用：斜角矩形我幾乎不使用，可以視情況自行定義。或者在其它的流程圖中，有特殊含義，暫不知曉，也希望有識之士指點一二。
4、diamond：菱形
作用：表示決策或判斷（例如：If...Then...Else）,在程序流程圖中，用作判別框。
5、file：文件
作用：表達爲一個檔，可以是生成的檔，或者是調用的檔。如何定義，需要自己根據實際情況做解釋。
6、bracket：括號
作用：註釋或者說明，也可以做條件敘述。一般流程到一個位置，做一段執行說明，或者特殊行爲時，我會用到它。
7、semicircle：半圓形
作用：半圓在使用中常作爲流程頁面跳轉、流程跳轉的標記。
8、triangle：三角形
作用：控制傳遞，一般和線條結合使用，畫數據傳遞。
9、trapezoid：梯形
作用：一般用作手動操作。
10、ellipse：橢圓形或圓形
作用：如果畫小圓，一般是用來表示按順序數據的流程。
如果是畫橢圓形，很多人用作流程的結束。如果是在use case用例圖中，橢圓就是一個用例了。
11、hexagon：六邊形
作用：表示準備之意，大多數人用作流程的起始，類似起始框。
12、parallelogram：平行四邊形
作用：一般表示數據，或確定的數據處理。或者表示數據輸入（Input）。
13、actor：角色
作用：來自於use case 用例，模擬流程中執行操作的角色是誰。需要注意的時，角色並非一定是人，有時候是機器自動執行，有時候也可是是模擬一個系統管理。
14、database：數據
作用：就是指保存我們網站數據的數據庫。
15、image：圖片
作用：表示一張圖片，或者置入一個已經畫好的圖片、流程或者一個環境。
基本上，axure講基本流程圖、頁面框架圖、use case 用例圖涉及到的一些關鍵圖形都囊括在flow流程工具中，模糊了流程圖的區別，而儘量貼近交互設計時的工作內容。
流程圖無疑只是一個表達的工具，我們在使用的時候應該根據自己的實際情況使用，而不應該死鑽牛角尖，非要知道某個圖形的通用標準。理解和溝通是第一位的。而對於某些具有標準性含義的圖形，大家人所共知，則我們應該遵循共同的準則，這樣就能達到表達的目的。
其 實axure裏面由於不涉及到具體的程序流程，所以有些標準的圖形並沒有提供，如不規則圖形、側面雙矩形等，大家可以自己google一下或者baidu 一下很容易就知道。大多數情況下，還是自己自定義一下自己的符號標準，就跟prd文檔加上名詞解釋一樣，纔是解決方法。
（七）註釋annotations
Axure rp將interaction交互與annotations註釋說明功能放在了一個面版上，同時又針對整個頁面有一個交互與註釋說明。
交 互功能設置的是用戶通過不同方式觸發頁面中元素或者加載頁面時，發生的交互動作。而註釋說明則用文字詳細說明對應元素的細節或頁面的說明。由於針對整個頁 面的說明和交互，與針對頁面中某個元素的說明與交互在文檔表現和生成的不同，而被分開，但是他們的實際功能是一致的，可以一起來說。
針對頁面和針對頁面元素的功能，分別默認處於軟件接口的右側和底側。如下面兩張圖片所示：
底部
右側
對於交互與註釋說明，有必要分開講述。這一節主要講述annotations，即註釋說明。
首先，我定義一下對交互與註釋說明的解釋。
Interaction：交互功能，用以設置頁面中的交互事件，如頁面跳轉、面版跳轉。從而實現框架圖中不同對象的實際功能。在生成html框架頁面時，產生相應的對象功能，用以演示操作。
Annotations：註釋說明，用以對頁面或頁面中的特定對象進行說明註釋。可以根據實際情況分類編寫說明內容。比如優先級、功能類型、交互效果、說明等。讓程序在開發的時清楚瞭解該對象或該頁面的程序實現詳情與細節。
那麼，現在重點來說註釋。
1、自定義註釋與說明
你 也許看到e文會頭大，你也許第一次看到annotations面版中specification、status、benefit、effect等一連串的 英文單詞腦袋發暈，那麼我告訴你，你完全不用在意這些單詞和選項的意義，因爲也許它們根本就不適合你，而你可以自定義一套自己的說明選項。
生成word文檔：我們也可以生成word的文檔的說明文件，這樣的檔甚至可以當作PRD文檔使用，而說明則會根據label的標籤以及編號，對應生成table說明文檔。
生成word的快捷鍵是F6，生成specification說明書。
綜上所述，運用好了annotations，就可以解決好prd文檔中最重要的工作，即功能說明。至於設置怎樣的註釋，完全就靠你自己來掌控了。
Ps：頁面notes更加簡單，因爲針對頁面的說明只能有一段文本，不存在特殊說明字段的編輯。
（八）交互interactions（上）
Axure RP Pro5終於發佈了，直觀操作上，最明顯的變化之一就是在命令行多了“share.分享”，其次所有窗口可以以浮動形式編輯了。爲了與時俱進，以後的教程將以Axure RP Pro5爲基礎來繼續寫。
我們來對它添加交互行爲。
我把交互分爲三個部分的：交互觸發、交互條件、交互行爲。這樣的區分，其實是參考程序編程的結構而做的，這就把程序構成人性化、語義化了。
這章我着重講解交互觸發與交互行爲中的快速鏈接，詳情的交互行爲與交互條件留待後面兩章進行詳解。還是照例先給三個名詞做出名詞解釋。
交互觸發：是發生交互的導火索，說明引起交互的觸發動作是什麼。
以此文字鏈爲例，交互的觸發原因，是“點擊文字鏈”。
交互條件：是達成我們目標行爲的前提條件。如果目標行爲只有一個，對觸發沒有任何條件限制，交互條件則可以被忽略。
再以此文字鏈接爲例，如果對查看文章列表沒有任何限制，則不設置交互條件，用戶點擊文字鏈，直接發生交互行爲。如果對查看文章列表有權限限制，只允許作者查看，則觸發交互行爲的條件就是“以文章作者hawking的身份登錄”。
PS：有條件本身，就必然會有條件的反面。或者有多個條件，就會有多個條件之外的例外情況。在寫文檔的時候，必須考慮進去，說明清楚，這一點最容易疏漏，而造成程序員在開發的時候想當然，或者再回來問你。針對這個例子，條件的反面就是“登錄者不是hawking，或沒有登錄”。
交互行爲：是機器依據觸發事件與條件，做出的反應動作或行動。
此文字鏈接的的交互行爲，就是“頁面跳轉到hawking 的 axure rp 5 文章列表頁面”。
一、交互觸發
觸發主要有兩種，一種是頁面加載觸發，一種是鼠標行爲觸發。
1、頁面加載觸發，針對的對象就是我們所編輯的頁面，axure將其放在了page notes&page interactions面版中。如下圖所示，就是page interactions。
Axure暫時僅支持一種頁面觸發條件，就是OnPageLoad當頁面載入時。
如圖所示，針對我們設置的case事件，axure提供了三個功能。
Add case：給所選對象增加事件。
Edit case：編輯所選事件。（功能前提，選擇你索要編輯的事件，比如鼠標選擇case 1）。
Delete case：刪除所選事件。（功能前提，選擇你索要編輯的事件，比如鼠標選擇case 1）。
2、鼠標行爲觸發是當用戶使用鼠標操作接口時，引發交互。
Axure支持的鼠標觸發行爲根據你所選擇的對象不同而不同，選擇圖形、文字、鏈接會出現三種觸發行爲：
Onclick：當鼠標點擊目標時，觸發交互行爲。
OnMouseEnter：當鼠標移入目標熱區時，觸發交互行爲。
OnMouseOut：當鼠標從目標熱區移出時，觸發交互行爲。
如果選擇的是輸入框、多選框等則會出現對應功能的觸發行爲：
OnKeyUp：Fires when the user releases a key.當釋放鍵盤時觸發交互行爲。
OnFocus：當鼠標選擇、聚焦到對象時，觸發交互行爲。
OnLostFocus：當鼠標失去對目標對象的選擇、聚焦時，觸發交互行爲。
特別的，選擇下拉列表、列表框會出現：
Onchange：當所選項被更改時，觸發交互行爲。
而選擇我們所編輯的對象後，如果對象之前沒有編輯過交互事件，則有兩個選項
Add case：給所選對象增加事件。
Quick link：快速添加鏈接。
如果曾經編輯過交互事件，則有三個功能，和頁面加載觸發是一樣的，這裏也就不再累述。
二、交互行爲—快速鏈接
選擇好交互觸發後，在對交互沒有特定條件設置的前提下，我們可以直接設置此次觸發引起的交互行爲。由於鏈接跳轉是網頁中最常用的交互行爲，因此axure特意提供了一個快速鏈接的功能。
選擇對象後，點擊快速鏈接則會彈出如下link properties 鏈接屬性面版：
如圖所示，此面版中有四條可選命令：
1、link to a page in this design：鏈接到這個項目中的某一特定頁面。
你可以通過鼠標點擊，選擇你想要跳轉的，樹型目錄中的相應頁面。
2、link to an external url or file：鏈接到一個外部鏈接或者文件。
你可以通過在hyperlink框中輸入鏈接地址，完成鏈接導向。
注意：鏈接最好是絕對鏈接地址，不然就容易出錯。
3、reload current page：重新加載當前頁面。
Variable changes are applied變量變化生效。
4、back to previous page：返回瀏覽前一頁面。
Varable changes are not applied變量變化不生效。
（八）交互interactions（中）
本章要介紹的是交互條件。交互條件是axure的學習中的難點，也是axure高段進階功能。其實我們不設置條件，直接靠文字說明，也可以完成我們的思想傳達，如果你設計的原型文檔，能模擬真實的交互環境，當然就非常優秀了。
但是，我要強調一點觀點，傳達思想是首要的工作，傳達思想也是有成本的，如果爲了傳達思想要耗費更多無意義的勞動，損耗更多的時間，增加更多的溝通難度，不要也罷！我個人覺得，我們在做原型設計的時候，有沒有必要把頁面模擬到和真實情況一模一樣，這個還值得探討。
言歸正傳，開始來說設置 交互條件。
一、進入 交互條件設置
當我們選擇好了交互觸發，通過雙擊選擇促發動作，或者點擊add case ，就會彈出interaction case properties 交互事件屬性窗口。
通過這個面板，我們要表達我們偉大的交互行爲。面板告訴了我們三步策略：
Step1 description 描述
描述後的input輸入框，可以編寫事件的名稱，或者事件的描述文字，以供生成html頁面展示時標註此事件，也供生成需求文文件的時候辨識此功能功能。
Add condition （if necessary）增加條件（如果需要的話）。這就是這章所要說的重點內容，爲我們要創建的交互事件，設置前提條件。我想，axure在這裏添加這麼一 句話，也許同樣是在提醒我們，我們把交互做到如此之細，是否真的必要？思考清楚了目的，考慮準確了我們需要投入的精力，再開始做這一步。我想會清晰很多。
Step2 select action 選擇動作
Step3 edit the actions description（click an underlined value to edit）編輯動作描述，你可以通過點擊有下劃線的文字，編輯動作的具體參數。
第二步與第三步，就是我下一章要說的交互行爲，或者叫交互動作也可以。第二步是選擇我們要進行的動作，第三步則是爲我們的動作設置具體的參數。這些我們稍後再看，還是先來了解下，我們可以怎麼設置條件。
二、條件設置的功能與細節
點擊step 1 後面帶下劃線的文字，add condition，彈出condition builder條件設置 窗口
條件設置窗口也分三個部分：
A、滿足條件類型選擇與條件清理
我們可以同時設置多個條件，但是我們是需要滿足所有條件，還是僅僅滿足其中一個條件就可以了呢？
在satisfy “any / all”of the following 中就提供了這個選擇。
選擇all，則需要滿足我們設置的所有條件；假設，你設置了條件a、b、c，則你需要同時滿足條件a、b、c，才能產生最後的交互。
選擇any，就是需要滿足我們設置的任一條件。假設，你設置了條件a、b、c，則你需要滿足a、b、c中任何一個條件，就能產生最後的交互。
另外，如果我們對我們設置的衆多條件都不滿意，想全部刪除重新設置，clear all 就是爲了滿足我們這一需要的按鈕。
B、設置具體條件
a)增加條件與刪除條件。
初始默認我們只有一個條件，通過點擊條件末尾的“-”、“+”按鈕，我們可以刪除、添加新的條件。
b)條件設置
注意：在設置條件前，需要給條件所涉及的widgets對象設置label名稱，因爲條件設置，需要用label定位widgets。
條件設置分五個部分，但是其實只需要將其看做三個部分。爲什麼這麼說呢？這是我的深刻教訓，我在寫這篇攻略的時候走了一段比較長的彎路，最後才發現自己的錯誤，所以也非常希望朋友們不走我一樣的彎路。下面且聽我道來。
我最開始把條件設置看做5個部分，1是作爲條件類型的設置，則2是設置要比較的對象，3是比較方式，然後根據你選擇的對象，後面4、5會分別出現不 同的可比較條件或設置條件。這樣理解是沒有錯的，但是就繞了一個非常大的彎路，而且表述起來要逐條羅列，非常繁瑣。所以一開始，我根據1可能出現的六種類 型，畫了6個大表格，企圖把所有的情況囊括，做了很多無用功。
現在我們嘗試把它理解爲三個部分，那麼怎麼理解呢？
細心的人可能發現了，3是設置的比較方式，可以是等於，也可以是不等於，或者是大於小於。而左右兩邊是被比較的兩個對象。
對了，這就是關鍵，1、2設置的是條件的比較方，我們把它看做a，4、5是條件的被比較方，我們把它看做b，而3就是比較方式。而我們要做的工作就是設置a與b的關係。
但是設置比較關係是有原則的，就是數值可以和數值比較，區域選擇狀態可以和區域選擇狀態比較。我們不可能設置讓一個變量，等於一個區域被選擇的狀態。所以根據a的不同，b的可選項也會相應的改變，但是他們的內容基本上是一致的。
|
比較對象類型 |
比較針對目標 |
注意 |
|
check state of 多項/單項選擇框的選擇狀態 |
多項選擇（checkbox）、單項選擇（radio button）。注意：這裏會顯示頁面上的多項選擇、單項選擇的label名稱，所以做頁面工作的時候，要保持有效命名label的好習慣，以下不再累述。 |
此項目只能與選擇狀態比較，或者value of variable變量值比較，不能與其它類型的對象比較。這是最特殊的一項，以下不再做強調。 |
|
selected option of 所選擇的菜單 |
下拉菜單條droplist或者list box列表文本框。這裏也是顯示你所設置的label名稱 |
|
|
value of variable 變數的值 |
Onloadvariable系統默認的變量 |
|
|
Add new..自己新增一個變量 |
||
|
如果你設置了其它變量，這裏會提供選擇 |
||
|
length of variable value 變數值的長度 |
同上 |
|
|
check state of多項/單項選擇框的選擇狀態 |
這裏會提供文本輸入框input、文本框text供你選擇 |
|
|
length of widget value 圖形原件上的文字長度 |
提供文本輸入框input、文本框text、下拉菜單條droplist或者list box列表文本框的label名稱選擇 |
|
|
Value值 |
當a比較對象是list時，這裏是選擇狀態，當a的比較對象是數值時，這個數值由用戶自定義設置。 |
此選項根據條件設置情況只出現在b。 |
以上列出了可操作的對象情況，大家可以自行研究一下，寫得有點不太形象，有機會我再專門做實例來說明。其實很簡單，朋友們可以自己做一兩個例子，把 所有的wigets拖到頁面裏，並根據各自的情況命名label，然後一條條的選擇，操作一下就清楚了，我這裏主要提的是一個理解的方法，條件含義的說 明。
當然，不能忘了說明一下，3比較方式有哪些，如下：
3.1 equals 對象的值等於
3.2 does not equals 對象的值不等於
3.3 is less than 對象的值小於
3.4 is greater than 對象的值大於
3.5 is less or equals 對象的值小於等於
3.6 is greater or equals 對象的值大於等於
3.7 is 對象是 ，需要注意的是，這裏不是關注的值，而是關注的對象組成的內容
以上內容，大家可以對照着參考學習。
C、自動生成對條件的文字描述
條件的第三部份基本上不需要我們手動設置，在進行第二步條件設置的時候，這裏會自動生成描述性的英文。即便是可以選擇的部分，也會提示鏈接，讓我們點擊鏈接，手動選擇。所以這裏的重點意義，在於生成prd文檔的時候，會生成條件的說明文字。
三、綜合談一談設置合理的條件。
好了，交互條件設置基本上說完了，可能會有一些不清楚，因爲這裏的條件設置會涉及到部分的程序的內容，而且條件設置有點繞，有點暈。但是大家沒有必要那麼着急，一方面因爲如果你針對我的文字多對應操作一下，就很容易瞭解，另一方面因爲我現在要說的，還是條件設置不重要。
爲什麼條件設置不重要？我要提出我的幾點理由：
1、設置過於複雜的條件，做成的展示檔，可能根本沒有用途。
程序員可能根本不看，即便看也容易遺漏細節，仍然需要你與他溝通。
2、你需要花費過多的時間。
這無形中提高了你的開發成本，對於你的項目是不利的。
3、花哨的展示，脫離了產品策劃的精髓。
我相信，我們可以想象到的交互效果，要用現在的axure做出來，肯定是不可能完全達到的，這也纔是我們創造力的價值體現。而那些可以達到的效果，也沒有 必要我們費勁心機的讓它在策劃階段就實現。作爲交互設計師，更多應該關注功能是否滿足用戶需求，提高用戶使用效率；作爲產品經理應該更多的關注產品的生命 線、競爭力。
由上，所以我一再強調，除非必要，真的不用研究得太深，表現得太細緻，這只是個工具。可能你不太同意，那也沒關係，我們可以交流，提出你的思想，讓我們碰出火花！
版本二
三. Axure RP基本操作
(1) 認識Axure RP操作接口
下圖是Axure RP 環境與接口中各區塊的簡單描述。 放大圖
主菜單/工具列： 在主菜單與工具列中，可以執行常用的動作指令，例如：開啓與儲存檔案、輸出Prototype或Spec檔。
Sitemap 窗格： Sitemap窗格將您所設計的網頁以樹狀結構的方式呈現，您可以在這裏新增、移除、重新命名和組織設計的網頁。
Widgets窗格： 包含一系列常用的使用者接口對象，例如：按鈕、圖片、Text Panel與矩形，您可以直接透過拖拉的方式來設計網頁。
Masters窗格：在這裏您可以新增、移除、重新命名和組織設計好的Master。Master是一種可以容納多項接口元素的集合樣板(Temlate)，您可以將常用的共享區塊設計成Master，未來在設計Wireframe時重複使用Master，來提高規劃的效率。
Wireframe窗格： 您可以在這個窗格中設計網頁信息元素，編排內容，設計接口，設計交互特性等等。未來可以將這些設計好的頁面，輸出成Prototype或Spec檔。
交互設計 (Interaction) 窗格：交互的範圍很廣，從最基本的超級鏈接、pop-ups，一直到動態顯示和隱藏widget。您可以在這個窗格中定義Widget的交互。
物件批註(Annotation) 窗格： 您可以爲Widget加上批註來指定功能，您可以在這個窗格中增加和自訂Widget的批註。
網頁說明及交互(Pages Notes & Interactions)窗格：您可以在這個窗格中加入網頁層級的說明與交互效果到設計中。
示意圖及批註
1.定義Sitemap
企劃一個網站或Web AP，在動手開始繪製網站頁面的示意圖(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。
Axure RP 各種Widgets呈現效果，請參考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. 連續按鼠標左鍵兩下：在Widget上連續按鼠標左鍵兩下可以讓您變更一些基本的Widget屬性，例如：在Image Widget上連續按鼠標左鍵兩下可以讓您匯入圖片；在Droplist或List Box Widget上連續按鼠標左鍵兩下可以讓您編輯菜單項目。
b. 工具列：
使用工具列可編輯Widget 的樣式，例如：外框色彩、填滿色彩、字型和字體大小。
c. 快捷菜單(Context Menu)：
在Widget上按下鼠標右鍵會出現快捷菜單，您可以透過菜單中的選項來設定Widget的特殊屬性，這些選項也會因Widget的類型而有所不同。
--------------------------------------------------------------------------------
3. 撰寫對象批註(Annotation )
您可以在Wireframe中爲任何對象(Widget)加上批註。
新增批註
想要幫對象加上批註的話，請先選擇Wireframe中的對象，如圖箭頭1所示，被選取的對象呈現綠色框線狀態，然後在對象批註窗格(Annotations & Interactions Pane)的 Specification字段(箭頭2)，輸入對這個對象的解釋內容，您也可以在窗格最上方的「Label」字段(箭頭3)輸入名稱來幫對象命名。
自定字段
您可以透過菜單「Wireframe -> Customize Annotation Fields and Views」，或是按一下Annotations & Interactions的標頭來自訂批註字段。
腳註(Footnote)
一旦在Widget上加上後，Widget 右上方會多一個黃色小方塊，裏面有一個腳註號碼(Footnote number)，您可以在Widget上按下鼠標右鍵，使用Footnotes次菜單來增加或減少這個編號數字。
--------------------------------------------------------------------------------
4. 網頁說明(Page Notes)
網頁說明可以用來收集網頁層級的描述或需求。
撰寫網頁說明(Page Notes)
網頁說明會被保留在Wireframe下方的窗格內。
管理網頁說明類別
Axure RP本身預設的網頁說明類別是default，您可以透過新增額外的說明類別，輕易的區分出您自己的說明與要輸出到Prototype與規格中的說明。
比如您可以新增Test Case，操作說明，SD等不同類別的網頁說明。而當您要輸出規格文件時，可以個別指定哪些種類的網頁說明要輸出到檔，如此一來，您就可以輸出專屬於Test Case, 操作說明或SD文件了。
想要新增/編輯網頁說明類別的話，請點選菜單「Wireframe->Manage Page Notes」，或按一下「Page Notes – Default」右方的向下箭頭並選擇「Manage Page Notes」，此時會出現Page Notes 對話框，利用這個對話框，您可以新增、移除、更名或重新排列說明字段。
想要切換說明類別的話，請按一下「Page Notes – Default」右方的向下箭頭，來選擇說明類別。
--------------------------------------------------------------------------------
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時，就會形成真正的單選使用者接口。
初級交互設計
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觸發事件。(請參考5. 網頁層級的交互: 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 Panel
8. Hide Panel(s)
隱藏Dynamic Panel
9. Toggle Visibitdty for Panel(s)
切換Dynamic Panel顯示或隱藏
10. Move Panel(s)
移動Dynamic Panel
11. 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. 網頁層級的交互: OnPageLoad
Axure RP支持一個網頁層級的觸發事件(Event)-OnPageLoad，這個觸發事件發生在Prototype載入網頁時。
OnPageLoad 交互必須在Page Notes 窗格的Interactions 窗格中定義，加入假設條件的方式與在Widget中相同。
OnPageLoad 觸發事件(Event)會在OnPageLoad Event的介紹中做深入的說明。
--------------------------------------------------------------------------------
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)
共享區塊 (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肯定是您必須要學會並熟練運用的功能。
新增、組織與設計Master
Master要在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)。這裏有一篇Axure RP應用於網站界面庫的實際案例 - 利用Axure封裝視覺標準，非常值得學習。
--------------------------------------------------------------------------------
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圖標)有助於重複使用這些圖片，您就不需要反覆的複製貼上，或不斷的匯入圖片文件，而且，如果您想要更換掉這個圖片的話，也只需要在一個地方變更就好了。
--------------------------------------------------------------------------------
編注：
Axure RP的”Master”功能想要以中文精準表達有些困難。在PowerPoint中，Master被翻譯成”母片”，但是Axure RP如果把Master翻譯成”母片”，會失去Axure RP的Master多種功能的涵義。
Axure RP的Master，可以是整頁的母片，這是一種型態。Axure RP的Master，也可以是Header區塊或Footer區塊，使用在很多頁面一起共享的時候，這是第二種型態。Axure RP的Master還可以當作獨立的Widget來使用，用來建立樣式庫Library。
因此，我們暫時選擇把Master翻譯成”共享區塊”，同時也直接將英文”Master”放在教學文章之中。
輸出網站/應用程序原型
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)教學影片。
輸出規格文件(Word)
1. 什麼是規格文件 (Specification)?
在Axure RP 中設計完Wireframe之後，我們可以輸出Microsoft Word格式的需求書或功能性規格文件(Specification)。輸出Word格式規格文件之前，您的計算機必須事先安裝好Microsoft Word 2000或更新的版本。
如果您在設計Wireframe的同時，也把需求說明或規格敘述寫在網頁說明(Page Notes)或Widget的對象批註(Annotations)，輸出成規格文件時，Axure RP會自動幫您彙整文字數據以及畫面，並且按照網頁順序整理在Word檔案裏頭。(如下圖)
您可以下載下列網站策劃書範例，很快就可以瞭解Axure RP輸出的規格書大概是長成什麼型態:
Axure RP Prototype範例-旅遊網站策劃書(Word 2000格式) 1.7 M bytes
Axure RP Prototype範例-旅遊網站策劃書(Word 2007格式) 700 k Bytes
--------------------------------------------------------------------------------
2. 輸出規格文件/格式設定
想要輸出規格文件或設定(Configure Specification)輸出格式的話，請按下Axure RP軟件上方主功能菜單「Generate」菜單，選擇「Specification(F6)」。
或是按下工具列中的「Specification」鈕，系統會開啓「Configure Word 2007 Specification」或「Configure Word 2000 Specification」對話框，並顯示預設的規格文件輸出格式，您可透過這個對話框來設定其它格式。
如同輸出網站原型(HTML Prototype)一樣，需求書或規格書也可依不同的用途進行設定，比如設定一種格式專門給客戶確認需求及規格，設定另一種格式專門產生測試計劃與測試步驟，再另外設定一種格式用來介紹操作步驟。
如果您不另外指定輸出格式，可以直接按下【Generate】來輸出規格書，您唯一須留意的是輸出文件名稱(Destination File)必須是一個文件名稱，比如 Untitled.docx (Word 2007格式) 或 Untitled.doc (Word 2000格式)，不能只給目錄名稱。
可以被調整設定的項目包括，Pages(網頁)相關 / Masters(共享區塊)相關 / Notes(網頁說明)相關/ Screenshot (畫面)相關/ Annotations (對象批註)相關 / Widgets(對象)相關 / Word Template (Word檔樣板)相關。
套用Word檔樣板可以客製化您輸出的規格文件，讓文件的呈現更專業，您也可以事先設定好前言以及附錄檔，比如封面，附錄或簽名頁。您可以修改Word模板來配置規格中的文字樣式，變更文件的排版或加入頁首或頁尾。一但您設定好規格文件格式，請按一下【Generate】鈕來產生這份規格。
--------------------------------------------------------------------------------
3. 技巧(Quick Tips)
技巧一. 只要把必要的項目輸出到規格文件中
規格文件輸出時如果選擇輸出的項目太細，很有可能會產出一份好幾百頁的Word檔案，而難以閱讀。因此，輸出之前，最好透過格式的設定將不需要的項目取消勾選，保留有意義的部份。
技巧二. 預設規格文件標題改成中文
將Axure RP預設格式的檔標題改成中文，比如將Pages格式設定的 Section Header名稱 “Pages” 改成 “網站策劃說明” ，把 “Page Tree” 改成 “網頁列表”；或者把Screenshot格式設定的 Section Header名稱”User Interface” 改成 “網頁畫面”。如此一來輸出成規格文件時，會更方便閱讀這些段落標題。
--------------------------------------------------------------------------------
鼠標移入移出及圖像變換的互動設計
1. 鼠標移入移出(OnMouseEnter/OnMouseOut)
在先前初級互動設計(Basic Interaction)一章中，介紹多種Axure RP支持的人機接口互動效果。這裏我們要介紹其中兩個常見的觸發事件(Event)：
OnMouseEnter - 鼠標的指針移動到對象之上
OnMouseOut - 鼠標的指針移動出對象之外
有許多Widget可以使用OnMouseEnter 和 OnMouseOut觸發事件，當鼠標移到Widget上時會觸發OnMouseEnter事件，OnMouseOut事件則發生在鼠標離開Widget時被觸發。
最常見的運用方式，則是合併Dynamic Panel來控制比較複雜的功能時，例如：浮動菜單、滑過特效和自訂tooltips等。
以左圖的互動效果來當例子：當鼠標移到圖片上方時，會自動彈出說明文字框(Dynamic Panel)，當鼠標移出圖片時，說明文字框就會消失。這個互動設計就可透過OnMouseEnter 和 OnMouseOut觸發事件結合Dynamic Panel的控制來達成，設計方式如下圖所示。
2. 變換圖像(Rollover Image)
Image Widget 以及 Button Shape Widget可直接利用Axure RP的功能來設計Rollover Image和Rollover Style，不需要使用到OnMouseEnter、OnMouseOut和 Dynamic Panel。
變換圖像(Rollover Image)
想要建立變換圖片的話，請在Image Widget上按右鍵，選擇「Edit Image->Import Rollover Image」，然後選擇一個圖片當作變換圖片，一旦圖片選定後，您可以在Wireframe中，利用鼠標滑過圖片上的黑白色方塊來預覽變換圖片。
3. 變換樣式(Rollover Style)
在Axure RP裏頭，Rectangle，Placeholder，Button Shape這三種Widget可以直接設定變換樣式(Rollover Style)，而不需要去特別指定OnMouseEnter / OnMouseOut的觸發事件，就可以做到變換樣式。
想要建立變換樣式的話，請在Rectangle / Placeholder / Button Shape上按右鍵，選擇「Edit Edit Button Shape->Edit Rollover Style」。
此時會開啓「Set Rollover Style」對話框，您可以在這裏選擇變換樣式，勾選「Preview」複選框來預覽設定在Button Shape的變換樣式。
字型 Font
字體大小 Font Size
粗體 Bold
斜體 Italic
底線 Underline
文字顏色 Font Color
填色 Fill Color
線條顏色 Line Color
線寬 Line Width
線條樣式 Line Style
套用了變換樣式之後，您可以選擇 Preview提早預覽效果。也可以在Wireframe中，利用鼠標滑過Widget左上角的黑白色方塊來預覽變換狀態。
設計多層菜單
1. 認識菜單物件 (Menu Widget)
菜單對象 (Menu widgets) 常被用來建立簡單的多層菜單 (Flyout Menus)。您可以在Widgets窗格中找到兩種菜單物件：
Menu (Vertical) - 垂直菜單
Menu (Horizontal) - 水平菜單
將你所需要的菜單對象從Widgets窗格中拖曳到Wireframe就可輕鬆建立，新的菜單會先設置3個菜單選項(Menu Item)。
下圖展示的動畫則是已經完成設定的多層菜單：
--------------------------------------------------------------------------------
2. 編輯菜單對象
編輯菜單和菜單項目的文字與格式的方法就像編輯其它Widget一樣，您可以在菜單項目上連續按鼠標左鍵兩下編輯文字，也可以利用工具列來編輯菜單和菜單項目的色彩、字型和其它樣式。
菜單對象的編輯功能有這些項目：
Edit Menu Padding - 選項間距設定
Edit Rollover Style - 設定變換樣式
Add Menu Item After - 往後新增選項
Add Menu Item Before - 往前新增選項
Delete Menu Item - 刪除選項
Add Submenu - 新增子菜單 (如果已經有子菜單，則會顯示 Delete Submenu - 刪除子菜單)
在 Menu Widget的選項上，按鼠標右鍵會出現如下圖功能菜單：
增加或移除菜單項及子菜單
想要增加或移除菜單項目的話，請在菜單項目上按鼠標右鍵，選擇「Add Menu Item」和「Delete Menu Item」指令。
想要在菜單項目下加入子菜單的話，請在菜單項目上按鼠標右鍵，選擇「Add Submenu」。在Axure RP的畫布區域，通常Submenu會自動縮回，要去點一下上層菜單，才能再看到前新增的Submenu。如下動畫：
設定選項間距(Padding)
若是想要編輯菜單項目之間的間距(Padding)，請在菜單或菜單項目上按鼠標右鍵，選擇「Edit Menu Padding」。
--------------------------------------------------------------------------------
3. 設定菜單的變換樣式 (Rollover Style)
就像Button Shape Widget一樣，變換樣式(Rollover Style)也可套用在Menu Widget的菜單項目上。
想要編輯菜單的變換樣式，請在菜單或菜單項目上按鼠標右鍵，選擇「Edit Rollover Style」，此時會開啓「Set Rollover Style」對話框，您可以在這裏選擇單一菜單項目、菜單上的所有菜單項目，或是菜單和子菜單上的所有菜單項目的變換樣式。
勾選「Preview」複選框來預覽套用在菜單上的變換樣式。
套用了變換樣式之後，您可以在Wireframe中，利用鼠標滑過菜單項目左上角的黑白色方塊來預覽變換樣式。
--------------------------------------------------------------------------------
4. 技巧 (Quick Tips)
技巧 1. 優先設定母菜單(Root Menu)的樣式：
當子菜單(Submenu)建立了以後，會自動套用母菜單(Root Menu)的樣式，您可以在建立子菜單之前先將母菜單樣式設好，以節省時間。
另，爲e文好的朋友附上自學Axure RP的幾個途徑：
1、 打開軟件，按F1調取幫助文檔，對照文檔學習。
2、 登錄http://www.axure.com/au-home.aspx 查看flash視頻學習。
3、 登錄 Axure 博客 http://axure.com/cs/blogs/Default.aspx，瞭解軟件最新信息。
4、 登錄討論組http://axure.com/cs/forums/Default.aspx，參與討論。
補充：相關英語
接口設計樣式 (UI Design Pattern)：自動完成 (Auto Complete)
dynamic panel 動態面板
state 狀態
Menu Padding Editor 設置邊距
Add Submenu 添加子菜單
