本文將深入探討如何創(chuàng)建并有效利用個(gè)人化的Axure元件庫(kù)，以及它如何在不同場(chǎng)景下提高工作效率。我們將通過(guò)具體的步驟指導(dǎo)和實(shí)際案例，展示制作和管理元件庫(kù)的技巧，以及如何通過(guò)元件庫(kù)解決常見(jiàn)的工作難題。

Q&A環(huán)節(jié)

Q：什么是元件庫(kù)？

A：Axure 元件庫(kù)是我們?cè)O(shè)計(jì)產(chǎn)品時(shí)必備的工具，那么在日常使用中我們經(jīng)常會(huì)用到一些常用的元素，如果每次都重新制作非常麻煩，最簡(jiǎn)單的方法就是講做好的內(nèi)容做成元件，方便下次直接使用。

Q：有沒(méi)有通用標(biāo)準(zhǔn)的元件庫(kù)？

A：沒(méi)有，最好的元件庫(kù)是根據(jù)自己實(shí)際設(shè)計(jì)制作屬于自己的元件庫(kù)，舉個(gè)例子：專(zhuān)做saas的PM，經(jīng)常用到后臺(tái)的一些元件庫(kù)（輸入框、選擇器、進(jìn)度條等）整理好屬于自己常用的，下次做需求要添加某某條件篩選，拖出來(lái)改下就行了。

Q：又如何制作屬于自己的元件庫(kù)呢？

A：下面的教程基本就是闡述一些如何制作自己的元件庫(kù)，并提高工作效率的方式與教程。

一、先從制作元件庫(kù)說(shuō)起

先從RP文件里找到元件庫(kù)，在右上角操作地方，創(chuàng)建元件庫(kù)（同時(shí)你也能載入做好的元件庫(kù)）,輸入名稱(chēng)并保存，此刻axure會(huì)自動(dòng)創(chuàng)建rplib文件并打開(kāi)，如下圖所示

下一步就把你想要并常用的內(nèi)容放在當(dāng)前頁(yè)面，這樣就形成了一組元件庫(kù)

這里特別提醒下：

• 選擇的元件庫(kù)可包含任意交互與動(dòng)態(tài)面板，如果制作元件庫(kù)用了交互拖出來(lái)是附帶交互效果的
• 每個(gè)元件庫(kù)放置的位置做好是(0,0)
• 對(duì)當(dāng)前元件庫(kù)進(jìn)行刪除修改都行，保存后重新載入下元件庫(kù)立馬生效

最后就是要把元件庫(kù)做好歸類(lèi)與名稱(chēng)設(shè)置

為了方便并快速查詢(xún)想要的元件庫(kù)，做好歸類(lèi)與名稱(chēng)的設(shè)置是特別重要的，原因是因?yàn)椋涸?kù)基本都是縮略圖，看不清楚內(nèi)容，另外有效的歸類(lèi)方便管理不同內(nèi)容的元件庫(kù)并快速找到，最終通過(guò)名稱(chēng)來(lái)識(shí)別。

舉個(gè)例子先說(shuō)下步驟：

1. 在元件庫(kù)創(chuàng)建分組文件夾（文件夾是唯一元件庫(kù)區(qū)分歸類(lèi)的）：num（數(shù)據(jù)歸類(lèi)）
2. 在當(dāng)前建立元件文件：Num_表頭樣式A

最后再?gòu)?qiáng)調(diào)下：元件庫(kù)沒(méi)有二級(jí)分類(lèi)，只有一級(jí)分類(lèi)，為了方便自己管理元件庫(kù)，可在文件夾的上一級(jí)再創(chuàng)建文件夾去管理，且不會(huì)影響其他分組。

這個(gè)基本就是制作自己元件庫(kù)的流程了。

二、再用幾個(gè)場(chǎng)景描述元件庫(kù)的必要性

下面我用幾個(gè)場(chǎng)景來(lái)描述如何快速使用元件庫(kù)制作Web端，且效率會(huì)起碼提高一倍

場(chǎng)景A：開(kāi)發(fā)與產(chǎn)品互懟需求的業(yè)務(wù)場(chǎng)景

開(kāi)發(fā)：你這個(gè)原型沒(méi)標(biāo)注篩選哪些內(nèi)容，你叫我們?cè)趺醋觯?/p>

PM：我標(biāo)注了，在下面有說(shuō)明篩選哪些內(nèi)容；

開(kāi)發(fā)：。。。好吧，我沒(méi)有注意滑下去看需求內(nèi)容。

這個(gè)場(chǎng)景誰(shuí)都沒(méi)有什么錯(cuò)誤，開(kāi)發(fā)可能沒(méi)注意，產(chǎn)品可能沒(méi)標(biāo)注箭頭提示做好說(shuō)明，Web制作的原型基本都是全屏的，每次上下滾動(dòng)來(lái)回看特別耗時(shí)，且容易忽略細(xì)節(jié)問(wèn)題，如果做交互那更費(fèi)時(shí)間，產(chǎn)品也就想表達(dá)自己的意思就可以。

但如果你經(jīng)常做后臺(tái)選擇器相關(guān)的內(nèi)容，提前把帶有交互的元件庫(kù)樣板上去，只要修改下文案，就輕松解決了問(wèn)題，且開(kāi)發(fā)也明白你想要做怎么樣的選擇器。

場(chǎng)景B：UI與產(chǎn)品互懟需求的業(yè)務(wù)場(chǎng)景

UI：你這個(gè)icon到底是想出彈窗，還是跳轉(zhuǎn)二級(jí)頁(yè)面，還有你一級(jí)菜單有哪些內(nèi)容，二級(jí)菜單有哪些內(nèi)容，怎么歸類(lèi)

PM：我這個(gè)icon跳轉(zhuǎn)我在下面標(biāo)注了是彈窗，跳轉(zhuǎn)是跳到下個(gè)index頁(yè)面內(nèi)容，一級(jí)菜單按照我做的業(yè)務(wù)流程梳理那些就可以，你看下我的xmind

說(shuō)句實(shí)話，如果你有精力吧所有交互做出來(lái)，那基本也不要那些UI、UE佬了，在就是很多公司基本做后臺(tái)的UI只給設(shè)計(jì)規(guī)范，很多表單設(shè)計(jì)，開(kāi)發(fā)基本都是照著原型直接懟出來(lái)的，所以給到PM的壓力也大，既要考慮表單樣式和規(guī)范，又要考慮點(diǎn)擊跳轉(zhuǎn)交互邏輯，如果搞不好甚至可能把自己玩自閉。

但如果你有屬于自己的元件庫(kù)，以后不管表單樣式還是交互跳轉(zhuǎn)，都是固定統(tǒng)一的，直接拖出來(lái)使用就可以。即做到樣式統(tǒng)一，又可以規(guī)范交互跳轉(zhuǎn)，這可能也就是元件庫(kù)最大的魅力所在了吧。

三、最后歸根結(jié)底還是要找到屬于自己的元件庫(kù)

希望大家也能養(yǎng)成自己做自己元件庫(kù)的好習(xí)慣，因?yàn)橹貜?fù)的事情重復(fù)做等于浪費(fèi)時(shí)間，日常工作中我們經(jīng)常要用的那幾個(gè)，有必要的話可以放入自己的元件庫(kù)，久而久之，打造屬于自己的元件庫(kù)

帶有交互的元件庫(kù)是特別有必要的，等你用起來(lái)的時(shí)候你會(huì)覺(jué)得，真香。

1. 【交互元件庫(kù)】移動(dòng)端元件庫(kù) 框架 數(shù)據(jù)表單

軟件版本：Axure8、Axure9、Axure10（通用）支持墨刀導(dǎo)入HTML文件

Axure移動(dòng)端元件庫(kù)演示預(yù)覽地址：https://b3b0ax.axshare.com

Axure電腦端元件庫(kù)演示預(yù)覽地址：https://wui06c.axshare.com

元件庫(kù)圖片示例：

以上就是如何在Axure里充分利用元件庫(kù)快速搭建原型的介紹，希望能幫到您，感謝大家的閱讀，謝謝！