寫這篇文章就是想總結一路走來的經驗教訓，并且跟大家分享如何快速掌握Axure這款軟件的使用，以及如何將自己的想法通過這款軟件來實現，從而構建起自己使用這款軟件的方法。希望對大家有幫助。

從零開始學Axure原型設計（入門篇）

在入門篇中，主要講解Axure的界面布局和部件庫的使用。

快速入門Axure界面

Axure界面，圖片來自網絡

• 工具欄：類似office軟件，可以對字體大小、背景填充、圖形寬高以及位于工作區的位置（XY軸）進行修改；

• 工作區：繪制產品原型的操作區域，所有的用到的元件都直接拖拽到里面就好了。

• 頁面導航：可以通過鼠標拖動調整頁面順序以及頁面之間的關系，雙擊可以重命名。

• 部件庫：也叫組件庫或元件庫，所有軟件自帶的元件和加載的元件庫都在這里，這里可以執行創建、加載、刪除axure元件庫的操作，也可以根據需求顯示全部元件或某一元件庫的元件。大家可以點擊放大鏡圖標，搜索自己需要的部件。

• 母版：這里可以創建重復出現在每一個頁面的元素，這樣在制作時就不用再重復這些操作。通常用于頁面頭部、菜單欄等的制作。

• 頁面交互：這里可以設置當前頁面的樣式，添加與該頁面有關的注釋，以及設置頁面加載時觸發的事件onpageload。

• 部件交互：這里可以設置選中元件的標簽、樣式，添加與該元件有關的注釋，以及設置頁面加載時觸發的事件。閃電樣式的小圖標代表交互事件。

部件庫的構成

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

Axure部件庫

部件使用易錯點

關于部件庫的使用，新手特別容易出錯的有以下幾點：

• 圖片：圖片拖拽進畫布時如果選擇“壓縮圖片大小”，gif文件會變成靜態的圖片形式。

• 圖片熱區：圖片熱區可以用來創建自定義按鈕上的點擊區域。例如在一個區域中，既有圖片部件又有文字部件，我們只需在這些部件上面覆蓋一個圖片熱區并添加一次事件即可，無需在每個部件上都添加事件。反之，如果你想給一張圖片上添加多個交互，也可以給圖片的部分區域覆蓋一塊熱區來實現。

• 動態面板滾動欄：使用滾動欄給你的動態面板添加可滾動內容，在動態面板屬性面板中選擇，滾動欄下拉菜單并選擇滾動欄的顯示方式，為了讓滾動欄正常顯示，動態面板狀態內中的內容必須比動態面板的邊界輪廓大，并且不能勾選調整大小以適合內容。

• 內部框架：你可以給內部框架的屬性選項框中添加Axure內置的預覽圖片，如視頻、地圖，也可以自定義預覽圖片。注意：預覽圖片會在設計區域中顯示，但不會在生成的原型中顯示。

• 列表選擇框：在一個交互事件中同時讀取或設置多個選項時，列表選擇框部件只允許你讀取或設置一個選項，即便你勾選了多選功能。

• 提交按鈕：提交按鈕無法設置交互樣式，如：選中/鼠標懸停/鼠標按下。提交按鈕的填充顏色、邊框顏色和其他大多數樣式格式都被禁用了。取而代之的是生成原型后在瀏覽器中它會使用內建的樣式。如果你想自定義你的按鈕樣式，請使用形狀按鈕“Shape button”。

• 菜單部件：無法點擊展開子菜單。菜單部件默認是鼠標懸停展示子菜單的。

特別提醒大家，在創建部件時，一定要養成給部件命名的習慣，因為無論是創建交互事件還是進行變量調用，都需要明確部件的名稱。目前我使用的命名方法是“頁面名稱+部件功能”。

現在就去下載Axure，自己玩一遍這些萌萌的部件吧！在認識了部件庫和界面之后，我們就可以自己用Axure畫線框圖了。參加眾行智慧的高級網頁UI設計培訓課程，早日成為互聯網設計的精英人才