2021-3-19 鶴鶴
在 C 端設計中，不管是給車載客戶端、手機客戶端、電腦客戶端設計界面，都有比較具體的規范需要我們學習和遵守。
而唯獨 B 端設計，或者說網頁設計，我們在網上是找不到具體詳細的規范資料的。因為無論是螞蟻的 AntDesign 還是 Element、Clarity 等 B 端設計系統，其規范都只是針對自己這套產品的設計說明。
當我們不使用這些框架，要完成自定義設計，那么新人就完全不知道該怎么下手。所以，今天這篇內容，就是針對 B 端設計所需具備了解的基本規范進行說明。
幫助大家快速了解和掌握 B 端設計所需的規范知識。
B 端設計是 UI 類設計中的一個大類，它包含了非常多種面向企業、商業的客戶端類型，包括電腦、手機、平板、大屏等等，針對不同客戶端和系統，基礎規范都有一定的差異。本文主要集中在 WEB 端的管理界面設計。
WEB 管理界面雖然看起來和一般的網頁差別很大，但說到底，它也是網頁的一種，它遵循網頁設計的基本原則。我們對規范的解釋以網頁基礎規范為框架展開，并會加入一部分 B 端特有的設計元素規范說明。
主要包含的規范內容包含下面這些模塊：
規范的解釋，會涉及到不少網頁前端制作的知識點，建議立志在 B 端進行深耕的設計師，都要掌握 HTML + CSS 這些前端知識。
我們過去做過這個系列的詳解，可以通過下方的鏈接查看：
還要聲明一點，規范中總結的內容，包含 “規則” 和 “建議” 兩種類型，規則指的是瀏覽器、代碼等限制產生的硬性規范，而建議則是我根據自己經驗整理出來便于大家理解的內容。
在自己的項目中，如果出現 “建議” 無法適應的情況，那么完全可以根據實際場景來做決策，不需要拘泥于我給出的數值和限制。
下面，就開始進入正題吧！
首先，我們來解析一下 B 端布局的規范，即界面排版應該遵守的基本原則。
在前端 HTML CSS 的知識中，需要定義不同 DIV（或其它標簽）的長寬數值，并將這些大小不一的矩形進行排列、移動、嵌套，來實現界面的視覺樣式。
換句話說，所有置入畫面中的元素都包含一個矩形的外邊框，無論是文字、圖標、圖片、按鈕、標簽還是符號。
所以，在界面的布局中，無論我們使用什么樣的內容、字段，對于前端的頁面來講都只是無數矩形的排列過程。我稱這種布局的設計思路為 “矩陣布局法”。
矩陣布局法是設計方式和前端開發方式的統一，提升開發階段實現設計稿的效率和準確性，是每一個專業 B 端設計師都需要具備的素養。
在此基礎上，我們還有幾個統一的原則需要遵守：
1. 數值使用標準
在 UI 領域中，元素尺寸的定義不像平面設計大多以比例或“感覺”來制定，更多是使用手動輸入數值的方法來完成。
主流的系統、規范都會建議我們通過網格化參考工具來輔助我們進行布局設計，比如 Android MD 系統使用的 8*8 網格系統（常用電腦分辨率可以完美支持）。
也就是說，在這個系統中，元素的外邊框、間距，都是以 8 的倍數來設置的。這樣無論我們在設計還是在開發過程中，對于使用的數值都會有相應的默契。
但是，以 8 的倍數為基準的設計，跨越的幅度有點太大了，比如一個圖標，當你覺得 16px 小的時候，那下一檔 24px 頁可能太大了。所以，我的建議是對于相對比較復雜的項目來說，使用小一級的 4*4 網格來設計，會更兼顧靈活度和數值的統一性。
即設置元素的尺寸、間距的時候，我們都用 4 的倍數來完成，當你覺得元素的長或寬不合適，就對它進行 4px 的增減，比如下面的案例：
要警惕的是，4px 的基準，是針對元素視圖邊框的值，文字字號、圖標柵格等次級內容，并不會受到該原則的影響。且該原則只是一個設計基準的 “建議”，而不是限制，在特殊場景中可以選擇打破它。
2. 固定和響應尺寸
使用 4 的倍數完成設計，并不能解決 B 端設計中的所有尺寸問題。因為在 B 端的實際應用中，我們會加入響應式的邏輯，即頁面元素尺寸隨瀏覽器窗口的變動而變動。
所以，在設計 B 端界面元素的時候，我們要考慮兩種場景，固定尺寸和響應尺寸。
固定尺寸即不管環境發生什么變化，它的大小是定死的。比如圖標、標題、LOGO 等元素。而響應尺寸，則是一個 “未知數”，是需要一定的計算規則 “求得” 的。
比如還是搜索欄的案例，搜索框響應尺寸，而搜索按鈕是固定尺寸，那么在不同的寬度下面，它們顯示的效果如下：
要理解響應式尺寸對應規則，除了了解 CSS 中 Width:auto 屬性值的使用外，最簡單的就是搞清楚 UI 設計軟件中的響應式布局功能。
元素是響應還是固定尺寸是我們在設計過程中就做后決定的，而不是等設計做完以后再看圖說話。所以了解固定和響應尺寸的內容，在我們定義組件的過程中就要通過軟件的響應式功能進行設置，并需要在后期的標注和文檔中進行說明。
3. 常用的界面布局
最后，就是 B 端界面設計使用的主流布局形式了。雖然網頁因為畫布比手機大得多，設計的靈活性更高，但在 B 端中可以應用的布局形式也不多，只有固定的幾種。因為 B 端頁面布局中有幾個常用需要預留的坑位：導航、標題欄、工具欄、內容區域。
主要使用左右或上下布局兩個方向：
左右布局的形式，通常是左側作為導航區域，頂部作為工具欄使用。這種做法通常是因為系統內模塊較多，需要的導航數也多，用戶需要經常切換到不同模塊中去，所以左右分欄的布局可以很好的提升操作效率。
而上下布局中，則是面向一些處理場景、功能比較簡單的平臺，導航模塊少，且切換的頻率不高，主要的操作都集中在內容區域的設置上，沒有邊欄的影響還能提高操作的專注性和效率。
要使用哪種類型的布局，需要根據當前的項目功能做決定。但即使選擇了其中一類，也并不代表我們的工作就結束了，還需要在這個布局的框架下做進一步的規劃。
比如，我們需要制定內容區域多欄設計的比例劃分、復雜表單填寫系統中的內容引導欄、列表條目展開的側邊欄形式等等……
每套項目都需要先確定頁面的布局框架，然后再開始針對具體頁面、業務內容進行設計，保證整套系統操作方式的一致性。
文章來源：優設網 作者：超人的電話亭
藍藍設計( www.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務