在產(chǎn)品流程中，畫原型寫文檔占據(jù)了大部分的工作時(shí)間和精力，如果有趁手的工具，能提高不少效率。本文分享的組件庫(kù)的搭建方法，就能快速提高我們的工作效率。一起來(lái)看看。

對(duì)于產(chǎn)品經(jīng)理畫原型，不論你是使用Axure，還是使用墨刀等其它原型工具，總會(huì)有現(xiàn)成的組件可以直接拖過(guò)來(lái)使用。

市面上的組件庫(kù)有很多，包括各大廠的，或者是個(gè)人做的，可選擇的組件很多。

我用過(guò)很多 Axure 組件庫(kù)，甚至和付費(fèi)買過(guò)，組件庫(kù)對(duì)畫原型的產(chǎn)品經(jīng)理畫原型的幫助很大，這一點(diǎn)是毋容置疑的。

在我使用別人的組件庫(kù)時(shí)，用起來(lái)感覺(jué)總是差點(diǎn)意思。

• 要么是組件很碎，最終還是需要自己去畫，去組合。
• 要么是組件合并成組的很多，需要不停的才能取消分組才能進(jìn)行修改。
• 要么是組件使用的交互事件太多，自己不知道怎么去調(diào)整。
• 要么是需要在多個(gè)組件庫(kù)來(lái)回切換，很多組件不帶有axure自帶的組件，還需要再切換到Default里去拖動(dòng)。

如果你想建立自己的組件庫(kù)，希望下邊的內(nèi)容將會(huì)給你一些思路。

一、明確組件庫(kù)的目的

原型快速提效，不僅僅是提效，而是要極大的提效。

這一點(diǎn)是我們必須要清楚的，提效是目的是要又好又快的畫出合格的原型。

理清組件的使用步驟，建立高效的組件庫(kù)

畫原型時(shí)使用，使用的操作步驟有：

1）找到組件，方式有2種：

1. 自己手動(dòng)找：從組件中找到想要的
2. 搜索：輸入元件名稱，搜索出來(lái)想要的。

2）拖入畫布

將找到的組件，拖入到畫布中

如果是多個(gè)組件合并在一起，則需要?jiǎng)h除不需要的，只保留自己需要的。

3）修改組件內(nèi)容，根據(jù)原型內(nèi)容修改

如修改文字內(nèi)容，將文案變成自己產(chǎn)品要用的文案。

4）添加交互動(dòng)效

一定會(huì)有產(chǎn)品經(jīng)理在畫原型時(shí)對(duì)組件添加動(dòng)效。

這樣我們針對(duì)這些步驟中出現(xiàn)的每一步操作進(jìn)行分析，看哪些地方可以提效：

根據(jù)操作步驟，找到提效點(diǎn)：

1、找組件

1）手動(dòng)找：肉眼看著元件去找

提效方式：常用的組件往前放；組件展示按照自己可以理解的層級(jí)擺放。

在Axure中的組件展示只有2級(jí)，我們可以采用合適的方式將層級(jí)劃分

2）搜索：Axure中的搜素是按照關(guān)鍵字進(jìn)行匹配的，沒(méi)有模糊匹配。

提效方式：對(duì)組件進(jìn)行合適的命名

2、拖入畫布：

將組件拖入畫布時(shí)，如果一個(gè)組件中包含了多個(gè)同類型的組件，我們需要?jiǎng)h除掉其他的組件，只保留一個(gè)

或者是每次只拖入1個(gè)組件，沒(méi)有其他的組件，不需要進(jìn)行刪除。

提效方式：如果有多個(gè)組件時(shí)，則分別對(duì)多個(gè)組件各自合并成組，拖入畫布時(shí)，組件默認(rèn)是選中狀態(tài)，按住shift，在點(diǎn)擊想使用的組件，然后delete，多余的組件就刪除了。

3、修改組件內(nèi)容：

我們需要快速找到想要修改的元素。

提效方式：只對(duì)組件合并成最外層一個(gè)組，不加入其他分組。另外引入中繼器，用于快速修改大批量?jī)?nèi)容

4、添加交互動(dòng)效

提效方式：組件內(nèi)預(yù)置交互動(dòng)效，但是不要給修改造成難度。

不要迷戀動(dòng)效，動(dòng)效多的組件修改起來(lái)并不會(huì)提效。

二、新建組件庫(kù)的原則

1、使用已有的組件去修改，不要從 0 開始

不要從 0 開始去畫，而是去抄、去復(fù)制、去編輯。

你可以找一個(gè)自己經(jīng)常用的組件庫(kù)作為基礎(chǔ)，按照上邊提到的提效方式去修改。

2、持續(xù)迭代

不會(huì)有任何一個(gè)組件庫(kù)能夠滿足你畫原型的全部需求。就像我們做產(chǎn)品一樣，需要不停的迭代更新。

如果你已經(jīng)畫過(guò)原型，或者是有了Axure的源文件，你可以打開一個(gè)文件，看里邊有哪些組件能抽取出來(lái)，將能夠抽取出來(lái)的組件放進(jìn)組件庫(kù)中。

3、一致性

在組件里，需要保證基本的一致性。比如說(shuō)web組件中，有的組件庫(kù)使用藍(lán)色，有的使用綠色，在你的原型中使用時(shí)存在了 2 種顏色。

雖然影響沒(méi)那么大，但是也要保證基本的一致性。

4、不要迷戀多組件

組件多并不意味著效率就能提升。

三、如何設(shè)計(jì)自己的組件庫(kù)？

我以 Axure 為例，在Axure中你可以點(diǎn)擊「文件 – 新建元件庫(kù)」，就會(huì)新建一個(gè)文件。

如果你要修改組件庫(kù)，可以在元件下，點(diǎn)擊3個(gè)點(diǎn)，選擇「編輯元件庫(kù)」，就會(huì)打開選擇的元件庫(kù)，可直接進(jìn)行更改。

在元件庫(kù)的文件編輯和我們編輯Axure文件一樣，沒(méi)有什么區(qū)別。

定制自己組件庫(kù)的關(guān)注點(diǎn)

1、層級(jí)劃分與順序

對(duì)于Axure的組件只有2個(gè)層級(jí)，不論你設(shè)置的文件夾層級(jí)有多少，都只會(huì)有2個(gè)層級(jí)。

在我們自己做元件庫(kù)的時(shí)候要注意，只使用2個(gè)層級(jí)的文件即可。

對(duì)于元件的排序，是按照在元件庫(kù)中的頁(yè)面順序依次往下排列的。

編輯元件的頁(yè)面名稱對(duì)應(yīng)的就是元件的名稱。

對(duì)應(yīng)的有以下設(shè)計(jì)：

1）順序排列設(shè)計(jì)：常用的放在前面；比如說(shuō)按鈕，我們經(jīng)常使用，那就可以往前放；你也可以建立一個(gè)叫「常用」的文件夾，里邊來(lái)放對(duì)應(yīng)的元件。

2）元件名稱設(shè)計(jì)：名稱是為了我們能找到元件，主要是用于搜索。

為了讓我們快速搜索到，如果名詞很簡(jiǎn)潔，可能會(huì)存在我們搜索找不到的情況，比如組件的叫法不同，彈窗也可以叫做對(duì)話框，組件叫對(duì)話框，搜索關(guān)鍵字「彈窗」則就找不到。

所以在名稱里我們可以寫多個(gè)關(guān)鍵字：

組件名稱+其它名稱+組件英文+組件性質(zhì)

比如：彈窗/對(duì)話框容器展示Dialog；

這樣的命名可以幫助我們使用搜索時(shí)快速找到組件。

2、原子化設(shè)計(jì)

原子就是頁(yè)面中最基本的元件，比如文字、圖標(biāo)、分割線、矩形等元件。

然后將「原子」經(jīng)過(guò)組合，合并成「分子」。比如「文字+矩形」，就是個(gè)按鈕。

然后繼續(xù)組織形成一個(gè)組件，繼續(xù)將組件進(jìn)行組合形成一個(gè)模板。

這是UI設(shè)計(jì)的概念，我們不用太深究。

原子化設(shè)計(jì)對(duì)搭建元件庫(kù)的幫助是：

由基礎(chǔ)到模塊：先建立基礎(chǔ)元件，然后將元件進(jìn)行合并成一個(gè)組件，然后繼續(xù)合并形成我們可以使用的一個(gè)模塊。

比如下圖，「文字+圖標(biāo)+按鈕」這些基礎(chǔ)元件，就可以組成刪除確認(rèn)模塊。

在建立基礎(chǔ)的元件時(shí)，就要先設(shè)置好基礎(chǔ)原件的規(guī)范，這樣才能保證整體組件庫(kù)的規(guī)范。

3、固定化的內(nèi)容設(shè)計(jì)成組件

直接看個(gè)例子：對(duì)于一個(gè)App頁(yè)面，包含的有頂部狀態(tài)欄+底層矩形，這兩個(gè)是固定的。

我們就可以做成個(gè)組件。二級(jí)頁(yè)面中多了導(dǎo)航欄，我們也可以做成一個(gè)組件。

另外，我在畫App頁(yè)面時(shí)，習(xí)慣在頁(yè)面上方固定寫「頁(yè)面名稱」，所以我就把「頁(yè)面名稱」也合并上去成為組件的一部分了。

對(duì)于后臺(tái)，「左側(cè)菜單+面包屑+頂部導(dǎo)航欄+底層矩形背景」 是固定的，我們也可以做成一個(gè)組件，畫頁(yè)面時(shí)直接拖過(guò)來(lái)使用。

4、同時(shí)出現(xiàn)的內(nèi)容設(shè)計(jì)成組件

看個(gè)例子：對(duì)于表格頁(yè)面，經(jīng)常同時(shí)出現(xiàn)的就是：

「查詢條件 + 查詢/重置按鈕 + 操作按鈕 + 列表 + 分頁(yè)」，

一般表格頁(yè)面中包含的也就是這樣內(nèi)容，所以就可以把這些內(nèi)容合并成一個(gè)組件。

再合并上邊提到的固定化的「左側(cè)菜單+面包屑+頂部導(dǎo)航欄+底層矩形 」，這樣一個(gè)表格頁(yè)面也OK了，當(dāng)需要畫表格頁(yè)面時(shí)，直接拖過(guò)來(lái)就可以了。

5、補(bǔ)充基礎(chǔ)組件

在畫原型時(shí)，一定會(huì)有頁(yè)面內(nèi)容在組件庫(kù)中沒(méi)有的，我們需要自己畫。

這個(gè)時(shí)候需要從Axure的基礎(chǔ)元件中去找，我們就可以直接將 Axure 的基礎(chǔ)組件包含在我們的組件庫(kù)中，如圓形、矩形等。

這樣直接在同一個(gè)組件庫(kù)中進(jìn)行查找拖拽即可，不用在去切換組件庫(kù)。

6、組件庫(kù)不能只幫助我們畫原型

在使用Axure時(shí)，我們不僅用來(lái)畫原型圖，還會(huì)用來(lái)寫需求文檔。

在寫PRD時(shí)，則會(huì)使用到一些標(biāo)注、文字說(shuō)明等組件。

PRD中常包含「修改記錄、需求描述」這個(gè)模塊，我們也可以作成一個(gè)組件。直接拖過(guò)來(lái)用即可。

在我文章中的配圖都是使用Axure做的，由于我經(jīng)常使用配圖，所以我做了專門做配圖的組件。

7、組件上添加一些常規(guī)動(dòng)效

在畫原型時(shí)，會(huì)有一些情況下我們需要添加一些動(dòng)效。

如果你畫原型的時(shí)候再添加動(dòng)效，會(huì)很費(fèi)時(shí)間。我們可以把一些常規(guī)的動(dòng)效先加上，比如彈窗的顯示與隱藏。

另外對(duì)于數(shù)據(jù)錄入用的組件，我們也可以適當(dāng)?shù)奶砑觿?dòng)效。

8、能快速修改內(nèi)容

使用組件庫(kù)一定會(huì)修改內(nèi)容，我們要做的組件一定要能快速修改。

比如在進(jìn)行修改文字時(shí)，我們需要選中對(duì)應(yīng)的文字元件進(jìn)行調(diào)整，當(dāng)合并成組很多的時(shí)候，需要點(diǎn)擊很多次，比如Antdesign的組件。

我們自己做的組件，只對(duì)最外層的組件合并一次即可。

也可以將組件設(shè)置成動(dòng)態(tài)面板，動(dòng)態(tài)面板也可以達(dá)到合并成組的效果。

在修改內(nèi)容比較多時(shí)，可以引入中繼器。

中繼器對(duì)展示多個(gè)相同內(nèi)容的幫助很大。

比如：宮格排布，我們可以使用中繼器，調(diào)整文字內(nèi)容時(shí)，只需要調(diào)整中繼器中的數(shù)據(jù)就行了。

同樣的還有使用中繼器展示表格數(shù)據(jù)，可以直接在Excel中寫好數(shù)據(jù)，復(fù)制粘貼到中繼器中。

但是這個(gè)操作起來(lái)并不能解決時(shí)間，還不如直接畫表格來(lái)的快。

總結(jié)

以上就是我搭建自己組件庫(kù)的方式，希望能夠幫助到你。

在你做自己的組件庫(kù)時(shí)，不用特意的花大量時(shí)間去做，你可以階段性的去做一些，去補(bǔ)充一些組件，當(dāng)看到其他好用的組件也可以放到自己的組件庫(kù)里。

組件一定要能節(jié)約我們的時(shí)間，不能提效的組件不如不用。