在 C 端設(shè)計(jì)中，不管是給車載客戶端、手機(jī)客戶端、電腦客戶端設(shè)計(jì)界面，都有比較具體的規(guī)范需要我們學(xué)習(xí)和遵守。

而唯獨(dú) B 端設(shè)計(jì)，或者說(shuō)網(wǎng)頁(yè)設(shè)計(jì)，我們?cè)诰W(wǎng)上是找不到具體詳細(xì)的規(guī)范資料的。因?yàn)闊o(wú)論是螞蟻的 AntDesign 還是 Element、Clarity 等 B 端設(shè)計(jì)系統(tǒng)，其規(guī)范都只是針對(duì)自己這套產(chǎn)品的設(shè)計(jì)說(shuō)明。

當(dāng)我們不使用這些框架，要完成自定義設(shè)計(jì)，那么新人就完全不知道該怎么下手。所以，今天這篇內(nèi)容，就是針對(duì) B 端設(shè)計(jì)所需具備了解的基本規(guī)范進(jìn)行說(shuō)明。

幫助大家快速了解和掌握 B 端設(shè)計(jì)所需的規(guī)范知識(shí)。

B端規(guī)范認(rèn)識(shí)導(dǎo)言

B 端設(shè)計(jì)是 UI 類設(shè)計(jì)中的一個(gè)大類，它包含了非常多種面向企業(yè)、商業(yè)的客戶端類型，包括電腦、手機(jī)、平板、大屏等等，針對(duì)不同客戶端和系統(tǒng)，基礎(chǔ)規(guī)范都有一定的差異。本文主要集中在 WEB 端的管理界面設(shè)計(jì)。

WEB 管理界面雖然看起來(lái)和一般的網(wǎng)頁(yè)差別很大，但說(shuō)到底，它也是網(wǎng)頁(yè)的一種，它遵循網(wǎng)頁(yè)設(shè)計(jì)的基本原則。我們對(duì)規(guī)范的解釋以網(wǎng)頁(yè)基礎(chǔ)規(guī)范為框架展開(kāi)，并會(huì)加入一部分 B 端特有的設(shè)計(jì)元素規(guī)范說(shuō)明。

主要包含的規(guī)范內(nèi)容包含下面這些模塊：

• 布局規(guī)范
• 色彩規(guī)范
• 字體規(guī)范
• 圖標(biāo)規(guī)范
• 控件規(guī)范
• 表單規(guī)范
• 表格規(guī)范
• 動(dòng)效規(guī)范

規(guī)范的解釋，會(huì)涉及到不少網(wǎng)頁(yè)前端制作的知識(shí)點(diǎn)，建議立志在 B 端進(jìn)行深耕的設(shè)計(jì)師，都要掌握 HTML + CSS 這些前端知識(shí)。

我們過(guò)去做過(guò)這個(gè)系列的詳解，可以通過(guò)下方的鏈接查看：

還要聲明一點(diǎn)，規(guī)范中總結(jié)的內(nèi)容，包含 “規(guī)則” 和 “建議” 兩種類型，規(guī)則指的是瀏覽器、代碼等限制產(chǎn)生的硬性規(guī)范，而建議則是我根據(jù)自己經(jīng)驗(yàn)整理出來(lái)便于大家理解的內(nèi)容。

在自己的項(xiàng)目中，如果出現(xiàn) “建議” 無(wú)法適應(yīng)的情況，那么完全可以根據(jù)實(shí)際場(chǎng)景來(lái)做決策，不需要拘泥于我給出的數(shù)值和限制。

下面，就開(kāi)始進(jìn)入正題吧！

B端布局規(guī)范

首先，我們來(lái)解析一下 B 端布局的規(guī)范，即界面排版應(yīng)該遵守的基本原則。

在前端 HTML CSS 的知識(shí)中，需要定義不同 DIV（或其它標(biāo)簽）的長(zhǎng)寬數(shù)值，并將這些大小不一的矩形進(jìn)行排列、移動(dòng)、嵌套，來(lái)實(shí)現(xiàn)界面的視覺(jué)樣式。

換句話說(shuō)，所有置入畫面中的元素都包含一個(gè)矩形的外邊框，無(wú)論是文字、圖標(biāo)、圖片、按鈕、標(biāo)簽還是符號(hào)。

所以，在界面的布局中，無(wú)論我們使用什么樣的內(nèi)容、字段，對(duì)于前端的頁(yè)面來(lái)講都只是無(wú)數(shù)矩形的排列過(guò)程。我稱這種布局的設(shè)計(jì)思路為 “矩陣布局法”。

矩陣布局法是設(shè)計(jì)方式和前端開(kāi)發(fā)方式的統(tǒng)一，提升開(kāi)發(fā)階段實(shí)現(xiàn)設(shè)計(jì)稿的效率和準(zhǔn)確性，是每一個(gè)專業(yè) B 端設(shè)計(jì)師都需要具備的素養(yǎng)。

在此基礎(chǔ)上，我們還有幾個(gè)統(tǒng)一的原則需要遵守：

• 數(shù)值的使用標(biāo)準(zhǔn)
• 固定和響應(yīng)尺寸
• 常用的界面布局

1. 數(shù)值使用標(biāo)準(zhǔn)

在 UI 領(lǐng)域中，元素尺寸的定義不像平面設(shè)計(jì)大多以比例或“感覺(jué)”來(lái)制定，更多是使用手動(dòng)輸入數(shù)值的方法來(lái)完成。

主流的系統(tǒng)、規(guī)范都會(huì)建議我們通過(guò)網(wǎng)格化參考工具來(lái)輔助我們進(jìn)行布局設(shè)計(jì)，比如 Android MD 系統(tǒng)使用的 8*8 網(wǎng)格系統(tǒng)（常用電腦分辨率可以完美支持）。

也就是說(shuō)，在這個(gè)系統(tǒng)中，元素的外邊框、間距，都是以 8 的倍數(shù)來(lái)設(shè)置的。這樣無(wú)論我們?cè)谠O(shè)計(jì)還是在開(kāi)發(fā)過(guò)程中，對(duì)于使用的數(shù)值都會(huì)有相應(yīng)的默契。

但是，以 8 的倍數(shù)為基準(zhǔn)的設(shè)計(jì)，跨越的幅度有點(diǎn)太大了，比如一個(gè)圖標(biāo)，當(dāng)你覺(jué)得 16px 小的時(shí)候，那下一檔 24px 頁(yè)可能太大了。所以，我的建議是對(duì)于相對(duì)比較復(fù)雜的項(xiàng)目來(lái)說(shuō)，使用小一級(jí)的 4*4 網(wǎng)格來(lái)設(shè)計(jì)，會(huì)更兼顧靈活度和數(shù)值的統(tǒng)一性。

即設(shè)置元素的尺寸、間距的時(shí)候，我們都用 4 的倍數(shù)來(lái)完成，當(dāng)你覺(jué)得元素的長(zhǎng)或?qū)挷缓线m，就對(duì)它進(jìn)行 4px 的增減，比如下面的案例：

要警惕的是，4px 的基準(zhǔn)，是針對(duì)元素視圖邊框的值，文字字號(hào)、圖標(biāo)柵格等次級(jí)內(nèi)容，并不會(huì)受到該原則的影響。且該原則只是一個(gè)設(shè)計(jì)基準(zhǔn)的 “建議”，而不是限制，在特殊場(chǎng)景中可以選擇打破它。

2. 固定和響應(yīng)尺寸

使用 4 的倍數(shù)完成設(shè)計(jì)，并不能解決 B 端設(shè)計(jì)中的所有尺寸問(wèn)題。因?yàn)樵?B 端的實(shí)際應(yīng)用中，我們會(huì)加入響應(yīng)式的邏輯，即頁(yè)面元素尺寸隨瀏覽器窗口的變動(dòng)而變動(dòng)。

所以，在設(shè)計(jì) B 端界面元素的時(shí)候，我們要考慮兩種場(chǎng)景，固定尺寸和響應(yīng)尺寸。

固定尺寸即不管環(huán)境發(fā)生什么變化，它的大小是定死的。比如圖標(biāo)、標(biāo)題、LOGO 等元素。而響應(yīng)尺寸，則是一個(gè) “未知數(shù)”，是需要一定的計(jì)算規(guī)則 “求得” 的。

比如還是搜索欄的案例，搜索框響應(yīng)尺寸，而搜索按鈕是固定尺寸，那么在不同的寬度下面，它們顯示的效果如下：

要理解響應(yīng)式尺寸對(duì)應(yīng)規(guī)則，除了了解 CSS 中 Width:auto 屬性值的使用外，最簡(jiǎn)單的就是搞清楚 UI 設(shè)計(jì)軟件中的響應(yīng)式布局功能。

元素是響應(yīng)還是固定尺寸是我們?cè)谠O(shè)計(jì)過(guò)程中就做后決定的，而不是等設(shè)計(jì)做完以后再看圖說(shuō)話。所以了解固定和響應(yīng)尺寸的內(nèi)容，在我們定義組件的過(guò)程中就要通過(guò)軟件的響應(yīng)式功能進(jìn)行設(shè)置，并需要在后期的標(biāo)注和文檔中進(jìn)行說(shuō)明。

3. 常用的界面布局

最后，就是 B 端界面設(shè)計(jì)使用的主流布局形式了。雖然網(wǎng)頁(yè)因?yàn)楫嫴急仁謾C(jī)大得多，設(shè)計(jì)的靈活性更高，但在 B 端中可以應(yīng)用的布局形式也不多，只有固定的幾種。因?yàn)?B 端頁(yè)面布局中有幾個(gè)常用需要預(yù)留的坑位：導(dǎo)航、標(biāo)題欄、工具欄、內(nèi)容區(qū)域。

主要使用左右或上下布局兩個(gè)方向：

左右布局的形式，通常是左側(cè)作為導(dǎo)航區(qū)域，頂部作為工具欄使用。這種做法通常是因?yàn)橄到y(tǒng)內(nèi)模塊較多，需要的導(dǎo)航數(shù)也多，用戶需要經(jīng)常切換到不同模塊中去，所以左右分欄的布局可以很好的提升操作效率。

而上下布局中，則是面向一些處理場(chǎng)景、功能比較簡(jiǎn)單的平臺(tái)，導(dǎo)航模塊少，且切換的頻率不高，主要的操作都集中在內(nèi)容區(qū)域的設(shè)置上，沒(méi)有邊欄的影響還能提高操作的專注性和效率。

要使用哪種類型的布局，需要根據(jù)當(dāng)前的項(xiàng)目功能做決定。但即使選擇了其中一類，也并不代表我們的工作就結(jié)束了，還需要在這個(gè)布局的框架下做進(jìn)一步的規(guī)劃。

比如，我們需要制定內(nèi)容區(qū)域多欄設(shè)計(jì)的比例劃分、復(fù)雜表單填寫系統(tǒng)中的內(nèi)容引導(dǎo)欄、列表?xiàng)l目展開(kāi)的側(cè)邊欄形式等等……

每套項(xiàng)目都需要先確定頁(yè)面的布局框架，然后再開(kāi)始針對(duì)具體頁(yè)面、業(yè)務(wù)內(nèi)容進(jìn)行設(shè)計(jì)，保證整套系統(tǒng)操作方式的一致性。

總結(jié)

今天先更新本系列文章的第一篇，之后會(huì)陸續(xù)上傳新的內(nèi)容。每篇如果有什么不了解的，或者新的建議，可以在留言中提交，我們最后會(huì)整理一個(gè)完整修訂版本。

那么感謝大家觀看。下篇再賤～

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」