Axure的基本操作

電腦
關注：5.05K次

Axure RP是一個專業的快速原型設計工具。Axure（發音：Ack-sure），代表美國Axure公司；RP則是Rapid Prototyping（快速原型）的縮寫。下面就介紹一下Axure的基本操作。

操作方法

（01）首先下載軟件。

（02）接着點擊安裝軟件。安裝步驟就是一直點下一步，這裏不多説了。

（03）安裝好後，打開Axure。

（04）打開後我們先認識一下界面。工具欄：類似office軟件，可以對字體大小、背景填充、圖形寬高以及位於工作區的位置（XY軸）進行修改；工作區：繪製產品原型的操作區域，所有的用到的元件都直接拖拽到裏面就好了。頁面導航：可以通過鼠標拖動調整頁面順序以及頁面之間的關係，雙擊可以重命名。部件庫：也叫組件庫或元件庫，所有軟件自帶的元件和加載的元件庫都在這裏，這裏可以執行創建、加載、刪除axure元件庫的操作，也可以根據需求顯示全部元件或某一元件庫的元件。大家可以點擊放大鏡圖標，搜索自己需要的部件。母版：這裏可以創建重複出現在每一個頁面的元素，這樣在製作時就不用再重複這些操作。通常用於頁面頭部、菜單欄等的製作。頁面交互：這裏可以設置當前頁面的樣式，添加與該頁面有關的註釋，以及設置頁面加載時觸發的事件onpageload。部件交互：這裏可以設置選中元件的標籤、樣式，添加與該元件有關的註釋，以及設置頁面加載時觸發的事件。閃電樣式的小圖標代表交互事件。

（05）瞭解部件庫的使用是Axure的基礎，下面我們就來梳理一下Axure中的常用部件：

（06）Axure rp的線框圖元件：圖片圖片元件拖入編輯區後，可以通過雙擊選擇本地磁盤中的圖片，將圖片載入到編輯區，axure會自動提示將大圖片進行優化，以避免原型文件過大；選擇圖片時可以選擇圖片原始大小，或保持圖片元件的大小。文本在網頁中文本的名稱是lable，用於頁面中添加説明文字、文字連接，或一些動態的提示。矩形矩形的應用比較廣泛，比如作為頁面的背景、按鈕、以及一些元件的遮蓋等；矩形的形狀可以通過鼠標右鍵點擊–編輯選項—改變形狀，來變成我們需要的形狀，比如做選項卡時候我們需要頂部圓角的矩形，就可以通過改變矩形的形狀來實現。佔位符製作原型時，可以用它來代替對一些沒有交互或者交互比較簡單容易説明的區域；也可以做成關閉按鈕。佔位符在保真比較高的產品原型中作用不大。圓角矩形因為圓角矩形應用廣泛，所以單獨拿出來作為元件給使用者，免去了對矩形的設置。動態面板非常重要的axure元件，必須要學會使用的元件，動態面板的顯示、隱藏、多狀態等，都是非常有用的。在這裏不過多介紹，詳細介紹請參考：小樓axure圖文教程（五）動態面板的使用。水平線就是一條水平的線，可以作為表示頁面一些區域分割時使用，比如在兩塊不同區域之間添加一條水平線，來明顯的區分。水平線可以通過設置元件屬性中的角度Rotº變成斜線來使用。垂直線沒什麼好説的，和水平線一樣的作用。圖片熱區用於點擊圖片中某個區域產生交互事件時使用，圖片熱區也是矩形的一種，可以通過設置矩形無邊框，背景色100%透明度來實現。文本框（單行）用於輸入文字的axure元件，用於登錄、標題、密碼框（鼠標右鍵–編輯選項–隱藏文本）等功能。文本框（多行）從字面意思就知道了它的功能，用於實現更多文字內容輸入的axure元件，用於回覆、評論、微博發佈框這類的功能。下拉列表（框）鼠標點擊時展開多個選項的axure元件，主要用來類別選擇或多條件查詢效果時使用。列表框一個多選項的列表，帶滾動條效果，個人認為樣子很醜，應用不是很多，應用場景可以參考word自定義快速訪問工具欄中選擇添加項的效果。複選框複選框用於同類別內容可以同時選擇多個時候使用，比如註冊時候個人興趣的選擇，又比如批量刪除郵件時選擇多個郵件的功能。單選按鈕多個選項僅能選擇其一時候使用，比如性別選擇。多個單選按鈕聯動效果需要同時選中多個需要聯動的單選按鈕—鼠標右鍵—編輯選項–指定單選按鈕組來實現。不嫌麻煩的話也可以通過設置每個單選按鈕的onclick事件來實現。內部框架用於在頁面中嵌入其他頁面的axure元件，可以設置好大小後雙擊它，指定要嵌入的頁面。框架可以通過編輯選項取消滾動條，應用場景多見於網站後台原型和移動互聯網產品原型。表格表格很常見，就不多做解釋，每個表格都可以設置單獨的事件，但是axure還不支持單元格的合併。菜單縱向主要用於網站導航。多使用於網站後台。菜單橫向主要用於網站導航，多使用於網站前台。樹主要用於網站導航。多使用於網站後台。

（07）Axure rp元件的觸發事件：OnClick（點擊時）: 鼠標點擊事件，除了動態面板的所有的其他元件的點擊時觸發。比如點擊按鈕。OnMouseEnter（鼠標移入時）: 鼠標進入到某個元件範圍時觸發，比如當鼠標移到某張圖片時顯示該圖片的介紹。OnMouseOut（鼠標移出時）: 鼠標離開某個元件範圍時觸發。比如鼠標離開圖片時，圖片介紹消失。OnKeyUp（按鍵彈起時）: 文本框（單行與多行）編輯時，鍵盤按下某一個按鍵鬆開時觸發，不支持其他axure元件。比如統計文本框輸入的字數。OnFocus（獲取焦點時）: 當一個元件通過點擊或切換獲取焦點時觸發。比如搜索框編輯時，清空“請輸入關鍵字”的提示。OnLostFocus（失去焦點時）: 當一個組件失去焦點時觸發。比如用户名、密碼的驗證。OnChange（選中項改變時）:下拉列表框或列表框的選中項改變時觸發，不支持其他元件。比如選擇地址時，選擇不同的省份，顯示對應的省內城市。OnMove（移動時）：當動態面板移動時觸發。是指通過其他事件的觸發控制面板移動時，比如當進度條移動時，進度比例的變化。The OnShow and OnHide events（顯示或隱藏時）：當動態面板隱藏或顯示時觸發。比如圖片顯示時按鈕文字是關閉圖片，圖片隱藏時按鈕文字變為打開圖片。OnPanelStateChange（狀態改變時）：當動態面板更改面板的狀態時觸發。OnDragStart: Occurs when the drag begins（開始拖動面板時）：當開始拖動動態面板時觸發。比如在動態面板拖動開始時，顯示“拖動開始”的文字提示。OnDrag: Occurs as the panel is dragged（面板拖動時）：動態面板拖動時觸發，比如拖動一塊動態面板另外一塊跟隨移動。OnDragDrop: Occurs when the panel is dropped（面板拖動結束時）：當拖拽結束時觸發。比如滑動解鎖，面板拖動結束時根據滑塊的位置設置相應的效果。

（08）添加元件到畫布：在左側元件庫中選擇要使用的元件，按住鼠標左鍵不放，拖動到畫布適合的位置上鬆開。