色彩規范 

色彩規范一般包含品牌色、輔助色和中性色，在B端產品中，顏色除了迎來傳達品牌調性，更多的用來傳達一些提示或警告，通過不同的顏色給予用戶信息反饋，不同的狀態運用不同的顏色展示，比如：

綠色通常代表成功、已發送、已簽到等狀態；

紅色通常代表失敗、未發布、未簽到等狀態。

另外，通過顏色可以對內容進行分層級展示，提高用戶閱讀信息的效率。

品牌主色

一套產品只有一個品牌主色，是界面中出現最多的顏色。在需要用色強調而且沒有其他要求時，一般都會選擇主色。

網絡上很多人說B端產品大部分用藍色或者偏冷色系作為主色，可以帶給用戶一種嚴肅冷靜的感覺，但在工作日常中，很多企業會要求顏色必須是公司的品牌色。

例如當前任職的公司品牌色是飽和度較高的紫色，那么在定主色時，我們就不能跳脫這個色彩范圍，在這樣的情況下，我們可以考慮將品牌色飽和度降低或者用其他暗色系的顏色進行搭配，從而在觀感上盡量顯得不是那么刺眼，降低用戶眼睛疲勞度。

輔助色

用于提示其他場景，比如：成功、失敗、警告、無效等，輔助色主要是幫助用戶高效獲得信息。

中性色

常用于文本、背景、邊框、分割線等。

字體規范 

在B端的設計上，文字的字體，字重，字號，行號、顏色用來區分界面信息的層級關系。

字體

中文字體一般用蘋方體、思源黑體、微軟雅黑，英文字體一般為Helvetica Neue、思源黑體、微軟雅黑。

字號

系統中字體大小為：12px、14px、16px、18px、20px、24px、26px、28px、30px、36px…

在開發中，瀏覽器最小字體一般為12px，注意設計中不可以低于最小字體設計。

行高

行高上，可以采用行高=文字大小+8px，例如14px字體，則14px+8px=22px，則行高為22px。

字重

通常采用regular、medium、semibold三個字重。

顏色

目前最常用的字體顏色是#333333、#666666、#999999，區分標題、正文、輔助文字，具體可根據設計進行調節。

圖標規范 

在B端設計中，圖標要簡潔易懂，用來幫助用戶更快導航，提高用戶使用產品的效率。

在繪制完圖標后，可以存儲成svg方式上傳至Iconfont，這樣方便和開發進行對接，也可以打造自己的圖標庫，在后續的項目中，方便直接運用或修改。

布局柵格 

B端系統的主流分辨率主要為1920、1440和1366，個別系統存在1280的顯示設備，通過適配布局來完成在不同分辨率下展示內容。

一般選用24柵格布局，不同柵格結構中柵格區域也會有所不同，固定區域會存在于響應式網格之外，不隨著頁面的變化而改變大小。

組件規范 

B端組件庫的建立，常用的組件包括按鈕組件、面包屑、導航菜單、分頁、下拉控件、上下左右滑條、日期選擇框、單選復選框、樹形選擇、標簽頁、輸入框、表單、上傳樣式、氣泡卡片、表格列表、警告提示、彈窗等。

按鈕

按鈕的五種樣式：主按鈕、默認按鈕、虛線按鈕、文本按鈕、鏈接按鈕。

按鈕的四種狀態：常規、懸停、選中、禁用。

面包屑

顯示當前頁面在系統層級結構中的位置，并能向上返回，用于系統擁有超過兩層以上的層級結構，同時可以告訴用戶當前頁面在哪里，并提供導航功能。

導航菜單

導航菜單為頁面和功能提供導航的菜單功能，用戶依賴導航在各個頁面中進行跳轉。

分頁

采用分頁的形式分隔長列表數據，每次只加載一個頁面。當加載/渲染所有數據將花費很多時間時可采用分頁。

下拉菜單

當選項過多時，使用下拉菜單展示并選擇內容。

時間日期選擇器

用于選擇或輸入日期，分為固定時間點&范圍、任意時間點&范圍、選擇日/月/年范圍。

選擇框

用于在一組備選項中進行選擇，包括單選框和多選框。

標簽頁

通過切換不同的選項標簽，查看不同的頁面內容。

輸入框

需要注意輸入框在輸入前、輸入中、輸入后三種不同的狀態。

上傳

通過點擊或拖拽上傳文件。

表格

用于展示多條結構類似數據，可對數據進行排序、篩選、對比或其他自定義操作。

警告提示

用于頁面中展示重要的提示信息。警告提示一般分為四個狀態：成功、信息注釋、警告、錯誤(失敗)。

彈窗

用于消息提示、成功提示、錯誤提示、詢問信息、填寫表單。

最后 

希望通過這套B端設計規范，能讓你對B端系統有一個全面的了解。在之后的文章中，設計夾會持續分享這些設計規范的具體用法。

例如那么多的B端組件，實際上每個組件都值得單獨用一篇文章來仔細研究如何使用。

如果你想學習更多關于「B端設計」的知識，記得及時關注文章推送哦~

最后設計夾分享一套簡約風格樣機模型供大伙包裝作品時使用，這套樣機包含手機端、Pad端、手表端、PC端等多種尺寸，有PSD、Al、XD三種格式，樣機已打包好, 大家后臺回復關鍵詞即可領取。

領取方式：關注公眾號，后臺回復【樣機】獲取源文件

慢慢來比較快，希望對你有所幫助！

原文地址：Clip設計夾（公眾號）

作者：Fix-

轉載請注明：學UI網》從設計實戰中，總結了這份B端產品設計規范

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務