本文根據(jù)作者的經(jīng)驗(yàn)，梳理出如何制作出炫酷高效的元件庫(kù)，希望能給大家?guī)?lái)一些幫助。

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

一、?如何為元件庫(kù)分類？

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

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

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

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

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

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

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

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

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

1.?元件效果

點(diǎn)擊前：

點(diǎn)擊后：

2.?所需元件

所需元件：兩個(gè)矩形、一個(gè)文本框。

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

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

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

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

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

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

四、?如何使用元件庫(kù)

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

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

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

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

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