Axure教程：如何製作炫酷高效的元件庫？

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

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

一、 如何為元件庫分類？

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

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

二、 如何創建元件庫？

• 打開Axure軟體，在元件庫面板中，點擊快捷菜單按鈕，選擇「創建元件庫」，如下圖所示：

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

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

三、 元件創建示例

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

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

1. 元件效果

點擊前：

點擊后：

2. 所需元件

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

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

3. 實現步驟

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

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

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

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

四、 如何使用元件庫

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

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

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

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

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