Axure原型設計工具介紹
1759230茅杭斌
目錄
1.前言
2.下載與激活
3. Axure相關功能介紹
4.Axure案例演示
5.結語
一、前言
在我們進行程序開發的時候，原型圖是必不可少的，因為原型圖能夠直觀的看出我們所做程序的界面以及操作出需要實現的功能。這時候就需要原型圖，原型圖有很多種方式實現，有手繪原型圖，軟件制作原型圖，我們這次主要講的是軟件制作原型圖。軟件原型設計的軟件有很多，從適用場景分：注重設計中低保真、快速的手機端和Web網站場景，適合用Mockplus、Balsamiq；注重響應體驗設計，適合用Raw HTML/CSS/JS、UXPin；注重高保真設計（手機或者桌面），適合用Flinto、Origami；注重特定功能需求，適合用Adobe After Effects。而今天我要講的則是Axure，一款簡單又強大的原型設計軟件。至於我為什么要選擇這一款軟件，是因為它在原型設計軟件中的地位就好比word在文字界的地位。而且作為一款低保真的原型設計軟件，它有明顯的幾個優點：
（1）上手快，行業內都用。
（2）有組件庫。在制定組件化規范后，可以快速利用組件庫制作低保真原型。
（3）能完成簡單的交互。
（4）團隊協作很方便。
接下來我們就正式來進入軟件的介紹。
二、下載與激活
我們可以通過百度搜索Axure RP，來找到各種版本的Axure，或者你可以直接登錄Axure官網https://www.axure.com/download下載最新版本。
我這次選用的是Axure PR8的版本，在我們下載安裝好后，就要進行激活，如果不激活，則只能夠試用一段時間。當然激活碼可以買到也可以百度到，看個人需求。
三、Axure相關功能介紹
首先我們來看一下Axure的頁面布局。
1-主菜單工具欄：類似office
2-主操作界面（舞台）
3-站點地圖，所有頁面的存放位置，可以在這里增刪改查頁面或調整頁面的關系（頁面順序、頁面之間關系）
4-axure元件庫（axure組件庫/部件庫）可創建、加載、刪除元件庫
5-母版管理：增刪像頁面頭部、導航欄這種出現在每個頁面中的元素，可以繪制到母版中，然后加載到需要顯示的頁面，在制作頁面時就你不用重復創建
6-頁面屬性：設置當前頁面樣式，添加當前頁面的注釋，以及設置頁面加載時觸發的事件onpageload
7-元件屬性：設置選中元件的標簽、樣式，添加元件注釋及設置頁面加載時觸發的事件
A-交互事件：元件屬性區域閃電樣式的小圖標代表交互事件
B-元件注釋：可以添加一些元件限定條件的注釋，eg文本框可添加輸入字符長度不超過20等
C-元件樣式：可更改字體、尺寸、旋轉角度等，或多個元件的對齊、組合設置
8-動態面板：很重要的區域，可增刪動態面板狀態及狀態排序或設置動態面板標簽；當其被覆蓋時，可通過點擊選中相應的動態面板或雙擊進入編輯
注：若不小心關閉了任何一個區域，可通過主菜單工具欄–視圖-重置視圖來找回。
（1）接下來我們來認識一下一些常用的元件，這些元件的認識會有助於我們對原型圖設計的完成。一般元件的使用只要我們選擇元件后拖拽到工作區使用即可。
1. 矩形
① 拖拽矩形左上角的三角就可以進行圓角設置。
② 點擊右上角的圓可以更改它的形狀。左上角的三角形消失。
③ 旋轉，繪制好元件后選擇它，按ctrl鍵，鍵直接拖拽定界框周圍即可。
2. 圖片
①使用，直接雙擊當前圖片元件即可。也可以在選擇元件后的右側的屬性中導入即可。
② 支持GIF格式，如果導入圖片太大，會出現如下提示。
如果選擇“是”：GIF格式的將變成一張圖片，圖片大小被縮放，如下第二張圖。
如果選擇“否”：圖片以原有大小出現如下第三張圖。
③ 圖片可以直接復制粘貼到Axure中進行使用。
3. 占位符
① 可以直接在里面寫入內容，雙擊即可。
4.按鈕
按鈕元件用於模擬實際應用中的按鈕效果。
5.文本標簽
可以在其中鍵入文字，做提示作用。
6.熱區
用於在模擬運行軟件原型時，當鼠標放在熱區上時，鼠標箭頭便會變成手的模樣，表示該區域可點擊等。
（2）基礎功能
1.檢視
從元件庫中找到的任何元件，都可以通過“檢視”中的“樣式”變成你想要的漂亮的樣子，根據不同的元件，其可編輯的項目，稍有不同。
2.屬性
通過“屬性”中的“交互”給元件添加用例，讓元件動起來交互做的好壞是評價原型圖最關鍵的因素。
根據不同的元件，可設置的事件(如：窗口尺寸改變時)也稍有不同(見上圖)，
在同一事件(窗口尺寸改變時)中自上而下執行所有用例(Case1、Case2)，執行用例前根據用例的條件(上圖Case下括號中的內容)判斷此用例是否執行，為真時執行，為假時不執行。在同一用例中自上而下執行所有動作。
3. 交互樣式
不是 所有的元件都存在互樣式。
右擊選擇某個元件，如果存在交互樣式，選擇，會出現如下圖：
可以動態的設置元件的一些樣式。但是只能設置自身的樣式。
4. 概要
在概要窗口中簡單的展示了此頁面中所有元件的層次關系,將鼠標移動上去之后會其具體的包含的內容,用鼠標單擊選擇，在畫板中會使選擇的原型獲得焦點。
5. 組合
任選一個或多個元件，右擊都有組合,組合之后對多個元件的統一控制就方便多了。
針對情況：
方便排版，
畫原型圖時，元件比較多，有時候拖來拖去非常不方便。
可以將元件組合，使其相對位置不動，一帶多。
擴大用例范圍，
常出現的情況是，對元件1添加了用例，但是因為需求又在元件1上添加了元件2，原本的在元件1上全都是此用例的范圍，現在元件2覆蓋的范圍則不能應用該用例，將元件1、2組合之后，對該組合添加用例，則擴大了該用例的范圍。
6.放大與縮小
按CTRL鍵前后滾動。
7.頁面對齊
頁面的內容在生成原型時在瀏覽器的左側或中間。一般情況下是在中間，但是一定要取消選擇后方可以更改頁面對齊方式。
8. 分割圖片
選擇圖片，在右側屬性中選擇裁切工具，點擊需要切除的部分。也可以在圖片上點擊右鍵分割圖片。選擇那部分就切除那一部分。
四、Axure案例演示
以我們小組之前做的一個作業為例。
這是我們做的教務在線app的原型，上圖展現的是教務在線app的登錄界面，左側站點地圖顯示了我們主要的幾個功能分區。
上圖的登錄界面中，我們利用圖片做了教務在線背景以及賬號密碼的識別圖標，用文本標簽做了輸入賬號密碼的輸入框，且添加了登錄按鈕，設置了事件幫助跳轉頁面，同時設置了忘記密碼文本框，設置了事件幫助跳轉頁面。
在這個個人管理頁面，由於單個文字或者圖片大小的限制，我們不能直接對文字或者圖片設置事件，在這時，就需要使用熱區這一元件了。上圖中綠色的塊都使用了熱區並設置了事件幫助完成相依操作。當然下側的導航欄的每一個項目都使用了熱區，是跳轉更為方便。對我來說，熱區的使用真的方便了我們原型的設計，它的使用十分自由且靈活，要說缺點，就是有時候總是忘記它的存在，而選中不了它覆蓋下的圖片了吧。
其他頁面都是大同小異，都差不都運用了之前提到的幾個常用功能，這里就不在贅述了。
五、結語
總的來說，Axure是一款比較容易上手的、靈活度比較高、還原度基本滿足需求的原型設計軟件，而且它具有團隊合作功能，可以多人共同完成一個原型的制作。作為一個用過的人，我十分推薦使用Axure來進行原型設計。