編輯導語：柵格是展現數據尤為高效的形式之一，它也是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：網頁內容和屏幕邊緣之間的間隔，通常為固定值。

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

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

1. 最小單位：柵格的基礎單位，柵格內容元素和布局規則（如水槽、邊距的值）都是基于它的整數倍遞增的。如最小單位是8px，水槽的寬度可設為8n。
2. 列數：列的數量即柵格數量，如12柵格就有12列、24柵格就有24個列。列數n越多，那么排布在版面內的內容就越精細，通過控制列數，就可以控制版面的留白和呼吸感。
3. 總寬度：頁面中自適應內容部分容器寬度，而非屏幕寬度，總寬度=列寬*列數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時視覺效果最佳。

1. 水槽=16px：此時列間距在保證頁面空間被高效利用的同時，也可以維持良好的呼吸感，不至于讓內容過于緊湊。
2. 頁邊距=24px：需要通過距離區分模塊與模塊之間的信息，同時也讓內容區更加緊湊。

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協議。