前言

在如今多終端、多設(shè)備尺寸的加持下，多屏設(shè)計(jì)就成了商業(yè)設(shè)計(jì)中不可缺少的一部分，為了讓所用界面的視覺表現(xiàn)出統(tǒng)一性和一致性、同時(shí)在不同系統(tǒng)及不同尺寸的設(shè)備上保持良好的用戶體驗(yàn)，柵格系統(tǒng)就顯得尤為重要，它能輔助設(shè)計(jì)師制定界面排版布局的方案，以網(wǎng)格的形式將多元素/內(nèi)容鏈接在一起，很好做到多平臺(tái)、多尺寸的適配，讓設(shè)計(jì)美感、工作效率都得到很大的提升。

一些優(yōu)秀的產(chǎn)品都在使用柵格去規(guī)范界面信息的排版布局，雖然它只是傳統(tǒng)設(shè)計(jì)方式的一部分，但只要不嫌麻煩，就可以使用柵格系統(tǒng)解決很多設(shè)計(jì)布局的問題。不少設(shè)計(jì)師都知道柵格的重要性，但礙于對(duì)其一知半解，以至于在設(shè)計(jì)中總有些無從下手，本文筆者將從瀏覽過的大量文章結(jié)合自身工作經(jīng)驗(yàn)對(duì)柵格做出系統(tǒng)化的總結(jié)，希望能幫助初/中級(jí)設(shè)計(jì)師對(duì)柵格有一個(gè)更深的認(rèn)識(shí)。

一、柵格的定義及重要性

1. 柵格的來源

柵格的概念來源于平面設(shè)計(jì)中的"網(wǎng)格"，早在 13 世紀(jì)，法國(guó)建筑師 Villard de Honnecourt 創(chuàng)作了一張圖表，試圖實(shí)現(xiàn)"和諧的設(shè)計(jì)"，這也是繼黃金比例之后，第一次將網(wǎng)格與其結(jié)合在一起，以此產(chǎn)生固定比例的頁面布局。

在 18 世紀(jì)工業(yè)革命大規(guī)模生產(chǎn)的開始，隨著報(bào)紙、傳單等主流印刷品的興起，設(shè)計(jì)師們需要解決"將不同的信息傳達(dá)給不同的人群且能自然瀏覽、還要防止不同部分爭(zhēng)奪讀者的注意力"的問題時(shí)，柵格的雛形已然顯現(xiàn)出來。

20 世紀(jì)初，設(shè)計(jì)師們發(fā)現(xiàn)使用網(wǎng)格輔助設(shè)計(jì)印刷作品，可讓排版布局更加清晰、信息傳遞也更加有效，由此演變成了平面設(shè)計(jì)中的一種方法。

20 世紀(jì)中期，約瑟夫·米勒-布羅克曼著作了《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》一書對(duì)設(shè)計(jì)界影響至今。

由此不難發(fā)現(xiàn)，不管是前幾個(gè)世紀(jì)的印刷刊物、還是如今的互聯(lián)網(wǎng)產(chǎn)品界面布局，柵格都可以作為組織信息的工具，幫助設(shè)計(jì)師實(shí)現(xiàn)一致、和諧的信息布局效果。

2. 什么是柵格

柵格和網(wǎng)格的英文都以"Grid"來表示，其本質(zhì)是為了給版面提供一個(gè)基本設(shè)計(jì)框架，這也是為實(shí)現(xiàn)有組織的設(shè)計(jì)其中方法之一，在平面設(shè)計(jì)中稱之為"網(wǎng)格"，而在網(wǎng)頁/移動(dòng)端中更多稱為"柵格"。

柵格是根據(jù)平面中的網(wǎng)格發(fā)展而來，通過一定的規(guī)律、合理的設(shè)置基準(zhǔn)線來規(guī)范界面中的元素（文本/圖像），讓每個(gè)區(qū)域能夠相對(duì)獨(dú)立卻又能相互關(guān)聯(lián)，形成整個(gè)界面，最終呈現(xiàn)出清晰易讀的信息布局。

3. 為什么要使用柵格

首先對(duì)用戶來說，使用柵格能讓內(nèi)容布局具有規(guī)律性，通過定義留白、對(duì)齊、分割等各種比例關(guān)系，不僅能降低用戶認(rèn)知成本，還能讓信息的展現(xiàn)更加清晰，有效提升用戶的瀏覽、接收效率。

其次對(duì)于研發(fā)團(tuán)隊(duì)，柵格通過統(tǒng)一的標(biāo)準(zhǔn)規(guī)范對(duì)設(shè)計(jì)師進(jìn)行約束，協(xié)同產(chǎn)出一致性的視覺效果，避免了一人一個(gè)樣式的混亂場(chǎng)面，同時(shí)減少了部分細(xì)節(jié)上的溝通，提高決策及產(chǎn)出效率。在開發(fā)過程中，程序員通過有規(guī)可循的設(shè)計(jì)規(guī)律，可對(duì)部分組件及模塊進(jìn)行封裝調(diào)用，不僅高度還原設(shè)計(jì)效果、還能提高開發(fā)效率。

另外，在設(shè)計(jì) Web 界面時(shí)，使用柵格系統(tǒng)能一稿適配電腦、平板、手機(jī)等不同的設(shè)備尺寸，合理兼容多端、多系統(tǒng)下的自適應(yīng)效果。

二、柵格系統(tǒng)的組成

柵格系統(tǒng)并沒有我們想象的那么復(fù)雜，它主要由網(wǎng)格、列、水槽、邊距、總寬、容器盒子等組成，只要清楚它們之間的相互關(guān)系以及定義即可，下面我們將一一了解：

1. 網(wǎng)格（Gird）

網(wǎng)格（Gird）是由基本單位「單元格」構(gòu)成，也被稱為最小單元格，而柵格則是由一系列規(guī)律的網(wǎng)格組成，通常情況下，我們會(huì)使用 8 作為作為柵格中的最小單位，以此進(jìn)行增量。為什么用 8 為基礎(chǔ)倍數(shù)呢？

首先作為偶數(shù)，程序進(jìn)行單位換算后可被整除，避免像素出現(xiàn)小數(shù)點(diǎn)；其次，8 為增量單位既不會(huì)顯得瑣碎、也不會(huì)讓內(nèi)容過于分散，當(dāng)界面中所有元素都以 8 為倍數(shù)時(shí)，其元素大小、間距都有規(guī)可循，之前筆者曾寫過一篇「間距」類的文章，感興趣的伙伴可以去看一下。

2. 列（Column）

列（Column）指的是柵格數(shù)量，如 12 柵格有 12 個(gè)列、24 柵格就是 24 個(gè)列，主要用來對(duì)齊內(nèi)容。通過柵格的列數(shù)來控制版面的呼吸感及節(jié)奏感，列數(shù)越多、內(nèi)容排版越精細(xì)，反之列數(shù)越少、內(nèi)容排版就越疏松。

3. 水槽（Gutter）

水槽（Gutter）是指列與列之間的間距，通過留白以實(shí)現(xiàn)界面中的信息元素分割及版式呼吸感。水槽的寬度對(duì)設(shè)計(jì)風(fēng)格會(huì)存在一定影響，水槽越大留白就越多、其呼吸感就越好，反之留白就越少、內(nèi)容也會(huì)變的較為緊湊。

4. 邊距（Margin）

邊距（Margin）是指界面內(nèi)容到屏幕邊緣的距離，主要用來控制核心內(nèi)容的展示邊界，所以是禁止放置任何內(nèi)容的（部分浮窗、返回頂部按鈕、右側(cè)吸附邊欄除外）。邊距值的大小會(huì)直接影響到柵格區(qū)域空間，這點(diǎn)大家自行理解即可。

5. 柵格總寬（Container）

柵格總寬（Container）是指所有列加所有水槽再加上兩側(cè)邊距的總和，即整個(gè)柵格系統(tǒng)的總寬度。

6. 容器盒子（Col-n）

容器盒子（Col-n）是指布局信息的版面區(qū)域，通常設(shè)計(jì)師在設(shè)定好基礎(chǔ)柵格后，會(huì)根據(jù)實(shí)際情況去定義一塊內(nèi)容需占用幾個(gè)列的寬度并形成容器，后續(xù)在設(shè)計(jì)過程中，會(huì)將文字、圖片、按鈕等元素約束在限定的容器寬度以內(nèi)形成復(fù)用組件，最終組合拼裝成完整的設(shè)計(jì)方案。

三、柵格系統(tǒng)制作流程

1. 設(shè)計(jì)柵格寬度

在設(shè)計(jì) Web 端界面時(shí)設(shè)計(jì)師需要先根據(jù)實(shí)際使用場(chǎng)景確定好布局后，再來設(shè)定柵格區(qū)域，如下列布局：

屏幕寬度并不等于柵格的寬度，大多數(shù)情況下，我們會(huì)基于 1920、1440 這兩個(gè)尺寸來定義設(shè)計(jì)稿的寬度，但真正放置信息內(nèi)容的區(qū)域并非設(shè)計(jì)稿尺寸，需要做到多平臺(tái)、多尺寸顯示器的適配，通常會(huì)將柵格寬度定義在 1024px~1400px 之間。例如：常見的 1024px、1200px、1280px、1400px 等，可滿足絕大多數(shù)主流顯示器，如果柵格寬度超過 1400px，在很多筆記本電腦上瀏覽頁面時(shí)，會(huì)出現(xiàn)左右滾動(dòng)條，體驗(yàn)非常不友好。

2. 選擇柵格列數(shù)

① 12 柵格

12 列柵格很常見，一些業(yè)務(wù)信息分組較少的商業(yè)網(wǎng)站、門戶網(wǎng)站等使用的就是 12 柵格，它能夠被 2、3、4、6 整除，很容易滿足信息較為復(fù)雜的等分布局場(chǎng)景。另外，針對(duì)不對(duì)稱布局的容器組合也能將信息體現(xiàn)的很和諧，如雙欄布局使用 4+8、3+9 柵格，三欄布局使用 2+8+2、3+3+6 柵格等，變化較為靈活。

② 24 柵格

24 列柵格適合信息量大、分組多且多樣復(fù)雜的使用場(chǎng)景，很多視覺區(qū)域較大、需要精細(xì)化布局的 B 端 Web 設(shè)計(jì)采用的就是 24 柵格，相比 12 柵格，有更多的區(qū)域劃分空間，其布局的靈活性也更強(qiáng)。

需要注意的是，24 柵格因列的數(shù)量比較多，很多時(shí)候列寬無法被精準(zhǔn)整除，不過相差的像素?cái)?shù)值極小，往往無法被用戶肉眼覺察，無傷大雅。柵格本身的目的就是為了保持視覺效果的協(xié)調(diào)與統(tǒng)一，并非為了死磕某個(gè)像素，特殊情況區(qū)別對(duì)待即可。

③ 5 柵格

5 列柵格一般用在移動(dòng)端設(shè)計(jì)中，因設(shè)備屏幕的橫向空間有限，所以很少使用，例如：針對(duì)"金剛區(qū)"的 5 圖標(biāo)（一行）、10 圖標(biāo)（兩行）的規(guī)范化排版。如果想進(jìn)一步追求后續(xù)的靈活性、避免奇數(shù)的不便，也可將 5 列柵格拆分成 10 列，布局、視覺效果基本能保持一致。

其實(shí)在實(shí)際設(shè)計(jì)中，設(shè)計(jì)師們大多會(huì)使用間距來規(guī)范界面的排版與布局，相比 5 列柵格會(huì)更靈活、更便捷。

3. 定義水槽與邊距

水槽就是列的間隔，其定義方式可以延用間距系統(tǒng)的制定標(biāo)準(zhǔn)，以 8px 為最小單位進(jìn)行推導(dǎo)，如 S=8px、M=16px、L=24px、XL=32px、XXL=40px、...等，這樣更容易保持視覺的一致性，最終到底使用哪個(gè)值沒有絕對(duì)的要求，這還需要根據(jù)產(chǎn)品的調(diào)性及設(shè)計(jì)風(fēng)格來決定，水槽的數(shù)值越大，頁面的留白間隙就越多。

當(dāng)我們確定好內(nèi)容區(qū)寬度、水槽寬度及數(shù)量后，計(jì)算出列寬（上述有提到不一定整除）并將整體進(jìn)行居中顯示，兩側(cè)即自動(dòng)形成邊距。

四、柵格與響應(yīng)式的結(jié)合

1. 自適應(yīng)與響應(yīng)式

① 自適應(yīng)

自適應(yīng)布局是為了讓網(wǎng)頁內(nèi)容根據(jù)不同終端來自行適配布局，設(shè)計(jì)師需要制定好同一設(shè)計(jì)稿的變化規(guī)則，程序員在開發(fā)時(shí)創(chuàng)建多個(gè)布局，對(duì)不同的終端分別提供一套獨(dú)立的前端代碼，系統(tǒng)就能自行判斷當(dāng)前訪問的是 PC 端、平板還是手機(jī)。我們可以做一個(gè)測(cè)試，對(duì)自適應(yīng)網(wǎng)頁窗口的寬度進(jìn)行調(diào)整，就會(huì)發(fā)現(xiàn)每經(jīng)過一個(gè)斷點(diǎn)時(shí)，頁面的元素位置就會(huì)發(fā)生改變，呈現(xiàn)出不同的布局效果。需要明確的是，當(dāng)窗口寬度未達(dá)到下一個(gè)斷點(diǎn)之前，元素不會(huì)隨著窗口的調(diào)整而變化。

自適應(yīng)效果因需要前端為每個(gè)終端提供獨(dú)立的代碼，固開發(fā)成本較高，在設(shè)計(jì)時(shí)，元素的大小、位置變化不必太過復(fù)雜，只需保留必要的功能入口即可。

② 響應(yīng)式

響應(yīng)式?jīng)]有自適應(yīng)那么多的控制，前端只需通過一套代碼即可無縫銜接電腦端、平板和手機(jī)，可多端同步生效，其開發(fā)成本及設(shè)計(jì)成本都相對(duì)較低，適應(yīng)性更強(qiáng)。響應(yīng)式布局最典型的就是當(dāng)頁面窗口寬度發(fā)生變化時(shí)，元素的大小隨時(shí)都在發(fā)生變化，特別是圖片的伸縮、整行文字的長(zhǎng)短變化尤為明顯。

2. 柵格行為變化

① 固定柵格

將自適應(yīng)關(guān)聯(lián)到柵格上，簡(jiǎn)單來說，就是頁面寬度在變化過程中未達(dá)到下一個(gè)斷點(diǎn)時(shí)，柵格的列與水槽寬度不變，頁面布局不會(huì)產(chǎn)生變化。當(dāng)達(dá)到預(yù)設(shè)斷點(diǎn)，柵格的列數(shù)與水槽會(huì)相應(yīng)增加或減少，頁面右側(cè)的內(nèi)容也會(huì)隨之增減，但元素之間的尺寸與間距依然是固定的。

固定柵格的適配規(guī)則簡(jiǎn)單，實(shí)現(xiàn)成本也相對(duì)較低，但是因?yàn)樵诶爝^程中邊距的不固定性，局限了其適用范圍，一般只適合用在內(nèi)容居中、上下結(jié)構(gòu)布局類型的產(chǎn)品中。需要注意的是，在過大或過小尺寸的屏幕上，比例可能會(huì)顯的不夠協(xié)調(diào)。

② 流動(dòng)?xùn)鸥?/p>

流動(dòng)?xùn)鸥竦倪吘?、水槽寬度是固定不變的，在達(dá)到下一個(gè)斷點(diǎn)前，列的數(shù)量也不會(huì)增加，列寬會(huì)跟隨頁面寬度左右伸縮，變化規(guī)則不一定是最小單位（8px）倍數(shù)，內(nèi)容元素也會(huì)隨著頁面寬度的變化而變化，以保持頁面內(nèi)容始終充滿屏幕的可用空間。

我們可以將流動(dòng)?xùn)鸥竦囊曈X呈現(xiàn)方式稱之為響應(yīng)式彈性布局，這種布局的兼容性很高，能很好的適應(yīng)多端設(shè)備及不同的屏幕分辨率。對(duì)于不同尺寸的卡片混排也能平滑過渡，不會(huì)顯得突兀，例如：圖像、視頻、類容編輯器、數(shù)據(jù)可視化等，除斷點(diǎn)變化外，內(nèi)容元素的縮放不會(huì)改變頁面的排版布局。

③ 混和柵格

絕大多數(shù)的網(wǎng)站使用的都是流動(dòng)?xùn)鸥?，但一些后臺(tái)管理系統(tǒng)及工具型界面設(shè)計(jì)為了使布局既有固定的寬度、也有流動(dòng)的寬度，就會(huì)采用混合柵格的形式。

混合柵格的靈活性很高，特別是內(nèi)容較為復(fù)雜的產(chǎn)品會(huì)顯的更加友好，在不同分辨率的屏幕上都能達(dá)到理想的視覺效果。不過對(duì)于開發(fā)來說，規(guī)則相對(duì)復(fù)雜，實(shí)現(xiàn)成本較高。

五、部分問題及處理方式

1. 水槽中不要留下元素

這里所說的并非水槽中不能存在內(nèi)容，而是不要將單個(gè)元素或元素的邊緣置于水槽內(nèi)，否則就會(huì)參差不齊，違背了柵格的目的。如果你的元素過大，就讓他跨越柵格，到達(dá)下一個(gè)列的右側(cè)邊緣。

2. 柵格不一定整除

雖說設(shè)計(jì)師對(duì)于每一個(gè)像素的的追求都很執(zhí)著，但大部分情況下柵格都是無法整除的，而相差的像素也無法被用戶以肉眼覺察。我們需要理解的是，柵格的目的是為了保持視覺的協(xié)調(diào)與統(tǒng)一，而非像素級(jí)的精確。

舉個(gè)例子，以 1920px 的寬度、12 柵格為例，內(nèi)容區(qū)寬度可以是 1000px、1200px、1400px、1600px...，每一次內(nèi)容區(qū)寬度的變化都要將柵格的列寬重新調(diào)整，永遠(yuǎn)無法將柵格每次整除，即便偶爾也是例外。

3. 柵格區(qū)域外的內(nèi)容

柵格是為了規(guī)范內(nèi)容，并不是所有的內(nèi)容都需要柵格。大多數(shù)情況下我們只需要將主要內(nèi)容區(qū)域遵循柵格系統(tǒng)即可，其他部分如固定導(dǎo)航、側(cè)邊懸浮欄、右下角彈窗...等不一定要跟隨屏幕尺寸或內(nèi)容的變化而變化。

4. 合理的打破柵格對(duì)齊

對(duì)齊在柵格系統(tǒng)中的地位可謂是舉足輕重，不過在一些特殊場(chǎng)景中不必為了對(duì)齊而對(duì)齊，在不影響視覺效果的前提下，可以根據(jù)實(shí)際情況合理的打破對(duì)齊。

如下圖中的照片墻，利用極小的間距將一些寬度不同的照片排列在一起，雖然沒有同柵格的列寬對(duì)齊，但我們第一眼很容易將這些照片聯(lián)想成一個(gè)整體，同時(shí)又能輕松的單獨(dú)區(qū)分開來，也不會(huì)影響整體布局。

5. 子父級(jí)模塊對(duì)齊父級(jí)

在部分場(chǎng)景中，當(dāng)我們以卡片的形式將多個(gè)內(nèi)容形成一個(gè)信息組，這時(shí)可以忽略子級(jí)元素的對(duì)齊方式，父級(jí)卡片遵守柵格對(duì)齊即可。

六、結(jié)語

柵格系統(tǒng)能為設(shè)計(jì)提供便捷，有助于設(shè)計(jì)效率的提升，很多設(shè)計(jì)師都會(huì)去關(guān)注柵格為什么重要，卻容易忽略柵格在實(shí)際項(xiàng)目中的使用原則，同時(shí)還要伴隨一些限制條件，所以并沒有平常想象的那么簡(jiǎn)單。

本篇文章提供了柵格系統(tǒng)的基礎(chǔ)知識(shí)，希望能夠拋磚引玉，幫助大家解決在使用過程中遇到的常見問題，讓柵格更好的服務(wù)于設(shè)計(jì)，若有不足之處，歡迎補(bǔ)充。

作者：能量眼球