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