一(yi)、柵(zha)格系(xi)統(tong)的(de)目(mu)的(de)柵(zha)格系(xi)統(tong)在(zai)頁(ye)面(mian)排版布局、尺寸(cun)設(she)(she)(she)(she)定方面(mian)給了(le)(le)(le)(le)設(she)(she)(she)(she)計(ji)(ji)(ji)(ji)(ji)者(zhe)直(zhi)觀的(de)參考，它讓頁(ye)面(mian)設(she)(she)(she)(she)計(ji)(ji)(ji)(ji)(ji)變得有規律，從而(er)減少了(le)(le)(le)(le)設(she)(she)(she)(she)計(ji)(ji)(ji)(ji)(ji)決策成本；柵(zha)格化(hua)提高了(le)(le)(le)(le)頁(ye)面(mian)布局的(de)一(yi)致性跟(gen)復用性；避免了(le)(le)(le)(le)設(she)(she)(she)(she)計(ji)(ji)(ji)(ji)(ji)師與開發者(zhe)在(zai)細節(jie)上的(de)反(fan)復溝通確認，從而(er)提升了(le)(le)(le)(le)整個設(she)(she)(she)(she)計(ji)(ji)(ji)(ji)(ji)開發流程的(de)效率，并(bing)能(neng)幫助(zhu)開發者(zhe)實現(xian)較為理想的(de)設(she)(she)(she)(she)計(ji)(ji)(ji)(ji)(ji)還原。

但(dan)實(shi)際(ji)應用中，由于對(dui)柵(zha)(zha)格(ge)(ge)系(xi)(xi)統(tong)理解的(de)(de)(de)不充(chong)分，很多設(she)(she)計(ji)(ji)(ji)師(shi)在(zai)(zai)應用柵(zha)(zha)格(ge)(ge)系(xi)(xi)統(tong)的(de)(de)(de)實(shi)踐中產(chan)生了(le)各種問題，本來幫助設(she)(she)計(ji)(ji)(ji)的(de)(de)(de)工具現在(zai)(zai)反而成了(le)設(she)(she)計(ji)(ji)(ji)中需要解決的(de)(de)(de)問題。結合我(wo)自己后臺(tai)設(she)(she)計(ji)(ji)(ji)的(de)(de)(de)經驗，本篇文章(zhang)跟大(da)家聊聊柵(zha)(zha)格(ge)(ge)系(xi)(xi)統(tong)在(zai)(zai)后臺(tai)設(she)(she)計(ji)(ji)(ji)中如何應用。二、建(jian)立柵(zha)(zha)格(ge)(ge)系(xi)(xi)統(tong)的(de)(de)(de)方(fang)法(fa)與(yu)規則(ze)1. 確立柵(zha)(zha)格(ge)(ge)系(xi)(xi)統(tong)的(de)(de)(de)原(yuan)子單位（網(wang)格(ge)(ge)）如圖，一(yi)個比較(jiao)完整的(de)(de)(de)柵(zha)(zha)格(ge)(ge)系(xi)(xi)統(tong)是由許多規格(ge)(ge)一(yi)致的(de)(de)(de)小網(wang)格(ge)(ge)組(zu)成，這些網(wang)格(ge)(ge)輔助我(wo)們更規范的(de)(de)(de)排版、布局。

后(hou)臺(tai)系統設計(ji)中(zhong)，由于(yu)后(hou)臺(tai)頁(ye)面主要(yao)以(yi)(yi) Web 形式呈現，而對于(yu) web，用(yong)(yong)戶已習慣通過鼠(shu)標(biao)滾輪(lun)或滾動條(tiao)（scrollbar）來(lai)縱(zong)向瀏覽頁(ye)面內容(rong)，因(yin)此，在(zai)(zai)不考慮內容(rong)優先(xian)級的(de)情況下(xia)，Web 可(ke)以(yi)(yi)實現豎(shu)直方(fang)向的(de)「無(wu)限」加(jia)載，即豎(shu)直方(fang)向可(ke)以(yi)(yi)無(wu)限延伸，因(yin)此基于(yu) Web 的(de)后(hou)臺(tai)頁(ye)面，它的(de)柵(zha)格系統在(zai)(zai)水(shui)平方(fang)向的(de)柵(zha)格可(ke)以(yi)(yi)不體現出來(lai)，我們在(zai)(zai)執行設計(ji)時只要(yao)在(zai)(zai)豎(shu)直方(fang)向保持規律的(de)變化就可(ke)以(yi)(yi)了。標(biao)準的(de)柵(zha)格系統簡化為適用(yong)(yong)于(yu) Web 后(hou)臺(tai)的(de)設計(ji)如(ru)下(xia)圖所示(shi)。

對于后臺設計來講，柵(zha)格系統(tong)(tong)是(shi)由欄目（Column）跟(gen)水(shui)槽(cao)（Gutter）交替分(fen)布形成的(de)(de)，欄目（Column）是(shi)接(jie)納網頁(ye)內容(rong)的(de)(de)容(rong)器，水(shui)槽(cao)（Gutter）用來調節(jie)相鄰兩(liang)個(ge)欄目間(jian)距，把控頁(ye)面留白；由于欄目跟(gen)水(shui)槽(cao)的(de)(de)寬度是(shi)以網格作為(wei)基本單(dan)(dan)位來增加(jia)或(huo)者減(jian)小(xiao)(xiao)，所以柵(zha)格化的(de)(de)第一步需要先定義好柵(zha)格的(de)(de)原子(zi)單(dan)(dan)位「網格」的(de)(de)大小(xiao)(xiao)。根據(ju)本人(ren)的(de)(de)設計實(shi)踐以及其它已有(you)規范經驗(yan)，目前后臺柵(zha)格系統(tong)(tong)網格大小(xiao)(xiao)定義為(wei) 8 是(shi)最(zui)普適易(yi)用的(de)(de)。具體原因有(you)以下幾(ji)點(dian)：

可以被 8 整(zheng)除

目前主流桌面設備的屏幕分辨率(lv)在豎直與水平方向基本都可以被 8 整(zheng)除，使用 8 作為最小原子足夠普適。

我們選(xuan)(xuan)取4、6、8、10、 12 為柵(zha)格的候選(xuan)(xuan)原子單位，然后用目前(qian)主流(liu)屏幕分(fen)辨(bian)率(lv)與其相(xiang)除(chu)，判斷各(ge)個分(fen)辨(bian)率(lv)在豎直（Y）與水平（X）方向能否(fou)被候選(xuan)(xuan)原子整除(chu)。

顯(xian)然，對于目(mu)(mu)前市場桌(zhuo)面設備屏幕(mu)而言， 4 是(shi)(shi)整(zheng)(zheng)除率最高(gao)(gao)的(de)(de)一個(ge)原(yuan)(yuan)子，接下來依次是(shi)(shi)8、10、6、12。但 4 作(zuo)為基(ji)本原(yuan)(yuan)子實在(zai)過于小了，太小的(de)(de)步進(jin)單位將(jiang)導致(zhi)我們決策成(cheng)本的(de)(de)增加，因(yin)(yin)(yin)為我們將(jiang)元素間(jian)(jian)距增加4px或(huo)者減(jian)小4px視(shi)(shi)覺感(gan)受到(dao)的(de)(de)差異并不明顯(xian)，這(zhe)種情況下我們為了找到(dao)那個(ge)「合適(shi)(shi)、滿意」的(de)(de)間(jian)(jian)距，就需要反復(fu)調(diao)試，這(zhe)就造成(cheng)了時(shi)間(jian)(jian)上(shang)的(de)(de)浪費，尤其對于沒有經驗的(de)(de)新人，這(zhe)點(dian)會更為突出。但這(zhe)種調(diao)整(zheng)(zheng)并不合適(shi)(shi)，原(yuan)(yuan)因(yin)(yin)(yin)是(shi)(shi)后臺管理(li)系(xi)統(tong)設計(ji)重點(dian)在(zai)于面向用(yong)戶使用(yong)的(de)(de)效率與(yu)邏(luo)輯，其次才是(shi)(shi)視(shi)(shi)覺呈現，使用(yong)柵格系(xi)統(tong)的(de)(de)目(mu)(mu)的(de)(de)之一也(ye)是(shi)(shi)想減(jian)少設計(ji)師在(zai)「細節」上(shang)的(de)(de)糾結，希望設計(ji)師站在(zai)更全局(ju)的(de)(de)角度看待設計(ji)，合理(li)安排(pai)時(shi)間(jian)(jian)，因(yin)(yin)(yin)此我們舍棄4。在(zai)剩(sheng)下的(de)(de)6、8、10、 12 四個(ge)單位中(zhong)， 8 的(de)(de)整(zheng)(zheng)除率最高(gao)(gao)（80%），以 8 像素作(zuo)為一個(ge)步進(jin)單位的(de)(de)變化，我們視(shi)(shi)覺上(shang)也(ye)是(shi)(shi)能感(gan)受到(dao)較為明顯(xian)的(de)(de)差異，因(yin)(yin)(yin)此選取整(zheng)(zheng)除率最高(gao)(gao)的(de)(de) 8 做為柵格系(xi)統(tong)的(de)(de)原(yuan)(yuan)子單位。

符合「偶數原(yuan)(yuan)則(ze)」以 8 為單位(wei)符合「偶數原(yuan)(yuan)則(ze)」。偶數原(yuan)(yuan)則(ze)可以在(zai)頁(ye)面縮放中最大程度的避免類(lei)似(si)于0.5、0.75、1. 25 等次像素(su)的出現(xian)，從而使(shi)頁(ye)面各類(lei)元素(su)在(zai)大多數場(chang)景下都能有比(bi)較精致的細節表現(xian)。

雖然對于后臺設計而言，通常設計師是直接在目標尺(chi)寸(cun)下進行設計，并在此基礎上標注、切圖給(gei)開發(fa)實現，并不存(cun)在像(xiang)移動(dong)端那樣需要對各(ge)種尺(chi)寸(cun)、各(ge)種像(xiang)素(su)密(mi)度的設備(bei)進行適(shi)配的情況，但對于 Web 頁(ye)面(mian)來講，仍(reng)存(cun)在向(xiang)上向(xiang)下適(shi)配的可(ke)能，因而從頁(ye)面(mian)的兼容性、可(ke)擴展性及可(ke)維護性層面(mian)來講，我們設計師還(huan)是有必要考慮的更加長遠，遵(zun)循「偶數(shu)原則」可(ke)以最大程度上避免各(ge)種潛在的問題。

前端開源組件庫(ku)基(ji)于 8 的原子(zi)單位來設計(ji)

開發(fa)工程師使用的(de)前端開源(yuan)組件庫比(bi)如(ru) Metronic、Antdesign 等也是(shi)基(ji)于 8 的(de)原子單位來設計(ji)，因此如(ru)果(guo)設計(ji)師也使用以 8 為(wei)基(ji)本單位的(de)柵(zha)格系統(tong)，開發(fa)與設計(ji)師相(xiang)互對接(jie)就會更加方便，開發(fa)實現(xian)頁面時也能更高(gao)品質的(de)去(qu)還(huan)原我(wo)們設計(ji)師的(de)稿件。

2. 建(jian)立基于原子(zi)(zi)單位(wei)的(de)(de)柵(zha)格系(xi)統(tong)經過第一步討論，我們現(xian)已確定(ding)(ding)后臺(tai)設計的(de)(de)原子(zi)(zi)單位(wei)為8，而我們也知道柵(zha)格系(xi)統(tong)是由欄(lan)目（Column）跟(gen)水(shui)槽（Gutter）交替分布形成(cheng)的(de)(de)，所以接(jie)下來我們要利(li)用原子(zi)(zi)單位(wei)確定(ding)(ding)欄(lan)目跟(gen)水(shui)槽在(zai)具體(ti)的(de)(de)頁面中(zhong)如何分布以及它們各自的(de)(de)寬度。

通常，在一套后臺設計(ji)系統(tong)中，水槽(cao)寬度(du)會是幾個比(bi)較固定的(de)數值(zhi)（因為后臺系統(tong)的(de)頁(ye)面(mian)相對于其它類(lei)型的(de)Web頁(ye)面(mian)，表現的(de)更(geng)加(jia)整齊、規(gui)律，所(suo)以(yi)留(liu)白(bai)的(de)方式比(bi)較固定，加(jia)之(zhi)后臺往往有大量的(de)數據、內(nei)容需要(yao)呈現，所(suo)以(yi)要(yao)盡可(ke)能提高(gao)頁(ye)面(mian)利(li)用(yong)率(lv)，可(ke)以(yi)留(liu)白(bai)的(de)空(kong)間也比(bi)較有限）；而(er)欄目寬度(du)更(geng)加(jia)靈(ling)活，它可(ke)以(yi)根據頁(ye)面(mian)水平方向尺寸的(de)改變而(er)增(zeng)大或減小(xiao)以(yi)響應(ying)頁(ye)面(mian)的(de)變化。

當我們做(zuo)后臺設(she)計(ji)(ji)(ji)的時(shi)候首先需要(yao)確(que)定在(zai)什么樣的分辨率下做(zuo)設(she)計(ji)(ji)(ji)，也(ye)就是(shi)首先需要(yao)確(que)定設(she)計(ji)(ji)(ji)稿的尺寸(cun)(cun)，當設(she)計(ji)(ji)(ji)稿尺寸(cun)(cun)確(que)定后，便(bian)可建立(li)基于(yu)該尺寸(cun)(cun)的柵格系統。假設(she)頁面內容區域寬度為

W，欄目個數(shu)為 A，水(shui)槽個數(shu)為 B，欄目（Column）寬度(du)為 C，水(shui)槽（Gutter）寬度(du)為 G，則(ze)

W=A*C+B*G。柵(zha)格系統建立初期，由于我們(men)(men)(men)并不確定之后(hou)(hou)會有什么樣(yang)的(de)(de)內容(rong)呈現(xian)我們(men)(men)(men)的(de)(de)頁面(mian)上，所以為(wei)了讓柵(zha)格更加靈(ling)活、普(pu)適，我們(men)(men)(men)先假(jia)定單個欄目(mu)與水(shui)槽的(de)(de)寬(kuan)度是相同的(de)(de)，即C=8n（n=1、2、3、4…）=G，然后(hou)(hou)以此將(jiang)頁面(mian)內容(rong)區域(yu)等分(fen)(fen)，形(xing)成(cheng)初步的(de)(de)柵(zha)格，之后(hou)(hou)再按實際(ji)內容(rong)需(xu)要，按比例(li)調整兩(liang)者寬(kuan)度或者按比例(li)對兩(liang)者進行組合，形(xing)成(cheng)承載業務內容(rong)的(de)(de)盒子(zi)。目(mu)前有兩(liang)種(zhong)比較主流的(de)(de)等分(fen)(fen)方式：

12 等分(fen)與 24 等分(fen)。

12 等分

12 等分(fen)的柵格系(xi)統在(zai)流行的前端開發開源工具庫 Bootstrap 與 Foundation 中廣泛使用，適用于業務信(xin)息分(fen)組較(jiao)少，單個(ge)盒(he)子內(nei)信(xin)息體(ti)積較(jiao)大的中后臺(tai)頁(ye)面設計。

24 等分

24 等分的(de)柵(zha)格系(xi)統(tong)適用于業務信(xin)(xin)息(xi)(xi)量大、信(xin)(xin)息(xi)(xi)分組較(jiao)多、單(dan)個(ge)盒子內信(xin)(xin)息(xi)(xi)體積較(jiao)小的(de)中后臺頁面設計；相對 12 柵(zha)格系(xi)統(tong)， 24 柵(zha)格系(xi)統(tong)變(bian)化更(geng)加(jia)靈(ling)活，更(geng)適合內容比較(jiao)多樣復雜的(de)場(chang)景。

三(san)、柵格系統的(de)應(ying)用1. 頁面布(bu)局與版式設計了解承(cheng)載業務內容的(de)盒子(zi)模型（Box Model）

建立好柵(zha)格(ge)系(xi)(xi)統后，就可以根據自己的(de)實際業(ye)務，在(zai)柵(zha)格(ge)系(xi)(xi)統上安排內容了。頁(ye)面上最終承(cheng)載內容的(de)其實是一個個「盒子(zi)(zi)（Box）」，這個盒子(zi)(zi)的(de)高度由(you)盒子(zi)(zi)要容納(na)的(de)內容與頁(ye)面版式(shi)設(she)計(ji)決定，按(an)8n規律變(bian)化(hua)；寬度則由(you)欄目與水槽按(an)比例組合得到。

在柵(zha)格系統上容(rong)納(na)業務內容(rong)的容(rong)器(qi)我們(men)把(ba)它稱之(zhi)為盒(he)子(zi)（Box），柵(zha)格系統上的盒(he)子(zi)其實跟前端工程師寫頁(ye)面(mian)時用到的盒(he)子(zi)是一致的。如(ru)圖所示，當我們(men)瀏覽任何一個網(wang)頁(ye)時，右(you)鍵>檢查元(yuan)素（審查元(yuan)素），然后在

style 菜(cai)單下就可以看到這個盒子結(jie)構了(le)。其中 Padding

就是主體內容（Element）距離盒子外側的距離，我把它稱之為(wei)內邊距，（Element 可以是一(yi)(yi)個(ge)按鈕，一(yi)(yi)段文(wen)本、一(yi)(yi)張圖片或者一(yi)(yi)個(ge)表格等）而(er)

Margin

就(jiu)是(shi)相鄰兩個盒子間的(de)距(ju)離，對應(ying)在后臺(tai)柵格系統中其實就(jiu)是(shi)水槽的(de)大小。了解完(wan)柵格系統的(de)盒子模型(xing)之后，下一步我(wo)們需要(yao)根據具體業務內容(rong)來(lai)確定盒子的(de)寬度，也就(jiu)是(shi)如(ru)何利用(yong)柵格系統做實際(ji)內容(rong)的(de)布局與版式設(she)計(ji)。

根據業務內容分(fen)配頁面比(bi)例(li)，確定盒子寬(kuan)度以24 柵(zha)格系統(tong)(tong)為(wei)例(li)，一個 24 柵(zha)格系統(tong)(tong)可以根據業務需(xu)要(yao)(yao)被 2 等(deng)分(fen)、 3 等(deng)分(fen)、 4 等(deng)分(fen)、 6 等(deng)分(fen)、 8 等(deng)分(fen)、 12等(deng)分(fen)，還可以被1：1：1、1：2：1、1：3：2、2：3：3、1：2、1：3、1：5、3： 5等(deng)不對稱分(fen)割，具體采用哪(na)種比(bi)例(li)的組(zu)合需(xu)要(yao)(yao)我們根據自己(ji)業務需(xu)求來定，我們此處所說(shuo)的比(bi)例(li)實際(ji)上就是盒子的寬(kuan)度。

24柵(zha)格(ge)系統上的分(fen)布情(qing)況，圖中(zhong)只列舉(ju)了(le)部分(fen)比例，實(shi)際業務中(zhong)，同(tong)一(yi)(yi)個頁(ye)面(mian)上使用一(yi)(yi)到兩(liang)組(zu)比例值的組(zu)合來布局是比較合適的（如下圖），組(zu)合形(xing)式(shi)過多頁(ye)面(mian)就(jiu)會顯(xian)得瑣(suo)碎、雜亂，不利(li)于閱(yue)讀和使用。因為(wei)盒子的高(gao)度(du)(du)根據內容來定，故(gu)下圖中(zhong)沒有體現高(gao)度(du)(du)這一(yi)(yi)維度(du)(du)的變化規(gui)律。

當(dang)我們完(wan)成上圖規(gui)劃后，需要做(zuo)的(de)(de)(de)便(bian)是根據(ju)實際內(nei)容往每(mei)個盒子里安排內(nei)容，做(zuo)視覺與交互的(de)(de)(de)落地(di)了。2. 元素對齊與間距(ju)設(she)(she)定柵格系統大的(de)(de)(de)層面(mian)可(ke)以幫助設(she)(she)計(ji)(ji)者更好的(de)(de)(de)進行版(ban)式設(she)(she)計(ji)(ji)與內(nei)容布(bu)局(ju)，而小的(de)(de)(de)方面(mian)可(ke)以輔(fu)助設(she)(she)計(ji)(ji)師規(gui)范頁面(mian)內(nei)各種元素的(de)(de)(de)對齊與間距(ju)的(de)(de)(de)設(she)(she)定。從用戶體驗角度來講，這兩(liang)者同等重(zhong)要，從執行層面(mian)來講，我們一般先(xian)做(zuo)版(ban)式設(she)(she)計(ji)(ji)與布(bu)局(ju)，然后再(zai)填充內(nei)容、調整細節。

柵格系統(tong)輔助對(dui)齊的(de)(de)作用類似于各種設計軟件中的(de)(de)參考線，它能讓我們更(geng)直觀的(de)(de)安排、調整內容的(de)(de)位置(zhi)及對(dui)齊方(fang)式，可以使內容變得規律(lv)、有序，方(fang)便(bian)用戶(hu)瀏覽閱(yue)讀，幫(bang)助用戶(hu)提高獲(huo)取信息的(de)(de)效(xiao)率。

柵(zha)格系統對于(yu)元素(su)(su)間(jian)距設(she)定(ding)(ding)的(de)(de)(de)(de)幫助是直觀的(de)(de)(de)(de)，當我(wo)們定(ding)(ding)義了柵(zha)格原子單位為(wei)(wei)8 時，這(zhe)意味頁(ye)面上各元素(su)(su)間(jian)距的(de)(de)(de)(de)變化(hua)也(ye)應遵循(xun)8n的(de)(de)(de)(de)規(gui)律，一(yi)致(zhi)的(de)(de)(de)(de)變化(hua)規(gui)律讓頁(ye)面富有(you)節奏感(gan)跟(gen)韻律感(gan)，在提高(gao)頁(ye)面一(yi)致(zhi)性的(de)(de)(de)(de)同時也(ye)減少了設(she)計(ji)決(jue)策成本。我(wo)們知道，柵(zha)格系統中水槽與(yu)欄目(mu)的(de)(de)(de)(de)變化(hua)也(ye)遵循(xun)8n的(de)(de)(de)(de)變化(hua)規(gui)律，此處 n 為(wei)(wei)大于(yu) 0 的(de)(de)(de)(de)正整數，即 n=1、2、3……但是用于(yu)規(gui)范(fan)元素(su)(su)間(jian)距的(de)(de)(de)(de)8n，n 可以是0.5、1. 5 這(zhe)類包含(han)二分之一(yi) 8的(de)(de)(de)(de)情(qing)(qing)況(kuang)，原因(yin)是實際工(gong)作中，我(wo)們面臨的(de)(de)(de)(de)情(qing)(qing)況(kuang)是復雜的(de)(de)(de)(de)，這(zhe)樣(yang)處理可以讓間(jian)距的(de)(de)(de)(de)設(she)定(ding)(ding)適(shi)(shi)應一(yi)些特殊的(de)(de)(de)(de)場景(jing)，從而使其更靈活普適(shi)(shi)。

四、注意事(shi)項1. 水槽寬(kuan)度的(de)設定確(que)定好內(nei)容模塊比(bi)例后，我們(men)會發現由(you)于之(zhi)前等分的(de)緣故(gu)，此時水槽較寬(kuan)，我們(men)需要調整水槽寬(kuan)度到(dao)一個合適的(de)值(zhi)。

水(shui)(shui)槽(cao)的(de)(de)寬度(du)是8n，也(ye)就是水(shui)(shui)槽(cao)可以以 8 為(wei)基本單位去增加(jia)或減(jian)小。為(wei)了減(jian)少設計決策成本，我們會事先設定(ding)好一系(xi)列水(shui)(shui)槽(cao)寬度(du)，并(bing)定(ding)義(yi)好每(mei)個(ge)(ge)寬度(du)對(dui)應的(de)(de)使用場(chang)景(jing)(jing)，然后根據每(mei)個(ge)(ge)場(chang)景(jing)(jing)使用對(dui)應數值就可以了。我定(ding)義(yi)了一組水(shui)(shui)槽(cao)的(de)(de)值是8、16、 24、32 、40，為(wei)了區分(fen)它們的(de)(de)使用場(chang)景(jing)(jing)我們依次為(wei)其命名為(wei) XS、SM、MD、LG、XL。根據實(shi)踐經驗，正常情況下，兩個(ge)(ge)盒子(zi)間距（水(shui)(shui)槽(cao)）的(de)(de)值為(wei)24（MD）時，視覺上是最(zui)為(wei)舒(shu)適。

五、柵(zha)(zha)格化工具推薦(jian)1. Ps柵(zha)(zha)格系(xi)統工具PS自帶柵(zha)(zha)格系(xi)統設定：新建參考線版面（重點(dian)推薦(jian)）

Ps 有個功能叫做「新建參考線(xian)版面」，打(da)開這個面板后，在預(yu)設(she)(she)這里可以(yi)看到 Ps 已經預(yu)設(she)(she)了 8 列、 12 列、 16 列、 24 列的(de)柵格系統，選(xuan)擇(ze)對應(ying)列數就(jiu)可以(yi)看到頁面上參考線(xian)的(de)變化(hua)。預(yu)設(she)(she)中(zhong)「裝訂線(xian)」的(de)寬度即柵格系統中(zhong)水槽的(de)寬度。默(mo)認均為20px，我們可以(yi)根據之前(qian)討論的(de) 8 的(de)倍(bei)數原則，將其手動更改為24。

如果(guo)預(yu)設的柵(zha)格系(xi)統(tong)無法滿足我們工作需要，我們也可以(yi)自(zi)定義柵(zha)格系(xi)統(tong)，并能(neng)將柵(zha)格參(can)數保(bao)存(cun)為預(yu)設，這樣就可以(yi)重復利(li)用(yong)(yong)自(zi)定義的柵(zha)格系(xi)統(tong)了(le)。柵(zha)格系(xi)統(tong)還可以(yi)選擇(ze)將其應(ying)用(yong)(yong)在當前畫(hua)板或(huo)(huo)者(zhe)所有畫(hua)板，十分方便(bian)易用(yong)(yong)。由于是 Ps 自(zi)帶的參(can)考線(xian)，所以(yi)它可以(yi)通過快捷鍵靈活的控制顯示或(huo)(huo)隱(yin)藏(zang)。

利用(yong)Ps標注(zhu)工(gong)具Assistor Ps進行柵格系(xi)統的建(jian)立Assistor Ps 在之前(qian)主要是(shi)一(yi)(yi)款頁面標注(zhu)工(gong)具，但(dan)是(shi)隨著(zhu)藍湖等自動標注(zhu)工(gong)具的流行，這個(ge)小軟(ruan)件(jian)基本(ben)沒人用(yong)了，但(dan)我發現它設置參(can)考線(xian)的功(gong)能(neng)還是(shi)很(hen)強大的，可(ke)以媲美(mei)大名鼎鼎的 guideguid，所以就(jiu)介紹給大家。（安裝包在文末下載，Win&Mac，解壓(ya)后跟(gen)常規裝軟(ruan)件(jian)一(yi)(yi)樣，正常安裝就(jiu)行）但(dan)是(shi)這個(ge)插件(jian)由于很(hen)多數(shu)值都要自己算，實際(ji)上沒有 Ps 自帶的新建(jian)參(can)考線(xian)面板(ban)的功(gong)能(neng)好(hao)用(yong)，算是(shi)一(yi)(yi)個(ge)工(gong)具的補充吧。

2. Sketch柵格(ge)系統工具(ju)Sketch自帶柵格(ge)系統設(she)定(ding)：Layout Settings

Sketch 端利用 sketch 自(zi)帶(dai)的(de)(de)(de)柵(zha)格(ge)(ge)(ge)工具(ju) Layout Settings 即可(ke)完成柵(zha)格(ge)(ge)(ge)系(xi)(xi)(xi)統(tong)的(de)(de)(de)設置，由于 sketch 的(de)(de)(de)柵(zha)格(ge)(ge)(ge)工具(ju)是自(zi)帶(dai)的(de)(de)(de)，與 Ps 類(lei)似(si)，它也可(ke)以通過快(kuai)捷鍵快(kuai)速(su)顯示或隱藏，點擊左下角「Make Default」還可(ke)以將自(zi)定義的(de)(de)(de)柵(zha)格(ge)(ge)(ge)系(xi)(xi)(xi)統(tong)設置為默認(ren)的(de)(de)(de)柵(zha)格(ge)(ge)(ge)系(xi)(xi)(xi)統(tong)，方(fang)便(bian)以后重(zhong)復調用，但 sketch 貌(mao)似(si)只(zhi)能儲(chu)存(cun)一(yi)組柵(zha)格(ge)(ge)(ge)系(xi)(xi)(xi)統(tong)的(de)(de)(de)數值，而 Ps 可(ke)以儲(chu)存(cun)多組。

Sketch柵格系(xi)(xi)(xi)統(tong)插件：BootstrapGrid-masteBootstrapGrid是一個專門用(yong)于(yu)建立(li)柵格系(xi)(xi)(xi)統(tong)的(de)插件（插件在文末附件中(zhong)下載），插件可(ke)以(yi)(yi)對(dui)柵格系(xi)(xi)(xi)統(tong)的(de)基本(ben)數據做個性(xing)化(hua)的(de)設定，可(ke)以(yi)(yi)對(dui)多個形狀(zhuang)(zhuang)同時建立(li)柵格系(xi)(xi)(xi)統(tong)，還(huan)可(ke)以(yi)(yi)通過快捷鍵快速調用(yong)。具體用(yong)法(fa)：先選中(zhong)要建立(li)柵格的(de)畫板或者畫板里的(de)形狀(zhuang)(zhuang)（可(ke)以(yi)(yi)多選），然后：插件>Bootstrap

Grid（Plugins -> Bootstrap Grid）

柵格系(xi)統參(can)數設計

跨平臺的(de)web端柵(zha)格工具(ju)

GridGuide 最大優(you)點是可以(yi)(yi)針對一種柵格(ge)系統生成(cheng) 4 組不同水槽寬度(du)的(de)柵格(ge)化(hua)方案，能比較(jiao)直觀的(de)比較(jiao)不同水槽寬度(du)下各個柵格(ge)系統的(de)視覺感受。使用方法：在右上(shang)角(jiao)設置好(hao)頁(ye)(ye)面寬度(du)以(yi)(yi)及欄目(mu)數量，頁(ye)(ye)面內就(jiu)會自(zi)動生成(cheng)可以(yi)(yi)下載為 png 圖片的(de)柵格(ge)。

七、常見問題解答當(dang)柵格系統中(zhong)奇(qi)數不(bu)可避免的出現時，如何處理？

理(li)想狀態下，我(wo)們(men)(men)應(ying)該(gai)調(diao)整(zheng)內容區域的(de)(de)(de)(de)大小(xiao)(xiao)，使其盡可能(neng)(neng)成為可以(yi)被8 整(zheng)除的(de)(de)(de)(de)尺(chi)寸，但實際應(ying)用中，有時(shi)會出現(xian)無(wu)法(fa)整(zheng)除的(de)(de)(de)(de)情況。基于(yu)對盒子模(mo)型的(de)(de)(de)(de)理(li)解，此時(shi)我(wo)們(men)(men)保持(chi) padding、margin的(de)(de)(de)(de)值不(bu)變，改(gai)變盒子的(de)(de)(de)(de)大小(xiao)(xiao)去適(shi)應(ying)奇數的(de)(de)(de)(de)頁(ye)面（元素）即可，因(yin)為一致性跟(gen)效率才(cai)是柵(zha)格化要達成的(de)(de)(de)(de)首(shou)要目的(de)(de)(de)(de)，偶爾有一些不(bu)「完美」的(de)(de)(de)(de)尺(chi)寸是完全(quan)允許的(de)(de)(de)(de)，因(yin)為用戶在實際使用頁(ye)面時(shi)，并不(bu)能(neng)(neng)看(kan)到我(wo)們(men)(men)使用的(de)(de)(de)(de)柵(zha)格系(xi)統(tong)，也很難(nan)注意到那幾(ji)像素的(de)(de)(de)(de)變化，他(ta)們(men)(men)能(neng)(neng)感受到的(de)(de)(de)(de)是頁(ye)面整(zheng)體呈現(xian)出來的(de)(de)(de)(de)節奏與韻律感，以(yi)及持(chi)續、一致的(de)(de)(de)(de)視(shi)覺語言帶給他(ta)們(men)(men)的(de)(de)(de)(de)嚴謹、可靠的(de)(de)(de)(de)心理(li)感受。

柵格系統必(bi)須以(yi) 8 作為原子單位(wei)？使用其它(ta)數值是否可以(yi)

首先需要(yao)指出的(de)是(shi)使(shi)用其它(ta)數值(zhi)當然也(ye)(ye)可以，柵格(ge)系統(tong)只是(shi)手段，提升設(she)計(ji)效率、減少溝通成本、提高頁面一(yi)致性才是(shi)最(zui)終目(mu)的(de)，所(suo)以如果你(ni)所(suo)在團隊有其它(ta)柵格(ge)化習(xi)慣，且(qie)一(yi)直以來(lai)效果良好，那么繼(ji)續使(shi)用它(ta)也(ye)(ye)是(shi)沒問題的(de)。但是(shi)對(dui)(dui)于設(she)計(ji)新人，如果能理解前(qian)人的(de)經驗(yan)，并能較好的(de)運用，對(dui)(dui)于他(ta)們來(lai)講，是(shi)會少一(yi)些彎路，更好的(de)完成設(she)計(ji)工(gong)作(zuo)。

柵格系(xi)統建立(li)初期是否必須使欄目寬(kuan)度與水槽寬(kuan)相等(deng)(deng)，并等(deng)(deng)分內容區域？

建立(li)柵(zha)格(ge)系統時并(bing)不是(shi)(shi)必(bi)須(xu)使欄(lan)(lan)(lan)目(mu)寬(kuan)(kuan)(kuan)度(du)與(yu)水槽寬(kuan)(kuan)(kuan)相等，并(bing)等分內容區域(yu)(yu)。本篇(pian)文章介紹(shao)柵(zha)格(ge)系統時采用這(zhe)種處理方式(shi)是(shi)(shi)為了讓大家(jia)更好的(de)理解柵(zha)格(ge)系統建立(li)的(de)原理與(yu)過程，事實上，欄(lan)(lan)(lan)目(mu)的(de)寬(kuan)(kuan)(kuan)度(du)在(zai)實際應(ying)用中(zhong)往往大于(yu)水槽寬(kuan)(kuan)(kuan)度(du)，我們通(tong)常(chang)會先計劃好水槽的(de)寬(kuan)(kuan)(kuan)度(du)、內容區域(yu)(yu)總寬(kuan)(kuan)(kuan)度(du)與(yu)欄(lan)(lan)(lan)目(mu)的(de)數(shu)量，這(zhe)時候(hou)欄(lan)(lan)(lan)目(mu)的(de)寬(kuan)(kuan)(kuan)度(du)通(tong)過計算(suan)可(ke)得(de)到(dao)，對于(yu)響應(ying)式(shi)頁(ye)面，欄(lan)(lan)(lan)目(mu)的(de)寬(kuan)(kuan)(kuan)度(du)可(ke)以是(shi)(shi)百分比而(er)不是(shi)(shi)具體的(de)數(shu)值。