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

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

一、B 端組件庫是什么

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

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

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

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

但因?yàn)橹苯涌创a了解它包含哪些內(nèi)容很沒有效率，所以這些組件庫會(huì)提供額外的材料幫助用戶理解和使用，而這些材料主要包含三個(gè)部分：

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

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

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

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

因?yàn)榈谌浇M件庫提供的設(shè)計(jì)規(guī)范只是說明書，它沒有規(guī)范設(shè)計(jì)師在項(xiàng)目中應(yīng)該用什么配色，什么圓角，什么按鈕，什么表格布局，設(shè)計(jì)師依舊要針對(duì)項(xiàng)目制定出具體的規(guī)范。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

大體包含下面四個(gè)步驟：

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

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

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

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

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

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

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

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

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

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

1. 布局框架

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

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

2. 視覺樣式

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

3. 基礎(chǔ)控件

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

4. 通用組件

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

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

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

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

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

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

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

結(jié)尾

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

作者：超人的電話亭