編輯導(dǎo)語(yǔ)：本文作者全面總結(jié)了B端系統(tǒng)的設(shè)計(jì)規(guī)范，包含UI規(guī)范、組件規(guī)范，總結(jié)了在實(shí)際工作中常用的組件，希望對(duì)正處于B端領(lǐng)域設(shè)計(jì)的你有所幫助。本篇文章適合正在從事B端設(shè)計(jì)工作的小伙伴閱讀，一起來(lái)看。

不知不覺(jué)已經(jīng)深耕在B端這個(gè)領(lǐng)域3年有余，很多人接觸過(guò)B端后會(huì)覺(jué)得乏味，因?yàn)锽端的設(shè)計(jì)在視覺(jué)上并沒(méi)有C端那么有沖擊力，更多的是結(jié)合業(yè)務(wù)邏輯，設(shè)計(jì)出符合業(yè)務(wù)需求的交互，以及界面排版的合理性，達(dá)到產(chǎn)品的可用性、易用性、好用性。

由于業(yè)務(wù)的復(fù)雜性，功能實(shí)現(xiàn)的難度程度相比C端會(huì)高很多，但是B端系統(tǒng)會(huì)有很多相似的組件可以共用，設(shè)計(jì)師一般會(huì)在項(xiàng)目前期做好這些組件的規(guī)范，便于后期設(shè)計(jì)使用，同時(shí)開(kāi)發(fā)也能減少開(kāi)發(fā)量，公用組件庫(kù)不僅能減少開(kāi)發(fā)時(shí)間還能達(dá)到系統(tǒng)界面統(tǒng)一的效果，降低用戶(hù)的學(xué)習(xí)成本。

B端的組件也是豐富多樣、同時(shí)也比較復(fù)雜，因此此篇文章我只對(duì)組件樣式做統(tǒng)計(jì)，并作簡(jiǎn)單的介紹，具體的組件使用場(chǎng)景后續(xù)一一分享，歡迎持續(xù)關(guān)注~

B端的系統(tǒng)規(guī)范我分為兩大類(lèi)，分別是：UI規(guī)范、組件規(guī)范。

UI規(guī)范：色彩、字體、布局、圖標(biāo)。

組件規(guī)范：按鈕、面包屑、導(dǎo)航菜單、分頁(yè)、下拉菜單、滑條、日期選擇框、樹(shù)、標(biāo)簽頁(yè)、輸入框、表單、上傳、氣泡卡片、表格、警告提示、彈窗/抽屜

一、UI規(guī)范

1. 色彩

系統(tǒng)色彩規(guī)范，包含核心（品牌）色、輔助色、中性色

1）品牌色

即產(chǎn)品主色，產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對(duì)外的形象，品牌色要根據(jù)產(chǎn)品特性、用戶(hù)使用場(chǎng)景、產(chǎn)品定位等進(jìn)行選，盡量做好色彩的延伸性，可支持換膚，品牌色的應(yīng)用場(chǎng)景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等

2）輔助色

用于提示其他場(chǎng)景，比如：成功、失敗、警告、無(wú)效等

3）中性色

常用于文本、背景、邊框、分割線(xiàn)等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來(lái)表現(xiàn)不同的層級(jí)結(jié)構(gòu)

一整套系統(tǒng)所涉及到的色彩往往不止這幾種，如果我們只限制在上面所總結(jié)的幾種顏色，那么在一些需要多種顏色時(shí)就比較難區(qū)分，比如一些常見(jiàn)的數(shù)據(jù)圖表分析，就會(huì)涉及到多種顏色的結(jié)合使用，所以我們會(huì)根據(jù)主要的色彩規(guī)范衍生更多的色系供特殊情況使用，因此在作色彩規(guī)范時(shí)會(huì)準(zhǔn)備一個(gè)“其它色”。

4）其它色

如統(tǒng)計(jì)圖、數(shù)據(jù)可視化、多個(gè)標(biāo)簽的不同配色方案根據(jù)項(xiàng)目情況單獨(dú)設(shè)定，通過(guò)基本色彩衍生而來(lái)

2. 字體

字體是體系化界面設(shè)計(jì)中最基本的構(gòu)成之一。

字體的大小、色彩區(qū)分體現(xiàn)界面信息的層級(jí)關(guān)系。

• 中文字體建議選擇：蘋(píng)方體、思源黑體
• 英文字體建議選擇：Helvetica Neue、思源黑體
• 系統(tǒng)中字體大小為：14px、16px、18px、20px、24px、26px、28px、30px、36px…
• 字體行高設(shè)定：根據(jù)文字大小及使用場(chǎng)景設(shè)置行高，行高=文字大小+8px

常規(guī)默認(rèn)的系統(tǒng)字體規(guī)范最小為12px，上篇文章【B端系統(tǒng)】我的設(shè)計(jì)踩坑總結(jié)（上）中我也提到過(guò)關(guān)于不同分辨率下，不同顯示器分辨率和布局的默認(rèn)設(shè)置情況，字體規(guī)范會(huì)作不同的梯度，這里就不再贅述，感興趣的可以回頭看看。

3. 布局

B端系統(tǒng)的用戶(hù)的主流分辨率主要為 1920、1440 和 1366，個(gè)別系統(tǒng)還存在 1280 的顯示設(shè)備，通過(guò)動(dòng)態(tài)適配布局來(lái)完成在不同分辨率下展示內(nèi)容。

系統(tǒng)中存在的結(jié)構(gòu)方式有：左右結(jié)構(gòu)、上下結(jié)構(gòu)。

系統(tǒng)適配：采用24柵格。

1）左右結(jié)構(gòu)布局

常被用于左右布局的設(shè)計(jì)方案中，常見(jiàn)的做法是將左邊的導(dǎo)航欄固定寬度，頂部欄固定高度（有頂部欄的情況下），對(duì)右邊的內(nèi)容展示區(qū)域進(jìn)行動(dòng)態(tài)縮放。

2）上下結(jié)構(gòu)布局

常被用于上下布局的設(shè)計(jì)方案中，常見(jiàn)的做法是將頂部欄固定，對(duì)下邊的內(nèi)容展示區(qū)域進(jìn)行動(dòng)態(tài)縮放，內(nèi)容區(qū)域左右兩邊固定有最小值。

4. 圖標(biāo)

B端系統(tǒng)圖標(biāo)簡(jiǎn)潔為主、分類(lèi)區(qū)分、便于識(shí)別，默認(rèn)大?。?6X16px，SVG格式為主。

對(duì)于圖標(biāo)來(lái)講，相信大家都不會(huì)陌生，而對(duì)于B端的圖標(biāo)，圖標(biāo)主要注重簡(jiǎn)潔易懂，并且一般起到分類(lèi)標(biāo)識(shí)和點(diǎn)綴的效果。

這里分享一下我在工作中怎么整理我的項(xiàng)目圖標(biāo)，以及怎么便捷的和開(kāi)發(fā)小哥哥配合傳圖，圖標(biāo)設(shè)計(jì)我使用AI完成，大小都設(shè)置為16x16px，畫(huà)好的圖標(biāo)直接保存為SVG格式，然后批量上傳到iconfont.cn，在這里我會(huì)根據(jù)不同的項(xiàng)目分類(lèi)，開(kāi)發(fā)小哥哥只需要在每個(gè)項(xiàng)目中下載需要的圖標(biāo)即可，這樣大大提高了工作效率。

二、組件規(guī)范

1. 按鈕

是按鈕觸發(fā)事件或動(dòng)作，他們讓用戶(hù)知道接下來(lái)會(huì)發(fā)生什么。

按鈕的樣式分為5種，分別是：主按鈕、默認(rèn)按鈕、虛線(xiàn)按鈕、文本按鈕、鏈接按鈕。

• 主按鈕：用于主行動(dòng)點(diǎn)，一個(gè)操作區(qū)域只能有一個(gè)主按鈕。
• 默認(rèn)按鈕：用于沒(méi)有主次之分的一組行動(dòng)點(diǎn)。
• 虛線(xiàn)按鈕：常用于添加操作。
• 文本按鈕：用于最次級(jí)的行動(dòng)點(diǎn)。
• 鏈接按鈕：用于作為外鏈的行動(dòng)點(diǎn)。
• 按鈕的狀態(tài)分為4種，分別是：正常、突出顯示、禁用、已選中。
• 正常（normal）：表示控件處于活動(dòng)狀態(tài)，但是當(dāng)前并未使用。
• 突出顯示（highlighted）：表示控件正被按住或正被使用。
• 禁用（disabled）：表示按鈕未啟用且無(wú)法使用。
• 已選中（selected）：僅特定控件具有該狀態(tài)，表示控件當(dāng)前已被選中。

2. 面包屑

面包屑是一種導(dǎo)航系統(tǒng)，顯示當(dāng)前頁(yè)面在系統(tǒng)層級(jí)結(jié)構(gòu)中的位置，并能向上返回。

面包屑組件在B端系統(tǒng)是常用的組件，同時(shí)在網(wǎng)站中也是常用的，面包屑的樣式分為2種：短面包屑、長(zhǎng)面包屑。

• 短面包屑：用戶(hù)層級(jí)比較淺的頁(yè)面。
• 長(zhǎng)面包屑：用戶(hù)層級(jí)比較深的頁(yè)面。

3. 導(dǎo)航菜單

為頁(yè)面和功能提供導(dǎo)航的菜單列表。

導(dǎo)航菜單一般分為2種模式：左右結(jié)構(gòu)導(dǎo)航、上下結(jié)構(gòu)導(dǎo)航。

• 左右結(jié)構(gòu)導(dǎo)航：我們見(jiàn)過(guò)最多的就是左右結(jié)構(gòu)的導(dǎo)航，通常會(huì)采用圖標(biāo)+文案的形式呈現(xiàn)，并且有層級(jí)區(qū)分，采用點(diǎn)擊展開(kāi)的形式收縮二級(jí)目錄，左右結(jié)構(gòu)的導(dǎo)航一般都會(huì)支持左側(cè)收縮的交互功能，為內(nèi)容展示區(qū)域提供更大的展示空間，一鍵收縮或者鼠標(biāo)左右拖動(dòng)收縮，可根據(jù)實(shí)際情況而選擇合適的交互方式。
• 上下結(jié)構(gòu)導(dǎo)航：菜單排版在頂部左側(cè)或者右側(cè)，這樣的導(dǎo)航方式在網(wǎng)站中比較常見(jiàn)，但是在B端系統(tǒng)中也會(huì)使用，我曾接觸過(guò)的實(shí)際項(xiàng)目中就有使用，主要運(yùn)用于頁(yè)面內(nèi)容量大，導(dǎo)航無(wú)次級(jí)時(shí)。

4. 分頁(yè)

采用分頁(yè)的形式分隔長(zhǎng)列表，每次只加載一個(gè)頁(yè)面。

分頁(yè)的樣式也是多種多樣，在不同情況下也會(huì)選擇不同的樣式，我這里總結(jié)了我們目前系統(tǒng)使用的3種分頁(yè)樣式：常規(guī)樣式、長(zhǎng)版樣式、簡(jiǎn)潔樣式。

• 常規(guī)樣式：默認(rèn)展示的樣式即常規(guī)樣式，控制在五個(gè)數(shù)字間，避免數(shù)字太多太混亂
• 長(zhǎng)版樣式：當(dāng)數(shù)據(jù)信息量巨大的情況下，分頁(yè)的數(shù)量也會(huì)增多，采用多數(shù)字可切換的樣式
• 簡(jiǎn)潔樣式：頁(yè)數(shù)固定或最多不超過(guò)10頁(yè)時(shí)，一般采用左右切換的樣式

5. 下拉菜單

下拉菜單向用戶(hù)顯示操作或選項(xiàng)的列表。

下拉菜單樣式可分為2種：一級(jí)下拉、多級(jí)下拉。

• 一級(jí)下拉：最簡(jiǎn)單的下拉選擇樣式，直接平鋪可選擇的選項(xiàng)內(nèi)容。
• 多級(jí)下拉：下拉框種存在層級(jí)關(guān)系（主次層級(jí)）、樣式可分為左右分級(jí)展示、上下錯(cuò)位分級(jí)展示、樹(shù)結(jié)構(gòu)分級(jí)展示（這里關(guān)于樹(shù)結(jié)構(gòu)的下拉展示方式?jīng)]有作樣式，不過(guò)后面有關(guān)于樹(shù)結(jié)構(gòu)的組件介紹，可參考其樣式）。

6. 滑條

上下滑動(dòng)展示更多內(nèi)容。

滑條是作為產(chǎn)品中不可缺少的組件，無(wú)論是web端還是移動(dòng)端，都會(huì)運(yùn)用到，滑條的樣式也都差距不大，也沒(méi)有很大的設(shè)計(jì)發(fā)散，主要是還是根據(jù)實(shí)際需求情況區(qū)分其交互形式。

例如：在我的實(shí)際工作中，我選擇的交互方式是，滑條不會(huì)一直顯示在界面中（避免頁(yè)面整體視覺(jué)效果受到干擾），只有當(dāng)鼠標(biāo)移動(dòng)到可滑動(dòng)的區(qū)域才會(huì)出現(xiàn)滑條（告知用戶(hù)頁(yè)面內(nèi)容可滑動(dòng)看更多），所以我的組件中會(huì)出現(xiàn)兩個(gè)樣式。

7. 日期選擇框

輸入或選擇日期的控件。

對(duì)于B端系統(tǒng)來(lái)說(shuō)，日期會(huì)根據(jù)業(yè)務(wù)的情況精度提取會(huì)不同，精確到日、時(shí)、分、秒，作為時(shí)間設(shè)置和過(guò)濾條件使用時(shí)，一般會(huì)使用到時(shí)間區(qū)間，所以日期選擇框分為以下3種：普通日期選擇、區(qū)間日期選擇、精準(zhǔn)日期選擇。

• 普通日期選擇：只可選擇某年月日時(shí)間精度。
• 區(qū)間日期選擇：可選擇不同年月日時(shí)間區(qū)間。
• 精準(zhǔn)日期選擇：可選擇年月日、時(shí)分秒高精度時(shí)間。

8. 單選/多選框

在一組可選項(xiàng)中進(jìn)行單項(xiàng)/多項(xiàng)選擇時(shí)。

注意組件的使用場(chǎng)景：單選/多選框看是簡(jiǎn)單又常見(jiàn)的組件，但是在實(shí)際項(xiàng)目中運(yùn)用時(shí)也需要做到細(xì)致的區(qū)分，選項(xiàng)只支持單選時(shí)我們就采用合適的圓形單選框，支持多選時(shí)就采用方形的多選框，做好單選和多選的場(chǎng)景區(qū)分.

注意組件的狀態(tài)區(qū)分：單選/多選框的樣式雖然簡(jiǎn)單，但是也有3種顯示狀態(tài)：默認(rèn)、選中、不可選。

9. 樹(shù)

樹(shù)型展示和樹(shù)型選擇控件。

樹(shù)組件在B端系統(tǒng)中常用于權(quán)限設(shè)置，大部分的B端系統(tǒng)都會(huì)有權(quán)限設(shè)置的功能，當(dāng)然在我實(shí)際工作中出來(lái)權(quán)限設(shè)置使用樹(shù)結(jié)構(gòu)外，還有其它的使用場(chǎng)景，比如：組織維護(hù)、職能維護(hù)、事項(xiàng)維護(hù)等等。

樹(shù)結(jié)構(gòu)可以清晰的展示層級(jí)關(guān)系，并且節(jié)約空間，但是在一些復(fù)雜的需求中，樹(shù)結(jié)構(gòu)比較難維護(hù)，所以在選擇組件時(shí)也需要考慮實(shí)際業(yè)務(wù)場(chǎng)景和維護(hù)成本。

下圖中左側(cè)為展示效果的樹(shù)結(jié)構(gòu)、右側(cè)為可操作（選擇）的樹(shù)結(jié)構(gòu)效果展示，兩種效果都可運(yùn)用到上文提到的下拉選擇框中使用。

10. 標(biāo)簽頁(yè)

選項(xiàng)卡切換組件。

標(biāo)簽頁(yè)分為2種形式：橫向標(biāo)簽、縱向標(biāo)簽。

• 橫向標(biāo)簽：橫向的標(biāo)簽樣式是最常用的樣式，包括在網(wǎng)站和移動(dòng)端都會(huì)運(yùn)用，標(biāo)簽樣式分為文字+線(xiàn)條、文字+色塊，分別區(qū)分選中和默認(rèn)的狀態(tài)形式，標(biāo)簽除了默認(rèn)固定的標(biāo)簽外，還會(huì)有可編輯的標(biāo)簽，可滿(mǎn)足增刪除功能，所以這類(lèi)標(biāo)簽會(huì)有“刪除”標(biāo)識(shí)，例如網(wǎng)頁(yè)頁(yè)簽就是可編輯的標(biāo)簽樣式。
• 縱向標(biāo)簽：縱向標(biāo)簽有點(diǎn)類(lèi)似左右結(jié)構(gòu)的導(dǎo)航菜單，也是通過(guò)點(diǎn)擊選中頁(yè)簽，實(shí)現(xiàn)頁(yè)面內(nèi)容的切換變化。

11. 輸入框

文本輸入框、數(shù)字輸入框。

輸入框是最為常見(jiàn)的組件了，這里就不做組件的介紹，主要還是分享一下關(guān)于輸入框組件在不同顯示器上排版布局的區(qū)別吧，例如在移動(dòng)端輸入框的文本和輸入框一般會(huì)采用上下結(jié)構(gòu)，因?yàn)橐苿?dòng)端的尺寸比較小，可展示內(nèi)容的區(qū)域有限。

而在web端，會(huì)根據(jù)此頁(yè)面的內(nèi)容量以及內(nèi)容顯示的形式來(lái)區(qū)分顯示方式，例如彈窗中內(nèi)容較少時(shí)，輸入框樣式一般會(huì)采用上下結(jié)構(gòu)，內(nèi)容較多頁(yè)面空間較大時(shí)會(huì)選中左右結(jié)構(gòu)排版，當(dāng)然，這并不是固定的排版思維，而是需要根據(jù)實(shí)際情況選中合適的排版方式。

12. 表單

高性能表單控件，自帶數(shù)據(jù)域管理，包含數(shù)據(jù)錄入、校驗(yàn)以及對(duì)應(yīng)樣式。

表單在我認(rèn)為，即多個(gè)輸入框的組合，表單的樣式可直接根據(jù)輸入框的兩種樣式作區(qū)分展示，左右結(jié)構(gòu)和上下結(jié)構(gòu)，普通的表單是會(huì)根據(jù)實(shí)際業(yè)務(wù)情況固定輸入的字段信息，而對(duì)于一些特殊的表單信息，用戶(hù)可以增減表單的內(nèi)容時(shí)，表單的樣式則會(huì)和普通的樣式作區(qū)分，并且交互方式也會(huì)有所區(qū)分。

例如下圖右側(cè)的表單樣式即為可增減的表單，支持點(diǎn)擊右下角的“添加”按鈕增加一個(gè)和上面一樣的表單內(nèi)容信息，可點(diǎn)擊表單模塊右上角的“x”刪除此表單，達(dá)到用戶(hù)自定義表單內(nèi)容數(shù)量的要求。

13. 上傳

文件選擇上傳和拖拽上傳控件。

上傳的功能我們不少見(jiàn)，對(duì)于B端系統(tǒng)來(lái)講，上傳表單、文件是最為常見(jiàn)的操作，這里我總結(jié)了3種上傳的組件樣式：單件上傳、圖片上傳、批量上傳。

• 單件上傳：單文件上傳一般是上傳一個(gè)或者幾個(gè)文件，常采用按鈕或拖拽的交互形式。
• 圖片上傳：簡(jiǎn)單的圖片替換上傳，常用于企業(yè)logo替換、登錄頁(yè)圖片替換等場(chǎng)景，需告知用戶(hù)圖片上傳的狀態(tài)。
• 批量上傳：對(duì)于大批量的文件上傳需要告知用戶(hù)文件的狀態(tài)，支持用戶(hù)取消上傳操作，例如：常用的百度網(wǎng)盤(pán)上傳和下載文件。

14. 氣泡卡片

點(diǎn)擊/鼠標(biāo)移入元素，彈出氣泡式的卡片浮層。

由于B端產(chǎn)品內(nèi)容量巨大，需要在有限的空間展示所有的數(shù)據(jù)不為是個(gè)難題，所以為了在有限的空間展示重要額內(nèi)容，達(dá)到界面的可閱讀性、采用次要內(nèi)容隱藏的功能，通過(guò)點(diǎn)擊或者懸浮展示全面的內(nèi)容。

最常見(jiàn)的表格內(nèi)容太長(zhǎng)出現(xiàn)“…”，鼠標(biāo)移入出現(xiàn)懸浮氣泡顯示完整的信息；名稱(chēng)后面跟隨“？/！”圖標(biāo)，鼠標(biāo)移入出現(xiàn)懸浮氣泡顯示注釋的信息；數(shù)據(jù)分析圖表，鼠標(biāo)移入出現(xiàn)懸浮氣泡顯示數(shù)據(jù)的信息等等。

15. 表格

展示行列數(shù)據(jù)。

表格作為常見(jiàn)的組件，樣式是多種多樣的，并且每一種表格的交互都各不相同，使用的常見(jiàn)也各有差異，下圖我只展示了2種表格的樣式，但是實(shí)際上遠(yuǎn)不止于此，在我目前工作種涉及的一個(gè)項(xiàng)目中就采用了超過(guò)5種的表格樣式，這里我就不做詳細(xì)介紹，后期我會(huì)單獨(dú)總結(jié)關(guān)于表格的不同樣式以及使用場(chǎng)景

16. 警告提示

警告提示，展現(xiàn)需要關(guān)注的信息。

警告提示一般分為四個(gè)狀態(tài)：成功、信息注釋、警告、錯(cuò)誤（失敗）.

根據(jù)提醒內(nèi)容的顯示以及是否需要用戶(hù)手動(dòng)操作，我總結(jié)了四種樣式，如下圖：

17. 彈窗/抽屜

信息展示和信息填寫(xiě)的浮層面板。

彈窗和抽屜都是內(nèi)容展示的不同出現(xiàn)方式，組件的選擇同樣需要根據(jù)實(shí)際需求情況，比如需要參考頁(yè)面信息填寫(xiě)表單信息，采用抽屜的樣式則更為合理，這樣就可以在右側(cè)填寫(xiě)表單，在左側(cè)參考數(shù)據(jù)對(duì)比，抽屜的樣式可以是浮窗也可以是直接從右側(cè)推出，左邊內(nèi)容被擠壓得形式，這樣得交互方式在我得實(shí)際項(xiàng)目中也是常用之一。

此篇文章我只總結(jié)了我實(shí)際工作中常用的組件，還有很多不常用的組件沒(méi)有作全面的總結(jié)，后期有機(jī)會(huì)再做總結(jié)吧！，也希望對(duì)處于B端領(lǐng)域的你有所幫助，歡迎一起探討關(guān)于B端設(shè)計(jì)有趣的事！

本文由 @設(shè)計(jì)小余 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于 CC0 協(xié)議