柵格系統(tǒng)在頁面排版布局、尺寸設(shè)定方面給了設(shè)計(jì)者直觀的參考，它讓頁面設(shè)計(jì)變得有規(guī)律，從而減少了設(shè)計(jì)決策成本；提高了頁面布局的一致性跟復(fù)用性。本文主要圍繞什么是柵格系統(tǒng)，如何搭建柵格系統(tǒng)，柵格系統(tǒng)的應(yīng)用 三個(gè)部分進(jìn)行闡述，在項(xiàng)目中提前定義好柵格系統(tǒng)將有助于協(xié)作的設(shè)計(jì)師輸出元素間距高度統(tǒng)一的頁面，希望對正在了解柵格知識的你有幫助?。?！

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

1.1 網(wǎng)格單位

柵格是由一系列規(guī)律的小網(wǎng)格組成的網(wǎng)格系統(tǒng)，網(wǎng)格構(gòu)成頁面的最小單位。在網(wǎng)頁設(shè)計(jì)中經(jīng)常將網(wǎng)格的大小定義為8，不僅符合偶數(shù)的思路同時(shí)能夠匹配多數(shù)主流的顯示設(shè)備，目前前端開源組件庫也多基于8的原子單位來設(shè)計(jì)。

1.2 列+槽（ Column+Gutter ）

柵格系統(tǒng)是由列（Column）跟槽（Gutter）交替分布形成的，列（Column）是柵格的數(shù)量單位，通常設(shè)定柵格數(shù)量說的就是列的數(shù)量，比如12柵格就有12個(gè)列、24柵格就有24個(gè)列。槽（Gutter）頁面內(nèi)容的間距，槽的數(shù)值越大，頁面留白越多，視覺效果越松散；反之，頁面越緊湊。槽通常設(shè)為定值。

1.3 盒子/區(qū)域

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

2. 如何搭建柵格系統(tǒng)

2.1 確定柵格區(qū)域的寬度

以《「交互規(guī)范」框架布局讓頁面模塊更統(tǒng)一》 全局控制層布局中 “全屏”為例，柵格的區(qū)域的寬度 = 響應(yīng)式區(qū)域 – 頁邊距*2。

以《「交互規(guī)范」框架布局讓頁面模塊更統(tǒng)一》 全局控制層布局中“固定寬度”為例，柵格的區(qū)域的寬度 = 響應(yīng)式區(qū)域。

2.2 確定列的數(shù)量、槽的寬度

常見的柵格系統(tǒng)通常被劃分為12柵格或24柵格。槽的區(qū)域不可以放置內(nèi)容，我們會給槽設(shè)定一個(gè)定值，用來確定欄的大小。

計(jì)算公式： 柵格區(qū)域?qū)挾?= n*(列寬的度+槽的寬度) – 槽的寬度。

柵格化工具推薦： GridGuide

12柵格系統(tǒng)：

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

24柵格系統(tǒng)：

24柵格系統(tǒng)適用于業(yè)務(wù)信息量大、信息分組較多、單個(gè)盒子內(nèi)信息體積較小的中后臺頁面設(shè)計(jì)。相對12柵格系統(tǒng)，24柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場景。

3. 柵格系統(tǒng)的應(yīng)用

3.1 橫向劃分

以12柵格系統(tǒng)為例，根據(jù)業(yè)務(wù)場景可以很容易的將柵格區(qū)域劃分成2等分、3等分、4等分、6等分，以及根據(jù)等分模塊組合的多種不等分場景。

以查詢頁為例，“篩選區(qū)域” 按3等分劃分，“數(shù)據(jù)統(tǒng)計(jì)” 按3等分劃分，“數(shù)據(jù)列表” 按1等分劃分。

3.2 縱向劃分

縱向劃分以8為基礎(chǔ)間距，通過 8px（小號間距）、16px（中號間距）、24px（大號間距）這三種規(guī)格來劃分信息層次。

在這三種規(guī)格不適用的情況下，可以通過加減「基礎(chǔ)間距」的倍數(shù)，或者增加元素 ( 分割線 ) 來拉開信息層次。計(jì)算公式：y = 8 + 8 * n ( n >= 0，y 是縱向間距)。

「總結(jié)」

在一個(gè)項(xiàng)目中，涉及到多個(gè)設(shè)計(jì)師協(xié)同完成項(xiàng)目，由于每個(gè)設(shè)計(jì)師的使用的畫板不一定相同，建議 “統(tǒng)一畫板” 尺寸1440，根據(jù)框架中”全局控制層”、”內(nèi)容層”、”臨時(shí)層”各層布局進(jìn)一步確定項(xiàng)目全局的布局，讓參與的設(shè)計(jì)師有了統(tǒng)一的頁面布局基礎(chǔ)，在根據(jù)不同的業(yè)務(wù)場景完成設(shè)計(jì)，最終不同設(shè)計(jì)師產(chǎn)出的設(shè)計(jì)在布局上將會高度統(tǒng)一。

如果你正在設(shè)計(jì) 0-1 項(xiàng)目的，希望布局三部曲《框架布局》、《柵格系統(tǒng)》、《響應(yīng)式》對你有所幫助?。。?/p>

本文由 @前行的大熊 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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