一、Axure認識

1.1、什麼是Axure（發音：Ack-sure）?

  Axure RP是一個專業的快速原型設計工具，是一個專業的快速原型設計工具，讓負責定義需求和規格、設計功能和介面的專家能夠快速建立應用軟體或Web網站的線框圖、流程圖、原型和規格說明文件。

1.2、Axure使用人群

  使用者主要包括商業分析師、資訊架構師、可用性專家、產品經理、IT諮詢師、使用者體驗設計師、互動設計師、介面設計師等，另外，架構師、程式開發工程師也在使用Axure。

1.3、Axure工作介面說明

  axure的使用環境通過下圖進行說明。

• 1、主選單和工具欄：執行常用操作，如檔案開啟、儲存檔案，格式化控制元件，自動生成原型和規格說明書等操作；
• 2、站點地圖面板：對所設計的頁面（包括線框圖和流程圖）進行新增、刪除、重新命名和組織頁面層次；
• 3、控制元件面板：該面版包含線框圖控制元件和流程圖控制元件，另外，你還可以載入已有的部件庫（*.rplib檔案）建立自己的部件庫；
• 4、模組面板：一種可以複用的特殊頁面，在該面板中可進行模組的新增、刪除、重新命名和組織模組分類層次；
• 5、線框圖工作區：線框圖工作區也叫頁面工作區，線框圖工作區是你進行原型設計的主要區域，在該區域中你可以設計線框圖、流程圖、自定義部件、模組；
• 6、頁面屬性：這裡可以設定當前頁面的樣式，新增與該頁面有關的註釋，以及設定頁面載入時觸發的事件onpageload；
• 7、部件訊息互動面板：
  這裡可以設定部件在操作過程中的訊息傳遞；
• 8、元件屬性：這裡可以設定選中元件的標籤、樣式，新增與該元件有關的註釋，以及設定頁面載入時觸發的事件；
• 9、部件管理：在這裡可以新增、刪除動態面板的狀態，以及狀態的排序，也可以在這裡設定動態面板的標籤；當繪製原型動態面板被覆蓋時，我們可以在這裡通過點選選中相應的動態面板，也可以雙擊狀態進入編輯。

1.4、部件說明

1.5、原圖實現平臺

  當原圖製作好後，可以點選下圖所示的圖示進行展示：

二、基本操作說明

  這裡我們通過幾個常用的操作來實際地瞭解Axure工具的使用。接下來主要說明以下幾點：

• 1、如何滑鼠移動到一個按鈕上，顯示該按鈕的提示；而當滑鼠移開時按鈕提示隱藏
  ；
• 2、點選按鈕，開啟一個頁面；
• 3、使用勾選框控制矩形框的顯示和隱藏；
• 4、摺疊選單製作。

2.1、如何滑鼠移動到一個按鈕上，顯示該按鈕的提示；而當滑鼠移開時按鈕提示隱藏

步驟一：如何滑鼠移動到一個按鈕上，顯示該按鈕的提示；而當滑鼠移開時按鈕提示隱藏；

步驟二：從控制元件面板中選擇“文字”，同樣拖向線框工作區中，並輸入字元，這裡輸入“按鈕提示”，如下圖；

步驟三：右鍵字元控制元件，選擇“Convert to Dynamic Panel”，將該字元控制元件設定為動態，這在axure中將控制元件設定成被支配狀態時是必要的；

步驟四：雙擊字元控制元件，並命名控制元件，以便後面選擇控制元件時能以此為標記（後面會提到）如下圖；

步驟五：選擇按鈕控制元件，並在部件訊息互動面板中選擇“OnMouseEnter”訊息，並雙擊進入事件編輯面板；

步驟六：因為只是需要對字元進行隱藏和顯示，所以在滑鼠移動至按鈕上時選顯示就好，並選中前面給字元控制元件命名的“按鈕名字”勾選框（這就是前面為什麼要給字元控制元件命名的原因），而其中的”slide up”為字元出現時的動畫效果，可以不選，選好後點擊“OK”;

步驟七：有了顯示就需要有隱藏，所以再次在部件訊息互動面板中選擇“OnMouseOut”訊息，並雙擊，進行滑鼠移出按鈕範圍後的處理；

步驟八：選擇隱藏操作，並點選“OK”，如下圖；

步驟九：右鍵字元控制元件選擇隱藏，使控制元件剛出來時不可見，然後點選工具欄中的演示按鈕除錯，完成！

2.2、點選按鈕，開啟一個畫面

步驟一：從控制元件面板中選擇“Rectangle”以及“按鈕”控制元件至線框圖工作區，如下圖所示：

步驟二：選擇要控制開啟或者關閉的“矩形”控制元件，右鍵設定為動態（如上一示例所示），併為該動態控制元件命名為“開關頁面”；

步驟三：選中按鈕控制元件，並在部件訊息互動面板選擇“OnClick”訊息，進行設定；

步驟四：在訊息編輯視窗中選擇“Toggle Visibility”，選擇之前命名的“開關頁面”勾選框，並點選“OK”;

步驟五：點選“演示”控制元件，執行演示即可；

2.3、選中勾選框，頁面出現，取消選中狀態頁面隱藏（關於條件判斷示例）

步驟一：同之前一樣從部件面板中選擇勾選框和矩形控制元件，並將矩形控制元件設定成動態，同時命名為“會變色的矩形框”（命名意思請忽略），並右鍵將矩形框設定為“隱藏”；

步驟二：選擇勾選框控制元件，同時在訊息互動面板中選擇“OnCheckChange”訊息，並點選“Add Condition”；

步驟三：進入建立條件視窗，而下圖中：

• 1、表示下面這些條件是“&&”的關係還是“||”的關係，all表示“並且”，any表示“或者”；
• 2、表示條件判斷的依據，這裡選擇的是“如果勾選框選中”；
• 3、表示是對哪一個控制元件進行判斷；
• 4、表示控制元件的值是等於（equals）還是不等於（does not equal）；
• 5、表示判斷的是控制元件判斷的物件，是比較值，還是比較其他控制元件，還是比較變數；
• 6、表示最終判斷的內容，是值還是其他；

  這裡的功能我們就按下圖的選擇，點選“OK”即可。

步驟四：回到訊息編輯框，選擇該動作下需要演示的內容，並點選“OK”。這樣就完成了選中勾選框時的顯示操作；

步驟五：接下來開始控制取消勾選框時，矩形框的隱藏操作。選擇之前的勾選框控制元件，還是選擇“OnCheckChange”，點選”Add Case..”進入訊息編輯視窗（這時你會發現此時的時間序號已經變成了“Case 2”），並同樣點選“Add Condition”進入建立條件視窗；

步驟六：選擇訊息條件，這裡是取消勾選框時的操作，所以最後的下拉框中選擇false，並點選“OK”；

步驟七：回到訊息視窗後，這裡的判斷條件為“如果取消選中勾選框”，接下來就是選擇進行什麼操作了，這裡我們是執行隱藏的操作，點選“OK”；

步驟八：之後就可以執行條件判斷的演示了；

2.4、摺疊選單製作

步驟一：從部件面板中選擇矩形控制元件拖出，製作成如下圖所示的樣子。同時將三組模板設定均成3個組合，最後再均設定成動態，同時分別命名成“選單欄一”，“選單欄二”，“選單欄三”；

步驟二：配置每個模板的屬性，在“部件屬性和樣式”中勾選“調整大小以適應內容”，此選項很重要，不然會造成重疊的效果。滑鼠分別點選3個模板，並設定“Fit to Content”

步驟三：每個動態模板新增兩個狀態“state1”和“state2”，其中“state1”狀態為隱藏狀態，“state2”狀態為顯示狀態。以選單欄一模板為例進行說明。

（state1）
（這裡如果stat2中沒有模板，則先從stat1中將模板的圖形複製一份過來）

步驟四：如此操作了3個模板後，state1狀態和state2狀態的轉換效果。如果設定從隱藏狀態state1到state2效果時，三個模板狀態的勾選。模板如果要選擇的狀態為顯示狀態，則同時勾選“顯示面板（如果隱藏）”和“展開/收起部件”模板如果要選擇的狀態為隱藏狀態，則只需勾選“展開/收起部件”對於該頁面內出現的面板都要進行狀態設定。

以模板一為例，這裡我們的操作是：
1、進入stat1，選中模板中的按鈕控制元件，並選擇“OnClick”訊息；

2、選擇”Set Panel State”，並選中勾選框“選單欄一”，選擇“State2”，並勾選“Show panel if hidden”(顯示面板如果隱藏)，“Push/Pull Widgets”(展開/收起控制元件)。這裡是指點選選單欄時去顯示非隱藏的state2，空間為展開/收起控制元件；

3、選擇其他兩個模板的相應操作，如下圖所示；

4、點選“OK”，至此模板一的state1已經操作完成，同樣如此完成其他兩個模板的state1，當然這裡的“Show panel if hidden”的選擇是當前選哪個模板，哪個勾選。

5、接下來執行state2的操作，雙擊模板一，選擇並雙擊進入state2；

6、選擇點選“選單欄一”矩形控制元件，並選擇“OnClick”訊息，並都如下圖選擇；

7、同樣執行其他的兩個模板，由此完成3個模板的操作。

步驟五：將設定好後的3個模板相疊排列（注意這裡相疊排列，模板與模板之間的接縫處需要“天衣無縫”，不然會出現展開空間排布不正常的情況）；

  至此摺疊選單欄的製作完成！

三、小結

  有了以上的常用操作認識後，製作一般的圖形介面就夠用了，當然需要使用者進行一定的變通，如何通過顯示與隱藏重疊的畫面達到開關不同頁面的效果等等。
  附件中有一整套關於NVR介面想法的製作，可以給初入門的讀者進行進一步的參考。當然還有許多在這裡未說明的操作，比如變數等等，就需要讀者自己去探索了。