本文根據(jù)作者的經(jīng)驗(yàn)，梳理出如何制作出炫酷高效的元件庫，希望能給大家?guī)硪恍椭?/p>

經(jīng)常做高保真原型圖的童鞋們應(yīng)該都有這種感覺：原型圖中的元件是高度重復(fù)的。比如搜索框，做好一個，在其他頁面上直接復(fù)制粘貼，然后改一下搜索關(guān)鍵字就可以了。雖然復(fù)制粘貼的速度是挺快的，但是相對于快速方便的元件庫來說，還是稍微弱了一些，特別是多個項(xiàng)目的時候。本文根據(jù)作者的經(jīng)驗(yàn)，梳理出如何制作出炫酷高效的元件庫，希望能給大家?guī)硪恍椭?/p>

一、?如何為元件庫分類？

制作元件庫之前，首先我們要想清楚元件庫的分類標(biāo)準(zhǔn)，比如我們可以按照Web端、手機(jī)端兩個大類來創(chuàng)建元件庫，也可以把Web端細(xì)分為登錄頁、列表頁、詳情頁、編輯頁等頁面級元件庫，也可以按照按鈕類、輸入類、修飾類等分類方式來創(chuàng)建元件庫。

元件庫的分類沒有具體的標(biāo)準(zhǔn)，你感覺哪種分類更合理更易于你更新維護(hù)和使用，就可以按照哪種思路去創(chuàng)建多個元件庫。當(dāng)然，如果你喜歡，也可以只創(chuàng)建一個元件庫，把所有你經(jīng)常用的元件都創(chuàng)建在里面，不過數(shù)量多的時候，就會增加你查找的時間成本。

二、?如何創(chuàng)建元件庫？

1. 打開Axure軟件，在元件庫面板中，點(diǎn)擊快捷菜單按鈕，選擇“創(chuàng)建元件庫”，如下圖所示：

2. 選擇了“創(chuàng)建元件庫”后，就會彈出一個界面，你需要選擇一下元件庫的保存路徑（不選擇的話，會存在默認(rèn)路徑下），而后為你的元件庫起一個名字，在本示例中，我按照Web端、手機(jī)端兩個大類來創(chuàng)建元件庫，如下圖所示，點(diǎn)擊“保存”則系統(tǒng)將自動打開你所創(chuàng)建的元件庫。（若未打開，你就自己去雙擊打開吧~~~）

3. 在元件庫創(chuàng)建頁面中，操作跟平時沒什么本質(zhì)區(qū)別，但是要記得，在這里，一個頁面就是一個元件，不要把所有元件都創(chuàng)建在一個頁面里。

三、?元件創(chuàng)建示例

如果本文到這里就結(jié)束了，實(shí)在對不起文章標(biāo)題~~~哈哈，來吧，正式開啟炫酷之旅~~~

下面我以Web端使用頻率較高的搜索欄為例，來簡單講解一下如何做出美貌（至少比默認(rèn)元件庫美貌。。。）的元件。

1.?元件效果

點(diǎn)擊前：

點(diǎn)擊后：

2.?所需元件

所需元件：兩個矩形、一個文本框。

為了方便大家理解，我把其中一個矩形命名為搜索框，文本框命名為輸入框，另外一個矩形命名為按鈕。

3.?實(shí)現(xiàn)步驟

按照圖片中的文字，對圖片上方的元件進(jìn)行操作，即可得到圖片下方的元件。

然后將元件拼在一起，就可以得到帶有交互效果的搜索欄了。

按照以上思路，將你常用的元件，比如收藏、下拉列表等制作在元件庫中，保存該元件庫文件，即可。

元件庫是可以隨時添加的，建議大家工作閑暇時間，可以將使用頻率很高的元件添加到自己的元件庫中，方便以后隨用隨拖。

四、?如何使用元件庫

元件庫創(chuàng)建完成了，那么怎么用呢？

首先，我們需要將元件庫加載到Axure中，如下圖所示：

然后，在每次使用的時候，直接選擇該元件庫（如下圖所示），拖取你要用的元件，就可以了，如果顏色或者大小不合適，調(diào)整一下就好啦，至少省去了一大半的重復(fù)工作。

PS：大家如果看英文版的Axure比較吃力，記得一定要在安裝的時候進(jìn)行漢化！??！不要像我，沒有及時漢化，又懶得卸載了再安裝，就Axure和有道來回切換，被迫學(xué)會了里面所有的單詞~~~~

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