如果說Sketch是最美、最簡潔的設(shè)計軟件，那么Axure就是最強大的原型設(shè)計軟件。Axure不僅能制作靜態(tài)的視覺稿、頁面，還能添加交互動作，是進行原型設(shè)計的最佳軟件之一。雖然Axure的學(xué)習(xí)曲線比較陡峭，但是掌握之后可以很快實現(xiàn)我們腦海中的用戶體驗效果。

Axure 8.0

筆者自學(xué)Axure有半年多的時間了。剛開始接觸Axure的時候，逛過無數(shù)論壇、Axure的網(wǎng)站，也瀏覽了許多大牛錄制的Axure視頻課程。這些教程和資料非常完整地介紹了這款軟件能夠做什么，這款軟件的界面如何，怎么樣使用部件，如何創(chuàng)建交互等。但是在自學(xué)過程中，如何掌握學(xué)習(xí)的先后次序從而達到最佳的學(xué)習(xí)效果這方面我走了很多彎路。

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

從零開始學(xué)Axure原型設(shè)計（入門篇）

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

快速入門Axure界面

Axure界面，圖片來自網(wǎng)絡(luò)

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

· 工作區(qū)：繪制產(chǎn)品原型的操作區(qū)域，所有的用到的元件都直接拖拽到里面就好了。

· 頁面導(dǎo)航：可以通過鼠標拖動調(diào)整頁面順序以及頁面之間的關(guān)系，雙擊可以重命名。

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

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

· 頁面交互：這里可以設(shè)置當前頁面的樣式，添加與該頁面有關(guān)的注釋，以及設(shè)置頁面加載時觸發(fā)的事件onpageload。

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

部件庫的構(gòu)成

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

Axure部件庫

部件使用易錯點

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

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

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

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

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

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

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

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

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

現(xiàn)在就去下載Axure，自己玩一遍這些萌萌的部件吧！在認識了部件庫和界面之后，我們就可以自己用Axure畫線框圖了。

本文轉(zhuǎn)載自： 簡書

作者：粽小喵