以下內容主要分成兩大部分，第一部分是認識布局設計中的一些常見問題，比如柵格中8的相關數原則，分辨率的選擇，以及布局的幾種常用方式，因為B端布局是建立B端設計規范的前提。第二部分是結合營銷管理后臺系統實際案例，去搭建B端設計規范的詳細過程，基本庫，擴展庫的詳細展開介紹，基本庫和擴展庫的搭建也是設計規范中的關鍵。內容較多，大家可以根據上述目錄來選擇性閱讀。
1.1 如何正確做布局設計
如下圖幾個常見的布局設計稿，或者當前市場上線的所有B端系統里，僅作為布局大框架來看，都可以分成以下這6種布局框架。
這六種框架里，我們可以發現它們在設計上共性的地方幾乎都是左右布局，并且有側邊欄。其中細微的區別就是有的側邊欄寬一些，有的側邊欄窄一些，有一些有頂部的導航欄，有一些有底部的導航欄，還有一些它的側邊欄和頂部導航欄的層疊關系不一樣，還有一些只有圖標沒有文字，整個的布局方式無非就是這六種，所以不管哪種方式總結出來的共性就是左右布局，左邊稱之為側邊欄，右邊稱之為操作區。在B端設計中我們都采用這樣一種共性的布局方式，有的人想創新不想用這樣的布局方式，但不可以，因為經過實驗調查發現，從用戶體驗角度講，在B端系統中，或者說在電腦的操作環境下，側邊欄方式，這種左右布局的操作在電腦端是非常有普及性和體驗性的，也是最容易操作的。
接下來我們繼續把這個框架細化一下，如下圖，可以分成很多的區域，可以看出，左上角更多的是放一些logo或者放一些項目的名稱；在頂部大部分80%左右都會有頂部的導航欄也叫導航區；左邊是側邊欄，一般是系統的主菜單導航，可以分到2級或者3級，一般到3級就顯得不夠友好了，我們一般會分到1級或者2級；然后是底部的狀態欄，狀態欄不是所有系統都有，這個狀態欄代表當前系統運行的狀態，比如數據庫的讀取情況，保存情況；最后是操作區域，類似于我們平時使用的figma軟件也操作區域是最大的，在操作區域操作，選擇區來選擇一些功能。這個就是細分的框架內容，當然這些細分出來的內容也都是有規范的。
比如頂部導航區域，可分為一級導航和二級導航，一級導航64px，二級導航48px，B端系統所有的單位都是像素px（物理像素），在這里補充一個小常識，我們平時在做C端移動端設計的時候，IOS單位是pt（點/邏輯像素），安卓單位是dp，其中1dp=1px，平時UI設計師都是基于IOS設計稿來設計，因為蘋果得交互在整個設計規范里是最好的，基于IOS出一版，然后安卓進行微調。所以移動端開發單位用到的是pt。而B端設計中，由于b端系統的技術架構：分c/s和b/s。c/s需要下載客戶端，b/s直接通過瀏覽器打開。所以B端的設計用到的單位一定是px（像素）。因此這里我們提到的一級導航高度和二級導航高度都指的是像素。
然后頂部導航展示類的（放些logo或圖片），一級導航高度80px，二級導航高度56px。頂部導航高度的范圍是48+8n，側邊欄寬度的范圍是200+8n。這里要繼續補充一個常識，在B端的設計中，要遵循8的倍數相關值來進行設計，比如在界面設計中我們的間距、邊距、高度或者寬度不知道該怎么確定的時候，就可以取8的倍數值來進行確定，8、16、24、32、48等。對比C端來看，由于手機端的柵格化不能體現出特別強的優勢來，因為屏幕的范圍寬度太小了，最多可設置6列柵格，反而有約束。在手機端如果非要做柵格，可以分成6列柵格和4列柵格。移動端左右安全距離通常都是16pt，在移動端設計中如果間距、留白不知道怎么確定的時候，我們一般會找4的相關值。比如4、8、16、20、24、28、32、40、44，這和IOS的規范是有關系的，其中44是比較特別的值，44是在IOS中設計中是能點到的最小區域，如果放到44以下，在移動端就可能點擊不到，而在安卓中是48最小區域。提及這些的目的，說回來，是想讓大家加深印象，在移動端不知道怎么預留空間的時候，就按照4得相關值去做，在B端就按照8的相關值去做，就可以做出設計的韻律來。
那么這個整體的布局方式，屬于layout/容器布局，包括了頂部導航、Header/頂部布局、Sider/側邊欄、Content/操作區、Footer/底部操作欄。
這幾個部分有一個順序關系，大致可以分成三種。第一種如圖1，側邊欄是最高的級別，然后頂部導航區、操作區和底部狀態欄是保持平等同一個級別。第二種如圖2，頂部導航為最高級別，側邊欄為次高級別，然后是操作區域，底部狀體欄。第三種如圖3，頂部導航欄、操作區和底部狀態欄是同一個級別。其中這三種情況常見的就是第一種和第二種，第一種最為常見，第二種圖2通欄的導航情況也有。所以我們在設計的時候，選擇1和2方案布局就可以。
所以綜上我們可以看出，B端就是左右布局來進行設計，而手機端更多采用上下布局的方式來設計。這也是剛才提到的問題，屏幕比例的問題，手機和電腦尺寸的區別。
這里又延伸出一個問題，B端有沒有移動端？或者說什么情況下會做B端移動端的設計？其實，并不是所有的B端都有移動端，比如我們常用的一些大量信息的管理，CRM，ERP系統，有一些會有一定的移動端，也是針對一些快捷的操作來設計的，比如在CRM系統中尋找一個客戶資料，比如我們在任何辦公場景去找一個用戶資料的時候，不可能總守著電腦去找，最方便的情況是可以隨時用手機去查找，具備這樣的業務使用場景的時候，設計師就應該和產品經理商量，是否去增加移動端設計，這也是必要的一步。同樣B端有B端的優勢，如果涉及到大型的篩選、數據錄入的時候，很明顯手機端就不支持了，而且體驗效果不好，我們一定會用電腦來操作，一般也就是在集中的工作時間和在工位配合鼠標進行，面對大型數據還是電腦端好用，所以電腦端主要是B端承載的方式，這也是布局規范這部分需要了解的知識點。
2.1 必讀前言
B端系統設計規范的建立，可以分成四部分，第一先建立基本庫，包括色彩系統、字體系統、圖標系統、柵格系統、間距系統、布局系統。當建立好幾本庫后，再根據自己的公司的實際業務，去建立擴展庫，擴展庫包括導航系統、數據錄入、數據顯示、反饋系統，這些細分為又有很多組件，具體如下圖，并不是每一個都會做，需要結合實際項目去進行擴展庫的搭建，也就是缺什么組件就補充到擴展庫里。做完擴展庫后再繼續做方法庫和案例庫，也就是做這些組件的說明和最佳之間案例，告訴設計同事或者開發人員具體什么時候用，怎么可以正確的去使用，來提高設計效率。我們接下來先了解第一步基本庫的建立過程。
2.2 基本庫建立詳解
2.2.1 Gird-柵格化建立
2.2.1.1 認識柵格系統
在做基本庫建立時，基本庫建立的第一步是柵格化的建立。柵格化是我們做B端設計規范的第一步，也是做B端組件庫的第一步，柵格系統是什么樣子決定了我們接下來設計界面會進行怎么樣的布局，因為柵格化里也應用到了格式塔原則中的相關性等原理，所以柵格的結果是一定是有規則的。
比如下圖是營銷系統的柵格規范，我們可以看到，兩種情況的柵格，在分辨率1440情況下，一種是24列，間距和邊距都是24，另一種是24列，間距和邊距都是16。當然我們還可以把界面設置其他情況的柵格，比如16、12列柵格。還有一些列數相對較少的柵格，與其對應的界面是一些布局簡單的界面。但話說回來，通常在B端系統中，大家都把柵格做成24列，24列柵格可以做到一些復雜的排版布局，同時在做響應式適配的時候也最方便，小于24柵格或者說柵格列數越少，基本在B端系統中就失去了靈活布局的意義，所以在B端系統，通常情況下，就分成了以24列柵格，不同間距邊距的以下兩種柵格，這也符合我們公司后臺系統的布局，同時可以更好的做響應式適配。
剛才分成的那兩種柵格，有人會產生疑惑，畫這么多條線是干什么的呢？那么接下來最佳案例實踐來了，通過第三個案例圖就可以看出。我們可以使用4列的方式來進行布局，各占25%；也可以使用2列各占50%，或者75%和25%分；也可以占全列；也可以各占三分之一。所以用這樣的方法去指導我們使用，我們很容易按照這樣的方式去拍版布局的，我們也可以使用更多，但推薦這么多，再多可能就不好看了。
包括移動端的柵格系統，我們怎么去使用，比如做金剛區的時候，分成四列的金剛區各占25%。所以為了更好的靈活布局，我們就能做這樣的柵格布局的規則。
補充知識點1: 柵格中Col指的是列，都分成為24列，Gutter指列間距也叫溝槽為24，Margin指兩邊邊距為24。
所以關于柵格，B端設計中，左側是固定的，只需把右側操作區域做成柵格就可以，全屏柵格是沒有意義的，比如現在的寬度是這么寬，有可能換了電腦使用的情況下瀏覽器的寬度會拉的很寬。
我們就會看到如下圖，當右側拉伸了，同時右側響應區域的柵格也變寬了。
這里就有了推薦的設計尺寸模板，在1440尺寸下的兩種設計，第一種是最常用的，也是我們這次設計的尺寸，第二種有部分系統需要尺寸變寬的時候，就需要這樣的設計。
2.2.1.2 為什么選用1440*900分辨率設計
通過調查發現，我們使用的電腦顯示器尺寸和分辨率大部分是1920*1080px這個主流分辨率，那其余的主流分辨率還有1440*900，1466*768等等。（tips：像素是指照片的點數單位是px，表示照片是由多少點構成，分辨率是指照片像素點的密度，是用單位尺寸內的像素點，一般用每英寸多少點表示，單位是dpi，也就是分辨率越高圖像就越清晰。）我們也可以去京東電腦屏幕銷量的排行來看，銷量最高的也就是主流分辨率，大部分銷量在23～27英寸的顯示器，比例為16:9，分辨率就是1920*1080px，所以我們在設計的時候一定要滿足大部分人使用的屏幕分辨率。但是我們也不能按照1920*1080px尺寸來設計，因為這只是市場買賣的情況，作為B端工作者或者真正的用戶，這不是一個絕對的數據。通過對百度流量研究院數據的調查，B端中實際用戶更多采用的設計分辨率是1440*900px，所以我們作為設計師通常是以這個尺寸下來進行設計的，我們選擇一個1440*900px的分辨率它不是最高，也不是最低分辯率，屬于中間值，原因就是可以做到更好的向上和向下兼容適配。
前面我們提到，B端柵格化遵循8像素8的倍率來進行設計韻律。如圖，列了五個B端主流的分辨率，如果用這些分辨率除以4、6、8、12這些隨機的偶數，就發現，其中1920*1080都可以整除顯示為綠色點，由于它是最大的分辨率，我們不考慮選用，繼續往下看，除不盡的為紅點表示，可以直觀的看出除不盡的點數占比最少的就是1440*900的分辨率，而1440*900又是眾多分辨率中居中的一個值容易兼容適配最高和最低分辨率，且遵循了8的倍數設計原則，容易做柵格化設計。所以我們通常會選擇1440*900這樣的分辨率來進行做B端的設計界面。
在沒有得到數據支撐的時候就按照行業慣例1440*900來進行設計，這樣做肯定沒有錯，但如果做的系統可以確定只是少部分人進行使用，那我們應該做一些適當的調研，去獲知更合適的尺寸分辨率，比如公司集體辦公配備的統一尺寸是多少，經常在這個電腦下查看工作的話，我們就應該用這個尺寸去設計，如圖，我們就應該按照如圖順序進行調研選擇合適的分辨率。
所以在認識了柵格包括建立了柵格布局后，接下來就是色彩系統。
2.2.2 Color-色彩
2.2.2.1 如何正確確定系統主色和輔助色
在設計中色彩占了很大一部分，首先要確定主色，主色只要一個就夠了。主色往往和行業和企業的VI色要有關聯度，同時主色要和其他的顏色脫引而出要有強調感，通常我們根據行業屬性和企業VI可以大致確定主色的色相范圍，但不知道怎么去精確色值，這時可以借助Antdesign中的色板來找精確色值，比如上品的VI品牌色為橙色，可以對應找到Antdesign中色板“火山”模塊兒，在這組色階中我們通常會選擇中間“色階6”的色值作為最佳色值，因為色階6的顏色更飽和更純凈，可以上下進行兼容色值。所以我們就確定了主色為“色階6”，色值為#fa541c。
當設置完主色后再建立輔助色。輔助色的原則是要和主色能夠搭配起來，也就是說幾種輔助色放在一起，我們看起來要統一和諧而不是比較奇怪感受起來給人不協調的感覺。比如我確定了三個輔助色，由于上品VI色中提及了輔助色為青色，所以我以青色來延展其他的輔助色，青色、紫薇、粉色，當這三種顏色放在一起，它們看起來還是比較和諧的，為什么會看起來比較和諧？我們通過觀察拾色器中輔助色色值的位置可以看出，他們幾乎都在同一個位置，或者他們除了色相不同外，他們幾乎都在同一個緯度，保持在同一個區間，所以他們看起來才比較協調，這也是配色的一個小技巧，通過在拾色器中同一緯度下去更改色相來達到顏色之間的統一協調。那有人會問，如果企業VI沒有確定可延展的輔助色怎么辦？同理，調色的方法和剛才提到的方法是一樣的，以主色的拾色器色值維度，來更改出不同的色相，直到自己感覺彼此搭配協調為止，這個方法屢試不爽，經過多次驗證，可以快速找到我們適合的配色。
2.2.3 Space-標準間距
所有的基本庫第一做柵格，第二做色彩，第三步就是間距，間距一般和柵格是可以同時做出來的，因為柵格遵循了8得倍數原則來建立得，所以我們可以看到間距也取得是8得相關值，最小是4，接下來是8，16，24，32，48，64，所以現在只是確定了我們B端排版時間距的這樣的一個設計韻律，如果以后有的頁面模塊兒間距是128，那就把128這個間距加進去，加到間距規范里。
2.2.4 Typography-字體
當做出色彩后，接下來重要的就是字體規范。在B端字體中文用PingFangSC（也可以是思源黑體或者微軟雅黑，B端中字體比較受限制，也就這三種字體可用，這里我選擇PingfangSC），英文用SF，常規數字用PingFangSC，涉及到特殊數字比如一些數據信息用DIN字體。這里的字體尺寸規范，常用的一般就是正文，小標題，標題都是14px，和注釋的字號為12px，所以最小字號12px，14px，18px，這樣的字號大小選擇。字重一種是常規體，一種是加粗。至于H1，H2, H3這些，H標簽也叫Heading標簽，HTML語 言里一共有六種大小的heading 標簽，是網頁html 中對文本標題所進行的著重強調的一種標簽，UI中一般用不上，雖然很少用到，但需要定義到。
同時字體有它的色彩規范，字體的尺寸規范對應的是字體的色彩規范，我們可以看到很多界面標題字，小標題，正文字有不同的大小，同時有不同的字體顏色，這種對比的使用，這些細節的使用才會使界面看起來正確和諧。比如它的副標題和描述用的就是比較淡的顏色。如果有顏色的區別，就把它放進去，這個色彩我們稱之為中性色，它不偏色彩，偏的是灰，但這里字體的顏色用的是偏藍灰色，偏藍的顏色，不仔細看還是趨向于灰色，這種藍灰色可以讓界面看起來更靈動一點。同樣字體可以定義它的色階，透明度20%去遞減選擇不同位置不同的字體顏色。
2.2.5 Icon-圖標
接下來是圖標，可以使用Antdedign的icon，因為Antdesign的icon是開源的，這里用的是IBM carbon的圖標，也是開源的圖標，但設計師在平時還是建議去自己畫圖標，用戶經歷C端的視覺沖擊的洗禮，對視覺的品味越來越高，慢慢慢慢B端C化只是時間問題，用戶對B端的視覺要求也會越來越高，所以我們還需要多練習設計自己的圖標，B端能體現設計師視覺功底的的地方一般也就圖表的設計和圖標的設計，其他就是表單之類的很難體現視覺方面的東西。所以設計好后放到圖標庫里，這里只是一個占位，如果想快速出圖，那用這些開源的圖標也是沒有問題。
在實際操作的時候，可以在柵格里直接畫，也就是在這個大小范圍內直接畫，或者先畫完再放到柵格里調整大小，線寬，圓角等細節。
做到這一步，柵格、色彩、字體、圖標，我們的基礎的模板就已經做完了，也就是基本庫，接下來就需要做擴展庫。擴展庫包含了各種組件和按鈕。并不是所有項目都會用到按鈕，開關，滑動條這些組件，所以擴展庫根據我們需要去建立，接下來我們詳細了解一下營銷系統案例擴展庫的建立方法。
2.3.1 Button-按鈕
比如擴展庫里的按鈕，按鈕是這個主色， 有很多情景需要我們去建立，按鈕有三種樣子小的、中號、大號的，其實它們代表著不同的情景；按鈕有三種狀態，通常、懸停、禁用；包括按鈕的類型，有文字按鈕，圖標+文字按鈕在左，圖標+文字按鈕在右，只有圖標按鈕；包括按鈕在功能樣式上的分類，有主要按鈕、次要按鈕、形狀按鈕、全圓角按鈕，這些分類，對應的狀態形狀都羅列了出來，這些種類一定會在我們的界面中不同地方體現，所以具體界面中用到的，到時候把這內容再補全，補到我們的按鈕規范中，下次再使用的時候具體放什么樣式，長什么樣子就可以直接使用。
2.3.2 Navigation-導航菜單
接下來擴展庫里的導航菜單，和表單的詳細制作方法都在后面的案例圖中有詳細制作步驟和過程，這里就不一一展開介紹了，大家可以根據如下圖結合自己業務進行響應設計規范的建立。實際難度其實在figma的正確使用上，比如創建組件，母組件和子組件的結合應用，自動布局（shifr+A）的規范使用等，重在多做練習，實際動手操作。
2.3.2.1 Menu 導航菜單
2.3.2.2 Tabs 標簽導航
2.3.2.3 Breadcrumb 面包屑
2.3.2.4 Pagination 分頁導航
2.3.2.5 Dropdowns 下拉菜單
2.3.3 Form-表單
2.3.3.1 Input 輸入/查詢表單
2.3.3.2 Checks & Radios & Switches 多選框 & 單選 & 開關
以上為B端設計規范基本庫和擴展庫的建立思路，其中基本庫里的色彩或者字體、柵格規范等等，根據常用分辨率設備的調研，和企業品牌VI關聯色，我們都可以很輕松的定義出來。其實設計規范的搭建核心在于組件庫的搭建，舉個例子，比如Iput輸入框規范，我們需要先定義一個輸入框的高度，以及文字與輸入框的間距，線框的顏色，文字大小，文字顏色，這些是定義一個輸入框組件規范的關鍵，我們會發現當規范的做圖做好這個輸入框的時候，也就是確定了它的組件規范，做好后，我們就需要把這個輸入框形成組件，為了方便后面界面中進行復用，我們就可以把它創建組件。因為是組件嘛，他要方便在不同場景下使用，會需要拉伸，所以就需要把文字與輸入框加上自動布局（shift+A）進行調整。有了之前提到的整體設計規范建立思路，再結合剛才提到的基本的設計規范操作步驟，就形成了以上自己業務系統的設計規范落地，以上內容供大家參考，感謝閱讀，thanks～
文章來源：站酷 作者：_C魚
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務