色彩規(guī)范

色彩規(guī)范一般包含品牌色、輔助色和中性色，在B端產(chǎn)品中，顏色除了迎來(lái)傳達(dá)品牌調(diào)性，更多的用來(lái)傳達(dá)一些提示或警告，通過(guò)不同的顏色給予用戶(hù)信息反饋，不同的狀態(tài)運(yùn)用不同的顏色展示，比如：

綠色通常代表成功、已發(fā)送、已簽到等狀態(tài)；

紅色通常代表失敗、未發(fā)布、未簽到等狀態(tài)。

另外，通過(guò)顏色可以對(duì)內(nèi)容進(jìn)行分層級(jí)展示，提高用戶(hù)閱讀信息的效率。

品牌主色

一套產(chǎn)品只有一個(gè)品牌主色，是界面中出現(xiàn)最多的顏色。在需要用色強(qiáng)調(diào)而且沒(méi)有其他要求時(shí)，一般都會(huì)選擇主色。

網(wǎng)絡(luò)上很多人說(shuō)B端產(chǎn)品大部分用藍(lán)色或者偏冷色系作為主色，可以帶給用戶(hù)一種嚴(yán)肅冷靜的感覺(jué)，但在工作日常中，很多企業(yè)會(huì)要求顏色必須是公司的品牌色。

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

輔助色

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

中性色

常用于文本、背景、邊框、分割線(xiàn)等。

字體規(guī)范

在B端的設(shè)計(jì)上，文字的字體，字重，字號(hào)，行號(hào)、顏色用來(lái)區(qū)分界面信息的層級(jí)關(guān)系。

字體

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

字號(hào)

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

在開(kāi)發(fā)中，瀏覽器最小字體一般為12px，注意設(shè)計(jì)中不可以低于最小字體設(shè)計(jì)。

行高

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

字重

通常采用regular、medium、semibold三個(gè)字重。

顏色

目前最常用的字體顏色是#333333、#666666、#999999，區(qū)分標(biāo)題、正文、輔助文字，具體可根據(jù)設(shè)計(jì)進(jìn)行調(diào)節(jié)。

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

在B端設(shè)計(jì)中，圖標(biāo)要簡(jiǎn)潔易懂，用來(lái)幫助用戶(hù)更快導(dǎo)航，提高用戶(hù)使用產(chǎn)品的效率。

在繪制完圖標(biāo)后，可以存儲(chǔ)成svg方式上傳至Iconfont，這樣方便和開(kāi)發(fā)進(jìn)行對(duì)接，也可以打造自己的圖標(biāo)庫(kù)，在后續(xù)的項(xiàng)目中，方便直接運(yùn)用或修改。

布局柵格

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

一般選用24柵格布局，不同柵格結(jié)構(gòu)中柵格區(qū)域也會(huì)有所不同，固定區(qū)域會(huì)存在于響應(yīng)式網(wǎng)格之外，不隨著頁(yè)面的變化而改變大小。

組件規(guī)范

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

按鈕

按鈕的五種樣式：主按鈕、默認(rèn)按鈕、虛線(xiàn)按鈕、文本按鈕、鏈接按鈕。

按鈕的四種狀態(tài)：常規(guī)、懸停、選中、禁用。

面包屑

顯示當(dāng)前頁(yè)面在系統(tǒng)層級(jí)結(jié)構(gòu)中的位置，并能向上返回，用于系統(tǒng)擁有超過(guò)兩層以上的層級(jí)結(jié)構(gòu)，同時(shí)可以告訴用戶(hù)當(dāng)前頁(yè)面在哪里，并提供導(dǎo)航功能。

導(dǎo)航菜單

導(dǎo)航菜單為頁(yè)面和功能提供導(dǎo)航的菜單功能，用戶(hù)依賴(lài)導(dǎo)航在各個(gè)頁(yè)面中進(jìn)行跳轉(zhuǎn)。

分頁(yè)

采用分頁(yè)的形式分隔長(zhǎng)列表數(shù)據(jù)，每次只加載一個(gè)頁(yè)面。當(dāng)加載/渲染所有數(shù)據(jù)將花費(fèi)很多時(shí)間時(shí)可采用分頁(yè)。

下拉菜單

當(dāng)選項(xiàng)過(guò)多時(shí)，使用下拉菜單展示并選擇內(nèi)容。

時(shí)間日期選擇器

用于選擇或輸入日期，分為固定時(shí)間點(diǎn)&范圍、任意時(shí)間點(diǎn)&范圍、選擇日/月/年范圍。

選擇框

用于在一組備選項(xiàng)中進(jìn)行選擇，包括單選框和多選框。

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

通過(guò)切換不同的選項(xiàng)標(biāo)簽，查看不同的頁(yè)面內(nèi)容。

輸入框

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

上傳

通過(guò)點(diǎn)擊或拖拽上傳文件。

表格

用于展示多條結(jié)構(gòu)類(lèi)似數(shù)據(jù)，可對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作。

警告提示

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

彈窗

用于消息提示、成功提示、錯(cuò)誤提示、詢(xún)問(wèn)信息、填寫(xiě)表單。

最后

希望通過(guò)這套B端設(shè)計(jì)規(guī)范，能讓你對(duì)B端系統(tǒng)有一個(gè)全面的了解。在之后的文章中，設(shè)計(jì)夾會(huì)持續(xù)分享這些設(shè)計(jì)規(guī)范的具體用法。

例如那么多的B端組件，實(shí)際上每個(gè)組件都值得單獨(dú)用一篇文章來(lái)仔細(xì)研究如何使用。

如果你想學(xué)習(xí)更多關(guān)于「B端設(shè)計(jì)」的知識(shí)，記得及時(shí)關(guān)注文章推送哦~

最后設(shè)計(jì)夾分享一套簡(jiǎn)約風(fēng)格樣機(jī)模型供大伙包裝作品時(shí)使用，這套樣機(jī)包含手機(jī)端、Pad端、手表端、PC端等多種尺寸，有PSD、Al、XD三種格式，樣機(jī)已打包好, 大家后臺(tái)回復(fù)關(guān)鍵詞即可領(lǐng)取。

領(lǐng)取方式：關(guān)注公眾號(hào)，后臺(tái)回復(fù)【樣機(jī)】獲取源文件