Axure RP的介紹與使用
目 錄
1 認識Axure............................................................. 2
1.1 什么是Axure？........................................................ 2
1.2 使用人群.............................................................. 2
1.3 工作界面.............................................................. 2
1.4 部件說明&實現平台..................................................... 4
2 基本操作.............................................................. 5
2.1 鼠標的顯示&隱藏....................................................... 5
2.2 點擊按鈕，打開一個頁面.............................................. 11
2.3 使用勾選框控制矩形框的顯示和隱藏.................................... 14
2.4 折疊菜單制作......................................................... 19
3 實例................................................................. 28
4 小結................................................................. 28
5 參考文獻............................................................. 28
一、認識Axure
1.1、什么是Axure（發音：Ack-sure）?
Axure RP是一款專業的快速原型設計工具。Axure（發音：Ack-sure），代表美國Axure公司；RP則是Rapid Prototyping（快速原型）的縮寫。
Axure RP是美國Axure Software Solution公司旗艦產品，是一個專業的快速原型設計工具，讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型設計工具，它能快速、高效的創建原型，同時支持多人協作設計和版本控制管理。
1.2、使用人群
使用者主要包括商業分析師、信息架構師、可用性專家、產品經理、IT咨詢師、用戶體驗設計師、交互設計師、界面設計師等，另外，架構師、程序開發工程師也在使用Axure。
1.3、工作界面
axure的使用環境通過下圖進行說明。
1、主菜單和工具欄：執行常用操作，如文件打開、保存文件，格式化控件，自動生成原型和規格說明書等操作；
2、站點地圖面板：對所設計的頁面（包括線框圖和流程圖）進行添加、刪除、重命名和組織頁面層次；
3、控件面板：該面版包含線框圖控件和流程圖控件，另外，你還可以載入已有的部件庫（*.rplib文件）創建自己的部件庫；
4、模塊面板：一種可以復用的特殊頁面，在該面板中可進行模塊的添加、刪除、重命名和組織模塊分類層次；
5、線框圖工作區：線框圖工作區也叫頁面工作區，線框圖工作區是你進行原型設計的主要區域，在該區域中你可以設計線框圖、流程圖、自定義部件、模塊；
6、頁面屬性：這里可以設置當前頁面的樣式，添加與該頁面有關的注釋，以及設置頁面加載時觸發的事件onpageload；
7、部件消息交互面板：這里可以設置部件在操作過程中的消息傳遞；
8、元件屬性：這里可以設置選中元件的標簽、樣式，添加與該元件有關的注釋，以及設置頁面加載時觸發的事件；
9、部件管理：在這里可以添加、刪除動態面板的狀態，以及狀態的排序，也可以在這里設置動態面板的標簽；當繪制原型動態面板被覆蓋時，我們可以在這里通過點擊選中相應的動態面板，也可以雙擊狀態進入編輯。
1.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）
（
（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個模板相疊排列（注意這里相疊排列，模板與模板之間的接縫處需要“天衣無縫”，不然會出現展開空間排布不正常的情況）；
至此折疊菜單欄的制作完成！
三、實例
四、小結
有了以上的常用操作認識后，制作一般的圖形界面就夠用了，當然需要用戶進行一定的變通，如何通過顯示與隱藏重疊的畫面達到開關不同頁面的效果等等。
五、參考文獻
原文鏈接：https://blog.csdn.net/xpbob/article/details/52493657