在產(chǎn)品經(jīng)理的日常工作中，原型設計是至關(guān)重要的環(huán)節(jié)，但許多產(chǎn)品經(jīng)理在畫原型時面臨效率低下、缺乏迭代思維以及難以提升底層能力等問題。本文將分享一個實用的小技巧——如何搭建自己的原型組件庫。通過組件庫的思維，產(chǎn)品經(jīng)理可以大幅提升原型設計效率，積累更多方案，并通過對比分析提升設計能力。

畫原型，是產(chǎn)品經(jīng)理日常重要的工作之一，我發(fā)現(xiàn)很多產(chǎn)品經(jīng)理在畫原型的時候，會出現(xiàn)以下下問題：

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

出現(xiàn)這些問題，主要是產(chǎn)品經(jīng)理沒有組件庫的思維。這篇文章，分享如何搭建自己的組件庫，避免出現(xiàn)以上問題。

一、組件庫

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

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

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

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

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

二、常見的前端框架

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

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

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

1. B端

1）iView UI組件庫

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

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

官網(wǎng)：https://www.iviewui.com/

2）Element UI組件庫

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

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

官網(wǎng)：http://element.eleme.io/#/zh-CN

3）Ant Design Vue UI組件庫

Ant Design Vue是 Ant Design 3.X 的 Vue 實現(xiàn)，開發(fā)和服務于企業(yè)級后臺產(chǎn)品。在GitHub上可以找到幾個Ant Design的Vue組件。

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

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

4）ArcoDesgin

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

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

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

官網(wǎng)：https://arco.design

5）TDesgin

2021年騰訊TDesgin組件庫發(fā)布。

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

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

官網(wǎng)：https://tdesign.tencent.com

2. C端

1）Vux UI組件庫

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

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

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

官網(wǎng)：https://vux.li/

2）Vant UI組件庫

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

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

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

官網(wǎng)：https://youzan.github.io/vant/#/zh-CN/intro

3）cube-ui UI組件庫

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

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

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

官網(wǎng)：https://didi.github.io/cube-ui/#/zh-CN

三、寫在最后

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

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

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

祝大家早日擺脫人肉原型機，盡快晉升為高級產(chǎn)品經(jīng)理。