編輯導語：柵格是展現資料尤為高效的形式之一，它也是B端產品和設計師每天接觸最多的元件，常和排序、搜尋、篩選、分頁等其他介面元素一起協同。本文作者分享了B端柵格設計的基本概念和相關案例等，一起來看看吧。

大家好，我是子璐。今天為大家分享的是柵格系列，結合我自己後臺設計的經驗，關於柵格文章我分為上下兩篇。

本篇文章跟大家聊聊柵格的概念以及柵格是如何搭建的。

下篇將會分享柵格在響應式設計中的運用，脫離了開發其實柵格的意義並不大。

一、柵格簡述

1. 柵格的由來

柵格最早來源於平面設計中的網格系統，英文Gird Systems。

在 1692 年時，法國國王路易十四因為國家印刷水平差強人意，命人成立了一個管理印刷的皇家特別委員會。

他們以羅馬體為基礎，採用方格為設計依據，每個字型方格分為 64 個基本方格，每個方格再分為 36 個小格，一個印刷版面就有 2304 個小格組成。

再後來，逐漸演變成運用固定的格子設計版面的平面設計風格，

平面設計中稱之為網格，這就是柵格的雛形

。

網際網路發展之後，介面設計將這一概念借用過來，簡易的理解柵格就是一種有規則的參考線。

2. UI中的柵格

網格與柵格的本質其實是相同的，都以英文單詞“Grid”來表示，平面設計中稱為“網格”，而在網頁端或移動端中稱為“柵格”。

其區別在於：

網格尺寸是固定的

：平面設計一般用到的紙張規格（尺寸），不管是英國、美國、日本或ISO採用的德國DIN紙張規格全部都是固定的尺寸，寬度和高度都是固定的，也就是絕對的。

柵格尺寸是變化的

：而網頁或App的裝置尺寸不是固定的，其橫向寬度受限於裝置寬度，由裝置螢幕寬度來決定，而縱向高度則是隨著內容的多少來決定的。

考慮到真實設計場景下，可能會使用無限下拉互動方式承載複雜內容的規則。

所以往往只需要制定縱向列式分割規則，以規範 X 軸向內容的對齊、比例等佈局效果。

3. 柵格的價值

1）對使用者：提高內容佈局規律性，減少認知成本。

設計更有秩序和節奏感，頁面資訊的展現更加清晰，從而提高使用者的閱讀和瀏覽效率，提供更好的使用者體驗。

2）對設計師：提高效率與規範化。

幫助設計師快速校準元素在介面內的位置，節省了基礎操作上的時間，如移動元素、計算間距等。同時也避免了間距憑設計師感覺造成不統一的現象。

3）對開發：提高設計還原度，節約時間成本。

柵格系統提高了網頁的規範性。一方面可以幫助開發同學規避常規的橫向間距類問題（縱向間距問題主要受字型的設定影響），以提高設計還原度，另一方面有利於開發人員對元件和模組的複用，進一步提升效率。

4）響應式佈局。

柵格能夠指導頁面在多平臺多螢幕尺寸下的響適應設計，便於與開發對接，闡明流動佈局或端點佈局等適配方案，保證還原度的同時降低溝通成本。

二、柵格的構成

柵格系統主要由

列、水槽、邊

距三個基本元素構成。

1）列Column

：也被稱為欄，用來盛放文字、表格、圖片等內容及元素。

列的寬度稱為列寬，常用百分比來定義，而不是固定值（使用固定柵格的時候會採用固定值，會在下篇響應式柵格中講到），前端同學透過百分比可以靈活適應螢幕大小。

2）水槽Gutter

：也被稱為溝/間距，水槽是相鄰兩個列寬之間的間隔，用來分割內容，水槽的值越大，頁面中留白部分的面積越多，視覺效果越鬆散。

反之，頁面越緊湊。水槽通常設為固定值。

3）邊距 Margin

：網頁內容和螢幕邊緣之間的間隔，

通常為固定值

。

左右大邊距是計算在柵格的總寬之內的，邊距值的大小決定了每個螢幕尺寸的最小呼吸空間，一般

邊距值≥水槽值。

此外還有最小單位、總寬度、列數三個計算因子。

最小單位

：柵格的基礎單位，柵格內容元素和佈局規則（如水槽、邊距的值）都是基於它的整數倍遞增的。如最小單位是8px，水槽的寬度可設為8n。

列數

：列的數量即柵格數量，如12柵格就有12列、24柵格就有24個列。列數n越多，那麼排布在版面內的內容就越精細，透過控制列數，就可以控制版面的留白和呼吸感。

總寬度

：頁面中自適應內容部分容器寬度，而非螢幕寬度，總寬度=列寬*列數n+水槽*（n-1）+邊距*2。

三、案例——搭建柵格

以下圖資料總覽頁面為例，設計稿尺寸為1440*900px，左側導航欄常駐，該頁面是沒有用柵格搭建的。

乍一看問題似乎不大，但是資深的設計師很容易就能看出實則切割混亂，無規律。

另還有一致命的點在於填充內容的容器無法換算成百分比，前端同學無法做自適應，想要適配是很困難的。

那下面將以此頁面為案例教大家如何一步步搭建柵格：

1. 確認容器範圍

設計師在規劃產品使用者介面時，首先需要考慮頁面的整體佈局，以便確認佈局柵格的容器。

柵格容器不一定是整個螢幕或介面，需要根據真實場景判斷，一般只需要在內容層進行柵格化，約束內容自適應比例。

單頁基礎佈局：柵格容器=螢幕寬度。

存在固定控制元件佈局：柵格容器；螢幕寬度。

存在常駐的控制元件，如側邊導航欄一般屬於固定佔位的控制元件，不會跟隨螢幕尺寸或內容量的變化而變化，屬於全域性控制層。

其佔據的介面區域也不需要用來佈局其他功能及內容，所以其不屬於柵格區域。有讚的幫助中心同理。

案例屬於側邊導航佈局，所以案例

容器範圍=螢幕寬度-側邊導航=1440-側邊導航。

2. 確定列數、水槽值、邊距

1）確定柵格列數

目前有兩種比較主流的等分方式：12等分與24等分。

12等分的柵格系統

：在流行的前端開發開源工具庫Bootstrap與Foundation中廣泛使用，適用於業務資訊分組較少，單個盒子內資訊體積較大的中後臺頁面設計。

12柵格的優勢在於其在相對較小的數字中最容易被整除，保證了設計師切分割槽塊的靈活性，同時又不至於使頁面過於瑣碎。

24等分的柵格系統：

適用於業務資訊量大、資訊分組較多、單個盒子內資訊體積較小的中後臺頁面設計。

相對12柵格系統，24柵格系統變化更加靈活，更適合內容比較多樣複雜的場景。

我們常見的中後臺設計釋出於 PC 平臺，且功能複雜，內容繁多，且考慮到後期的擴充套件性。

因此中後臺常用靈活性更高的 24 柵格，比如ant design和zan design，柵格系統大小=24列+23列間距+2大邊距。

本案例中我們將採用24柵格系統。

2）確立柵格的最小單位

由於列跟水槽的寬度是以網格作為基本單位來增加或者減小，所以柵格化的重要一步就是需要先定義好柵格的原子單位網格的大小。

中後臺中目前最普適易用的就是 8 點網格，我們可以建立 8點為一個單位的網格，使用 8 的倍數來定義模組的間距與元素的尺寸。

在適用性方面，4、6、8、10 這四個數值都是基本可以滿足的，在靈活性方面，4pt表現最佳，那為什麼不選4而是8呢？

8點網格有如下幾點優勢：

（1）目前主流桌面裝置的螢幕解析度在豎直與水平方向基本都可以被 8 整除，使用 8 作為最小原子足夠普適。

可以確保不同佈局之間的視覺一致性，同時可以靈活的適配多種尺寸的設計。

（2）靈活性方面，4pt最佳，8pt次之。

但是使用4pt頁面就會被分割的非常細碎，在設計時比較難於把控，它比較適合頁面內容資訊較多，佈局排版比較複雜的產品。

而8pt柵格一般的設計場景都可以很好的滿足，比較適合大多數的專案，因此是比較推薦使用的。

（3）開發工程師使用的前端開源元件庫比如 Metronic、Antdesign 等也是基於 8 的原子單位來設計。

因此如果設計師也使用以 8 為基本單位的柵格系統，開發與設計師相互對接就會更加方便，開發實現頁面時也能更高品質地去還原我們的設計。

3）確定水槽寬度和頁邊距

按照親密性原則，我們可以按照8n定義幾個常用的間距值。

人眼對於距離的認知不是均勻、等分的，而是漸變的，透過對比幾種經典的數列模型，選擇基於斐波那契數列生成一組陣列作為間距值，得到8、16、24、40系列數值。

為了區分它們的使用場景我們依次為其命名為XS、SM、MD、LG、XL。

經過實踐經驗，在中後臺系統下，水槽寬度為16px時，頁邊距為24px時視覺效果最佳。

水槽=16px

：此時列間距在保證頁面空間被高效利用的同時，也可以維持良好的呼吸感，不至於讓內容過於緊湊。

頁邊距=24p

x

：需要透過距離區分模組與模組之間的資訊，同時也讓內容區更加緊湊。

3. 利用柵格公式計算柵格體系

柵格計算公式如下：內容區寬度=24欄+23水槽+2頁邊距=螢幕寬度-左側導航寬度。

基於前文螢幕寬度為1440px，採用24柵格佈局，頁邊距取24px，水槽取16px的前提下。

透過對柵格公式的計算，將具體的值帶入公式：1440-左側導航寬度=24欄+23*16+2*24。

4. 組織內容，分配頁面比例

建立好柵格系統後，就可以根據自己的實際業務，在柵格系統上組織內容分配頁面比例了。

我們把頁面上最終承載內容稱為“盒子（Box）”，這個盒子的寬度則由欄目與水槽按比例組合得到，高度則由內容多少決定。

1）拓展小知識：盒子的概念

在柵格系統上容納業務內容的容器我們把它稱之為盒子（Box），柵格系統上的盒子其實跟前端工程師寫頁面時用到的盒子是一致的。

如圖所示，當我們瀏覽任何一個網頁時，右鍵；檢查元素（審查元素），然後在style選單下就可以看到這個盒子結構了。

Padding

就是主體內容距離盒子外側的距離，（主體內容可以是一個按鈕、一段文字、一張圖片或者一個表格等）。

Margin

就是相鄰兩個盒子的距離，對應在後臺柵格系統就是水槽的大小。

瞭解完柵格系統的盒子模型之後，下一步我們需要根據具體業務內容來確定盒子的寬度。

以24柵格系統為例，一個24柵格系統可以根據業務需要被2等分、3等分、4等分、6等分、8等分、12等分。

還可以被1：1：1、1：2：1、1：3：2、2：3：3、1：2、1：3、1：5、3：5等不對稱分割。

上圖中只列舉了部分比例，同一個頁面上控制在5組以內的比例值組合來佈局比較合適，組合形式過多頁面就會顯得瑣碎、雜亂，不利於閱讀和使用。

因為盒子的高度根據內容來定，故圖中沒有體現高度這一維度的變化規律。

根據具體業務內容最終得出下圖中的盒子的具體比例。

最終效果如下：

到此，我們的柵格系統就搭建完成了，但是這就結束了？

No、No、No。當然要物盡其用，前文中我們定義柵格原子單位為8，這意味頁面上各元素間距的變化也應遵循8n的規律，當然也就包括每個盒子卡片裡的內容。

一致的變化規律讓頁面富有節奏感跟韻律感，在提高頁面一致性的同時也減少了設計決策成本。

2）拓展步驟: 元素對齊與間距設定

柵格系統中水槽與邊距的變化遵循8n的變化規律，此處n為大於0的正整數，即n=1、2、3…。

用於規範元素間距的8n，n取整當然最佳，但也可以根據業務情況取0。5、1。5。

原因是實際工作中，我們面臨的情況是複雜的，這樣處理可以讓間距的設定適應一些特殊的場景，從而使其更靈活普適。

柵格系統大的層面可以幫助設計者更好的進行版式設計與內容佈局，而小的方面可以輔助設計師規範頁面內各種元素的對齊與間距的設定。

從使用者體驗角度來講，這兩者同等重要，從執行層面來講，我們一般先做版式設計與佈局，然後再填充內容、調整細節。

四、Q&A

Q1：

當柵格系統中出現無法整除的情況，如何處理？

A1：

理論上來說，可以透過調整固定區域如導航的寬度來改變內容區域的大小，使列寬可以整除，且邊距和槽寬能被最小原子單位（如8）整除。

但如果仍然出現無法整除的情況，可以優先調整頁邊距的數值，無需追求完全整除。

柵格化的目的是一致性和效率，偶爾有一些不“完美”的尺寸是完全允許的。

使用者使用頁面時也看不到我們使用的柵格系統，幾乎注意不到幾畫素的變化。

只要讓使用者感受到的是頁面整體呈現出來的節奏與韻律感，以及一致的視覺語言帶給的嚴謹就足夠了。

Q2：

盒子模型填充柵格時，盒子對齊的是柵格還是水槽，裡面內容的元素也要同等對齊嗎？

A2：

盒子模型對齊的是柵格而非水槽，而這個盒子裡面的內容元素不受柵格的約束。

只要父級模組對齊柵格，子級元素可以不對齊水槽，同時子模組也可以有自己的柵格系統。

Q3：

一套柵格搭建完成後，是否全域性都要強制對齊柵格？

A3：

並不是，柵格用在典型頁面工作臺、資料概覽、卡片頁居多，非常規設計時不需要柵格系統。

甚至在特定情況下，我們也可以打破布局柵格設定，來組織頁面內容。

打破布局柵格可以使元素突出，吸引視覺焦點（比如：全站橫幅，或是市場運營類內容）。

但需注意，對中後臺系統而言，過多使用會導致頁面凌亂。

五、最後

柵格上篇正式完結撒花啦，敬請期待下篇《柵格在響應式設計中的運用》。

檢視作者歷史文章請戳：《B端體驗設計專題—表格篇》。

本文由 @且曼B端設計_劉美芳 原創釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基於CC0協議。