本文作者將與我們分享：如何用Axure來制作自己的元件庫。

在現(xiàn)階段的互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)過程中，我們經(jīng)常會(huì)提到一個(gè)詞“敏捷迭代（開發(fā)）”，簡而言之就是小步快跑策略。產(chǎn)品的敏捷開發(fā)，落實(shí)到交互設(shè)計(jì)中就是要在較短的時(shí)間內(nèi)完成設(shè)計(jì)稿，這就牽涉到設(shè)計(jì)師的效率問題。

對(duì)于設(shè)計(jì)師效率的提升，有很多方面，如工作經(jīng)驗(yàn)、素材積累，當(dāng)然還有可（Yao）愛（Si）的加班了。在素材的積累方面，視覺設(shè)計(jì)師的素材主要是UI Kit，和前期版本的視覺稿；而對(duì)于交互設(shè)計(jì)師來說，則是可復(fù)用控件，主要包括控件、ICON、注釋元件三部分，它們統(tǒng)一的名稱叫Axure RP元件庫。

Axure元件庫

Axure RP中的元件庫可以載入他人制作的元件庫，也可以根據(jù)自己的需求，以及所負(fù)責(zé)的實(shí)際項(xiàng)目，制作出符合自己行業(yè)和產(chǎn)品特點(diǎn)的元件庫。載入他人的元件庫快捷、方便，且比較豐富。目前，Axure RP 8.0版本中，新增了默認(rèn)的Icons元件庫，其數(shù)量充足、全面，而且還可以根據(jù)自己的需求方便的改變顏色，相較于圖片的ICON方便很多。但缺點(diǎn)也是顯而易見，他人的元件庫都具有普適性，或者和你的行業(yè)相差甚遠(yuǎn)，即其包含的元件不太適合所在行業(yè)；另外一點(diǎn)，你不清楚所載入的元件庫有沒有所需要的元件，以及所需元件的位置，這樣會(huì)花費(fèi)較多的時(shí)間來尋找。

自己制作元件庫可以根據(jù)行業(yè)和產(chǎn)品特點(diǎn)篩選風(fēng)格一致且適合自身產(chǎn)品行業(yè)特點(diǎn)的元件進(jìn)行集合。同時(shí)，也能夠清楚的知道所需原件所在的位置，節(jié)省尋找的時(shí)間。

制作元件庫可以采用Font Awesome圖標(biāo)字體格式制作并載入，但是其修改較為復(fù)雜。一方面，制作需要花費(fèi)時(shí)間統(tǒng)一整理，統(tǒng)一載入。假如你需要增加、刪除、修改一些原件，就需要重新統(tǒng)一修改、重新載入，有點(diǎn)類似產(chǎn)品的大版本迭代。另一方面，其只能制作一些ICON，不能制作可復(fù)用的組件，如時(shí)間選擇器、圖標(biāo)類型等，這樣就大大減少了可復(fù)用控件的使用范圍。

基于制作迅速便捷，后期修改維護(hù)方便的原則，建議大家采用元件庫中自帶的編輯工具進(jìn)行制作。下面，就讓我們快來看一看如何用Axure來制作自己的元件庫。

Axure自制元件庫新建

1、在Axure的元件庫面板中，選擇菜單，點(diǎn)擊菜單下的創(chuàng)建元件庫，選擇自制元件庫的保存路徑并命名；

創(chuàng)建元件庫

2、雙擊頁面面板中的頁面新建第一個(gè)元件，可以將事先做好的ICON或者組件放到頁面的左上角，并為頁面修改好名稱；

新建控件頁面

同上建立多個(gè)控件頁面，每個(gè)頁面只保留一個(gè)元件或一個(gè)（類）組件。

3、對(duì)新建的控件頁面進(jìn)行分組，點(diǎn)擊頁面面板的新建文件夾按鈕，為新建的文件夾進(jìn)行分類命名，并將控件頁面分別拖到相應(yīng)的文件夾下面。

控件頁面分組

接著，Ctrl+S保存，這樣就完成了自制元件庫雛形的建立。

4、回到任一個(gè)Axure頁面中，點(diǎn)擊元件庫面板中的刷新元件庫按鈕，就可以在元件庫面板中查看到自制元件庫。

其中，新建分組會(huì)作為不同類型的控件的分類顯示，分類與控件的顯示順序依據(jù)新建的控件頁面的順序進(jìn)行展示。若要調(diào)整顯示順序，只需在自制元件庫中調(diào)整相應(yīng)的順序，并保存在Axure中刷新即可。

顯示元件庫

新建的控件，可以包含相應(yīng)的懸浮、點(diǎn)擊等效果，同時(shí)，控件中動(dòng)態(tài)面板也可以得到保留。

Axure自制元件庫添加與修改

在Axure的頁面面板中，選中自制元件庫，點(diǎn)擊菜單下的的編輯元件庫按鈕，進(jìn)入自制元件
庫的編輯頁面。

元件庫修改

元件庫可以進(jìn)行修改、添加、刪除、調(diào)整順序等，其操作方式與Axure的操作一致。注意：如果要?jiǎng)h除某個(gè)控件需要?jiǎng)h除控件頁面，而不是刪除控件頁面中的元素。

Axure自制元件庫應(yīng)用

Axure元件庫的應(yīng)用相對(duì)來說比較簡單，與自帶的元件庫的應(yīng)用方式一致，直接拖到相應(yīng)的操作區(qū)域即可。

元件庫應(yīng)用

這種制作元件庫的方法，有較多優(yōu)勢：

1. 簡潔的可視化編輯方式，比較適合交互設(shè)計(jì)師使用；
2. 元件庫中的控件能夠保留相應(yīng)的元素特性，包括，動(dòng)效、跳轉(zhuǎn)等，能夠復(fù)用到目標(biāo)文檔中；
3. 容錯(cuò)性好，控件能夠在文檔中進(jìn)行編輯，以適用不同的頁面場景；
4. 元件庫的修改能夠隨時(shí)進(jìn)行，不需要統(tǒng)一整理，能夠在項(xiàng)目中進(jìn)行積累；
5. 協(xié)作性好，能夠?qū)⒃靷鬟f給其他設(shè)計(jì)師，便于項(xiàng)目中的協(xié)作，保證頁面控件的一致性。

可復(fù)用控件不僅能夠在產(chǎn)品后期改版以及版本迭代過程中，減少相應(yīng)ICON、組件等的制作時(shí)間，提高交互稿的制作效率，而且也是交互設(shè)計(jì)師的功底與經(jīng)驗(yàn)的體現(xiàn)。

看完之后，是不是覺得制作自己的Axure元件庫很有必要而且簡單。那就趕快開始自己第一個(gè)元件庫的制作吧！

作者：弘毅道，微信公眾號(hào)：UIUX設(shè)計(jì)工作坊（UIUX-HUANG)， 希望與同行者多多交流。

本文由 @弘毅道 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。 未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議