什么是柵格系統(tǒng)

　　柵格系統(tǒng)英文為 Grid Systems，也有翻譯為網(wǎng)格系統(tǒng)。

　　定義：運(yùn)用固定的格子，遵循一定的規(guī)則，進(jìn)行頁(yè)面的布局設(shè)計(jì)，使布局規(guī)范簡(jiǎn)潔有規(guī)則。

　　1. 柵格

　　柵格最早起源于平面設(shè)計(jì)。1692年法國(guó)為提高印刷水平，以方格為設(shè)計(jì)基礎(chǔ)，將一個(gè)印刷版面分成上千個(gè)小格，這就是最早的柵格雛形。再后來(lái)，慢慢演變成運(yùn)用固定的格子設(shè)計(jì)版面的平面設(shè)計(jì)風(fēng)格。

　　2. 網(wǎng)頁(yè)柵格

　　包括網(wǎng)頁(yè)端和移動(dòng)端，是以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)規(guī)范界面中的版面布局以及信息分布。

　　3. 為什么要使用柵格

　　通過(guò)柵格的使用，可以用邏輯解釋商業(yè)設(shè)計(jì)的細(xì)節(jié)問(wèn)題。

　　設(shè)計(jì)內(nèi)容都應(yīng)該有所依據(jù)，當(dāng)其他人質(zhì)疑時(shí)，可以系統(tǒng)有底氣的解釋設(shè)計(jì)內(nèi)容。設(shè)計(jì)師可以利用柵格讓畫(huà)面更有調(diào)性，讓內(nèi)容更具可讀性;可以快速校準(zhǔn)元素的位置，讓畫(huà)面更平衡;可以模塊化地管理元素，讓版面更有層次感。

　　4. 柵格基礎(chǔ)七要素

　　最小單位

　　需要先定好界面的單位基礎(chǔ)，后續(xù)內(nèi)容元素和布局規(guī)則都是基于它整數(shù)倍遞增。

　　網(wǎng)頁(yè)端最小單位：10。

　　移動(dòng)端最小單位：3、4、5。

　　總寬度/W

　　總寬度：對(duì)整體布局進(jìn)行規(guī)范，且還可以保證設(shè)計(jì)尺寸的統(tǒng)一性。

　　界面設(shè)計(jì)要有具體尺寸，由于內(nèi)容多少不確定，所以高度沒(méi)有辦法定死，但內(nèi)容區(qū)的寬度是可以定的。

　　列數(shù)/N

　　列數(shù)是界面總寬度設(shè)定好后，縱向等分成幾列。

　　· 網(wǎng)頁(yè)端：12列、24列(常用等分列數(shù)，當(dāng)然不是固定的，需要根據(jù)自己的內(nèi)容設(shè)定列數(shù))。

　　· 移動(dòng)端：6列(常用等分列數(shù))。

　　大列寬/L

　　把界面總寬度等分成幾列，每一列的寬度即為大列寬。

　　· 計(jì)算公式：L = W / N。

　　· 大列寬包含：列寬和水槽。

　　水槽/G

　　相鄰兩個(gè)列寬之間的間隔是水槽。

　　水槽寬度越大，頁(yè)面留白和呼吸感會(huì)更好，反之則更緊湊。水槽可以將內(nèi)容更規(guī)范的區(qū)分開(kāi)來(lái)。

　　列寬/C

　　把界面總寬度等分成列，相鄰兩列之間的間隔(水槽)減去后就是列寬。

　　安全邊距/M

　　界面左右能保證可讀性和美觀度的、合適的空隙就是安全邊距。

　　Sketch 里設(shè)置水槽后，安全邊距是水槽的0.5倍。

　　計(jì)算公式：M = G / 2。

　　5. 安全邊距

　　除了使用水槽的0.5倍，還可以使用0、0.5、1.0、1.5、2.0等水槽的倍數(shù)。舉例：水槽是20，使用0.5倍，安全邊距為10;水槽是20，使用2.0倍，安全邊距為40。

　　柵格是輔助頁(yè)面布局的，所以需要根據(jù)實(shí)際內(nèi)容靈活的使用柵格，而不要被柵格所束縛。

　　6. 各種公式匯總

　　N 是自定義設(shè)置的列數(shù)。

　　小結(jié)

　　在 Sketch 里設(shè)置柵格，定義好3個(gè)數(shù)值即可，總寬度、列數(shù)和水槽，這三個(gè)內(nèi)容定義好數(shù)值后，其他內(nèi)容就會(huì)自動(dòng)計(jì)算，一個(gè)柵格就生成了。

　　主流網(wǎng)站如何使用柵格系統(tǒng)

　　1. 電商網(wǎng)站

　　一起看一下兩個(gè)主流電商如何使用柵格布局頁(yè)面，進(jìn)一步了解柵格系統(tǒng)的使用。

　　△ 左淘寶、右京東

　　2. 淘寶布局

　　下圖包含：完整內(nèi)容展示布局、瀏覽器縮小時(shí)內(nèi)容展示布局。

　　淘寶布局分為4列內(nèi)容：1、2、3、4，在瀏覽器縮小的情況下，內(nèi)容3被隱藏。

　　柵格布局

　　· 完整內(nèi)容展示布局：網(wǎng)頁(yè)總寬度為1200，列數(shù)為24，水槽為10;

　　· 瀏覽器縮小時(shí)內(nèi)容展示布局：總寬度為990，列數(shù)為20，水槽為10。

　　在瀏覽器縮小時(shí)的柵格布局里，隱藏4列，內(nèi)容2寬度變窄占10列，其他內(nèi)容不變。

　　柵格布局設(shè)定后，可以很方便計(jì)算出每個(gè)模塊內(nèi)容的寬度。

　　柵格的列數(shù)，根據(jù)具體內(nèi)容設(shè)定。內(nèi)容模塊較多，建議等分列數(shù)多一些，容易布局;如果內(nèi)容模塊較少，等分列數(shù)也可以少一些，就像淘寶可以等分成24列，也可以等分成12列。

　　柵格布局設(shè)定為12列，每個(gè)模塊內(nèi)容的寬度和上面等分成24列的寬一樣。

　　2. 京東布局

　　下圖包含：完整內(nèi)容展示布局、瀏覽器縮小時(shí)內(nèi)容展示布局。

　　京東布局和淘寶布局一樣分為4列內(nèi)容：1、2、3、4，在瀏覽器縮小的情況下，內(nèi)容3被隱藏。

　　柵格布局

　　· 完整內(nèi)容展示布局：網(wǎng)頁(yè)總寬度為1200，列數(shù)為24，水槽為10;

　　· 瀏覽器縮小時(shí)內(nèi)容展示布局：總寬度為990，列數(shù)為20，水槽為10。

　　在瀏覽器縮小時(shí)的柵格布局里，隱藏4列，其他內(nèi)容不變。

　　京東柵格布局，每個(gè)模塊內(nèi)容的寬度如下圖。

　　再來(lái)強(qiáng)調(diào)一下：柵格的列數(shù)，根據(jù)具體內(nèi)容設(shè)定。京東網(wǎng)頁(yè)等分成24列，也可以等分成12列。

　　柵格布局設(shè)定為12列，每個(gè)模塊內(nèi)容的寬度和上面等分成24列的寬一樣。

　　總結(jié)：如何用柵格系統(tǒng)布局頁(yè)面

　　第一步：確定頁(yè)面寬度，比如1920、1800、1600、1366、1280等等。

　　第二步：分析內(nèi)容等分的復(fù)雜度，如果內(nèi)容簡(jiǎn)單只需要3、4等分，12列的柵格系統(tǒng)即可。如果有較多不等分的可能，建議采用24列的柵格系統(tǒng)，可靈活設(shè)置。

　　第三步：根據(jù)內(nèi)容布局頁(yè)面，確定模塊之間是否有「間隔」，間隔尺寸是多少，6px、8px、10px、12px和20px選一個(gè)方便計(jì)算、方便記憶和整除的數(shù)值即可。

　　就像過(guò)去，開(kāi)發(fā)人員發(fā)現(xiàn)960px是最適合作為網(wǎng)格布局的寬度，因?yàn)?60可以整除3，4，5，6，8，10，12，15，是不是突然發(fā)現(xiàn)設(shè)計(jì)其實(shí)是一道數(shù)學(xué)題。