編輯導(dǎo)語：柵格是展現(xiàn)數(shù)據(jù)尤為高效的形式之一，它也是B端產(chǎn)品和設(shè)計師每天接觸最多的組件，常和排序、搜索、篩選、分頁等其他界面元素一起協(xié)同。本文作者分享了B端柵格設(shè)計的基本概念和相關(guān)案例等，一起來看看吧。

大家好，我是子璐。今天為大家分享的是柵格系列，結(jié)合我自己后臺設(shè)計的經(jīng)驗，關(guān)于柵格文章我分為上下兩篇。

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

下篇將會分享柵格在響應(yīng)式設(shè)計中的運用，脫離了開發(fā)其實柵格的意義并不大。

一、柵格簡述

1. 柵格的由來

柵格最早來源于平面設(shè)計中的網(wǎng)格系統(tǒng)，英文Gird Systems。

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

他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計依據(jù)，每個字體方格分為 64 個基本方格，每個方格再分為 36 個小格，一個印刷版面就有 2304 個小格組成。

再后來，逐漸演變成運用固定的格子設(shè)計版面的平面設(shè)計風(fēng)格，平面設(shè)計中稱之為網(wǎng)格，這就是柵格的雛形。

互聯(lián)網(wǎng)發(fā)展之后，界面設(shè)計將這一概念借用過來，簡易的理解柵格就是一種有規(guī)則的參考線。

2. UI中的柵格

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

其區(qū)別在于：

• 網(wǎng)格尺寸是固定的：平面設(shè)計一般用到的紙張規(guī)格（尺寸），不管是英國、美國、日本或ISO采用的德國DIN紙張規(guī)格全部都是固定的尺寸，寬度和高度都是固定的，也就是絕對的。
• 柵格尺寸是變化的：而網(wǎng)頁或App的設(shè)備尺寸不是固定的，其橫向?qū)挾仁芟抻谠O(shè)備寬度，由設(shè)備屏幕寬度來決定，而縱向高度則是隨著內(nèi)容的多少來決定的。

考慮到真實設(shè)計場景下，可能會使用無限下拉交互方式承載復(fù)雜內(nèi)容的規(guī)則。

所以往往只需要制定縱向列式分割規(guī)則，以規(guī)范 X 軸向內(nèi)容的對齊、比例等布局效果。

3. 柵格的價值

1）對用戶：提高內(nèi)容布局規(guī)律性，減少認(rèn)知成本。

設(shè)計更有秩序和節(jié)奏感，頁面信息的展現(xiàn)更加清晰，從而提高用戶的閱讀和瀏覽效率，提供更好的用戶體驗。

2）對設(shè)計師：提高效率與規(guī)范化。

幫助設(shè)計師快速校準(zhǔn)元素在界面內(nèi)的位置，節(jié)省了基礎(chǔ)操作上的時間，如移動元素、計算間距等。同時也避免了間距憑設(shè)計師感覺造成不統(tǒng)一的現(xiàn)象。

3）對開發(fā)：提高設(shè)計還原度，節(jié)約時間成本。

柵格系統(tǒng)提高了網(wǎng)頁的規(guī)范性。一方面可以幫助開發(fā)同學(xué)規(guī)避常規(guī)的橫向間距類問題（縱向間距問題主要受字體的設(shè)置影響），以提高設(shè)計還原度，另一方面有利于開發(fā)人員對組件和模塊的復(fù)用，進(jìn)一步提升效率。

4）響應(yīng)式布局。

柵格能夠指導(dǎo)頁面在多平臺多屏幕尺寸下的響適應(yīng)設(shè)計，便于與開發(fā)對接，闡明流動布局或端點布局等適配方案，保證還原度的同時降低溝通成本。

二、柵格的構(gòu)成

柵格系統(tǒng)主要由列、水槽、邊距三個基本元素構(gòu)成。

1）列Column：也被稱為欄，用來盛放文本、表格、圖片等內(nèi)容及元素。

列的寬度稱為列寬，常用百分比來定義，而不是固定值（使用固定柵格的時候會采用固定值，會在下篇響應(yīng)式柵格中講到），前端同學(xué)通過百分比可以靈活適應(yīng)屏幕大小。

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

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

3）邊距 Margin：網(wǎng)頁內(nèi)容和屏幕邊緣之間的間隔，通常為固定值。

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

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

1. 最小單位：柵格的基礎(chǔ)單位，柵格內(nèi)容元素和布局規(guī)則（如水槽、邊距的值）都是基于它的整數(shù)倍遞增的。如最小單位是8px，水槽的寬度可設(shè)為8n。
2. 列數(shù)：列的數(shù)量即柵格數(shù)量，如12柵格就有12列、24柵格就有24個列。列數(shù)n越多，那么排布在版面內(nèi)的內(nèi)容就越精細(xì)，通過控制列數(shù)，就可以控制版面的留白和呼吸感。
3. 總寬度：頁面中自適應(yīng)內(nèi)容部分容器寬度，而非屏幕寬度，總寬度=列寬*列數(shù)n+水槽*（n-1）+邊距*2。

三、案例——搭建柵格

以下圖數(shù)據(jù)總覽頁面為例，設(shè)計稿尺寸為1440*900px，左側(cè)導(dǎo)航欄常駐，該頁面是沒有用柵格搭建的。

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

另還有一致命的點在于填充內(nèi)容的容器無法換算成百分比，前端同學(xué)無法做自適應(yīng)，想要適配是很困難的。

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

1. 確認(rèn)容器范圍

設(shè)計師在規(guī)劃產(chǎn)品用戶界面時，首先需要考慮頁面的整體布局，以便確認(rèn)布局柵格的容器。

柵格容器不一定是整個屏幕或界面，需要根據(jù)真實場景判斷，一般只需要在內(nèi)容層進(jìn)行柵格化，約束內(nèi)容自適應(yīng)比例。

單頁基礎(chǔ)布局：柵格容器=屏幕寬度。

存在固定控件布局：柵格容器；屏幕寬度。

存在常駐的控件，如側(cè)邊導(dǎo)航欄一般屬于固定占位的控件，不會跟隨屏幕尺寸或內(nèi)容量的變化而變化，屬于全局控制層。

其占據(jù)的界面區(qū)域也不需要用來布局其他功能及內(nèi)容，所以其不屬于柵格區(qū)域。有贊的幫助中心同理。

案例屬于側(cè)邊導(dǎo)航布局，所以案例容器范圍=屏幕寬度-側(cè)邊導(dǎo)航=1440-側(cè)邊導(dǎo)航。

2. 確定列數(shù)、水槽值、邊距

1）確定柵格列數(shù)

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

12等分的柵格系統(tǒng)：在流行的前端開發(fā)開源工具庫Bootstrap與Foundation中廣泛使用，適用于業(yè)務(wù)信息分組較少，單個盒子內(nèi)信息體積較大的中后臺頁面設(shè)計。

12柵格的優(yōu)勢在于其在相對較小的數(shù)字中最容易被整除，保證了設(shè)計師切分區(qū)塊的靈活性，同時又不至于使頁面過于瑣碎。

24等分的柵格系統(tǒng)：適用于業(yè)務(wù)信息量大、信息分組較多、單個盒子內(nèi)信息體積較小的中后臺頁面設(shè)計。

相對12柵格系統(tǒng)，24柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場景。

我們常見的中后臺設(shè)計發(fā)布于 PC 平臺，且功能復(fù)雜，內(nèi)容繁多，且考慮到后期的擴展性。

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

本案例中我們將采用24柵格系統(tǒng)。

2）確立柵格的最小單位

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

中后臺中目前最普適易用的就是 8 點網(wǎng)格，我們可以建立 8點為一個單位的網(wǎng)格，使用 8 的倍數(shù)來定義模塊的間距與元素的尺寸。

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

8點網(wǎng)格有如下幾點優(yōu)勢：

（1）目前主流桌面設(shè)備的屏幕分辨率在豎直與水平方向基本都可以被 8 整除，使用 8 作為最小原子足夠普適。

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

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

但是使用4pt頁面就會被分割的非常細(xì)碎，在設(shè)計時比較難于把控，它比較適合頁面內(nèi)容信息較多，布局排版比較復(fù)雜的產(chǎn)品。

而8pt柵格一般的設(shè)計場景都可以很好的滿足，比較適合大多數(shù)的項目，因此是比較推薦使用的。

（3）開發(fā)工程師使用的前端開源組件庫比如 Metronic、Antdesign 等也是基于 8 的原子單位來設(shè)計。

因此如果設(shè)計師也使用以 8 為基本單位的柵格系統(tǒng)，開發(fā)與設(shè)計師相互對接就會更加方便，開發(fā)實現(xiàn)頁面時也能更高品質(zhì)地去還原我們的設(shè)計。

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

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

人眼對于距離的認(rèn)知不是均勻、等分的，而是漸變的，通過對比幾種經(jīng)典的數(shù)列模型，選擇基于斐波那契數(shù)列生成一組數(shù)組作為間距值，得到8、16、24、40系列數(shù)值。

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

經(jīng)過實踐經(jīng)驗，在中后臺系統(tǒng)下，水槽寬度為16px時，頁邊距為24px時視覺效果最佳。

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

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

柵格計算公式如下：內(nèi)容區(qū)寬度=24欄+23水槽+2頁邊距=屏幕寬度-左側(cè)導(dǎo)航寬度。

基于前文屏幕寬度為1440px，采用24柵格布局，頁邊距取24px，水槽取16px的前提下。

通過對柵格公式的計算，將具體的值帶入公式：1440-左側(cè)導(dǎo)航寬度=24欄+23*16+2*24。

4. 組織內(nèi)容，分配頁面比例

建立好柵格系統(tǒng)后，就可以根據(jù)自己的實際業(yè)務(wù)，在柵格系統(tǒng)上組織內(nèi)容分配頁面比例了。

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

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

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

如圖所示，當(dāng)我們?yōu)g覽任何一個網(wǎng)頁時，右鍵;檢查元素（審查元素），然后在style菜單下就可以看到這個盒子結(jié)構(gòu)了。

Padding就是主體內(nèi)容距離盒子外側(cè)的距離，（主體內(nèi)容可以是一個按鈕、一段文本、一張圖片或者一個表格等）。

Margin就是相鄰兩個盒子的距離，對應(yīng)在后臺柵格系統(tǒng)就是水槽的大小。

了解完柵格系統(tǒng)的盒子模型之后，下一步我們需要根據(jù)具體業(yè)務(wù)內(nèi)容來確定盒子的寬度。

以24柵格系統(tǒng)為例，一個24柵格系統(tǒng)可以根據(jù)業(yè)務(wù)需要被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組以內(nèi)的比例值組合來布局比較合適，組合形式過多頁面就會顯得瑣碎、雜亂，不利于閱讀和使用。

因為盒子的高度根據(jù)內(nèi)容來定，故圖中沒有體現(xiàn)高度這一維度的變化規(guī)律。

根據(jù)具體業(yè)務(wù)內(nèi)容最終得出下圖中的盒子的具體比例。

最終效果如下：

到此，我們的柵格系統(tǒng)就搭建完成了，但是這就結(jié)束了？

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

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

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

柵格系統(tǒng)中水槽與邊距的變化遵循8n的變化規(guī)律，此處n為大于0的正整數(shù)，即n=1、2、3…。

用于規(guī)范元素間距的8n，n取整當(dāng)然最佳，但也可以根據(jù)業(yè)務(wù)情況取0.5、1.5。

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

柵格系統(tǒng)大的層面可以幫助設(shè)計者更好的進(jìn)行版式設(shè)計與內(nèi)容布局，而小的方面可以輔助設(shè)計師規(guī)范頁面內(nèi)各種元素的對齊與間距的設(shè)定。

從用戶體驗角度來講，這兩者同等重要，從執(zhí)行層面來講，我們一般先做版式設(shè)計與布局，然后再填充內(nèi)容、調(diào)整細(xì)節(jié)。

四、Q&A

Q1：當(dāng)柵格系統(tǒng)中出現(xiàn)無法整除的情況，如何處理?

A1：理論上來說，可以通過調(diào)整固定區(qū)域如導(dǎo)航的寬度來改變內(nèi)容區(qū)域的大小，使列寬可以整除，且邊距和槽寬能被最小原子單位（如8）整除。

但如果仍然出現(xiàn)無法整除的情況，可以優(yōu)先調(diào)整頁邊距的數(shù)值，無需追求完全整除。

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

用戶使用頁面時也看不到我們使用的柵格系統(tǒng)，幾乎注意不到幾像素的變化。

只要讓用戶感受到的是頁面整體呈現(xiàn)出來的節(jié)奏與韻律感，以及一致的視覺語言帶給的嚴(yán)謹(jǐn)就足夠了。

Q2：盒子模型填充柵格時，盒子對齊的是柵格還是水槽，里面內(nèi)容的元素也要同等對齊嗎？

A2：盒子模型對齊的是柵格而非水槽，而這個盒子里面的內(nèi)容元素不受柵格的約束。

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

Q3：一套柵格搭建完成后，是否全局都要強制對齊柵格？

A3：并不是，柵格用在典型頁面工作臺、數(shù)據(jù)概覽、卡片頁居多，非常規(guī)設(shè)計時不需要柵格系統(tǒng)。

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

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

但需注意，對中后臺系統(tǒng)而言，過多使用會導(dǎo)致頁面凌亂。

五、最后

柵格上篇正式完結(jié)撒花啦，敬請期待下篇《柵格在響應(yīng)式設(shè)計中的運用》。

查看作者歷史文章請戳：《B端體驗設(shè)計專題—表格篇》。

本文由 @且曼B端設(shè)計_劉美芳 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。