本文根據作者的經驗，梳理出如何制作出炫酷高效的元件庫，希望能給大家帶來一些幫助。

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

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

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

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

二、?如何創建元件庫？

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

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

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

三、?元件創建示例

如果本文到這里就結束了，實在對不起文章標題~~~哈哈，來吧，正式開啟炫酷之旅~~~

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

1.?元件效果

點擊前：

點擊后：

2.?所需元件

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

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

3.?實現步驟

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

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

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

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

四、?如何使用元件庫

元件庫創建完成了，那么怎么用呢？

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

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

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

本文由 @那只貓的魚 原創發布于人人都是產品經理。未經許可，禁止轉載。