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

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

之前的UI零基礎(chǔ)系列也值得一看：

一、B端項(xiàng)目中的設(shè)計(jì)規(guī)范

1. 設(shè)計(jì)規(guī)范和組件庫(kù)

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

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

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

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

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

嚴(yán)格意義上來(lái)說(shuō)也是設(shè)計(jì)規(guī)范的一部分，是基礎(chǔ)規(guī)范的進(jìn)一步延伸，但還是單拎出來(lái)講。因?yàn)榻M件庫(kù)的應(yīng)用不僅僅是設(shè)計(jì)統(tǒng)一性的問(wèn)題，還融合了 ”組件化“ 的編程思路在里面。

組件化：將復(fù)雜系統(tǒng)拆分成不同功能獨(dú)立的模塊并重組的過(guò)程，且每個(gè)模塊包含對(duì)應(yīng)的狀態(tài)和屬性。

對(duì)于程序員來(lái)說(shuō)，一個(gè)項(xiàng)目就是若干功能模塊的合集，往往是先開發(fā)這些功能模塊，再搭建對(duì)應(yīng)的完整頁(yè)面，而不是看一個(gè)頁(yè)面開發(fā)一個(gè)頁(yè)面。

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

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

任何成熟的 B 端項(xiàng)目都應(yīng)該具備自己的設(shè)計(jì)規(guī)范和組件庫(kù)，雖然有很多小團(tuán)隊(duì)在前期推進(jìn)項(xiàng)目時(shí)，因?yàn)楦鞣N問(wèn)題沒(méi)有搭建或落地設(shè)計(jì)規(guī)范，但并不代表他們?cè)谡腥说臅r(shí)候沒(méi)有要求。

項(xiàng)目規(guī)范是一個(gè)典型的 “**項(xiàng)目團(tuán)隊(duì)可以沒(méi)有，但你不能不會(huì)**” 的基本招聘要求。

2. 開源組件庫(kù)和項(xiàng)目規(guī)范

在今天搭建 B 端項(xiàng)目規(guī)范時(shí)，新手還有一個(gè)普遍的問(wèn)題：

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

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

它們不僅僅提供了相關(guān)的設(shè)計(jì)源文件，也給開發(fā)提供了對(duì)應(yīng)的代碼和接口，方便程序員應(yīng)用?？雌饋?lái)我們只要拼拼組件就可以和開發(fā)無(wú)縫銜接了……

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

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

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

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

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

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

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

二、軟件中的規(guī)范功能解析

1. 和規(guī)范有關(guān)的功能解析

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

但因?yàn)?Figam 和即時(shí)等次時(shí)代 UI 設(shè)計(jì)軟件提供了越來(lái)越多的功能，用來(lái)支持設(shè)計(jì)規(guī)范的實(shí)踐，且這些功能可以相互交叉、重疊、組合，導(dǎo)致很多人在前期學(xué)習(xí)中會(huì)被軟件功能繞暈，導(dǎo)致很多人沒(méi)有理解這些功能意義和價(jià)值，更不知道如何在項(xiàng)目中具體實(shí)踐。

所以，我們先將這些功能整體理解一遍，再逐一來(lái)對(duì)它們的使用規(guī)則和應(yīng)用場(chǎng)景進(jìn)行拓展。

① 樣式功能

樣式功能是用來(lái)記錄圖層樣式設(shè)置的功能。簡(jiǎn)單點(diǎn)理解，就是記錄圖層右側(cè)的屬性設(shè)置的功能。正常我們選擇一個(gè)基礎(chǔ)圖層，軟件右側(cè)的屬性面板會(huì)將圖層樣式拆解成若干的類別，包括填充、描邊、字體、陰影、模糊。

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

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

② 響應(yīng)式功能

響應(yīng)式功能是讓圖層隨上級(jí)編組尺寸變動(dòng)而自適應(yīng)的功能，方便我們?cè)谛薷慕M件的大小時(shí)不用重新調(diào)節(jié)里面的元素細(xì)節(jié)。

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

或者頁(yè)面右下角懸浮按鈕，也可以通過(guò)響應(yīng)式設(shè)置始終處于頁(yè)面底部，這樣我們?cè)谠黾禹?yè)面高度的時(shí)候不用重新設(shè)置該元素的 Y 軸位置。

圖例，右下角放個(gè)問(wèn)號(hào)，兩個(gè)畫布高度，畫布不用太大

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

③ 自動(dòng)布局功能

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

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

自動(dòng)布局可以極大的提升設(shè)計(jì)效率，正因?yàn)樽詣?dòng)布局的出現(xiàn)，才讓項(xiàng)目組件庫(kù)可以真正被運(yùn)用和落地實(shí)踐起來(lái)。

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

④ 組件功能

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

例如設(shè)計(jì)一個(gè)按鈕、開關(guān)，我們只要將它們生成為組件，就可以在后續(xù)設(shè)計(jì)中快速?gòu)慕M件庫(kù)里拖拽到設(shè)計(jì)頁(yè)面中，不用重新畫一遍，并且支持批量修改。

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

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

組件功能是 UI 類軟件最復(fù)雜的功能，它不僅本身設(shè)置很豐富，同時(shí)也可以結(jié)合樣式、響應(yīng)、自動(dòng)布局，讓本來(lái)死板的組件變得更靈活可控，應(yīng)對(duì)復(fù)雜的設(shè)計(jì)環(huán)境。

在后面我們會(huì)針對(duì)這些功能一一進(jìn)行解釋。

結(jié)尾

理解 B 端設(shè)計(jì)規(guī)范的存在價(jià)值，和軟件中的 4 個(gè)基本功能概念，那么后面學(xué)習(xí)起來(lái)就會(huì)變得很容易。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」