這是一篇醞釀了比較久的內(nèi)容了，來講解?B 端設計規(guī)范和組件庫的分享。這幾年網(wǎng)上出了不少類似的分享，雖然都寫得很全，都還是覺得不夠滿意，缺了一點點細節(jié)。

所以我自己出一版，希望能幫助你們一次性解決這些問題。

1.1 設計規(guī)范和組件庫

B 端項目設計中，設計規(guī)范和組件庫是一個繞不過去的檻。作為專業(yè)的 B 端設計師，必須有自己完成設計規(guī)范和組件庫的能力。

所以，首先我們要先理清楚什么是設計規(guī)范和組件庫。

設計規(guī)范是項目設計中要遵守的要求、細節(jié)、準則，規(guī)定了諸如色彩、字體、柵格、間距、圓角等要素的規(guī)則，這些內(nèi)容都是可以在大量設計元素中應用的細節(jié)。

換句話說，設計規(guī)范就是提取在項目中會廣泛使用的要素，并進行統(tǒng)一制定的過程，防止設計師在設計過程中隨意發(fā)揮，導致項目統(tǒng)一性的崩壞。

組件庫，是通過梳理項目中應用到的按鈕、開關、滑塊、日歷、下拉菜單等控件、組件的設計樣式、狀態(tài)、交互規(guī)則，再將它們統(tǒng)一復用到項目的不同頁面中去。

嚴格意義上來說也是設計規(guī)范的一部分，是基礎規(guī)范的進一步延伸，但還是單拎出來講。因為組件庫的應用不僅僅是設計統(tǒng)一性的問題，還融合了 ”組件化“ 的編程思路在里面。

組件化：將復雜系統(tǒng)拆分成不同功能獨立的模塊并重組的過程，且每個模塊包含對應的狀態(tài)和屬性。

對于程序員來說，一個項目就是若干功能模塊的合集，往往是先開發(fā)這些功能模塊，再搭建對應的完整頁面，而不是看一個頁面開發(fā)一個頁面。

所以制定完善的組件庫，除了提升設計質(zhì)量外，還可以很好的提升開發(fā)效率，推進項目進度。

設計規(guī)范和組件庫的搭建，就是一個由下至上的設計鏈路，通過對細節(jié)的制定來實現(xiàn)最終的項目表現(xiàn)層?？梢越柚鷱V為流傳的分子原理來理解：

任何成熟的 B 端項目都應該具備自己的設計規(guī)范和組件庫，雖然有很多小團隊在前期推進項目時，因為各種問題沒有搭建或落地設計規(guī)范，但并不代表他們在招人的時候沒有要求。

項目規(guī)范是一個典型的 “項目團隊可以沒有，但你不能不會” 的基本招聘要求。

1.2 開源組件庫和項目規(guī)范

在今天搭建 B 端項目規(guī)范時，新手還有一個普遍的問題：

項目規(guī)范和開源框架的規(guī)范有什么區(qū)別，如果選了一套開源框架做設計，設計師不就不用做規(guī)范了？

初級設計師會這么想并不奇怪，因為以 AntDesign 為首的開源框架做的實在是太完善了，不僅囊括了整套的 Web 色彩系統(tǒng)，還有各類常用的、不常用的交互組件。

它們不僅僅提供了相關的設計源文件，也給開發(fā)提供了對應的代碼和接口，方便程序員應用?？雌饋砦覀冎灰雌唇M件就可以和開發(fā)無縫銜接了……

這顯然是不可能的，正是因為開源框架太全面，可以產(chǎn)生無數(shù)種可能，我們才更應該整理自己的項目規(guī)范。就像我前面已經(jīng)提到過的，設計規(guī)范是種 ”限制“，而不僅僅是設計風格的簡單沉淀。

比如，不管你選了哪套開源框架，它提供了多少種色彩，你的項目都應該有自己的項目主色，適當?shù)妮o助色彩，而不可能把它的整套配色都應用進去。所以，即使顏色沒有跳出原有色彩系統(tǒng)，也要篩選出你用到的顏色進行記錄。

再比如，開源框架的很多控件，都提供了好幾種樣式和方案，并不是讓你全部都用進去，而是選擇自己覺得合適的。所以你每個控件中選擇的方案，也需要做記錄，統(tǒng)一后續(xù)的頁面設計。

前面只是記錄選擇，都還比較簡單，而最關鍵的問題在于，開源框架的組件不可能完美符合項目的全部需求。必然要在原有的基礎上作出大量細節(jié)的優(yōu)化，或者創(chuàng)建出新的業(yè)務組件出來，所以設計師還是要把這些內(nèi)容整理出來。

開源框架，就是給我們提供了一個比較全面的設計范圍，讓我們站在別人的肩膀上做選擇，提高設計規(guī)范的制作效率，而并不是讓我們直接躺平，復制黏貼就可以了。

同時，設計規(guī)范和組件需要在軟件中進行運用，我們也同樣不能直接使用官方提供給我們的組件庫展開自己的項目設計，要根據(jù)自己項目的規(guī)范獨立進行搭建和使用。

下面，我們就要根據(jù)設計規(guī)范的內(nèi)容，來講解如何結合并使用即時設計、Figma 的相關功能。

2.1 和規(guī)范有關的功能解析

之所以 UI 設計軟件能取代 PS 獨立發(fā)展，就是因為 UI 設計中包含大量需要復用和批量修改的功能。而這些功能和設計規(guī)范有非常大的聯(lián)系，也是 UI 設計中項目規(guī)范能被落地實踐的重要保障。

但因為 Figam 和即時等次時代 UI 設計軟件提供了越來越多的功能，用來支持設計規(guī)范的實踐，且這些功能可以相互交叉、重疊、組合，導致很多人在前期學習中會被軟件功能繞暈，導致很多人沒有理解這些功能意義和價值，更不知道如何在項目中具體實踐。

所以，我們先將這些功能整體理解一遍，再逐一來對它們的使用規(guī)則和應用場景進行拓展。

2.1.1 樣式功能

樣式功能是用來記錄圖層樣式設置的功能。簡單點理解，就是記錄圖層右側的屬性設置的功能。正常我們選擇一個基礎圖層，軟件右側的屬性面板會將圖層樣式拆解成若干的類別，包括填充、描邊、字體、陰影、模糊。

而樣式功能，就是幫助設計師對不同的樣式類別進行記錄和復用的過程，它會直接將該分類內(nèi)的相關參數(shù)值記錄下來，并進行命名，方便后續(xù)的調(diào)用。

而每個樣式分類獨立生成記錄的好處，就是可以為了方便讓設計師自由進行樣式的組合。比如填充制定了紅、藍、綠三種，投影制定了深、淺兩種，使用者可以自由搭配這些選項。

2.1.2 響應式功能

響應式功能是讓圖層隨上級編組尺寸變動而自適應的功能，方便我們在修改組件的大小時不用重新調(diào)節(jié)里面的元素細節(jié)。

例如設計一個卡片，可以通過響應式的設置，讓頭部的元素左右對齊，下方的文本區(qū)域自動拓展，保持卡片的內(nèi)間距不變。

或者頁面右下角懸浮按鈕，也可以通過響應式設置始終處于頁面底部，這樣我們在增加頁面高度的時候不用重新設置該元素的 Y 軸位置。

軟件中的響應式并不等同于廣義的網(wǎng)頁響應式技術，它不能實現(xiàn)完整的柵格布局和流體響應，只能幫助我們來解決一些最基本的響應需求，這在后面的章節(jié)中再具體介紹。

2.1.3 自動布局功能

自動布局功能，是通過前端布局思路來設置元素布局方法自動排版功能，是 Figma 開發(fā)的最重要的功能，也是讓 Sketch 不再成為 B 端設計首選的核心因素。

它的主要功能如根據(jù)內(nèi)容自動完成尺寸變更，并列排版和順序的變更等。

自動布局可以極大的提升設計效率，正因為自動布局的出現(xiàn)，才讓項目組件庫可以真正被運用和落地實踐起來。

掌握自動布局是 UI 設計類軟件的靈魂，后面我們會解釋它的具體功能和應用方法，然后再進入組件的具體使用環(huán)節(jié)，分析對應的實際應用場景。避免你們無法分清自動布局和組件的功能。

2.1.4 組件功能

組件功能在不同軟件有不同的叫法，如 Symbol、Component、Kits 等，主要是將指定的圖層或編組生成一個新的編組單位（類似智能對象），在后續(xù)設計中進行復用。

例如設計一個按鈕、開關，我們只要將它們生成為組件，就可以在后續(xù)設計中快速從組件庫里拖拽到設計頁面中，不用重新畫一遍，并且支持批量修改。

在組件應用中，生成的第一個組件也叫父級組件，其它調(diào)用它的組件都是它的子組件，這是一個非常清晰的從屬關系。如果我們修改父級組件的內(nèi)容，所有子組件都會被統(tǒng)一修改。

組件的應用除了這種最基礎的應用以外，還包含了很多特殊的功能，如將低級組件合并成一個高級組件的嵌套，或者 Figma 前兩年發(fā)布的變體（Vriants），可以將一個組件的不同狀態(tài)聚合到一起，通過屬性面板來切換相關的狀態(tài)。

組件功能是 UI 類軟件最復雜的功能，它不僅本身設置很豐富，同時也可以結合樣式、響應、自動布局，讓本來死板的組件變得更靈活可控，應對復雜的設計環(huán)境。在后面我們會針對這些功能一一進行解釋。

結尾

在理解了 B 端設計規(guī)范的存在價值，和前面講到軟件中的 4 個基本功能概念后，后面學習起來就會變得很容易。

我們會在下周分享剩余的文章內(nèi)容，并且增加一節(jié)公開課【B端設計規(guī)范和組件庫實操演示】專門講解這部分內(nèi)容，10.20?周四下午兩點半準時開課。點擊我的個人主頁右側預約課程即可。

那我們公開課見～