B端設計指南 - 柵格

在一個B端頁面當中，關於柵格的使用方法，你或多或少都會有所疑惑。它究竟是如何使用？柵格在實際工作當中的使用方法是什麼？今天我們就聊聊B端系統當中的柵格

老規矩，我們在講柵格之間，先科普一個知識點，為何會有柵格？

早在平面設計開始之初，就有對“柵格”的使用記錄。（不過那時不叫柵格，而叫網格）因為印刷機器以及切割工具的限制，導致在頁面的板式設計需要一定的出血線用於防止書籍內容的缺失，因此出現了當時非常火爆的《平面設計中的網格系統》一書

雖然這是一本非常老的書，但是設計本身就是相通，將其核心思想用在圖標設計、網頁設計、B端設計當中都有着明確的指導意義

而在設計（網頁端、桌面端）產品時，對於空間上的理解，一直以來都是令人頭疼的問題

我們將屏幕當中的設計空間分為橫向 與 縱向兩個維度：

橫向：由於大多數顯示器都是寬屏的形式，導致我們大多數頁面內容都是通過橫向的方式進行列式排布，也就導致縱向導航、二三級內容分佈較多；而市面上所要兼容的橫向尺寸較多，大致分為：1920、1440、1366、1280，而怎樣將如此多的尺寸，擺放不同的元素，這彷彿才是設計的難點

縱向：屏幕的縱向的空間同樣十分關鍵，當內容在橫向無法滿足時，則會增加屏幕縱向的內容量。但是我們可以通過瀏覽器的特性，縱向的內容通過滾動條進行收折，進而實現兼容

1.柵格的定義

前面説了這麼多，我們來聊聊柵格的定義

柵格：是對界面當中元素橫向排布的一種模式，主要用於大型區塊間距的排列，不適用於 圖標與文字 間隔的小型元素

這裏有兩個重要點：橫向排布：代表着柵格的用法，這也是為什麼柵格都是一列一列的原因用於大型區塊：不是任何內容都可以用柵格，比如在 卡片當中的圖標、文字，更多是要分析整個卡片，將其看作一個整體，如上圖

2.柵格的組成形式

在一個常見的柵格當中，一般分為頁邊距、水槽、柵格寬度

頁邊距：是柵格與外層信息的保護區域

因為在整個柵格系統當中，除了柵格之外，往往還會有其他的內容進行展示（如上上方圖，柵格日常的使用頁面），而我們正好可以通過頁邊距的方式，將其進行區分。我們以常見的B端界面為例，通過頁邊距可以將側邊導航與內容頁進行區分，保證頁面間的親密性，常見的頁邊距尺寸一般為 20px、24px。

水槽：是確定柵格寬度間的固定間距，通常是幫助柵格內的元素進行更為合理的排布

水槽目的就是為了統一元素間的距離。比如現在頁面當中有兩個卡片的內容，而使用水槽，我就可以將這兩個卡片的內容，確定其間距（再次強調柵格用於確定橫向內容）方便柵格當中元素的信息排列

柵格寬度：是柵格當中內容所佔的基本寬度，一個柵格寬度往往是通過內容寬度、頁邊距、水槽排除過後所剩的寬度平均得出，一般會分為 12欄、24欄 兩種方式

柵格寬度的確定，其實就是一個數學題，先給你一個公式（不建議使）：(A×n) – i = W

A：一個柵格單元的寬度；a：一個柵格的寬度；n：正整數；i：水槽寬度；W：頁面的寬度

雖然公式好像是萬能的，但我不喜歡死記硬背，來深入講一講這個公式背後的邏輯和使用方法

以1440的頁面為例，通常B端產品左側會有一個導航菜單，假設為 200px

因此整個柵格的內容頁則為1440 - 200=1240px

然後設定頁邊距寬度為 24px，一個柵格會有兩條頁邊距，剩下寬度則為：1240 - (24*2)=1192px

接着設定整個柵格為12欄，水槽寬度為8px。因為水槽位於 柵格 的左右兩側，也就意味着水槽的數量會比柵格少一列（別問為什麼，問就自己去下面圖片數一數）也就是1192 - (8*11)=1104px

最後因為在水槽已經確定柵格為12欄，整個柵格的寬度則為：1104/12=92px

如果還不能理解，建議跳到開頭，再看一遍

這裏有兩個關鍵點整個柵格的順序不能亂：頁面寬度→頁邊距→水槽→柵格寬度。因為我們的柵格一定是從大到小，從外到裏，不然做出來的內容很容易無效

將元素擺放在柵格中，還需要注意起始位置與結束位置。這裏教你們一個口訣：起始在左，結束在右；換句話説就是元素的起始位置必須放在柵格寬度的左側（也中的紅線）；

結束位置必須放在柵格寬度的右側（圖中的藍線）

這樣的方式也是為了避免很多設計師知道畫柵格而不會用柵格，出現一些低級錯誤

網頁的佈局方式：

佈局方式，本質上就是去處理窗口寬度與網頁內容的關係

用户會使用瀏覽器打開不同尺寸的窗口寬度，而網頁內容究竟應該如何去適應這些窗口尺寸？

通常會分為：固定佈局、流式佈局、自適應佈局、響應式佈局

1.固定佈局（Static Layout）

固定佈局是一種最為簡單的方式，它的設計邏輯是將頁面當中的內容“寫死固定”在屏幕上，內容不會隨着本身窗口寬度進行改變，所有元素都使用 px 作為基礎單位

當然在固定佈局當中，窗口大小與頁面內容會存在兩種基本關係：窗口過大則將頁面元素進行居中，窗口過小則展示橫向滾動條

固定佈局的好處是這種方式相對簡單，只需將頁面設計好即可，不會存在太多兼容性的問題（因為也壓根沒有考慮兼容性的相關問題）

固定佈局通常出現在 老舊的政府項目、網頁的登錄註冊中

2.流式佈局（Liquid Layout）

流式佈局是最基礎的變化佈局，它的設計邏輯是將頁面當中的元素設計成可以流動的“水”，通過在頁面，設計不同的“杯子”容器來裝下頁面內容

這裏的“水”一般指的是 文字、圖標、以及一些頁面重複出現的元素。而杯子通常是我們設計的容器，它高度固定，只會變化其寬度，比如卡片、外層容器控制寬度 等等...

因為“杯子”的限制，也就導致水會根據杯子的寬度進行延展流動，進而形成流式佈局

使用流式佈局可以通過較低的開發成本，來實現一個頁面當中多尺寸的小範圍適配，如果屏幕尺寸跨度較大，則會比較困難

而流式佈局最常使用的方式就是通過柵格系統，來確定整個“杯子”的寬度，進而讓“水”能夠在頁面當中實時滾動展示

這裏有兩個需要注意的點：

1.在研發層面，杯子的大小是需要進行限制的，通常會去設定它的最大值與最小值，當它超過最大值則居中對齊，當他在流式佈局當中，窗口超過其最大值則固定左側，右側空白補充；窗口小於其最小值則展示橫向滾動條

比如與上方同樣的案例，將頁面當中內容的文字實現成流式佈局，並且將其流體佈局的寬度限制為 200px - 120px ，這時則會形成頁面的寬度變化，會導致內容發生直接的變化

2.流動的“水” 需要去考慮它漫出的情況，即在“水杯”高度固定的情況下，整個寬度無法裝下如此多“水”的情況，通常我們可以使用 “...” 進行標註。這個思路後續在響應式佈局當中也會體現

3.自適應佈局（Adaptive Layout）

自適應佈局是將差別較大的屏幕尺寸，去創建多個不同的設計稿，每一個設計稿去對應 一個用户實際的尺寸範圍。改變屏幕分辨率就可以去切換不同的設計方案

通俗一點來説，自適應就是去單獨設計桌面端、平板端、移動端的頁面，並且將它們三者進行獨立，而系統通過不同尺寸間的 屏幕斷點/瀏覽器UA等...（實際前端判斷遠比這個更加複雜，但是為了方便理解可以暫且這麼認為），進而適應出不同的設計頁面

而通俗一點來説，自適應是使用多套代碼去對應多個頁面，並且都是在業務非常複雜的情況下進行使用，在國內當中最常使用便是 桌面端與移動端 的產品

比如 語雀 當中的 桌面端與移動端就是一個典型案例，他通過判斷用户的使用設備，將頁面拆分為了，桌面端、移動設備端、小程序（單獨設計適配的）。因此只需要將每種設備的設計思路分析清楚即可

自適應佈局與柵格

自適應主要是表達多個設備尺寸下進行切換的 佈局方式，在不同的設備之間，也是需要去使用流式佈局以及其他佈局方式

而不同的設備之間，屏幕分辨率的差異就會涉及到一個關鍵點，屏幕斷點

屏幕斷點

屏幕斷點，又叫媒體查詢 @media，因為在整個設計當中，屏幕尺寸是極其複雜的，除了我們常見的尺寸：19201080、1440765、1366

用户還可以通過調整窗口的大小，進而改變網頁尺寸。而屏幕斷點，最主要是判斷屏幕的寬度，來確定 目前的尺寸究竟應該採取什麼設計方案

比如在設計一款成熟的B端產品時，因為商業的緣故我們作為各大平台（釘釘、企微、飛書）的ISV（合作上架），產品上架到不同平台時，需要對不同平台尺寸進行調整，比如釘釘為1024px、企微為980px、飛書為1280px，這時為了滿足用户的實際場景，會將這幾類特殊的尺寸作為屏幕斷點進行對應的佈局設計，以滿足不同產品當中的最佳實踐

關於屏幕斷點的媒體查詢，是在前端 CSS3 代碼當中，提供給用户校驗整個屏幕的寬度，比如在下圖前端代碼當中，則代表在屏幕尺寸小於480px 時，使用 字體大小為16px

而確定斷點才是這其核心，這裏給大家提供兩個思路，實際設計當中還會更為複雜：

物理斷點：也就是屏幕當中，已經劃分好的斷點方式，比如顯示器的全寬大小、不同設備之間的屏幕分辨率差異

設計斷點：在設計過程當中，一些必要的屏幕尺寸。比如上方講到不同平台的設計問題

其實屏幕斷點不是最終目的，最終還是想通過屏幕斷點，將頁面當中不同的不同元素的處理方式實現在設計稿中，如果不需要，完全可以不考慮增加屏幕斷點

4.響應式佈局（Responsive Layout）

這裏先多聊一句，其實響應式的大規模普及，是源自 2015年 Google 的倡導（可以看到Google旗下的很多產品都採取的響應式佈局，例如 YouTube），它最初的目的非常簡單，就是為了提高響應式在移動終端上的運行效率。因為在2015年時，安卓 生態下的屏幕尺寸多到可怕，以至於需要有一套解決辦法來讓用户運行並使用

響應式佈局是確保一個頁面當中所有的設備（桌面端、平板端、移動端）都能夠展示出非常滿意的效果，進行產生的一種技術方案。它更像是 流式佈局與自適應佈局 的結合，它能夠通過對屏幕尺寸的快速響應，進而對頁面的內容進行更為細緻的變化

通俗一點來説就是通過一套代碼去實現多個頁面，並且將多個頁面的內容進行細化，進而能夠快速適配多個設備

對於多個設備，最主要是調整頁面柵格數量、水槽寬度、頁面距進行適應，比如在YouTube當中，就是通過響應式佈局，讓頁面實時響應進行處理

響應式佈局與柵格

比如以 Ant Design Pro的頁面進行拆解，你會發現它在 575、767、991 的尺寸中，頁面佈局發生變化，然後根據屏幕斷點之間的頁面佈局，採用向下兼容的適配方式，Ant design Pro 屏幕斷點可以劃分為320、576、768、992、1200，響應策略如下圖：

佈局與柵格的關係

你會發現佈局其實是依賴於柵格，而柵格的使用，正是由於不同的佈局所導致。只有通過柵格，才能夠確定流式佈局的比例、響應式佈局的變化方式，但是在B端產品當中，並不是所有頁面都需要使用柵格，經常看到一些作品集其實是為了柵格而柵格

在B端產品當中在，真正使用柵格的地方更多是工作台、官網，而其他相對複雜的頁面是沒辦法使用柵格，而對我們每一個產品而言，可以優化的點就是在屏幕尺寸較小的情況下，默認讓整個產品導航菜單收起，以提供給用户更多展示內容

我是CE青年，一個 2 B 行業 的 2B 設計師～

（文章有些久遠，找不到原圖了，望諒解）

Powered by Froala Editor