在如今多終端多設(shè)備的場景下，多屏設(shè)計(jì)成為了當(dāng)今產(chǎn)品設(shè)計(jì)中需要考慮的重要一點(diǎn)，也是商業(yè)設(shè)計(jì)中不可或缺的一部分。柵格系統(tǒng)能夠輔助設(shè)計(jì)師進(jìn)行界面排版布局，能夠優(yōu)化用戶體驗(yàn)。本文對該系統(tǒng)設(shè)計(jì)進(jìn)行了詳細(xì)的介紹，希望對你有所幫助。

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

一些優(yōu)秀的產(chǎn)品都在使用柵格去規(guī)范界面信息的排版布局，雖然它只是傳統(tǒng)設(shè)計(jì)方式的一部分，但只要不嫌麻煩，就可以使用柵格系統(tǒng)解決很多設(shè)計(jì)布局的問題。

不少設(shè)計(jì)師都知道柵格的重要性，但礙于對其一知半解，以至于在設(shè)計(jì)中總有些無從下手，本文筆者將從瀏覽過的大量文章結(jié)合自身工作經(jīng)驗(yàn)對柵格作出了系統(tǒng)化的總結(jié)，希望能幫助初/中級設(shè)計(jì)師對柵格有一個(gè)更深的認(rèn)識。

一、柵格的定義及重要性

1. 柵格的來源

柵格的概念來源于平面設(shè)計(jì)中的“網(wǎng)格”，早在13世紀(jì)，法國建筑師 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á)給不同的人群且能自然瀏覽、還要防止不同部分爭奪讀者的注意力”的問題時(shí)，柵格的雛形已然顯現(xiàn)出來。

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

20世紀(jì)中期，約瑟夫·米勒-布羅克曼著作了《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》一書對設(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ū)域能夠相對獨(dú)立卻又能相互關(guān)聯(lián)，形成整個(gè)界面，最終呈現(xiàn)出清晰易讀的信息布局。

3. 為什么要使用柵格

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

其次對于研發(fā)團(tuán)隊(duì)，柵格通過統(tǒng)一的標(biāo)準(zhǔn)規(guī)范對設(shè)計(jì)師進(jìn)行約束，協(xié)同產(chǎn)出一致性的視覺效果，避免了一人一個(gè)樣式的混亂場面，同時(shí)減少了部分細(xì)節(jié)上的溝通，提高決策及產(chǎn)出效率。在開發(fā)過程中，程序員通過有規(guī)可循的設(shè)計(jì)規(guī)律，可對部分組件及模塊進(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è)列，主要用來對齊內(nèi)容。通過柵格的列數(shù)來控制版面的呼吸感及節(jié)奏感，列數(shù)越多、內(nèi)容排版越精細(xì)，反之列數(shù)越少、內(nèi)容排版就越疏松。

3. 水槽（Gutter）

水槽（Gutter）是指列與列之間的間距，通過留白以實(shí)現(xiàn)界面中的信息元素分割及版式呼吸感。水槽的寬度對設(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í)際使用場景確定好布局后，再來設(shè)定柵格區(qū)域，如下列布局：

屏幕寬度并不等于柵格的寬度，大多數(shù)情況下，我們會(huì)基于1920、1440這兩個(gè)尺寸來定義設(shè)計(jì)稿的寬度，但真正放置信息內(nèi)容的區(qū)域并非設(shè)計(jì)稿尺寸，需要做到多平臺、多尺寸顯示器的適配，通常會(huì)將柵格寬度定義在1024px~1400px之間。

例如：常見的1024px、1200px、1280px、1400px等，可滿足絕大多數(shù)主流顯示器，如果柵格寬度超過1400px，在很多筆記本電腦上瀏覽頁面時(shí)，會(huì)出現(xiàn)左右滾動(dòng)條，體驗(yàn)非常不友好。

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

1）12柵格

12列柵格很常見，一些業(yè)務(wù)信息分組較少的商業(yè)網(wǎng)站、門戶網(wǎng)站等使用的就是12柵格，它能夠被2、3、4、6 整除，很容易滿足信息較為復(fù)雜的等分布局場景。

另外，針對不對稱布局的容器組合也能將信息體現(xiàn)的很和諧，如雙欄布局使用4+8、3+9柵格，三欄布局使用2+8+2、3+3+6 柵格等，變化較為靈活。

2）24柵格

24列柵格適合信息量大、分組多且多樣復(fù)雜的使用場景，很多視覺區(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ū)別對待即可。

3）5柵格

5列柵格一般用在移動(dòng)端設(shè)計(jì)中，因設(shè)備屏幕的橫向空間有限，所以很少使用，例如：針對“金剛區(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è)值沒有絕對的要求，這還需要根據(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)式

1）自適應(yīng)

自適應(yīng)布局是為了讓網(wǎng)頁內(nèi)容根據(jù)不同終端來自行適配布局，設(shè)計(jì)師需要制定好同一設(shè)計(jì)稿的變化規(guī)則，程序員在開發(fā)時(shí)創(chuàng)建多個(gè)布局，對不同的終端分別提供一套獨(dú)立的前端代碼，系統(tǒng)就能自行判斷當(dāng)前訪問的是PC端、平板還是手機(jī)。

我們可以做一個(gè)測試，對自適應(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ù)雜，只需保留必要的功能入口即可。

2）響應(yīng)式

響應(yīng)式?jīng)]有自適應(yīng)那么多的控制，前端只需通過一套代碼即可無縫銜接電腦端、平板和手機(jī)，可多端同步生效，其開發(fā)成本及設(shè)計(jì)成本都相對較低，適應(yīng)性更強(qiáng)。

響應(yīng)式布局最典型的就是當(dāng)頁面窗口寬度發(fā)生變化時(shí)，元素的大小隨時(shí)都在發(fā)生變化，特別是圖片的伸縮、整行文字的長短變化尤為明顯。

2. 柵格行為變化

1）固定柵格

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

2）流動(dòng)?xùn)鸥?/strong>