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

對于產品經理畫原型，不論你是使用Axure，還是使用墨刀等其它原型工具，總會有現(xiàn)成的組件可以直接拖過來使用。

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

我用過很多 Axure 組件庫，甚至和付費買過，組件庫對畫原型的產品經理畫原型的幫助很大，這一點是毋容置疑的。

在我使用別人的組件庫時，用起來感覺總是差點意思。

• 要么是組件很碎，最終還是需要自己去畫，去組合。
• 要么是組件合并成組的很多，需要不停的才能取消分組才能進行修改。
• 要么是組件使用的交互事件太多，自己不知道怎么去調整。
• 要么是需要在多個組件庫來回切換，很多組件不帶有axure自帶的組件，還需要再切換到Default里去拖動。

如果你想建立自己的組件庫，希望下邊的內容將會給你一些思路。

一、明確組件庫的目的

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

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

理清組件的使用步驟，建立高效的組件庫

畫原型時使用，使用的操作步驟有：

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

1. 自己手動找：從組件中找到想要的
2. 搜索：輸入元件名稱，搜索出來想要的。

2）拖入畫布

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

如果是多個組件合并在一起，則需要刪除不需要的，只保留自己需要的。

3）修改組件內容，根據原型內容修改

如修改文字內容，將文案變成自己產品要用的文案。

4）添加交互動效

一定會有產品經理在畫原型時對組件添加動效。

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

根據操作步驟，找到提效點：

1、找組件

1）手動找：肉眼看著元件去找

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

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

2）搜索：Axure中的搜素是按照關鍵字進行匹配的，沒有模糊匹配。

提效方式：對組件進行合適的命名

2、拖入畫布：

將組件拖入畫布時，如果一個組件中包含了多個同類型的組件，我們需要刪除掉其他的組件，只保留一個

或者是每次只拖入1個組件，沒有其他的組件，不需要進行刪除。

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

3、修改組件內容：

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

提效方式：只對組件合并成最外層一個組，不加入其他分組。另外引入中繼器，用于快速修改大批量內容

4、添加交互動效

提效方式：組件內預置交互動效，但是不要給修改造成難度。

不要迷戀動效，動效多的組件修改起來并不會提效。

二、新建組件庫的原則

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

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

你可以找一個自己經常用的組件庫作為基礎，按照上邊提到的提效方式去修改。

2、持續(xù)迭代

不會有任何一個組件庫能夠滿足你畫原型的全部需求。就像我們做產品一樣，需要不停的迭代更新。

如果你已經畫過原型，或者是有了Axure的源文件，你可以打開一個文件，看里邊有哪些組件能抽取出來，將能夠抽取出來的組件放進組件庫中。

3、一致性

在組件里，需要保證基本的一致性。比如說web組件中，有的組件庫使用藍色，有的使用綠色，在你的原型中使用時存在了 2 種顏色。

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

4、不要迷戀多組件

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

三、如何設計自己的組件庫？

我以 Axure 為例，在Axure中你可以點擊「文件 – 新建元件庫」，就會新建一個文件。

如果你要修改組件庫，可以在元件下，點擊3個點，選擇「編輯元件庫」，就會打開選擇的元件庫，可直接進行更改。

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

定制自己組件庫的關注點

1、層級劃分與順序

對于Axure的組件只有2個層級，不論你設置的文件夾層級有多少，都只會有2個層級。

在我們自己做元件庫的時候要注意，只使用2個層級的文件即可。

對于元件的排序，是按照在元件庫中的頁面順序依次往下排列的。

編輯元件的頁面名稱對應的就是元件的名稱。

對應的有以下設計：

1）順序排列設計：常用的放在前面；比如說按鈕，我們經常使用，那就可以往前放；你也可以建立一個叫「常用」的文件夾，里邊來放對應的元件。

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

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

所以在名稱里我們可以寫多個關鍵字：

組件名稱+其它名稱+組件英文+組件性質

比如：彈窗/對話框容器展示Dialog；

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

2、原子化設計

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

然后將「原子」經過組合，合并成「分子」。比如「文字+矩形」，就是個按鈕。

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

這是UI設計的概念，我們不用太深究。

原子化設計對搭建元件庫的幫助是：

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

比如下圖，「文字+圖標+按鈕」這些基礎元件，就可以組成刪除確認模塊。

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

3、固定化的內容設計成組件

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

我們就可以做成個組件。二級頁面中多了導航欄，我們也可以做成一個組件。

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

對于后臺，「左側菜單+面包屑+頂部導航欄+底層矩形背景」 是固定的，我們也可以做成一個組件，畫頁面時直接拖過來使用。

4、同時出現(xiàn)的內容設計成組件

看個例子：對于表格頁面，經常同時出現(xiàn)的就是：

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

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

再合并上邊提到的固定化的「左側菜單+面包屑+頂部導航欄+底層矩形 」，這樣一個表格頁面也OK了，當需要畫表格頁面時，直接拖過來就可以了。

5、補充基礎組件

在畫原型時，一定會有頁面內容在組件庫中沒有的，我們需要自己畫。

這個時候需要從Axure的基礎元件中去找，我們就可以直接將 Axure 的基礎組件包含在我們的組件庫中，如圓形、矩形等。

這樣直接在同一個組件庫中進行查找拖拽即可，不用在去切換組件庫。

6、組件庫不能只幫助我們畫原型

在使用Axure時，我們不僅用來畫原型圖，還會用來寫需求文檔。

在寫PRD時，則會使用到一些標注、文字說明等組件。

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

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

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

在畫原型時，會有一些情況下我們需要添加一些動效。

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

另外對于數(shù)據錄入用的組件，我們也可以適當?shù)奶砑觿有А?/p>

8、能快速修改內容

使用組件庫一定會修改內容，我們要做的組件一定要能快速修改。

比如在進行修改文字時，我們需要選中對應的文字元件進行調整，當合并成組很多的時候，需要點擊很多次，比如Antdesign的組件。

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

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

在修改內容比較多時，可以引入中繼器。

中繼器對展示多個相同內容的幫助很大。

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

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

但是這個操作起來并不能解決時間，還不如直接畫表格來的快。

總結

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

在你做自己的組件庫時，不用特意的花大量時間去做，你可以階段性的去做一些，去補充一些組件，當看到其他好用的組件也可以放到自己的組件庫里。

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