一、B端設(shè)計(jì)規(guī)范的內(nèi)容整理

不同項(xiàng)目的 UI 的設(shè)計(jì)規(guī)范雖然看起來(lái)都很像，但因?yàn)轫?xiàng)目需求、設(shè)計(jì)差異，不可能一模一樣。所以雖然網(wǎng)上有很多規(guī)范案例，但新手很難直接照搬。所以我們首先要解決的問(wèn)題是規(guī)范里有什么，如何應(yīng)地制宜展開規(guī)劃，輸出符合項(xiàng)目實(shí)際情況的規(guī)范內(nèi)容。

簡(jiǎn)單解釋，在 B 端設(shè)計(jì)規(guī)范中，主要包含三個(gè)核心模塊，分別是：布局、樣式、組件庫(kù)，下面分別對(duì)它們進(jìn)行說(shuō)明。

1. 布局部分

即 B 端界面的主要框架、版式信息，比如使用了哪種響應(yīng)式模式、柵格規(guī)格，還有全局組件導(dǎo)航欄、信息欄、內(nèi)容區(qū)域的布局模式，以及浮層抽屜、通知窗口等元素的顯示方法，最后還有很多人會(huì)忽略的間距參數(shù)的應(yīng)用。

布局部分的規(guī)范決定了整個(gè)項(xiàng)目的基礎(chǔ)版式和交互路徑，雖然內(nèi)容不多，但卻是整個(gè)設(shè)計(jì)規(guī)范中最復(fù)雜也最難完整落地的部分，需要設(shè)計(jì)師具備扎實(shí)的基礎(chǔ)理論知識(shí)和一定的項(xiàng)目經(jīng)驗(yàn)。

2. 樣式部分

樣式通常指界面最基礎(chǔ)的視覺(jué)細(xì)節(jié)，UI 中最基礎(chǔ)的樣式內(nèi)容就包含色彩、字體、圖標(biāo)這三個(gè)大類。如果項(xiàng)目風(fēng)格化強(qiáng)一點(diǎn)，那就還可以整理一些額外的內(nèi)容，如投影、透明度、漸變、毛玻璃效果的具體參數(shù)和使用細(xì)節(jié)等。

樣式是規(guī)范整理中最簡(jiǎn)單的部分，只有在字體整理上存在一定的認(rèn)知歧義，需要設(shè)計(jì)師花比較多的時(shí)間去理清楚具體的參數(shù)和規(guī)則。只要樣式規(guī)范能整理并設(shè)置好，那么就可以快速應(yīng)用到后續(xù)的項(xiàng)目設(shè)計(jì)中去。

3. 組件庫(kù)部分

組件庫(kù)就是項(xiàng)目中使用的控件、組件元素的合集，比如按鈕、開關(guān)、下拉菜單、導(dǎo)航欄等。我們需要把項(xiàng)目會(huì)用到的這些內(nèi)容整理出來(lái)，并羅列它們的不同場(chǎng)景和狀態(tài)樣式。

不同項(xiàng)目中會(huì)用到的控件和組件不同，且同一個(gè)控件也會(huì)使用不同的設(shè)計(jì)樣式，所以每個(gè)項(xiàng)目的組件庫(kù)都是獨(dú)立的難以復(fù)用。

組件規(guī)范整理本身并不困難，但新手主要遇到的矛盾是如何對(duì)組件進(jìn)行歸類，畢竟每個(gè)項(xiàng)目都會(huì)包含數(shù)十種控件、組件應(yīng)用，如果沒(méi)有分類形式就會(huì)導(dǎo)致后續(xù)使用的混亂。

所以我們根據(jù) Ant、TD、Arco 來(lái)簡(jiǎn)單總結(jié)下 B 端組件庫(kù)的分類：

其中 “布局” 主要包含柵格、間距、彈性布局等內(nèi)容，在開發(fā)語(yǔ)境中，它們也是代碼組件化的一部分，但在我們現(xiàn)在的語(yǔ)境里，它們是前面布局的內(nèi)容而不是可視的組件元素，所以先忽略它。

下面分別解釋以下其它幾個(gè)分類主要包含哪些要素：

通用/基礎(chǔ)：主要是按鈕、鏈接兩個(gè)組成網(wǎng)頁(yè)的最基本交互元素

導(dǎo)航：包含導(dǎo)航菜單、分頁(yè)工具、步驟、錨點(diǎn)等，用于表示所處位置、狀態(tài)的控組件

數(shù)據(jù)輸入：包含輸入框、單選、多選、下拉選擇等用戶錄入數(shù)據(jù)的控組件

數(shù)據(jù)展示：包含頭像、徽標(biāo)、日歷、卡片、表格等展示數(shù)據(jù)信息的控組件

反饋/消息：包含警告、提示、消息、引導(dǎo)等用于提示用戶的控組件

其它：一些難以歸類的組件類型

在我們項(xiàng)目中應(yīng)用的大多數(shù)控件和組件，都可以根據(jù)這個(gè)通用的分類來(lái)整理。如果其中一些特定的組件內(nèi)容、樣式非常多，也可以做成一個(gè)獨(dú)立的組件分類，比如表格這樣的組件。

有的項(xiàng)目會(huì)包含多種表格的類型和樣式，加上表格本身復(fù)雜的交互和狀態(tài)表現(xiàn)，需要有非常多的篇幅進(jìn)行整理和展示，所以做成一個(gè)獨(dú)立的分類也是合理的。

再者，如果項(xiàng)目有一些比較特殊的業(yè)務(wù)模塊，比如自定義頁(yè)面、流程編輯、設(shè)備管理之類的，應(yīng)用了一系列特殊的控件和組件，那么也可以根據(jù)這個(gè)模塊類型命名創(chuàng)建一個(gè)新的分類。

最后，組件庫(kù)還有個(gè)特殊的類型 —— 圖表庫(kù)。之所以前面沒(méi)有列舉，是因?yàn)槌Ｒ?guī)項(xiàng)目極少會(huì)自定義圖表組件，都是調(diào)用第三方圖表庫(kù)生成的（Echart之類的），在這種情況下如果要輸出規(guī)范，就只能制定圖表的用色邏輯。

如果是完全自動(dòng)圖表，那么就可以作為一個(gè)單獨(dú)的分類，每個(gè)圖表類型如折線、柱狀、扇形等再逐一進(jìn)行整理和解釋。

以上就是 B 端設(shè)計(jì)規(guī)范中會(huì)包含的主要內(nèi)容，下面我們就來(lái)分享如何進(jìn)行具體的整理。

二、B端布局規(guī)范整理

布局是構(gòu)成界面視覺(jué)框架的基本要素，包含頁(yè)面布局、柵格/響應(yīng)式、浮層、間距四個(gè)部分的應(yīng)用規(guī)則。

1. 頁(yè)面布局規(guī)范

頁(yè)面布局就是頁(yè)面的主要模塊排布，包括導(dǎo)航欄、菜單欄、內(nèi)容區(qū)域三個(gè)核心模塊，還有頁(yè)腳、抽屜、頁(yè)簽欄（如果有做的話）等。

在我們自己的項(xiàng)目，就是把頁(yè)面的標(biāo)準(zhǔn)布局剝離出來(lái)示意，如下面的案例。

部分復(fù)雜的項(xiàng)目可能會(huì)在不同的模塊、頁(yè)面中使用不同的布局形式，這些布局自然也要整理，但這和開源框架中提供多種布局形式有本質(zhì)不同，它們只是先把選擇提供出來(lái)用戶自己選擇，而我們的整理的是項(xiàng)目必須要用的類型。

2. 柵格/響應(yīng)式規(guī)范

B 端項(xiàng)目往往會(huì)應(yīng)用響應(yīng)式布局，來(lái)支持不同規(guī)格的屏幕和瀏覽器窗口縮放。但和一般企業(yè)官網(wǎng)所使用的完整響應(yīng)式規(guī)則不同的是，B 端通常應(yīng)用的是響應(yīng)式的 —— 簡(jiǎn)化（閹割）版。

比如基本不會(huì)去適配平板、手機(jī)的尺寸，也不會(huì)支持太多斷點(diǎn)（BreakPoint）和多種布局，僅僅是讓內(nèi)容區(qū)域可以根據(jù)屏幕寬度拉伸而已，比如下面案例：

在這種情況下，響應(yīng)式的柵格系統(tǒng)也就變成擺設(shè)，用它作為寬度單位的意義已經(jīng)不存在了（需要了解響應(yīng)式的基礎(chǔ)知識(shí)）。

之所以這么簡(jiǎn)陋是因?yàn)轫憫?yīng)式開發(fā)涉及的開發(fā)量過(guò)大，收益卻不高。設(shè)計(jì)師需要先和前端開發(fā)商議后再做規(guī)范的定義，確定開發(fā)用柵格了再定義柵格的系統(tǒng)，如果不做就只確定最關(guān)鍵的幾個(gè)規(guī)則并做出示意。

包含：

1. 最小寬度：頁(yè)面支持的最小瀏覽器視圖寬，低于這個(gè)寬度不再適配
2. 響應(yīng)模塊：會(huì)產(chǎn)生寬度適配效果的模塊，側(cè)邊導(dǎo)航通常不跟隨頁(yè)面寬度變化
3. 斷點(diǎn)支持：是否添加特定的斷點(diǎn)值，實(shí)現(xiàn)導(dǎo)航欄或其它側(cè)邊欄的隱藏。

3. 浮層應(yīng)用規(guī)范

浮層指的是項(xiàng)目中各類懸浮控件、組件，包括提示框、通知、氣泡、抽屜、展開菜單等等，具體可以看我之前分享的浮層解析。

浮層規(guī)范要做的并不是直接開始整理并解釋這些視覺(jué)組件，而是確認(rèn)它們的應(yīng)用、布局邏輯，以及在模態(tài)環(huán)境下，背景遮罩層的規(guī)格。

簡(jiǎn)單整理起來(lái)可以如下圖所示：

浮層一多，下一個(gè)問(wèn)題就是層級(jí)，這些浮層共同出現(xiàn)時(shí)的疊加關(guān)系，所以還要簡(jiǎn)單梳理 Z 軸的層級(jí)邏輯。具體的邏輯就不在這里展開，大家可以看上面分享的浮層。

4. 間距規(guī)范

間距是組成布局的重要依據(jù)，而我們要整理的就是項(xiàng)目中要準(zhǔn)備應(yīng)用哪些間距的規(guī)格。雖然下意識(shí)我們會(huì)選擇 4 的倍數(shù)間距，但這要看實(shí)際應(yīng)用效果，必須以有效的設(shè)計(jì)稿為依據(jù)做整理，并明確規(guī)定幾個(gè)常見的間距應(yīng)用數(shù)值。

這些間距場(chǎng)景包含：內(nèi)容區(qū)域外邊距、模塊外邊距、模塊內(nèi)邊距、標(biāo)題副標(biāo)題間距、圖標(biāo)文字間距等。可以通過(guò)一兩個(gè)個(gè)有代表性的設(shè)計(jì)稿做標(biāo)注來(lái)表示。

三、樣式規(guī)范的整理

樣式規(guī)范包含色彩、字體、圖標(biāo)、風(fēng)格四個(gè)組成部分，是最容易理解和整理的規(guī)范，但做好并應(yīng)用起來(lái)卻不容易。

1. 色彩規(guī)范

色彩規(guī)范主要整理項(xiàng)目的主色、輔助色、中性色，對(duì)應(yīng)的概念就不需要多做解釋了。要注意主色只能有一個(gè)，而不能將多個(gè)顏色作為主色。而輔助色除了品牌色外，主要包含功能性用色，比如警示、錯(cuò)誤、正確等色彩應(yīng)用，一些視覺(jué)化的運(yùn)營(yíng)圖、插畫、圖標(biāo)用色是不需要作為輔助色整理進(jìn)去的。

除了純色，漸變也可以做出對(duì)應(yīng)的整理，包括固定的漸變色，或使用漸變的色彩過(guò)度規(guī)則、漸變角度定義等。

2. 字體規(guī)范

字體規(guī)是規(guī)范中最難定義的部分，常規(guī)情況下我們可以根據(jù)文字的應(yīng)用場(chǎng)景將它們劃分成標(biāo)題、正文、注釋、數(shù)字/英文等四個(gè)大類，每個(gè)大類下包含若干的具體樣式規(guī)格。

字體涉及的規(guī)范主要包含：字體類型、字號(hào)、字重、行高、字色等屬性，每一個(gè)字體樣式都具體定義了這些屬性值。因?yàn)榍懊娑x過(guò)色彩規(guī)范，所以字色需要匹配色彩規(guī)范和命名，而不是給一套的新的十六進(jìn)制色值。

另一個(gè)問(wèn)題就是行高的定義，一般文本行高都用默認(rèn)即可，但如果出現(xiàn)了大段文本的場(chǎng)景（比如文章），那么就要增加正文行高來(lái)提升可讀性，這種情況下就等于出現(xiàn)了兩種字體樣式，而不是一個(gè)字體樣式包含兩種行高。同時(shí)，大段文本的應(yīng)用還要關(guān)注一個(gè)額外的文字屬性 —— 段間距，只需要在這類字體樣式上設(shè)置即可。

3. 圖標(biāo)規(guī)范

圖標(biāo)規(guī)范主要整理的是圖標(biāo)的尺寸和樣式規(guī)格。

在一個(gè)項(xiàng)目中，最完美的圖標(biāo)應(yīng)用場(chǎng)景就是只定義一套風(fēng)格一致的工具圖標(biāo)，應(yīng)用到項(xiàng)目的各個(gè)頁(yè)面和組件中去。

但有相當(dāng)一部分項(xiàng)目需要設(shè)計(jì)多種風(fēng)格的圖標(biāo)，以提升視覺(jué)效果和滿足不同的應(yīng)用場(chǎng)景，這就需要我們將這些圖標(biāo)的規(guī)格整理出來(lái)，同時(shí)也需要將設(shè)計(jì)好的圖標(biāo)置入到規(guī)范中，成為后續(xù)設(shè)計(jì)的引用元素。

4. 風(fēng)格規(guī)范

風(fēng)格規(guī)范就是視覺(jué)風(fēng)格性要素的整理，包括圓角、投影、模糊、描邊等樣式的應(yīng)用。只需要將用過(guò)的案例整理進(jìn)來(lái)，并標(biāo)注對(duì)應(yīng)的參數(shù)即可。

四、組件庫(kù)的整理

組件庫(kù)即放置項(xiàng)目涉及的不同控件、組件元素，在初期我們可以根據(jù)前面總結(jié)的基礎(chǔ)、導(dǎo)航、輸入、展示、反饋、其它六個(gè)大類做區(qū)分，每個(gè)大類先創(chuàng)建一個(gè)獨(dú)立的畫布，將元素置入進(jìn)去。

組件庫(kù)和樣式不同的是，里面的元素是可交互的，也就意味著它們會(huì)有不同的狀態(tài)用于反饋和示意。所以每個(gè)一個(gè)控、組件都要做出它們的不同交互狀態(tài)下的樣式。

比如按鈕會(huì)包含默認(rèn)、懸浮、點(diǎn)擊、不可點(diǎn)，輸入框包含默認(rèn)、懸浮、待輸入、輸入中、已輸入、不可用等狀態(tài)。這些交互狀態(tài)是開發(fā)中必不可少的部分，但我們無(wú)法直接在界面設(shè)計(jì)稿中完成，所以要在置入規(guī)范畫布后單獨(dú)對(duì)它們進(jìn)行設(shè)計(jì)和展示。

而一些復(fù)雜的組件，比如表格、編輯器、圖表等，去表現(xiàn)它不同狀態(tài)是不可取的，因?yàn)樗鼈儼舜罅康囊曈X(jué)和交互細(xì)節(jié)，每個(gè)操作都畫個(gè)表格肯定是畫不完的。所以只需要表現(xiàn)幾個(gè)關(guān)鍵的狀態(tài)，然后將大組件拆分成若干小組件或控件進(jìn)行獨(dú)立表示。

這些組件的整理方式 Ant、TD、Arco 等第三方框架都已經(jīng)做的非常完善了，只要找規(guī)范的源文件（官網(wǎng)都有）并參考它們的做法即可。

理論上，設(shè)計(jì)界面的過(guò)程中，只要設(shè)計(jì)了新的控件或組件，將它們整理進(jìn)畫布中再做出不同的狀態(tài)，就可以完成組件庫(kù)的創(chuàng)建。但這種做法的缺點(diǎn)是界面和組件的整理過(guò)程各做各的，處于割裂的狀態(tài)，很容易導(dǎo)致組件之間的樣式不夠統(tǒng)一。

所以我們?cè)谡硪?guī)范庫(kù)的時(shí)候，要有目的性的去建立組件之間的聯(lián)系，并盡可能的在組件庫(kù)整理的過(guò)程中反向提升設(shè)計(jì)的質(zhì)量。下面分享一些相關(guān)的經(jīng)驗(yàn)和技巧。

比如按鈕和輸入框、選擇器等都是矩形元素，很多場(chǎng)景下都會(huì)并列需要使用相同的高度，所以我們可以在定義完按鈕以后去統(tǒng)一類似控件的高度。

并且按鈕也有不同的高度規(guī)格，這些高度可以繼承到其它控件或者細(xì)節(jié)中，比如步進(jìn)器、通知欄、頭像、表格的表頭、步驟條等。

再上一級(jí)，比按鈕更大的矩形元素則是行類元素，比如菜單欄、表格行、列表行、模塊標(biāo)題欄等，也可以將高度固定成少數(shù)幾個(gè)尺寸。

同理，圓形的控件也可以使用類似的思路統(tǒng)一，比如單選控件、滑動(dòng)輸入、開關(guān)、徽標(biāo)、輪播指示器等。

盡量先把常用基礎(chǔ)控件整理完，再去創(chuàng)建復(fù)雜的組件，因?yàn)閺?fù)雜的組件都是由這些基礎(chǔ)元素組成，前期基礎(chǔ)元素整理的越完善，這些復(fù)雜組件的設(shè)計(jì)就會(huì)越容易。

總結(jié)起來(lái)，想有效的整理組件庫(kù)，就是先從按鈕作為整理起點(diǎn)，再拓展至所有矩形類控件的定義，然后定義圓形類控件。整理完常見基礎(chǔ)控件以后，再慢慢整理復(fù)雜的組件，直至將所有組件整理完畢。

同時(shí)，作為項(xiàng)目自用的組件庫(kù)，不建議花大量的時(shí)間去折騰軟件內(nèi)的變體和處理規(guī)范展示本身的布局，這會(huì)耗費(fèi)大量的時(shí)間，而且不會(huì)對(duì)后續(xù)設(shè)計(jì)效率產(chǎn)生多少正面影響（甚至是負(fù)面的）。

在這個(gè)整理過(guò)程并沒(méi)有什么技術(shù)難度，考驗(yàn)的是大家的耐心和對(duì)細(xì)節(jié)的重視度。

下面是整理的：

結(jié)尾

以上就是基于普通項(xiàng)目創(chuàng)建 B 端項(xiàng)目規(guī)范的分享，雖然我沒(méi)有太花篇幅演示規(guī)范具體應(yīng)該設(shè)計(jì)成什么樣，但它們并不重要，只要思路是正確的你們可以隨意發(fā)揮。

如果有別的疑問(wèn)，就可以在我們自己的社群里提出來(lái)，今天就分享到這里。

我們下篇再賤~

作者：超人的電話亭