產(chǎn)在設(shè)計原型時，如果有自己使用順手的組件庫，工作效率會提高很多。本文作者分享了如何搭建和使用自己組件庫的經(jīng)驗，供大家參考。

入門的產(chǎn)品經(jīng)理在學(xué)習(xí)使用axure畫原型的階段，在網(wǎng)上的看的教程往往偏向于用教學(xué)axure的元件去畫。這種教學(xué)在了解axure這款原型工具上沒有問題，然而如果在工作中還是通過這樣的方式去輸出原型圖，那么效率將非常之低。如果想要大幅度提高原型輸出效率，打破axure學(xué)習(xí)階段的思維桎慣性，就需要用好組件庫。

組件庫的作用就是將頁面的組層元素提前整理好，在構(gòu)思好頁面的功能后，通過引用組件元素快速完成原型頁面。使用組件庫不僅能夠快速完成頁面的搭建，還能在視覺、規(guī)范、交互上達成更好的效果。然而大部分人在使用組件庫上，還是存在一些問題，接下來我將聚焦自用組件庫上，幫助大家在使用組件庫的思路畫原型上，達到更好的效果。

一、使用開源組件的問題

我自己在剛開始使用組件庫的時候，也是直接去找大廠的開源組件庫，下載下來后進行使用。

能夠使用大廠開源組件庫已經(jīng)大大提高了原型繪制的效率，但是大廠的組件庫用于產(chǎn)品經(jīng)理去畫原型時，常常會遇到想用的組件一直找不到的情況，里面一些組件根本用不上。除此之外，大廠開源的組件雖然免費，但是組件基本上是缺少交互的，需要后續(xù)去補充，補充交互的過程往往十分機械和枯燥。

二、自搭建組件庫的好處

自搭建組件庫不是不借鑒他人的組件庫自己去完全去搭建一套組件庫，是根據(jù)自己的使用需求，整理出符合自己使用需要的組件庫。自搭建組件庫的出發(fā)點是根據(jù)自己畫原型的需要，整理出自己的組件庫，由于組件都是自己挑選、自己分類、自己調(diào)整的，所以在使用時，能夠快速找出需要使用的組件，使用起來也更加的流程，而且可以隨時更新升級自己的組件庫，讓組件庫更加的強大。

三、如何自搭建自用高效組件庫

自用高效組件庫原則：符合自己使用習(xí)慣、能基本上完成頁面內(nèi)容的搭建、帶交互

在這里推薦在開源的組件庫中進行調(diào)整和補充。這就是所謂站在巨人的肩膀上，這樣比自己完全重新建立一個組件庫更加高效，也能快速獲得效果。推薦找到自己喜歡的組件庫，然后在其基礎(chǔ)上進行專屬定制化。以下就是將開源組件庫轉(zhuǎn)化為自用高效組件庫的具體建議。

1）刪除不要的分類和組件

以antdesign為例，它開頭的說明、布局、工具，在大多數(shù)畫原型的過程中都是極低的使用頻率，甚至根本用不上，那么就直接刪除。通過直接編輯組件庫，進入后刪除這部分就可以了。

2）將常用的組件分類放在前面

雖說組件庫大部分情況下是根據(jù)在組件的搜索框進行搜索，但是把高頻使用的組件分類放在前面，還是可以大大的提高使用效率。同時組件分類的順序是自己定的，大部分情況不需搜索就能快速翻閱到。

3）更改組件名稱，方面查詢

更改組件庫名稱主要出于兩方面，一方面是用符合自己稱呼習(xí)慣，一方面是語言

這個組件在element中稱之為“對話框”，但是在你的稱呼習(xí)慣里面卻是“彈窗”，如果不更改命名的話，搜索往往是沒有結(jié)果的。

推薦在優(yōu)化組件命名的時候進行增加自己習(xí)慣的稱呼方式，不刪除它原有的稱呼方式，這樣就算一時混淆了稱呼方式也能快速找到需要的組件。

4）添加交互

以AntDesign的標簽頁為例，它本身是自己不帶交互的，如果不給它添動態(tài)面板的交互，那么每次去用它都要重新添加一遍交互那么將十分麻煩。組件庫的目的就是減少重復(fù)勞動，所以某個組件的交互原本開源組件沒有，那么就自己添加上，免得后續(xù)又要去補充交互。

5）補充自己的業(yè)務(wù)組件

開源的組件庫和別人的組件庫都會往通用性考慮，而且出于組件庫篇幅和文件大小考慮，也會把一些低頻使用的組件不放上去，但是自己工作時候的特殊性就會需要準備好自己的業(yè)務(wù)組件。其實只要有了打造專屬自己組件庫的意識，這一步是很自然的。

6）調(diào)整分類

庫的分類：移動端、網(wǎng)頁端、圖表、大屏

組件的分類：表單、詳情、列表頁；數(shù)據(jù)輸入、數(shù)據(jù)展示、導(dǎo)航等

以上只是分類的一些案例，這個分類還是推薦根據(jù)自己的情況來優(yōu)化，分類在某種程度上來說就是自己對組件庫的架構(gòu)的梳理，有了這個架構(gòu)，無論是自己對于頁面功能結(jié)構(gòu)的認知，還是繪制原型找到自己想要的組件的速度，還是維護更新自己組件庫上，都會有很大的幫助。

四、靜態(tài)組件轉(zhuǎn)換動態(tài)組件

大廠的官方組件庫基本上是不帶交互的，比如按鈕是沒有懸浮狀態(tài)的，對話框是沒有顯示/隱藏的交互的。在大部分情況下，高質(zhì)量的原型能夠帶點擊效果和交互效果往往是最好的，在組件庫的維護中增加交互效果，能夠大大提高原型繪制時原型的動態(tài)交互效果，而不是通過文字標注來完成對交互的需求說明。

這里推薦一種完成組件動態(tài)化的方式，那就是去購買第三方的大廠組件庫，有一些原型工作室會將大廠開源的組件進行交互的完善，例如標簽頁的動態(tài)面板效果、下拉單選欄的下拉項展示隱藏效果，都會做好，然后放在平臺上售賣。直接購買自己喜歡的組件庫，再根據(jù)前面將開源組件專屬化的方式，便能得到一個具都是動態(tài)組件的專屬組件庫。

五、典型頁面的使用

• 小白：使用點線面去畫原型
• 入門選手：用組件拼成需要原型
• 大神：拖出典型頁面去改成需要的原型

典型頁面的概念首先是在Antdesign Pro上面看到的，其實它家開源的典型頁面的問題和組件一樣，分類不太好用、沒有交互。其實只要掌握前面改進組件的方法，那么便能擁有自己的一套典型頁面庫。

原型只是表達產(chǎn)品經(jīng)理思想的一種方式，是需求的最后一個環(huán)節(jié)。產(chǎn)品經(jīng)理往往需要再需求調(diào)研、分析、梳理上花大量的時間，所以，花一點時間讓自己掌握高效的原型輸出能力，讓自己的工作更加愉快吧！