編者按：本文適合對(duì)柵格系統(tǒng)不熟悉的新人閱讀，大量的配圖和深入淺出的闡述可以讓你快速理解什么是柵格系統(tǒng)。

馬小晴：我們都知道在平面設(shè)計(jì)里，運(yùn)用網(wǎng)格輔助設(shè)計(jì)，可以讓頁(yè)面富有統(tǒng)一的秩序感和韻律。在網(wǎng)頁(yè)設(shè)計(jì)里，我們也需要視覺(jué)表現(xiàn)出統(tǒng)一性和一致性，讓頁(yè)面更加專(zhuān)業(yè)和系統(tǒng)化;但同時(shí)，網(wǎng)頁(yè)設(shè)計(jì)相對(duì)于傳統(tǒng)平面設(shè)計(jì)也更強(qiáng)調(diào)動(dòng)態(tài)化、體系化的思考。柵格系統(tǒng)可以輔助我們制定網(wǎng)頁(yè)設(shè)計(jì)的規(guī)則，了解柵格的基本原理和前端應(yīng)用對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)就變得非常重要了。

[[250288]]

一、網(wǎng)頁(yè)端柵格系統(tǒng)的必要性

1. 專(zhuān)業(yè)

制定一套頁(yè)面的基礎(chǔ)規(guī)則，可以保持整體設(shè)計(jì)的一致性、專(zhuān)業(yè)性;避免無(wú)效的設(shè)計(jì)嘗試，專(zhuān)注于有意義的設(shè)計(jì)方向。

2. 高效

遵循柵格系統(tǒng)的設(shè)計(jì)細(xì)節(jié)，無(wú)論是元素、模塊或頁(yè)面，都有規(guī)律可循，減少設(shè)計(jì)決策的時(shí)間、減少外部的溝通損耗，提升工作效率。

3. 布局基礎(chǔ)

柵格系統(tǒng)的應(yīng)用，可以作為響應(yīng)式網(wǎng)頁(yè)布局的基礎(chǔ)。

二、柵格系統(tǒng)的基礎(chǔ)概念

• 網(wǎng)格(Gird)：柵格系統(tǒng)的最小原子單位
• 列、水槽(Column、Gutter)
• 柵格總寬(Container)
• 邊距(Margin)
• 盒子/區(qū)域(Col-n)

1. 網(wǎng)格：柵格系統(tǒng)的最小原子單位

柵格是由一系列規(guī)律的小網(wǎng)格組成的網(wǎng)格系統(tǒng)，網(wǎng)格構(gòu)成頁(yè)面的最小單位。通常，在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常使用8作為柵格的最小步進(jìn)單位，一些知名公司都以8為最小單位劃分網(wǎng)格，規(guī)范頁(yè)面秩序，比如：Ant Design、Matierial Design等。

編者注：設(shè)計(jì)規(guī)范官網(wǎng)匯總 → https://www.uisdc.com/design-specification-website

這樣做的好處有兩方面。

偶數(shù)思維：以8為基礎(chǔ)倍數(shù)，元素大小可以被大多數(shù)瀏覽器識(shí)別并整除，***程度避免出現(xiàn)半像素的情況。

規(guī)律性：所有元素以8像素為步進(jìn)單位，元素大小、間距有規(guī)律可循。

為什么不是6、10或者其他?

以8為步進(jìn)單位，進(jìn)度合適，既不顯得過(guò)于瑣碎，也不會(huì)因?yàn)殚g隔太大而顯得內(nèi)容分散;眾多開(kāi)源代碼都以8的倍數(shù)作為默認(rèn)設(shè)計(jì)大小;已被多次論證，8點(diǎn)柵格甚至已經(jīng)形成了一套理論。

凡事沒(méi)有絕對(duì)，如果做固定結(jié)構(gòu)的網(wǎng)頁(yè)布局，不考慮響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，也可以自行根據(jù)實(shí)際情況以偶數(shù)作為最小單位來(lái)設(shè)計(jì)網(wǎng)格。

為什么強(qiáng)烈推薦「8點(diǎn)柵格」→ 《讓設(shè)計(jì)更高效!正式為大家安利這個(gè)好用的「8點(diǎn)柵格」》

2. 列+槽(Column+Gutter)

• 列(Column)：列是柵格的數(shù)量單位，通常設(shè)定柵格數(shù)量說(shuō)的就是列的數(shù)量，比如12柵格就有12個(gè)列、24柵格就有24個(gè)列。通過(guò)設(shè)定列的內(nèi)邊距(padding)來(lái)定制槽(Gutter)的大小，剩余的部分稱(chēng)為欄。

槽(Gutter)：頁(yè)面內(nèi)容的間距，槽的數(shù)值越大，頁(yè)面留白越多，視覺(jué)效果越松散;反之，頁(yè)面越緊湊。槽通常設(shè)為定值。

• 3. 柵格寬度(Container)
• 柵格寬度(Container)：頁(yè)面柵格系統(tǒng)的總寬度。

4. 邊距(Margin)

• 邊距(Margin)：柵格外邊距，與屏寬保持一定的安全距離.
• 行：柵格系統(tǒng)的橫向網(wǎng)格，與縱向網(wǎng)格的列成垂直狀態(tài)，列和行交叉的區(qū)域形成頁(yè)面的內(nèi)容區(qū)，由于目前網(wǎng)頁(yè)多采用瀑布流形式，上下滑動(dòng)區(qū)域變得不受限制，隨意性很高，本文忽略這一部分。

這里需要注意的是：我們把柵格的列(Column)看做是欄+槽的寬度，12柵格即是指12列。有一些文章對(duì)欄和槽的理解是下方左圖的樣子，而從開(kāi)發(fā)角度來(lái)說(shuō)，下方右圖是前端理解的柵格。我們用柵格來(lái)制定頁(yè)面視覺(jué)規(guī)則，同時(shí)也要理解開(kāi)發(fā)怎樣實(shí)現(xiàn)柵格，才能在工作中減少不必要的溝通誤區(qū)。

5. 盒子/區(qū)域

建立好基礎(chǔ)柵格之后，一塊內(nèi)容通常會(huì)占用幾個(gè)欄和列的寬度，我們把這個(gè)區(qū)域理解為內(nèi)容盒子，用于承載一個(gè)區(qū)域的內(nèi)容。

以上，柵格的基礎(chǔ)概念已經(jīng)清楚了，那怎樣著手給自己的項(xiàng)目建立柵格系統(tǒng)呢?

三、怎么樣建立網(wǎng)頁(yè)柵格

1. 確定屏幕尺寸，確定安全范圍

當(dāng)我們開(kāi)始著手做一個(gè)項(xiàng)目時(shí)，首先應(yīng)考慮在多大的尺寸范圍內(nèi)做設(shè)計(jì)，也就是確定柵格區(qū)域的寬度范圍。

2. 確定關(guān)鍵數(shù)據(jù)：列的數(shù)量、水槽的寬度

常見(jiàn)的柵格系統(tǒng)通常被劃分為12柵格或24柵格。我們需要根據(jù)自己的項(xiàng)目確定柵格的劃分?jǐn)?shù)量，劃分的格子越多，承載的內(nèi)容越精細(xì)。通常，在信息繁雜的后臺(tái)系統(tǒng)常用24柵格，而一些商業(yè)網(wǎng)站、門(mén)戶(hù)網(wǎng)站通常劃分成12柵格。

柵格不是劃分的越細(xì)越好，24柵格精細(xì)，但也容易顯得瑣碎，內(nèi)容排布的規(guī)則太多，也就相當(dāng)于沒(méi)有規(guī)則。有的項(xiàng)目根據(jù)實(shí)際情況也會(huì)劃分成16柵格、20柵格，也是可以的。

△ 槽的數(shù)值越大，頁(yè)面留白越多

需要注意的是，槽的區(qū)域不可以放置內(nèi)容。通常，我們會(huì)給槽設(shè)定一個(gè)定值，用來(lái)確定欄的大小。

計(jì)算公式

我們假設(shè)內(nèi)容區(qū)寬度為W(Weight)，列寬為C(Column)，列數(shù)為n，槽為定寬G，可以得出：W=C*n。由于槽不可以放置內(nèi)容，可見(jiàn)內(nèi)容區(qū)為：W=C*n-G。

舉例：我們?yōu)橐粋€(gè)屏寬1440的項(xiàng)目劃分柵格，首先確定內(nèi)容區(qū)寬度為1440，24列，槽為定值16;那么可以得出列寬60，欄為48。

內(nèi)容區(qū)應(yīng)從水槽開(kāi)始到水槽結(jié)束：

附：sketch 柵格工具

目前，很多軟件提供自動(dòng)?xùn)鸥裨O(shè)置功能，sketch也提供這樣的功能：Layout Settings。

• Total Width：相當(dāng)于 Container，是內(nèi)容區(qū)的寬度。
• Offset：表示柵格的偏移量，表示柵格從哪里開(kāi)始。
• Number of Columns：表示柵格的數(shù)量。
• Gutter on outside：記得勾選。勾選以后柵格的設(shè)置才是跟前端的柵格算法匹配。
• Gutter Width：槽的值，通常是定值，控制頁(yè)面留白間隙。
• Column Width：列的值(欄+槽)，也就是柵格單個(gè)內(nèi)容區(qū)的寬度。