起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品經理畫原型想提高效率，從建立自己的組件庫開始
在產品流程中，畫原型寫文檔占據了大部分的工作時間和精力，如果有趁手的工具，能提高不少效率。本文分享的組件庫的搭建方法，就能快速提高我們的工作效率。一起來看看。
對于產品經理畫原型，不論你是使用Axure，還是使用墨刀等其它原型工具，總會有現成的組件可以直接拖過來使用。
市面上的組件庫有很多，包括各大廠的，或者是個人做的，可選擇的組件很多。
我用過很多 Axure 組件庫，甚至和付費買過，組件庫對畫原型的產品經理畫原型的幫助很大，這一點是毋容置疑的。
在我使用別人的組件庫時，用起來感覺總是差點意思。
- 要么是組件很碎，最終還是需要自己去畫，去組合。
- 要么是組件合并成組的很多，需要不停的才能取消分組才能進行修改。
- 要么是組件使用的交互事件太多，自己不知道怎么去調整。
- 要么是需要在多個組件庫來回切換，很多組件不帶有axure自帶的組件，還需要再切換到Default里去拖動。
如果你想建立自己的組件庫，希望下邊的內容將會給你一些思路。
一、明確組件庫的目的
原型快速提效，不僅僅是提效，而是要極大的提效。
這一點是我們必須要清楚的，提效是目的是要又好又快的畫出合格的原型。
理清組件的使用步驟，建立高效的組件庫
畫原型時使用，使用的操作步驟有：
1）找到組件，方式有2種：
- 自己手動找：從組件中找到想要的
- 搜索：輸入元件名稱，搜索出來想要的。
2）拖入畫布
將找到的組件，拖入到畫布中
如果是多個組件合并在一起，則需要刪除不需要的，只保留自己需要的。
3）修改組件內容，根據原型內容修改
如修改文字內容，將文案變成自己產品要用的文案。
4）添加交互動效
一定會有產品經理在畫原型時對組件添加動效。
這樣我們針對這些步驟中出現的每一步操作進行分析，看哪些地方可以提效：
根據操作步驟，找到提效點：
1、找組件
1）手動找：肉眼看著元件去找
提效方式：常用的組件往前放；組件展示按照自己可以理解的層級擺放。
在Axure中的組件展示只有2級，我們可以采用合適的方式將層級劃分
2）搜索：Axure中的搜素是按照關鍵字進行匹配的，沒有模糊匹配。
提效方式：對組件進行合適的命名
2、拖入畫布：
將組件拖入畫布時，如果一個組件中包含了多個同類型的組件，我們需要刪除掉其他的組件，只保留一個
或者是每次只拖入1個組件，沒有其他的組件，不需要進行刪除。
提效方式：如果有多個組件時，則分別對多個組件各自合并成組，拖入畫布時，組件默認是選中狀態，按住shift，在點擊想使用的組件，然后delete，多余的組件就刪除了。
3、修改組件內容：
我們需要快速找到想要修改的元素。
提效方式：只對組件合并成最外層一個組，不加入其他分組。另外引入中繼器，用于快速修改大批量內容
4、添加交互動效
提效方式：組件內預置交互動效，但是不要給修改造成難度。
不要迷戀動效，動效多的組件修改起來并不會提效。
二、新建組件庫的原則
1、使用已有的組件去修改，不要從 0 開始
不要從 0 開始去畫，而是去抄、去復制、去編輯。
你可以找一個自己經常用的組件庫作為基礎，按照上邊提到的提效方式去修改。
2、持續迭代
不會有任何一個組件庫能夠滿足你畫原型的全部需求。就像我們做產品一樣，需要不停的迭代更新。
如果你已經畫過原型，或者是有了Axure的源文件，你可以打開一個文件，看里邊有哪些組件能抽取出來，將能夠抽取出來的組件放進組件庫中。
3、一致性
在組件里，需要保證基本的一致性。比如說web組件中，有的組件庫使用藍色，有的使用綠色，在你的原型中使用時存在了 2 種顏色。
雖然影響沒那么大，但是也要保證基本的一致性。
4、不要迷戀多組件
組件多并不意味著效率就能提升。
三、如何設計自己的組件庫？
我以 Axure 為例，在Axure中你可以點擊「文件 – 新建元件庫」，就會新建一個文件。
如果你要修改組件庫，可以在元件下，點擊3個點，選擇「編輯元件庫」，就會打開選擇的元件庫，可直接進行更改。
在元件庫的文件編輯和我們編輯Axure文件一樣，沒有什么區別。
定制自己組件庫的關注點
1、層級劃分與順序
對于Axure的組件只有2個層級，不論你設置的文件夾層級有多少，都只會有2個層級。
在我們自己做元件庫的時候要注意，只使用2個層級的文件即可。
對于元件的排序，是按照在元件庫中的頁面順序依次往下排列的。
編輯元件的頁面名稱對應的就是元件的名稱。
對應的有以下設計：
1）順序排列設計：常用的放在前面；比如說按鈕，我們經常使用，那就可以往前放；你也可以建立一個叫「常用」的文件夾，里邊來放對應的元件。
2）元件名稱設計：名稱是為了我們能找到元件，主要是用于搜索。
為了讓我們快速搜索到，如果名詞很簡潔，可能會存在我們搜索找不到的情況，比如組件的叫法不同，彈窗也可以叫做對話框，組件叫對話框，搜索關鍵字「彈窗」則就找不到。
所以在名稱里我們可以寫多個關鍵字：
組件名稱+其它名稱+組件英文+組件性質
比如：彈窗/對話框容器展示Dialog；
這樣的命名可以幫助我們使用搜索時快速找到組件。
2、原子化設計
原子就是頁面中最基本的元件，比如文字、圖標、分割線、矩形等元件。
然后將「原子」經過組合，合并成「分子」。比如「文字+矩形」，就是個按鈕。
然后繼續組織形成一個組件，繼續將組件進行組合形成一個模板。
這是UI設計的概念，我們不用太深究。
原子化設計對搭建元件庫的幫助是：
由基礎到模塊：先建立基礎元件，然后將元件進行合并成一個組件，然后繼續合并形成我們可以使用的一個模塊。
比如下圖，「文字+圖標+按鈕」這些基礎元件，就可以組成刪除確認模塊。
在建立基礎的元件時，就要先設置好基礎原件的規范，這樣才能保證整體組件庫的規范。
3、固定化的內容設計成組件
直接看個例子：對于一個App頁面，包含的有頂部狀態欄+底層矩形，這兩個是固定的。
我們就可以做成個組件。二級頁面中多了導航欄，我們也可以做成一個組件。
另外，我在畫App頁面時，習慣在頁面上方固定寫「頁面名稱」，所以我就把「頁面名稱」也合并上去成為組件的一部分了。
對于后臺，「左側菜單+面包屑+頂部導航欄+底層矩形背景」 是固定的，我們也可以做成一個組件，畫頁面時直接拖過來使用。
4、同時出現的內容設計成組件
看個例子：對于表格頁面，經常同時出現的就是：
「查詢條件 + 查詢/重置按鈕 + 操作按鈕 + 列表 + 分頁」，
一般表格頁面中包含的也就是這樣內容，所以就可以把這些內容合并成一個組件。
再合并上邊提到的固定化的「左側菜單+面包屑+頂部導航欄+底層矩形 」，這樣一個表格頁面也OK了，當需要畫表格頁面時，直接拖過來就可以了。
5、補充基礎組件
在畫原型時，一定會有頁面內容在組件庫中沒有的，我們需要自己畫。
這個時候需要從Axure的基礎元件中去找，我們就可以直接將 Axure 的基礎組件包含在我們的組件庫中，如圓形、矩形等。
這樣直接在同一個組件庫中進行查找拖拽即可，不用在去切換組件庫。
6、組件庫不能只幫助我們畫原型
在使用Axure時，我們不僅用來畫原型圖，還會用來寫需求文檔。
在寫PRD時，則會使用到一些標注、文字說明等組件。
PRD中常包含「修改記錄、需求描述」這個模塊，我們也可以作成一個組件。直接拖過來用即可。
在我文章中的配圖都是使用Axure做的，由于我經常使用配圖，所以我做了專門做配圖的組件。
7、組件上添加一些常規動效
在畫原型時，會有一些情況下我們需要添加一些動效。
如果你畫原型的時候再添加動效，會很費時間。我們可以把一些常規的動效先加上，比如彈窗的顯示與隱藏。
另外對于數據錄入用的組件，我們也可以適當的添加動效。
8、能快速修改內容
使用組件庫一定會修改內容，我們要做的組件一定要能快速修改。
比如在進行修改文字時，我們需要選中對應的文字元件進行調整，當合并成組很多的時候，需要點擊很多次，比如Antdesign的組件。
我們自己做的組件，只對最外層的組件合并一次即可。
也可以將組件設置成動態面板，動態面板也可以達到合并成組的效果。
在修改內容比較多時，可以引入中繼器。
中繼器對展示多個相同內容的幫助很大。
比如：宮格排布，我們可以使用中繼器，調整文字內容時，只需要調整中繼器中的數據就行了。
同樣的還有使用中繼器展示表格數據，可以直接在Excel中寫好數據，復制粘貼到中繼器中。
但是這個操作起來并不能解決時間，還不如直接畫表格來的快。
總結
以上就是我搭建自己組件庫的方式，希望能夠幫助到你。
在你做自己的組件庫時，不用特意的花大量時間去做，你可以階段性的去做一些，去補充一些組件，當看到其他好用的組件也可以放到自己的組件庫里。
組件一定要能節約我們的時間，不能提效的組件不如不用。
本文由人人都是產品經理作者【王大鹿】，微信公眾號：【產品大鹿】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
好像來到了作者的廚房，收納整潔，調料都收納在小盒子里。而我的廚房，調料包裝都沒拆，全都擺在臺面上，放到別處就找不到了。
公眾號：產品大鹿，后臺回復：元件庫，即可領取~