編輯導語：搭建組件庫，提升原型設計能力能有效地將解決方案進行封裝，從而提升設計效率，但是在畫原型的過程中總會出現許多問題，主要是因為產品經理沒有組件庫的思維。本篇文章主要分享如何搭建自己的組件庫，從而提升原型設計能力，一起來學習一下。

畫原型，是產品經理日常重要的工作之一，我發現很多產品經理在畫原型的時候，會出現以下下問題：

1. 每次做新項目的時候，原型所有組件、頁面、模塊都是從0到1，用最基礎的組件進行組合，很費時間不說，畫出來的原型還很丑；
2. 沒有迭代的思維，這次畫了以后，下次再畫又是相同的思路再畫一遍，沒有積累經驗，沒有積累更多的方案；
3. 長期淪為人肉原型機，沉迷于原型無法自拔，產品底層能力無法得到提升，始終無法晉升為高級產品經理。

出現這些問題，主要是產品經理沒有組件庫的思維。這篇文章，分享如何搭建自己的組件庫，避免出現以上問題。

一、組件庫

組件庫是由組件組成的一系列現成解決方案，組件有大有小，最小的組件是按鈕、文字、圖片、輸入框等，這些組件通過組合形成組件塊，再組合成頁面，頁面再組合成模塊。

從物理層面來說，產品正是由這些大大小小的組件組成。

使用組件庫，可以提升我們畫原型的效率，比如，C端產品，都有登錄注冊的模塊，B端產品都有用戶角色權限模塊，如果有現場的組件庫，畫原型的時候，直接從組件庫里拖出來就可以了，省去了再去利用基礎組件畫原型的時間。

除此之外，使用組件庫，還可以積累更多的方案，比如平時我們在做競品分析的時候，看到別人家的某個模塊做得好，可以直接把這個模塊通過原型畫出來，放在自己的方案庫，以后再做類似的功能模塊時，則可以擇優而選。

通過自己方案和別人方案的對比，還可以分析出自己方案的優缺點，能進一步提升設計能力。C端產品千人千面，而B端產品組件相對比較統一，不會有太大的改變，C端產品的組件庫可以通過產品分析來不斷積累，B端產品組件庫可以去參考一些開源的前端框架。

二、常見的前端框架

每個前端框架，都有標準的設計規范和詳細的組件使用說明，閱讀這些組件說明，可以豐富自己的方案庫，提升原型設計能力。

常用的組件，B端有大廠的組件如字節跳動的ArcoDesgin，騰訊的TDesign，還有使用頻率比較高的Element、iView，移動端有Vux、Vant、Muse等。管理后臺可選的框架不多，界面組件差異也不大，將前端使用的框架組件，畫成一個個標準組件，就可以快速構建原型。

列舉幾個常用的框架，有興趣可以去看一下。

1. B端

1）iView UI組件庫

iView 是一套基于 Vue.js 的開源 UI 組件庫，主要服務于 PC 界面的中后臺產品，組件齊全、更新很快、文檔詳細。有公司團隊維護，是比較可靠的Vue UI組件框架。iView生態也做得很好，還有開源了一個iView Admin，做后臺非常方便。

官網上介紹，iView已經應用在TalkingData、阿里巴巴、百度、騰訊、今日頭條、京東、滴滴出行、美團、新浪、聯想等大型公司的產品中。

官網：https://www.iviewui.com/

2）Element UI組件庫

Element，一套為開發者、設計師和產品經理準備的基于 Vue 2.0的桌面端組件庫。由餓了么前端開源維護，更新頻率很高，基本一周到半個月都會發布一個新版本。

組件齊全，基本涵蓋后臺所需的所有組件，文檔講解詳細，例子也很豐富。Element是一個質量比較高的Vue UI組件庫。

官網：http://element.eleme.io/#/zh-CN

3）Ant Design Vue UI組件庫

Ant Design Vue是 Ant Design 3.X 的 Vue 實現，開發和服務于企業級后臺產品。在GitHub上可以找到幾個Ant Design的Vue組件。

不過相比較而言，Ant Design Vue更勝一籌。Ant Design Vue共享Ant Design of React設計工具體系，實現了所有Ant Design of React的組件，支持現代瀏覽器和 IE9 及以上（需要 polyfills）。

熟悉Ant Design的在使用Vue時很容易上手。官網：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

4）ArcoDesgin

接近2021年年末，字節跳動一下子發布了兩款企業級中后臺設計體系，一個是ArcoDesgin，另一個是SemiDesgin。ArcoDesgin團隊描述，ArcoDesgin通過設計系統去解決產品面臨的體驗問題，以及通過給出的設計原則，來指導解決業務問題，并且它還可以促進設計團隊與研發團隊的協作。

他們認為ArcoDesgin是務實而又浪漫的，務實在于設計體系解決基礎問題，浪漫在于設計體系具備開放性，允許浪漫的設計模式誕生。并且ArcoDesgin一推出時，就具備了非常完善的能力，組件庫只是其中之一。

可見，ArcoDesgin直接對標Ant Design，設計體系在中國不再只有Ant Design一家。

官網：https://arco.design

5）TDesgin

2021年騰訊TDesgin組件庫發布。

騰訊TDesgin設計體系不僅包括了企業級中后臺組件庫，基于騰訊廣泛的業務能力，同時還推出了移動端、小程序端的組件庫，并且包含了Figma、Sketch、Axure等常用的設計資產。按照設計團隊的描述，其也是從騰訊繁雜的業務中尋找共性，抽取出普適的通用設計解決方案，為產品賦能。

在研發側支持業界主流的 React/Vue/Angular/微信小程序/Flutter 開發技術棧；多端適配，提供桌面端和移動端兩套風格統一的組件資源。

官網：https://tdesign.tencent.com

2. C端

1）Vux UI組件庫

Vux是基于WeUI和Vue2.x開發的移動端UI組件庫，主要服務于微信頁面。Vux的定位很明確，一是Vue移動端UI組件庫，二是WeUI的基礎樣式庫。

Vux的組件涵蓋了所有的WeUI的內容，還擴展了一些常用的組件。比如：Sticky、timeline、v-chart、XCircle。

Vux是個人維護的。但是GitHub上star還是很高達到13k。在GitHub上看到對issue的關閉還是很迅速的。Vux文檔基本的組件用法和效果都講解到位了。在vux官網上也展示了很多Vux的使用案例。在微信頁面開發中，基本沒有太多的bug，開發比較順手。

官網：https://vux.li/

2）Vant UI組件庫

Vant是一個輕量、可靠的移動端 Vue 組件庫。Vant是有贊團隊開源的，主要維護也是有贊團隊。

Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本，兩者基于相同的視覺規范，提供一致的 API 接口，助力開發者快速搭建小程序應用。截止到目前，Vant已經開源了50+ 個經過有贊線上業務檢驗的組件。

比如：AddressEdit 地址編輯、AddressList 地址列表、Area 省市區選擇、Card 卡片、Contact 聯系人、Coupon 優惠券、GoodsAction 商品頁行動點、SubmitBar 提交訂單欄、Sku 商品規格彈層。如果做商城，不太在意界面，實現業務邏輯的話，用Vant組件庫開發還是很快的。

官網：https://youzan.github.io/vant/#/zh-CN/intro

3）cube-ui UI組件庫

cube-ui 是基于 Vue.js 實現的精致移動端組件庫。

由滴滴內部組件庫精簡提煉而來，經歷了業務一年多的考驗，并且每個組件都有充分單元測試，為后續集成提供保障。在交互體驗方面追求極致。遵循統一的設計交互標準，高度還原設計效果；接口標準化，統一規范使用方式，開發更加簡單高效。

支持按需引入和后編譯，輕量靈活；擴展性強，可以方便地基于現有組件實現二次開發。

官網：https://didi.github.io/cube-ui/#/zh-CN

三、寫在最后

使用組件庫其實是利用模型思維，將解決方案進行封裝，從而提升設計效率，并通過迭代對解決方案進行升級，每個產品經理，都要擁有自己的組件庫。

網上有很多現成的組件庫，我不建議直接拿來使用，直接使用別人的組件，會缺失一些設計過程，知其然不知其所以然，我建議組件庫一定要自己命名，自己做得好，使用頻率高的組件，就歸入自己的組件庫。

看到別人做得好的組件，自己再去畫一遍，再放入自己的組件庫，這樣畫原型過程當中才會去思考，自己畫一遍，印象會比較深，以后用起來可以更方便的找到，還可以分享給別人。

祝大家早日擺脫人肉原型機，盡快晉升為高級產品經理。

#專欄作家#

刀哥，微信公眾號：刀哥說，人人都是產品經理專欄作家。7年產品老司機，現任某互聯網公司高級產品專家，有豐富的金融項目經驗，豐富的實操經驗，擅于輸出接地氣的實用干貨，幫助成千上萬的產品經理晉升成長。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議。