從零基礎到精通：B端設計規范和組件庫搭建指南（一）

這是一篇醞釀了比較久的內容了，即講解 B 端設計規范和組件庫的分享。這幾年網上出了不少類似的分享，雖然都寫得很全，都還是覺得不夠滿意，缺了些細節。

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

之前的UI零基礎系列也值得一看：

一、B端項目中的設計規范

1. 設計規范和組件庫

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

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

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

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

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

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

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

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

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

設計規范和組件庫的搭建，就是一個由下至上的設計鏈路，通過對細節的制定來實現最終的項目表現層。可以借助廣為流傳的分子原理來理解：

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

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

2. 開源組件庫和項目規范

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

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

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

它們不僅僅提供了相關的設計源文件，也給開發提供了對應的代碼和接口，方便程序員應用。看起來我們只要拼拼組件就可以和開發無縫銜接了……

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

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

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

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

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

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

下面，我們就要根據設計規范的內容，來講解如何結合并使用即時設計、Figma 的相關功能。

二、軟件中的規范功能解析

1. 和規范有關的功能解析

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

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

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

① 樣式功能

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

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

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

② 響應式功能

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

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

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

圖例，右下角放個問號，兩個畫布高度，畫布不用太大

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

③ 自動布局功能

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

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

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

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

④ 組件功能

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

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

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

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

組件功能是 UI 類軟件最復雜的功能，它不僅本身設置很豐富，同時也可以結合樣式、響應、自動布局，讓本來死板的組件變得更靈活可控，應對復雜的設計環境。

在后面我們會針對這些功能一一進行解釋。

結尾

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

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