界面原型創建工具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打開第一頁（你也可以根據需要決定是否打開以及你的系統默認的瀏覽器打開）