本文從組件分類、命名、上傳、設(shè)計(jì)走查等要點(diǎn)，梳理了如何搭建組件庫。

一、搭建組件庫有什么好處？

讓設(shè)計(jì)更高效、開發(fā)更迅速、產(chǎn)品體驗(yàn)更一致。很多大廠也做了自己的組件庫，比如Ant Design，Element等，一個(gè)成熟的組件庫確實(shí)讓產(chǎn)品的體驗(yàn)更好，團(tuán)隊(duì)的效率更高。如果你也想開始搭建你們產(chǎn)品自己的組件庫，希望本文能幫助到你。

二、什么樣的模塊可以成為組件？

重復(fù)使用，如果一個(gè)模塊需要重復(fù)使用，那么可以認(rèn)為它是一個(gè)組件，比如說Search Bar，Tab等。

三、如何來搭建組件庫？

1. 對所有組件進(jìn)行分類

參考Ant Design的分類方式，如果你們的開發(fā)采用Ant組件庫的話，這樣子的分類方式對開發(fā)小哥哥們也很友好。

提前把所有分類理清楚，后續(xù)組件的命名過程也會更加清晰。

（最開始自己就是沒有理清思路，導(dǎo)致后續(xù)很多組件命名不清晰都重新來過，這些都是我含淚為你們踩過的坑?。?/p>

Ant里面都屬于基礎(chǔ)通用組件，不同產(chǎn)品自身肯定還有更多的組件，這個(gè)時(shí)候需要自己去根據(jù)組件功能判斷他們的分類。例如：我們可以參考Ant分為基礎(chǔ)的7大類。

1.1 Button

可以大致分為3類，如圖所示分別是：

1. TextButton
2. IconButton
3. Icon&TextButton

1.2 Nav

分類規(guī)則：為了給用戶提供瀏覽內(nèi)容的導(dǎo)航選項(xiàng)，我們都可以將它分為Nav這一類中。

• Breadcrumb
• Dropdown
• SideMenu
• Steps
• Tab

1.3 DataEntray

分類規(guī)則：用戶對該組件進(jìn)行操作，改變或者更新產(chǎn)品內(nèi)容。

• DatePicker
• Input
• Selecte
• Switch
• Upload
• …

1.4 DataDisplay

分類規(guī)則：該組件僅只有展示功能。

• Avatar
• Badge
• Calendar
• Popover
• Tag
• …

1.5 Feedback

分類規(guī)則：當(dāng)用戶操作后給予用戶反饋的組件，主要是一些模態(tài)/非模態(tài)彈窗。

• Alert
• Modal
• Notification
• Popconfirm
• …

1.6 Box

分類規(guī)則：組成以上組件的最基礎(chǔ)的組件。包括一些線段，陰影，圓角方角卡片等。

• Border
• Shadow
• Dashed
• Disable
• Lable
• …

1.7 Icon

分類規(guī)則：產(chǎn)品中所有的Icon都可以歸為此類。

• arrow
• brand
• control
• interface
• suggested
• …

2. 組件命名

參考Ant Design的命名方式：將自己產(chǎn)品的所有symbol命名。這個(gè)過程最好和開發(fā)小哥哥共同商量一下，看看他們的命名喜好，后續(xù)他們的開發(fā)過程也會更輕松，團(tuán)隊(duì)的其他成員也會更加方便查找對應(yīng)的組件。

命名規(guī)則：分類/組件名稱/等級/大小尺寸/樣式/狀態(tài)

例如Navigation/SideMenu.Item/Main/Large/Text/Default

名詞解析：

• 【分類】：基礎(chǔ)分類，第一部分的如何分類已經(jīng)說過了，包括Nav，Button等
• 【組件名稱】：根據(jù)常用的組件名稱命名，如果使用組件不常用，根據(jù)產(chǎn)品功能命名。當(dāng)組件名稱需求有子名稱的時(shí)候可以中間使用.分割。例如：SlideMenu.Item
• 【等級】：通常使用1.Primary 2.Secondary 3.Thirdary等
• 【大小尺寸】：通常使用1.Default 1.Large 2.Small 等
• 【狀態(tài)】：通常使用1.Default 2.Hover 3.Selected 4.Disable 5.Value 6.Danger 等

注：所有命名都使用英文名稱，且首字母大寫。中文名稱對于開發(fā)來說沒有意義，重新拾起英語的時(shí)候到啦

（Ant的命名中，在分類前面有加上編號，是為了讓你自己的組件庫分類更加清晰，這個(gè)看你個(gè)人喜好）

在命名這一部分，開發(fā)其實(shí)只需要看組建名稱和狀態(tài)這兩個(gè)部分，所以你的命名規(guī)范最好也是需要提前和開發(fā)小哥哥們一起商量一下的哦。

3. 組件上傳

這里推薦Zeplin，是一個(gè)國外的軟件，也有線上版本，這個(gè)軟件簡直是特別好用，除了要收費(fèi)和反應(yīng)有點(diǎn)慢之外，沒有缺點(diǎn)。其實(shí)如果下載客戶端，反應(yīng)速度也是在可以接受的范圍內(nèi)。Zeplin對于組件的這一部分真的特別友好。

這里奉上鏈接https://zeplin.io/

下載sketch插件，安裝好之后，選擇組件，點(diǎn)擊Export Selected就可以上傳到Zeplin的組件庫了。

在設(shè)計(jì)稿上，如果你的設(shè)計(jì)稿使用了該組件，設(shè)計(jì)稿上會顯示該組件，并且可以鏈接到組件庫里。如圖：

Zeplin的設(shè)計(jì)規(guī)范也可以上傳顏色，文字，當(dāng)你的設(shè)計(jì)稿中使用了你的規(guī)范以外的顏色或者文字，Zeplin會自動提醒你是不是需要把他們加入設(shè)計(jì)規(guī)范當(dāng)中，這里其實(shí)可以幫助設(shè)計(jì)師走查，是不是設(shè)計(jì)稿中的顏色或者文字出錯(cuò)了呢，這個(gè)功能真的是愛了。

注：Zeplin免費(fèi)版本一個(gè)人只可以建一個(gè)項(xiàng)目，只能上傳99個(gè)組件。

4. 設(shè)計(jì)走查

在做圖的過程中，我們可能會對于不同的頁面，使用相同的基礎(chǔ)組件，但是不同的布局方式。所以搭建組件庫，做設(shè)計(jì)走差，可以保證設(shè)計(jì)稿的一致性。

最后

搭建組件庫是一個(gè)漫長的過程，但是組件庫搭建成功后會幫助我們節(jié)省很多重復(fù)設(shè)計(jì)產(chǎn)生的工作時(shí)間，讓我們能夠更加專注于產(chǎn)品用戶體驗(yàn)。本文只是把個(gè)人在搭建組件庫中一些經(jīng)驗(yàn)分享給你們，有什么建議可以互相交流，希望對你們有幫助。

本文由 @小太陽不愛吃辣椒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash， 基于CC0協(xié)議