介面原型建立工具Axure使用教程之一：基本操作

電腦
關注：1W次

Axure Pro 是專門用來製作介面原型的工具。
我們在跟使用者進行軟體系統需求溝通時，如果使用文字，一般的終端使用者是很難理解與想象你未來產品模樣的。因此通常我們會設計介面原型，介面原型表達軟體系統能做什麼，也就是系統的功能性需求，因為是原型，並不是真正的系統，但又可以達到與系統真正執行起來相同的效果。
通過介面原型與使用者溝通，讓其能提前看到未來系統是什麼樣子的，這樣使用者才能告訴我們其真正的需求是什麼，製作介面原型是需求獲取的必要條件，通過介面原型與使用者溝通，可以起到事半功倍的效果。
製作介面原型的方法很多（我掌握的）：
1）使用網頁製作軟體建立：可以直接操作HTML檔案，更接近真實。缺點，你需要掌握HTML語法，掌握複雜的網頁製作工具。操作複雜性高。
2)visio，可以快速的建立單個頁面，也可以用建立，缺點：最多隻能做到頁面直接的關聯，按鈕，連結上無法建立事件，死板。無法作出接近真實的效果，無法生成HTML檔案。
3）Axure，Axure可以以所見即所得的方式建立介面原型，優點：操作者無須懂的HTML語法，無須懂得控制人機互動的事件處理，例如頁面跳轉時、命令按鈕按下時系統響應程式指令碼（JAVA Script）。因此很適合業務需求分析人員使用。生成的頁面，串接在一起，可以進行操作，模擬場景，讓系統“動”起來。
本節通過一個簡單頁面的建立，講解Axure的基本操作。下一節講解人機互動事件處理。

步驟/方法

（01）啟動Auxre。成功後如圖：首次啟動，打開了所有的工具欄及相關檢視。介面可以分為9個部分：（1）選單欄，所有應用程式（C/S模式）都有的內容。File選單包括了關於檔案的操作，例如儲存，另存為，最近開啟設計，退出等。Edit選單，重做，撤銷，複製，貼上，剪貼，查詢與替換。View選單：設定介面中工具欄的出現，隱藏，各種檢視③、⑤、⑥、⑦、⑧、⑨的出現與隱藏。預設全部出現；Wireframe選單：全域性性系統設定選單；object選單：頁面中物件的對齊，分組，轉換等；Generate選單：生成原型與說明書功能。Share選單：配置管理相關功能（團隊設計時使用）。Help選單：線上幫助、版權資訊。（2）工具按鈕欄：工具按鈕欄中按鈕組是否出現，通過View選單控制。View->toolbars 進行設定。（3）頁面地圖欄：此欄顯示你設計的頁面及頁面之間的樹狀關係，頁面的上下文選單可以刪除頁面，改名等。（4）頁面工作區：頁面設計區，可以開啟多個頁面，點選頁面標籤，右鍵上下文選單包括了開啟關閉頁面的操作。雙擊頁面地圖欄的頁面，工作區開啟該頁面。（5）頁面屬性欄：輸入頁面註釋，設定頁面事件，頁面屬性。（6）控制元件欄：構成頁面的元素，各種控制元件，拖動到頁面上需要的位置。（7）控制元件屬性欄：每個控制元件的屬性設定欄,包括三項：A:控制元件說明B: 事件設定 C控制元件屬性：包括位置、字型、對齊、分組。（8）模板欄：在整個系統介面的設計中，有一些內容可能會在多個頁面中重複出現，這些內容可以被組織成一個Master，Master可以通過包組織管理。拖動Master到頁面中，master中的控制元件一起作為一個整體出現在頁面中。簡單說Master就是為了重用。另外修改master內容後，使用了master的頁面內容也被修改（從生成原型的效果上來看）。（9）動態面板管理欄：動態面板是Axure的核心概念，使用好可以做出很好的效果。動態面板包括多個狀態，每個狀態裡邊可以放置不同的內容，通過事件切換狀態，使頁面表現不同狀態的內容。我的一篇經驗中講解了如何使用動態面板製作TABPAGE效果。這只是一種用法，陸續會介紹一些其他用法。頁面中的view等，右上角的叉，點選可關閉，在view選單上可以再開啟（頁面除外）。View之間及view與頁面設計工作區之間的上下，左右分割線，都可以點選拖動，調整區域的大小。左右分割線上的小三角可以隱藏區域，再點可開啟，試試就知道。

（02）系統預設建立4個頁面：Home及其下級頁面page1、page2、page3，聯絡比較緊密的頁面可以分層組織在一起，例如一個功能模組。點選頁面、右鍵可以修改頁面的名字，改成你滿意的名稱。可以刪除，複製（duplicate），移動頁面（向上，向下，移出，移入：自己試試效果）

（03）點選儲存按鈕，儲存為設計文件，字尾為.rp。

（04）如圖我在頁面上放置了5種控制元件：（1）文字（text panel）控制元件：如圖所使用的，作為靜態文字顯示。（2）圖片控制元件：image，在頁面上，右鍵選擇 Edit image-->Import image可以插入具體的圖片。（3）矩形控制元件：通常用來進行介面分割，但也可以很多其他用法，比如tab頁面的標籤，總之當你想畫個框框，就可以使用它。（4）文字框：需要輸入內容的文字框，最常用的一個控制元件；（5）按鈕：系統中需要執行某些命令時使用，例如提交內容，計算等。途中右上角黃色的1表示這個按鈕上有一個事件（我加上的）。

（05）控制元件直接的對齊，你可要通過輸入控制元件的位置資料來控制，也可以把多個控制元件選中，然後點選工具欄上的對齊命令（按鈕），對齊控制元件。如圖：根據圖示基本可以看出其功能：從左到右為：選中的控制元件以上邊第一個為準右對齊；水平居中對齊；向右對齊；向上對齊（控制元件有可能積壓在一塊，如果在垂直方向不重疊則不會）；垂直居中，向下對齊；平均分配控制元件間垂直間距；平均分配水平間距。

（06）完成這個簡單的頁面後，可以生產HTML頁面了，點選Generate-->prototype,開啟對話方塊如圖：左邊選擇預設，選擇生成頁面的目錄，點選Generate按鈕，生成HTML頁面，並開啟使用IE開啟第一頁（你也可以根據需要決定是否開啟以及你的系統預設的瀏覽器開啟）