這兩天有 B 端新學(xué)員問項目中如果產(chǎn)品選用了第三方的組件庫，且給的產(chǎn)品原型非常完整（比如下圖這樣），那設(shè)計師后面應(yīng)該做什么，怎么體現(xiàn)設(shè)計的價值？

設(shè)計師在 B 端項目的核心產(chǎn)出包括兩個部分：交互設(shè)計和組件庫，它們的深入定義都只能由設(shè)計師來完成。而我們今天的主題，就要圍繞上周分享的組件庫系列做進(jìn)一步的推進(jìn)，分享 B 端組件庫的定義思路和原則。

一、B 端組件庫是什么

創(chuàng)建 B 端組件庫，就需要了解 B 端組件庫是什么。而在今天不同語境下，對 B 端組件庫的定義是不同的，包含下面幾種情況：

1. 線上發(fā)布的第三方開發(fā)組件庫
2. 包含樣式、布局、組件的項目設(shè)計規(guī)范
3. 用于在軟件中進(jìn)行引用的組件庫文件

第一種情況，是由其它團(tuán)隊開發(fā)并發(fā)布的前端組件框架，比如大家熟悉的 AntDesign、TDesign、Elements 等組件庫。

這些組件庫的核心是已經(jīng)開發(fā)好的前端樣式代碼，讓其它程序員可以輕易使用它們搭建自己的項目。簡單解釋就是提供一套模板，直接用這套模板 “復(fù)制粘貼、修修補(bǔ)補(bǔ)” 就可以做一套新項目出來，節(jié)省大量的編程時間。

但因為直接看代碼了解它包含哪些內(nèi)容很沒有效率，所以這些組件庫會提供額外的材料幫助用戶理解和使用，而這些材料主要包含三個部分：

1. 設(shè)計說明：解釋代碼內(nèi)包含的樣式、版式、組件內(nèi)容。
2. 設(shè)計素材：提供代碼中包含的樣式、組件的設(shè)計源文件。
3. 開發(fā)文檔：用于解釋這套代碼的結(jié)構(gòu)、語法、使用規(guī)則。

這些第三方組件庫是用于提供給其它用戶（主要是程序員）使用的產(chǎn)品，它提供的所有材料都可以理解成是這套產(chǎn)品的使用手冊，用于解釋這套產(chǎn)品的內(nèi)容和使用方法。至于用戶想要用它做什么，它就不負(fù)責(zé)了。

第二種情況，組件庫泛指項目中的整體設(shè)計規(guī)范。包含對設(shè)計樣式的定義，版式布局的規(guī)范，以及控件、組件的整理和說明。

這就要延續(xù)上一種情況的討論，如果項目使用了第三方組件庫，還有沒有項目規(guī)范？當(dāng)然是肯定的。

因為第三方組件庫提供的設(shè)計規(guī)范只是說明書，它沒有規(guī)范設(shè)計師在項目中應(yīng)該用什么配色，什么圓角，什么按鈕，什么表格布局，設(shè)計師依舊要針對項目制定出具體的規(guī)范。

比如樣式部分，組件庫通常會先整理出一套色卡，包含數(shù)百種顏色，我們不可能在項目中全部用上。所以就算使用它們，也得確定出項目應(yīng)用的品牌色、功能色的具體色號。

再到組件部分，組件庫往往會給同一種組件提供非常多的樣式變體，我們也需要從中選出項目適用的規(guī)格加以限制。

并且一些復(fù)雜組件，如篩選、表單、表格等，大概率組件庫內(nèi)的樣式是無法滿足項目的真實需求，所以要在原有基礎(chǔ)上做出二次設(shè)計，而新的組件自然也要成為規(guī)范的一部分整理進(jìn)來。

這些都只是最基礎(chǔ)的設(shè)計要求，可以高效的輸出“能用”的結(jié)果，即使是一個產(chǎn)品經(jīng)理還是純交互設(shè)計師都可以輕松完成（就像開頭原型案例）。但如果項目對設(shè)計要求高，那么這種產(chǎn)出是沒有說服力的，設(shè)計師要在這個基礎(chǔ)上做出更有設(shè)計感的結(jié)果。

比如側(cè)邊欄，官方組件庫只有非?；A(chǔ)的樣式，但不代表設(shè)計上它只能長成這樣。對專業(yè)設(shè)計師來說還有很多的樣式發(fā)揮空間：

而這些自定義設(shè)計，也是項目規(guī)范的一部分。不管團(tuán)隊有沒有使用第三方組件庫，項目規(guī)范、組件庫都需要進(jìn)行整理。如果設(shè)計師自己對這個原理都沒有明白的話，自然不知道拿到完整原型以后還能做什么，以及自己在團(tuán)隊中還有什么價值。

第三種情況，則是指軟件當(dāng)中創(chuàng)建的用于引用的組件庫文件。比如 iOS、Material、Ant 等組件庫。引用它們就可以在其它設(shè)計文件中，直接調(diào)用對應(yīng)的組件 Component。

組件庫也包含官方/第三方組件庫和項目組件庫，而項目組件庫是設(shè)計規(guī)范的一部分，往往跟隨項目規(guī)范定義過程一起創(chuàng)建。

這種項目組件庫的創(chuàng)建為了滿足界面設(shè)計和項目協(xié)作的需要，要耗費設(shè)計師非常多的精力，對設(shè)計師的經(jīng)驗和實踐能力也有較高的要求。

理解以上三種組件庫的類型，是搭建組件庫的第一步。而對于一般設(shè)計師而言，主要的目標(biāo)就是學(xué)會如何搭建項目設(shè)計規(guī)范和專屬的組件庫文件。

二、組件庫的創(chuàng)建流程

設(shè)計師制作組件庫要面對的首要難題，就是組件庫在項目的什么階段創(chuàng)建以及具體創(chuàng)建的流程是什么。

這就要先考慮是先有界面還是先有規(guī)范的問題，而這個問題的答案，就是必須先做出界面，在確定界面樣式和效果以后，才能整理規(guī)范。如果先做規(guī)范，就難以掌控頁面的最終效果，如果效果不理想就可能會全部推翻重做。

但這個先做出界面，不是指要把一個項目的所有界面做完，而是做出關(guān)鍵的、可以確定項目設(shè)計風(fēng)格和樣式的部分即可。所以不管設(shè)計師在項目流程中有什么其它安排，設(shè)計實施的部分可以總結(jié)成下圖的流程：

也就是在設(shè)計項目排期中，要制定一個界面設(shè)計風(fēng)格、樣式的過稿節(jié)點，確保在此之前能完成主要頁面的設(shè)計，并讓相關(guān)負(fù)責(zé)人進(jìn)行評審，改到定稿位置。

然后以這些頁面為基礎(chǔ)，建立初步的設(shè)計規(guī)范。如果有設(shè)計團(tuán)隊，就要在這個階段和其它團(tuán)隊成員確定設(shè)計規(guī)范的創(chuàng)建格式、命名邏輯、維護(hù)更新、使用方法等細(xì)則。

接著用基礎(chǔ)規(guī)范開始推進(jìn)后續(xù)頁面的設(shè)計，在推進(jìn)過程中，必然會在新的頁面中發(fā)現(xiàn)規(guī)范的缺漏。這就需要設(shè)計師根據(jù)實際情況分析，對規(guī)范進(jìn)行優(yōu)化或補(bǔ)充新的內(nèi)容。只有當(dāng)項目的設(shè)計基本完成，且通過評審以后，我們才能確定最終的、完整的項目設(shè)計規(guī)范。

前面闡述的是設(shè)計規(guī)范在項目設(shè)計流程中的位置，但規(guī)范創(chuàng)建本身所需完成的工作和耗費的時間也很多，所以當(dāng)我們聚焦這部分工作以后，還可以單獨梳理出它的流程。

大體包含下面四個步驟：

步驟 1：規(guī)范收集，就是從定稿的頁面中收集形成規(guī)范的要素，包括色彩、字體、版式，以及控件和組件等內(nèi)容，并要對收集的內(nèi)容進(jìn)行初步的整理和歸類。

步驟 2：規(guī)范創(chuàng)建，將收集的規(guī)范要素創(chuàng)建成軟件內(nèi)可以復(fù)用的格式，包括創(chuàng)建對應(yīng)樣式 Style 或組件 Component。

步驟 3：規(guī)范完善，即在持續(xù)設(shè)計過程中優(yōu)化規(guī)范的內(nèi)容，不管是增加新的規(guī)范要素，還是優(yōu)化命名、分類、自動布局，都要在這個階段中完成。

步驟 4：規(guī)范交付，按特定的格式整理設(shè)計規(guī)范進(jìn)行歸檔，并交付給其它項目成員。換句話說，就是對設(shè)計規(guī)范的展示樣式進(jìn)行美化，以及添加標(biāo)注說明。

在步驟 1-3 中，設(shè)計規(guī)范都處于一個更新、調(diào)整的狀態(tài)，且界面設(shè)計的工作還沒有結(jié)束。所以規(guī)范內(nèi)容的表現(xiàn)形式和規(guī)格并沒有特定的要求，怎么方便怎么高效怎么做。

只有在整體規(guī)范內(nèi)容都已經(jīng)定稿，不會有大的改變，且團(tuán)隊需要更詳細(xì)、專業(yè)的規(guī)范文檔時，我們才需要進(jìn)入到第四步，對規(guī)范內(nèi)容進(jìn)行“包裝”。

以上只是規(guī)范定義的大致流程介紹，并不是絕對的，設(shè)計師只需要了解原理即可，在項目中再根據(jù)實際場景做調(diào)整。

三、組件庫的內(nèi)容解析

接著，我們還要分享組件庫、項目規(guī)范還包含哪些內(nèi)容，可以總結(jié)成下面幾個大類：

1. 布局框架
2. 視覺樣式
3. 基礎(chǔ)控件
4. 通用組件
5. 業(yè)務(wù)組件
6. 數(shù)據(jù)圖表

1. 布局框架

布局框架就是形成頁面布局的規(guī)則，比如導(dǎo)航和內(nèi)容區(qū)域的布局，消息提示的位置，特定頁面版式的要求等等。

除此以外，還包含項目使用的間距參數(shù)、柵格參數(shù)、響應(yīng)式規(guī)則等相對宏觀的信息，都要做出規(guī)范。

2. 視覺樣式

視覺樣式即上一篇提到的內(nèi)容，是組成頁面視覺效果的基礎(chǔ)屬性設(shè)置。包括色彩、字體、樣式、圖標(biāo)等內(nèi)容。

3. 基礎(chǔ)控件

基礎(chǔ)控件即可交互的基礎(chǔ) UI 單位，比如按鈕、標(biāo)簽、輸入框、多選框、滑塊等。這些元素的使用頻率極高，也是復(fù)雜組件的組成部分之一。如果控件種類較多，也可以用操作、展示、輸入、提示等使用場景進(jìn)行分類。

4. 通用組件

通用組件就是目前已經(jīng)被廣泛運用的常見組件類型，比如穿梭框、日期選擇器、色彩選擇器、信息表格等。因為通用組件數(shù)量也不少，所以它也同樣可以使用上面提到場景做進(jìn)一步的分類。

5. 業(yè)務(wù)組件

業(yè)務(wù)組件是別的項目沒有，完全根據(jù)當(dāng)前項目需求定制出來組件。比如復(fù)雜的表格篩選器、訂單規(guī)則編輯面板、車輛形式記錄控制欄等特殊組件。業(yè)務(wù)組件的需求各種各樣，所以不容易做歸類，但因為它們的使用頻率并不高，所以即使沒有做分類也沒關(guān)系。

6. 數(shù)據(jù)圖表

數(shù)據(jù)圖表也是組件的一部分，只不過數(shù)據(jù)圖表從作用、開發(fā)、樣式上都自成一派，所以我們需要把它作為規(guī)范中的一個獨立分類來考慮。數(shù)據(jù)圖表總體上可以分為比較、分布、構(gòu)成、聯(lián)系四個大類，但項目中不一定會全部用上，所以如果項目內(nèi)使用的圖表類型不多的話，就無需做出進(jìn)一步的分類。

上面提到的六點，就是項目設(shè)計規(guī)范中包含的主要內(nèi)容。每一個分類都需要掌握它們專業(yè)知識和應(yīng)用技巧，才能做出有效的制定。

最后有一點，就是規(guī)范內(nèi)容的制定主體是具體的樣式或組件內(nèi)容，而不是對規(guī)范的布局美化，它們是規(guī)范的收尾工作，而不是規(guī)范本身。

結(jié)尾

創(chuàng)建組件庫一定要盡可能的精簡，在勉強(qiáng)夠用的水平線上徘徊，是效率最大化的保證。而類似各系統(tǒng)官方組件庫那種做了自動布局+套娃+變體的完整形態(tài)，屬于作繭自縛，勸大家量力而行~

作者：超人的電話亭