這是《后臺(tái)產(chǎn)品設(shè)計(jì)指南》系列文章的第8篇內(nèi)容，更多精彩可以點(diǎn)擊下方鏈接查看。
柵格系統(tǒng)的定義
柵格系統(tǒng)是用網(wǎng)格陣列來(lái)指導(dǎo)規(guī)范界面布局以及信息分布的技術(shù)，適用于pc端和移動(dòng)端。柵格能幫助設(shè)計(jì)師快速地進(jìn)行排版布局，讓頁(yè)面更有層次感，更合理；幫助開發(fā)實(shí)現(xiàn)響應(yīng)式布局，適配更多的設(shè)備，提高效率。
柵格的組成
柵格系統(tǒng)包括以下幾個(gè)要素：欄、水槽、邊距，這幾個(gè)要素加在一起就是頁(yè)面的寬度。
欄
pc端欄一般定為12列或者24列，移動(dòng)端一般定位6列、8列或者12列。欄數(shù)越多，可以組合的類型就越多，比如下圖中的例子。
水槽
水槽是相鄰欄之間的間距，可以讓頁(yè)面元素層級(jí)更明顯，不會(huì)顯得擁擠。
邊距
邊距是頁(yè)面兩側(cè)的留白，合理的邊距會(huì)讓頁(yè)面顯得更精致，自然。
網(wǎng)格原子寬度
后臺(tái)柵格的網(wǎng)格原子寬度一般選擇8作為原子寬度。這是因?yàn)橹髁髟O(shè)備的分辨率基本都可以被8整除；而且8在視覺(jué)上處于中間的位置，相比4、6、10、12這些更容易被感知。
GridGuide
這個(gè)在線的工具可以幫助我們快速生成柵格方案。用戶設(shè)置最大寬度、列數(shù)以及留白邊界就可生成柵格方案了。
其中留白邊界是以倍率為單位，分別為0，0.5，1.0，1.5，2.0的倍率，表示頁(yè)面左右的頁(yè)面留白，這個(gè)留白等于水槽寬度*倍率。下面的截圖是1240px下的柵格方案。
這個(gè)時(shí)候頁(yè)面寬度=欄寬*欄數(shù)+（欄數(shù)-1）*水槽寬。上圖中的第一張方案代入就是96*12+11*8=1240px
這個(gè)時(shí)候頁(yè)面寬度=欄寬*欄數(shù)+水槽寬*（欄數(shù)-1）+水槽寬*倍率*2。上圖中的第一張方案代入就是101*12+2*11+2*1.5*2=1240px
柵格系統(tǒng)的應(yīng)用
響應(yīng)式是指一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定的版本。后臺(tái)使用響應(yīng)式是為了充分利用屏幕空間，提高使用效率。
這個(gè)概念容易和自適應(yīng)混淆，自適應(yīng)是為不同的屏幕分辨率定義布局，單獨(dú)定制。前者是在不同設(shè)備上展示相同的內(nèi)容，布局可能不一樣，但代碼是同一套；后者顯示的內(nèi)容可能是不一樣的，需要多套代碼來(lái)實(shí)現(xiàn)。需要說(shuō)明的是，響應(yīng)式也是有局限性的，不適合在頁(yè)面內(nèi)容復(fù)雜交互多的頁(yè)面上上使用。
柵格系統(tǒng)的頁(yè)面布局有明顯的規(guī)律性、元素寬高可用百分比表示，可以實(shí)現(xiàn)多種頁(yè)面排版，這個(gè)特點(diǎn)與響應(yīng)式布局非常契合。所以在后臺(tái)系統(tǒng)中可以考慮引用響應(yīng)式設(shè)計(jì)，當(dāng)然這個(gè)不是必須的，因?yàn)閷?shí)現(xiàn)這個(gè)設(shè)計(jì)方案是需要一定的成本的。下面的兩張截圖能直觀地說(shuō)明后臺(tái)產(chǎn)品中結(jié)合柵格系統(tǒng)的響應(yīng)式布局應(yīng)用。
柵格系統(tǒng)在使用時(shí)不能生搬硬套，一定要活學(xué)活用。產(chǎn)品經(jīng)理雖然沒(méi)有直接使用的場(chǎng)景，但了解這個(gè)工作的原理和使用范圍也是很有必要的。
在寫作過(guò)程中，如果有意見(jiàn)或者想法，歡迎有興趣的讀者添加我的微信一起交流探索，共同進(jìn)步。
