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

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

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

快速入門Axure界面

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

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

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

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

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

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

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

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

部件庫(kù)的構(gòu)成

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

Axure部件庫(kù)

部件使用易錯(cuò)點(diǎn)

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

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

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

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

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

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

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

• 菜單部件：無(wú)法點(diǎn)擊展開子菜單。菜單部件默認(rèn)是鼠標(biāo)懸停展示子菜單的。

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

現(xiàn)在就去下載Axure，自己玩一遍這些萌萌的部件吧！在認(rèn)識(shí)了部件庫(kù)和界面之后，我們就可以自己用Axure畫線框圖了。參加眾行智慧的高級(jí)網(wǎng)頁(yè)UI設(shè)計(jì)培訓(xùn)課程，早日成為互聯(lián)網(wǎng)設(shè)計(jì)的精英人才