編輯導(dǎo)語(yǔ)：搭建組件庫(kù)，提升原型設(shè)計(jì)能力能有效地將解決方案進(jìn)行封裝，從而提升設(shè)計(jì)效率，但是在畫(huà)原型的過(guò)程中總會(huì)出現(xiàn)許多問(wèn)題，主要是因?yàn)楫a(chǎn)品經(jīng)理沒(méi)有組件庫(kù)的思維。本篇文章主要分享如何搭建自己的組件庫(kù)，從而提升原型設(shè)計(jì)能力，一起來(lái)學(xué)習(xí)一下。

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

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

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

一、組件庫(kù)

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

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

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

除此之外，使用組件庫(kù)，還可以積累更多的方案，比如平時(shí)我們?cè)谧龈?jìng)品分析的時(shí)候，看到別人家的某個(gè)模塊做得好，可以直接把這個(gè)模塊通過(guò)原型畫(huà)出來(lái)，放在自己的方案庫(kù)，以后再做類似的功能模塊時(shí)，則可以擇優(yōu)而選。

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

二、常見(jiàn)的前端框架

每個(gè)前端框架，都有標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范和詳細(xì)的組件使用說(shuō)明，閱讀這些組件說(shuō)明，可以豐富自己的方案庫(kù)，提升原型設(shè)計(jì)能力。

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

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

1. B端

1）iView UI組件庫(kù)

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

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

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

2）Element UI組件庫(kù)

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

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

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

3）Ant Design Vue UI組件庫(kù)

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

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

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

4）ArcoDesgin

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

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

可見(jiàn)，ArcoDesgin直接對(duì)標(biāo)Ant Design，設(shè)計(jì)體系在中國(guó)不再只有Ant Design一家。

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

5）TDesgin

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

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

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

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

2. C端

1）Vux UI組件庫(kù)

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

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

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

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

2）Vant UI組件庫(kù)

Vant是一個(gè)輕量、可靠的移動(dòng)端 Vue 組件庫(kù)。Vant是有贊團(tuán)隊(duì)開(kāi)源的，主要維護(hù)也是有贊團(tuán)隊(duì)。

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

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

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

3）cube-ui UI組件庫(kù)

cube-ui 是基于 Vue.js 實(shí)現(xiàn)的精致移動(dòng)端組件庫(kù)。

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

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

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

三、寫(xiě)在最后

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

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

看到別人做得好的組件，自己再去畫(huà)一遍，再放入自己的組件庫(kù)，這樣畫(huà)原型過(guò)程當(dāng)中才會(huì)去思考，自己畫(huà)一遍，印象會(huì)比較深，以后用起來(lái)可以更方便的找到，還可以分享給別人。

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

#專欄作家#

刀哥，微信公眾號(hào)：刀哥說(shuō)，人人都是產(chǎn)品經(jīng)理專欄作家。7年產(chǎn)品老司機(jī)，現(xiàn)任某互聯(lián)網(wǎng)公司高級(jí)產(chǎn)品專家，有豐富的金融項(xiàng)目經(jīng)驗(yàn)，豐富的實(shí)操經(jīng)驗(yàn)，擅于輸出接地氣的實(shí)用干貨，幫助成千上萬(wàn)的產(chǎn)品經(jīng)理晉升成長(zhǎng)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于 CC0 協(xié)議。