大廠經(jīng)驗(yàn)：利用好組件庫，可以加快產(chǎn)品迭代

目錄

1、組件庫的概念和作用
2、基礎(chǔ)組件庫
3、業(yè)務(wù)組件庫
4、利用工具自動(dòng)化生產(chǎn)頁面

1. 組件庫的概念和作用

我們?cè)谔崆岸诵枨髸r(shí)，都會(huì)接觸到組件庫，一個(gè)頁面由n個(gè)大大小小的組件組成，比如按鈕、輸入框、導(dǎo)航、下拉框。。

有著統(tǒng)一設(shè)計(jì)風(fēng)格的一套組件集合，就是組件庫。

市面上也有很多免費(fèi)的開源組件庫，比如螞蟻金服的ant design、餓了么的element ui，谷歌的Material components等。

這些組件庫拿來即用，初期沒有從0開始構(gòu)建組件庫的成本，迭代過程中可以復(fù)用組件，給設(shè)計(jì)師、前端工程師節(jié)約了大把時(shí)間，加快了產(chǎn)品迭代。

如果這些組件庫能滿足基本的日常需求，而且公司沒有人力去從0開發(fā)一套組件庫，那么直接使用現(xiàn)成組件庫是一個(gè)不錯(cuò)的選擇。

但需要注意的是現(xiàn)成的組件庫技術(shù)棧要跟自己公司的技術(shù)棧一致，除了個(gè)別兼容所有UI框架的組件庫。

但如果現(xiàn)成的組件庫很多都不滿足需求，或者跟公司品牌有沖突，那么就需要從0開始設(shè)計(jì)一套基礎(chǔ)組件庫了。

2. 基礎(chǔ)組件庫

基礎(chǔ)組件庫是沒有帶任何業(yè)務(wù)屬性的組件庫。

一個(gè)基礎(chǔ)組件庫一般由以下幾個(gè)要素組成：

1、統(tǒng)一設(shè)計(jì)規(guī)范

一般來說，設(shè)計(jì)師要先設(shè)計(jì)好一套統(tǒng)一的視覺規(guī)范和交互規(guī)范，要保證產(chǎn)品體驗(yàn)的一致性。

視覺規(guī)范 ：比如統(tǒng)一的間距、字體、顏色、圓角、icon。

交互規(guī)范：比如統(tǒng)一的操作路徑、動(dòng)畫、反饋。

如果產(chǎn)品經(jīng)理在提需求時(shí)，發(fā)現(xiàn)缺少某個(gè)基礎(chǔ)組件，一般要提需求給設(shè)計(jì)師，設(shè)計(jì)師出組件視覺和交互后，前端根據(jù)設(shè)計(jì)稿來開發(fā)。

2、pc端和移動(dòng)端

根據(jù)需求，pc端和移動(dòng)端是否要共用同一套組件庫。如果共用同一套組件庫的話，需要做好響應(yīng)式設(shè)計(jì)。

那么什么情況下pc端和移動(dòng)端可以共用一套組件庫呢？

一般來說，如果系統(tǒng)的頁面布局和元素比較簡(jiǎn)單，圖片也比較少，那么2個(gè)端共用一套組件庫是勉強(qiáng)可以的，比如拉勾網(wǎng)。

但如果系統(tǒng)的頁面布局比較復(fù)雜或者頁面元素類型豐富，有各種圖片、視頻、花里胡哨的組件等，那就要拆開2套組件庫了，比如淘寶。

3、主題定制能力

什么是主題？主題可以說是主要的視覺設(shè)計(jì)，比如整個(gè)組件庫的顏色、間距、字體等。一般來說，一個(gè)規(guī)范的組件庫，都要有一個(gè)主題定制能力。

因?yàn)橥粋€(gè)公司，可能會(huì)有多個(gè)品牌的產(chǎn)品。

不同品牌可能需要整體更改一些組件布局或者組件樣式，所以基礎(chǔ)組件庫需要有主題自定義能力。

4、組件文檔

組件文檔是組件庫的使用指南。

組件文檔一般會(huì)介紹組件庫的技術(shù)棧、每個(gè)組件的視覺和交互、每個(gè)組件的使用方法，當(dāng)產(chǎn)品經(jīng)理提需求時(shí)，一般都要到組件文檔去查看有沒有這個(gè)組件，盡可能復(fù)用已有組件。

5、版本管理

細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)，組件文檔上面一般都會(huì)讓我們選擇版本。我們的組件庫，也是有版本迭代的。

組件庫版本迭代跟產(chǎn)品版本迭代類似，一般也是由3位數(shù)字組成，

major.minor.patch：(比如1.1.2)

第一位表示主版本，當(dāng)有不兼容的大變更時(shí)，會(huì)更新第一個(gè)版本號(hào)。

第二位表示次版本，當(dāng)有新特性時(shí)，會(huì)更新第二個(gè)版本號(hào)。

第三位表示修訂版本，當(dāng)組件庫有bug時(shí)，會(huì)更新第三個(gè)版本。

當(dāng)產(chǎn)品經(jīng)理查看組件文檔時(shí)，需要選好組件庫版本，不然可能會(huì)導(dǎo)致需求組件和開發(fā)當(dāng)前使用的組件庫因?yàn)榘姹静煌脑颍斐捎谐鋈搿?/p>

3. 業(yè)務(wù)組件庫

業(yè)務(wù)組件庫就是基于基礎(chǔ)組件庫，進(jìn)行二次封裝的帶有業(yè)務(wù)屬性的組件庫。

為什么需要業(yè)務(wù)組件庫呢？因?yàn)橄嗤蛘卟煌南到y(tǒng)，很多時(shí)候也會(huì)用到同一個(gè)業(yè)務(wù)組件，

比如多個(gè)系統(tǒng)會(huì)共用相同的導(dǎo)航組件，導(dǎo)航組件里面封裝了獲取當(dāng)前用戶的導(dǎo)航列表這個(gè)業(yè)務(wù)邏輯。

再比如一個(gè)展示權(quán)限列表的樹組件，這個(gè)組件里面會(huì)把獲取權(quán)限列表這個(gè)業(yè)務(wù)邏輯封裝進(jìn)去，

在角色管理頁面會(huì)用到權(quán)限樹組件，在用戶管理頁面也可能會(huì)用到權(quán)限樹組件。

為了提升開發(fā)效率，要盡可能復(fù)用組件。所以統(tǒng)一抽出一個(gè)業(yè)務(wù)組件庫是一個(gè)不錯(cuò)的解決方案。同理，業(yè)務(wù)組件庫也有組件文檔和版本管理。

4. 利用工具自動(dòng)化生產(chǎn)頁面

相信不少人都聽過低碼/無碼，低碼/無碼的意思是通過智能化工具自動(dòng)化生成代碼，來減少開發(fā)重復(fù)性的工作，提高開發(fā)效率。（ps：這里講的是前端領(lǐng)域的低碼）

從可視化搭建到設(shè)計(jì)稿生成代碼，再到需求文檔生成代碼，lowcode經(jīng)過了一個(gè)循序漸進(jìn)的歷程。

而這些工具，都是基于組件庫。

可視化搭建，通過拖拽各種組件來拼成頁面，D2C也是通過識(shí)別組件和布局來自動(dòng)生產(chǎn)頁面。關(guān)于lowcode可看我之前的文章：需求文檔也能生成代碼，程序員要失業(yè)了？

但是提效并不等于完全代替人工開發(fā)。目前l(fā)owcode只能生產(chǎn)出70%-80%左右的代碼，剩下的還需要研發(fā)人員去二次開發(fā)。

有人力條件的公司一般都會(huì)自研低碼平臺(tái)來提高頁面生產(chǎn)效率，

條件不夠的可以購買一些比較靠譜的低碼平臺(tái)服務(wù)，

目前外面很多低碼平臺(tái)都支持自定義組件庫，可以把自己公司的組件庫導(dǎo)入到低碼平臺(tái)來使用，還挺方便的，但是具體怎么選還是看自己公司的技術(shù)棧和業(yè)務(wù)需求了。