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

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

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

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

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

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

UI 規(guī)范

1. UI 規(guī)范 - 色彩

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

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

輔助色：用于提示其他場景，比如：成功、失敗、警告、無效等

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

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

其它色：如統(tǒng)計圖、數(shù)據(jù)可視化、多個標簽的不同配色方案根據(jù)項目情況單獨設定，通過基本色彩衍生而來。

2. UI 規(guī)范 - 字體

字體是體系化界面設計中最基本的構成之一。

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

• 中文字體建議選擇：蘋方體、思源黑體
• 英文字體建議選擇：Helvetica Neue、思源黑體

系統(tǒng)中字體大小為：14px、16px、18px、20px、24px、26px、28px、30px、36px...

字體行高設定：根據(jù)文字大小及使用場景設置行高，行高=文字大小+8px。

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

3. UI 規(guī)范 - 布局

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

• 系統(tǒng)中存在的結構方式有：左右結構、上下結構
• 系統(tǒng)適配：采用 24 柵格

左右結構布局

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

上下結構布局

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

4. UI 規(guī)范 - 圖標

B 端系統(tǒng)圖標簡潔為主、分類區(qū)分、便于識別，默認大小：16X16px，SVG 格式為主

對于圖標來講，相信大家都不會陌生，而對于 B 端的圖標，圖標主要注重簡潔易懂，并且一般起到分類標識和點綴的效果

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

組件規(guī)范

1. 組件規(guī)范 - 按鈕

按鈕觸發(fā)事件或動作，他們讓用戶知道接下來會發(fā)生什么。

按鈕的樣式分為 5 種，分別是：主按鈕、默認按鈕、虛線按鈕、文本按鈕、鏈接按鈕

• 主按鈕：用于主行動點，一個操作區(qū)域只能有一個主按鈕
• 默認按鈕：用于沒有主次之分的一組行動點
• 虛線按鈕：常用于添加操作
• 文本按鈕：用于最次級的行動點
• 鏈接按鈕：用于作為外鏈的行動點

按鈕的狀態(tài)分為 4 種，分別是：正常、突出顯示、禁用、已選中

• 正常（normal）：表示控件處于活動狀態(tài)，但是當前并未使用
• 突出顯示（highlighted）：表示控件正被按住或正被使用
• 禁用（disabled）：表示按鈕未啟用且無法使用
• 已選中（selected）：僅特定控件具有該狀態(tài)，表示控件當前已被選中

2. 組件規(guī)范 - 面包屑

面包屑是一種導航系統(tǒng)，顯示當前頁面在系統(tǒng)層級結構中的位置，并能向上返回。

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

• 短面包屑：用戶層級比較淺的頁面
• 長面包屑：用戶層級比較深的頁面

3. 組件規(guī)范 - 導航菜單

為頁面和功能提供導航的菜單列表。

導航菜單一般分為 2 種模式：左右結構導航、上下結構導航

左右結構導航：我們見過最多的就是左右結構的導航，通常會采用圖標+文案的形式呈現(xiàn)，并且有層級區(qū)分，采用點擊展開的形式收縮二級目錄，左右結構的導航一般都會支持左側收縮的交互功能，為內(nèi)容展示區(qū)域提供更大的展示空間，一鍵收縮或者鼠標左右拖動收縮，可根據(jù)實際情況而選擇合適的交互方式

上下結構導航：菜單排版在頂部左側或者右側，這樣的導航方式在網(wǎng)站中比較常見，但是在 B 端系統(tǒng)中也會使用，我曾接觸過的實際項目中就有使用，主要運用于頁面內(nèi)容量大，導航無次級時

4. 組件規(guī)范 - 分頁

采用分頁的形式分隔長列表，每次只加載一個頁面

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

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

5. 組件規(guī)范 -下拉菜單

下拉菜單向用戶顯示操作或選項的列表

下拉菜單樣式總可分為 2 種：一級下拉、多級下拉

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

6. 組件規(guī)范 -滑條

上下滑動展示更多內(nèi)容

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

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

7. 組件規(guī)范 -日期選擇框

輸入或選擇日期的控件

對于 B 端系統(tǒng)來說，日期會根據(jù)業(yè)務的情況精度提取會不同，精確到日、時、分、秒，作為時間設置何過濾條件使用時，一般會使用到時間區(qū)間，所以日期選擇框分為以下 3 種：普通日期選擇、區(qū)間日期選擇、精準日期選擇

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

8. 組件規(guī)范 -單選/多選框

在一組可選項中進行單項/多項選擇時

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

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

更多單/多選框的設計知識：

9. 組件規(guī)范 -樹

樹型展示和樹型選擇控件。

樹組件在 B 端系統(tǒng)中常用于權限設置，大部分的 B 端系統(tǒng)都會有權限設置的功能，當然在我實際工作中除了權限設置使用樹結構外，還有其它的使用場景，比如：組織維護、職能維護、事項維護等等。

樹結構可以清晰的展示層級關系，并且節(jié)約空間，但是在一些復雜的需求中，樹結構比較難維護，所以在選擇組件時也需要考慮實際業(yè)務場景和維護成本。

下圖中左側為展示效果的樹結構、右側為可操作（選擇）的樹結構效果展示，兩種效果都可運用到上文提到的下拉選擇框中使用。

更多樹形選擇相關的知識點：

10. 組件規(guī)范 -標簽頁

選項卡切換組件

標簽頁分為 2 種形式：橫向標簽、縱向標簽

橫向標簽：橫向的標簽樣式是最常用的樣式，包括在網(wǎng)站和移動端都會運用，標簽樣式分為文字+線條、文字+色塊，分別區(qū)分選中和默認的狀態(tài)形式，標簽除了默認固定的標簽外，還會有可編輯的標簽，可滿足增刪除功能，所以這類標簽會有“刪除”標識，例如網(wǎng)頁頁簽就是可編輯的標簽樣式。

縱向標簽：縱向標簽有點類似左右結構的導航菜單，也是通過點擊選中頁簽，實現(xiàn)頁面內(nèi)容的切換變化。

11. 組件規(guī)范 -輸入框

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

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

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

12. 組件規(guī)范 -表單

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

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

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

更多關于 B 端表單的設計方法：

13. 組件規(guī)范 -上傳

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

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

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

14. 組件規(guī)范 - 氣泡卡片

點擊/鼠標移入元素，彈出氣泡式的卡片浮層

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

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

15. 組件規(guī)范 - 表格

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

表格作為常見的組件，但是表格樣式是多種多樣的，并且每一種表格的交互都各不相同，使用的常見表格也各有差異，下圖我只展示了 2 種表格的樣式，但是實際上遠不止于此，在我目前工作中涉及的一個項目就采用了超過 5 種的表格樣式，這里我就不做詳細介紹，后期我會單獨總結關于表格的不同樣式以及使用場景。

大家可以先看這篇干貨：

16. 組件規(guī)范 - 警告提示

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

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

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

17. 組件規(guī)范 - 彈窗/抽屜

信息展示和信息填寫的浮層面板

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

此篇文章我只總結了我實際工作中常用的組件，還有很多不常用的組件沒有作全面的總結，后期有機會再做總結吧！，也希望對處于 B 端領域的你有所幫助，歡迎一起探討關于 B 端設計有趣的事！

不僅是 B 端，在平面設計領域我也有濃厚的興趣，也歡迎大家和我一起探討哦~~~

歡迎關注作者的微信公眾號：「設計小余」