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

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

上期回顧：

一、B 端組件庫是什么

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

1. 線上發布的第三方開發組件庫
2. 包含樣式、布局、組件的項目設計規范
3. 用于在軟件中進行引用的組件庫文件

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

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

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

1. 設計說明：解釋代碼內包含的樣式、版式、組件內容。
2. 設計素材：提供代碼中包含的樣式、組件的設計源文件。
3. 開發文檔：用于解釋這套代碼的結構、語法、使用規則。

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

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

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

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

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

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

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

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

比如側邊欄，官方組件庫只有非常基礎的樣式，但不代表設計上它只能長成這樣。對專業設計師來說還有很多的樣式發揮空間：

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

第三種情況，則是指軟件當中創建的用于引用的組件庫文件。比如 iOS、Material、Ant 等組件庫。引用它們就可以在其它設計文件中，直接調用對應的組件 Component。

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

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

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

二、組件庫的創建流程

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

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

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

也就是在設計項目排期中，要制定一個界面設計風格、樣式的過稿節點，確保在此之前能完成主要頁面的設計，并讓相關負責人進行評審，改到定稿位置。

然后以這些頁面為基礎，建立初步的設計規范。如果有設計團隊，就要在這個階段和其它團隊成員確定設計規范的創建格式、命名邏輯、維護更新、使用方法等細則。

接著用基礎規范開始推進后續頁面的設計，在推進過程中，必然會在新的頁面中發現規范的缺漏。這就需要設計師根據實際情況分析，對規范進行優化或補充新的內容。只有當項目的設計基本完成，且通過評審以后，我們才能確定最終的、完整的項目設計規范。

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

大體包含下面四個步驟：

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

步驟 2：規范創建，將收集的規范要素創建成軟件內可以復用的格式，包括創建對應樣式 Style 或組件 Component。

步驟 3：規范完善，即在持續設計過程中優化規范的內容，不管是增加新的規范要素，還是優化命名、分類、自動布局，都要在這個階段中完成。

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

在步驟 1-3 中，設計規范都處于一個更新、調整的狀態，且界面設計的工作還沒有結束。所以規范內容的表現形式和規格并沒有特定的要求，怎么方便怎么高效怎么做。

只有在整體規范內容都已經定稿，不會有大的改變，且團隊需要更詳細、專業的規范文檔時，我們才需要進入到第四步，對規范內容進行“包裝”。

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

三、組件庫的內容解析

接著，我們還要分享組件庫、項目規范還包含哪些內容，可以總結成下面幾個大類：

1. 布局框架
2. 視覺樣式
3. 基礎控件
4. 通用組件
5. 業務組件
6. 數據圖表

1. 布局框架

布局框架就是形成頁面布局的規則，比如導航和內容區域的布局，消息提示的位置，特定頁面版式的要求等等。

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

2. 視覺樣式

視覺樣式即上一篇提到的內容，是組成頁面視覺效果的基礎屬性設置。包括色彩、字體、樣式、圖標等內容。

3. 基礎控件

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

4. 通用組件

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

5. 業務組件

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

6. 數據圖表

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

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

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

結尾

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

最近在全力更新新一期 B 端全能班課程內容，想變強的同學就不要錯過了 ?? https://mrajw.xetslk.com/s/hVlyD

歡迎關注作者的微信公眾號：「超人的電話亭」