Axure應用技巧：可復用控制項庫製作實操

在現階段的互聯網產品的設計過程中，我們經常會提到一個詞「敏捷迭代（開發）」，簡而言之就是小步快跑策略。產品的敏捷開發，落實到交互設計中就是要在較短的時間內完成設計稿，這就牽涉到設計師的效率問題。

對於設計師效率的提升，有很多方面，如工作經驗、素材積累，當然還有可（Yao）愛（Si）的加班了。在素材的積累方面，視覺設計師的素材主要是UI Kit，和前期版本的視覺稿；而對於交互設計師來說，則是可復用控制項，主要包括控制項、ICON、注釋元件三部分，它們統一的名稱叫Axure RP元件庫。

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

自己製作元件庫可以根據行業和產品特點篩選風格一致且適合自身產品行業特點的元件進行集合。同時，也能夠清楚的知道所需原件所在的位置，節省尋找的時間。

製作元件庫可以採用Font Awesome圖標字體格式製作並載入，但是其修改較為複雜。一方面，製作需要花費時間統一整理，統一載入。假如你需要增加、刪除、修改一些原件，就需要重新統一修改、重新載入，有點類似產品的大版本迭代。另一方面，其只能製作一些ICON，不能製作可復用的組件，如時間選擇器、圖標類型等，這樣就大大減少了可復用控制項的使用範圍。

基於製作迅速便捷，後期修改維護方便的原則，建議大家採用元件庫中自帶的編輯工具進行製作。下面，就讓我們快來看一看如何用Axure來製作自己的元件庫。

Axure自製元件庫新建

一、創建元件庫

在Axure的元件庫面板中，選擇菜單，點擊菜單下的創建元件庫，選擇自製元件庫的保存路徑並命名；

二、新建控制項頁面

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

同上建立多個控制項頁面，每個頁面只保留一個元件或一個（類）組件。

三、控制項頁面分組

對新建的控制項頁面進行分組，點擊頁面面板的新建文件夾按鈕，為新建的文件夾進行分類命名，並將控制項頁面分別拖到相應的文件夾下面。

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

四、顯示元件庫

回到任一個Axure頁面中，點擊元件庫面板中的刷新元件庫按鈕，就可以在元件庫面板中查看到自製元件庫。

其中，新建分組會作為不同類型的控制項的分類顯示，分類與控制項的顯示順序依據新建的控制項頁面的順序進行展示。若要調整顯示順序，只需在自製元件庫中調整相應的順序，並保存在Axure中刷新即可。

新建的控制項，可以包含相應的懸浮、點擊等效果，同時，控制項中動態面板也可以得到保留。

Axure自製元件庫添加與修改

在Axure的頁面面板中，選中自製元件庫，點擊菜單下的的編輯元件庫按鈕，進入自製元件庫的編輯頁面。

元件庫可以進行修改、添加、刪除、調整順序等，其操作方式與Axure的操作一致。注意：如果要刪除某個控制項需要刪除控制項頁面，而不是刪除控制項頁面中的元素。

Axure自製元件庫應用

Axure元件庫的應用相對來說比較簡單，與自帶的元件庫的應用方式一致，直接拖到相應的操作區域即可。

這種製作元件庫的方法，有較多優勢：

第一，簡潔的可視化編輯方式，比較適合交互設計師使用；

第二，元件庫中的控制項能夠保留相應的元素特性，包括，動效、跳轉等，能夠復用到目標文檔中；

第三，容錯性好，控制項能夠在文檔中進行編輯，以適用不同的頁面場景；

第四，元件庫的修改能夠隨時進行，不需要統一整理，能夠在項目中進行積累；

第五，協作性好，能夠將元件庫傳遞給其他設計師，便於項目中的協作，保證頁面控制項的一致性。

可復用控制項不僅能夠在產品後期改版以及版本迭代過程中，減少相應ICON、組件等的製作時間，提高交互稿的製作效率，而且也是交互設計師的功底與經驗的體現。

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

敬請關注UIUX設計工作坊，微信公眾號：UIUX-HUANG，每周會有互聯網產品設計的相關文章更新，是作者的實際工作經驗，願與大家共同進步。

推薦閱讀：