一、柵(zha)格(ge)系統(tong)的(de)(de)目的(de)(de)柵(zha)格(ge)系統(tong)在頁(ye)面(mian)排版(ban)布局(ju)、尺寸設(she)定方面(mian)給了(le)(le)設(she)計(ji)(ji)者直觀的(de)(de)參(can)考，它讓頁(ye)面(mian)設(she)計(ji)(ji)變得有規律(lv)，從(cong)而(er)減少了(le)(le)設(she)計(ji)(ji)決(jue)策成本；柵(zha)格(ge)化(hua)提高了(le)(le)頁(ye)面(mian)布局(ju)的(de)(de)一致性跟復用性；避免(mian)了(le)(le)設(she)計(ji)(ji)師與開發(fa)者在細節上(shang)的(de)(de)反復溝通確(que)認，從(cong)而(er)提升了(le)(le)整(zheng)個(ge)設(she)計(ji)(ji)開發(fa)流程的(de)(de)效(xiao)率，并能(neng)幫助開發(fa)者實現較為理想(xiang)的(de)(de)設(she)計(ji)(ji)還原。

但實際應(ying)(ying)用中(zhong)(zhong)，由(you)于對(dui)柵(zha)格(ge)系(xi)統(tong)理解(jie)的(de)(de)不充(chong)分(fen)，很多設(she)計(ji)(ji)師(shi)在(zai)應(ying)(ying)用柵(zha)格(ge)系(xi)統(tong)的(de)(de)實踐中(zhong)(zhong)產生了(le)各種問(wen)題，本(ben)來(lai)幫助(zhu)設(she)計(ji)(ji)的(de)(de)工具(ju)現在(zai)反而成了(le)設(she)計(ji)(ji)中(zhong)(zhong)需(xu)要解(jie)決的(de)(de)問(wen)題。結合我自己后(hou)臺設(she)計(ji)(ji)的(de)(de)經驗，本(ben)篇文章跟大(da)家(jia)聊(liao)聊(liao)柵(zha)格(ge)系(xi)統(tong)在(zai)后(hou)臺設(she)計(ji)(ji)中(zhong)(zhong)如(ru)何應(ying)(ying)用。二、建立(li)柵(zha)格(ge)系(xi)統(tong)的(de)(de)方法與規則1. 確立(li)柵(zha)格(ge)系(xi)統(tong)的(de)(de)原(yuan)子單位（網格(ge)）如(ru)圖(tu)，一個比較完(wan)整的(de)(de)柵(zha)格(ge)系(xi)統(tong)是(shi)由(you)許多規格(ge)一致的(de)(de)小(xiao)網格(ge)組成，這些網格(ge)輔(fu)助(zhu)我們更規范的(de)(de)排(pai)版、布局(ju)。

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

對于(yu)后(hou)臺設計來(lai)講，柵(zha)格系(xi)統是由欄(lan)目(mu)（Column）跟水槽（Gutter）交(jiao)替分布(bu)形成的(de)(de)(de)，欄(lan)目(mu)（Column）是接納網(wang)頁內容的(de)(de)(de)容器，水槽（Gutter）用來(lai)調(diao)節相鄰兩(liang)個欄(lan)目(mu)間距，把(ba)控頁面留白；由于(yu)欄(lan)目(mu)跟水槽的(de)(de)(de)寬(kuan)度是以(yi)網(wang)格作(zuo)為(wei)基本(ben)單位來(lai)增(zeng)加或者(zhe)減小(xiao)，所以(yi)柵(zha)格化的(de)(de)(de)第一步(bu)需要(yao)先定義(yi)好柵(zha)格的(de)(de)(de)原子(zi)單位「網(wang)格」的(de)(de)(de)大(da)(da)小(xiao)。根據本(ben)人的(de)(de)(de)設計實踐以(yi)及其它已(yi)有規范經驗，目(mu)前后(hou)臺柵(zha)格系(xi)統網(wang)格大(da)(da)小(xiao)定義(yi)為(wei) 8 是最普適易(yi)用的(de)(de)(de)。具體原因有以(yi)下幾點：

可以被 8 整除

目前(qian)主流(liu)桌面(mian)設備的屏(ping)幕分辨率在(zai)豎直與(yu)水平方向(xiang)基本都可(ke)以(yi)被 8 整除，使用(yong) 8 作為最(zui)小原子足夠普(pu)適(shi)。

我(wo)們選(xuan)取4、6、8、10、 12 為柵格的候選(xuan)原子(zi)單(dan)位，然(ran)后用目前(qian)主(zhu)流屏幕分(fen)辨率與其相除，判斷各個分(fen)辨率在豎直(zhi)（Y）與水(shui)平（X）方向能否被(bei)候選(xuan)原子(zi)整除。

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

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

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

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

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

2. 建立基于原子(zi)單位(wei)的柵格(ge)系(xi)統經過(guo)第一(yi)步討論，我們(men)現已確(que)定后(hou)臺設計的原子(zi)單位(wei)為(wei)8，而我們(men)也(ye)知道(dao)柵格(ge)系(xi)統是由(you)欄目(mu)（Column）跟(gen)水槽（Gutter）交替分布(bu)形成的，所(suo)以接下來我們(men)要利(li)用(yong)原子(zi)單位(wei)確(que)定欄目(mu)跟(gen)水槽在具體的頁面中如何分布(bu)以及它們(men)各自的寬度(du)。

通常，在一(yi)套后(hou)臺(tai)設計系(xi)統中，水槽寬度會是幾(ji)個比較固定的(de)數值（因(yin)為后(hou)臺(tai)系(xi)統的(de)頁面(mian)(mian)相對于其它(ta)類型的(de)Web頁面(mian)(mian)，表現的(de)更加整齊、規律，所(suo)以(yi)留白(bai)(bai)的(de)方(fang)(fang)式比較固定，加之后(hou)臺(tai)往往有大量的(de)數據(ju)、內容需要(yao)呈現，所(suo)以(yi)要(yao)盡可(ke)能提(ti)高頁面(mian)(mian)利用率(lv)，可(ke)以(yi)留白(bai)(bai)的(de)空(kong)間也(ye)比較有限）；而欄目寬度更加靈活，它(ta)可(ke)以(yi)根據(ju)頁面(mian)(mian)水平方(fang)(fang)向尺(chi)寸的(de)改變(bian)而增大或減小以(yi)響(xiang)應頁面(mian)(mian)的(de)變(bian)化(hua)。

當我們做后(hou)臺設(she)計的(de)(de)時候首(shou)先(xian)需要確(que)定在什(shen)么(me)樣(yang)的(de)(de)分辨(bian)率下做設(she)計，也就(jiu)是首(shou)先(xian)需要確(que)定設(she)計稿的(de)(de)尺寸，當設(she)計稿尺寸確(que)定后(hou)，便可建(jian)立基于該尺寸的(de)(de)柵格系統。假(jia)設(she)頁面(mian)內容(rong)區域寬(kuan)度為

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

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

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

12 等分

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

24 等分

24 等(deng)分的(de)柵格系(xi)統(tong)(tong)適(shi)用于業務信息量大、信息分組較多、單個盒(he)子(zi)內信息體積較小的(de)中后臺(tai)頁(ye)面設計；相對 12 柵格系(xi)統(tong)(tong)， 24 柵格系(xi)統(tong)(tong)變化更(geng)加靈活(huo)，更(geng)適(shi)合(he)內容比(bi)較多樣(yang)復雜的(de)場(chang)景。

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

建立好柵(zha)格系統(tong)后，就可以根據自己的(de)實際業務，在(zai)柵(zha)格系統(tong)上(shang)安排內(nei)容了。頁面(mian)上(shang)最(zui)終(zhong)承載內(nei)容的(de)其實是一(yi)個(ge)個(ge)「盒(he)子(zi)（Box）」，這(zhe)個(ge)盒(he)子(zi)的(de)高度(du)由盒(he)子(zi)要(yao)容納的(de)內(nei)容與頁面(mian)版式設計決定，按8n規律變化；寬度(du)則由欄目與水槽按比例組合得到。

在柵格系(xi)統上容(rong)納業務內(nei)容(rong)的容(rong)器我們(men)把(ba)它(ta)稱之為盒(he)(he)子（Box），柵格系(xi)統上的盒(he)(he)子其實跟(gen)前端工程師寫頁面時用到的盒(he)(he)子是一致的。如圖所示，當(dang)我們(men)瀏覽(lan)任何一個網頁時，右鍵>檢(jian)查元素（審查元素），然后在

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

就是主(zhu)體內容（Element）距(ju)離(li)盒子外側的距(ju)離(li)，我把(ba)它稱之為內邊(bian)距(ju)，（Element 可以(yi)是一(yi)個按鈕(niu)，一(yi)段(duan)文本(ben)、一(yi)張圖片或(huo)者一(yi)個表格(ge)等）而

Margin

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

根(gen)據業(ye)務內容分配(pei)頁面比(bi)例，確定(ding)盒(he)子(zi)寬度(du)以(yi)24 柵格系(xi)統為例，一個 24 柵格系(xi)統可以(yi)根(gen)據業(ye)務需要(yao)被 2 等分、 3 等分、 4 等分、 6 等分、 8 等分、 12等分，還(huan)可以(yi)被1：1：1、1：2：1、1：3：2、2：3：3、1：2、1：3、1：5、3： 5等不(bu)對稱分割(ge)，具體采用哪種比(bi)例的(de)(de)組(zu)合需要(yao)我(wo)們(men)根(gen)據自己(ji)業(ye)務需求(qiu)來定(ding)，我(wo)們(men)此處所說的(de)(de)比(bi)例實際(ji)上(shang)就(jiu)是(shi)盒(he)子(zi)的(de)(de)寬度(du)。

24柵(zha)格系統(tong)上的分布(bu)情況，圖中(zhong)只列(lie)舉(ju)了部(bu)分比(bi)例，實際(ji)業務中(zhong)，同一個頁面上使用一到兩組比(bi)例值(zhi)的組合來(lai)布(bu)局是比(bi)較合適的（如下圖），組合形式過(guo)多(duo)頁面就會(hui)顯(xian)得(de)瑣碎、雜亂，不利于閱讀和使用。因為盒子(zi)的高(gao)度根據內容來(lai)定(ding)，故(gu)下圖中(zhong)沒有(you)體現高(gao)度這一維度的變(bian)化規律。

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

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

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

四(si)、注意事(shi)項1. 水(shui)槽(cao)寬(kuan)度的設(she)定確(que)定好(hao)內容模(mo)塊比(bi)例后，我(wo)們(men)會發現(xian)由于之(zhi)前(qian)等分的緣故，此(ci)時(shi)水(shui)槽(cao)較寬(kuan)，我(wo)們(men)需要調整(zheng)水(shui)槽(cao)寬(kuan)度到一個合適的值。

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

五、柵(zha)格(ge)化工(gong)具推(tui)薦1. Ps柵(zha)格(ge)系統工(gong)具PS自帶柵(zha)格(ge)系統設(she)定：新建參考線版面(mian)（重(zhong)點推(tui)薦）

Ps 有個功能(neng)叫做「新建(jian)參考線版面(mian)(mian)」，打開這個面(mian)(mian)板后，在(zai)預設(she)這里可以看(kan)到 Ps 已經預設(she)了 8 列(lie)、 12 列(lie)、 16 列(lie)、 24 列(lie)的(de)柵格(ge)系統，選擇對應列(lie)數就可以看(kan)到頁面(mian)(mian)上參考線的(de)變(bian)化。預設(she)中「裝訂線」的(de)寬度即柵格(ge)系統中水(shui)槽的(de)寬度。默認(ren)均為20px，我(wo)們可以根(gen)據之前討論(lun)的(de) 8 的(de)倍數原則，將其手動(dong)更改為24。

如果預設(she)的(de)柵(zha)格(ge)系統(tong)(tong)無法滿足我(wo)們工(gong)作需(xu)要(yao)，我(wo)們也可(ke)以(yi)自定義柵(zha)格(ge)系統(tong)(tong)，并能將柵(zha)格(ge)參數保存為預設(she)，這樣就可(ke)以(yi)重復利用自定義的(de)柵(zha)格(ge)系統(tong)(tong)了(le)。柵(zha)格(ge)系統(tong)(tong)還可(ke)以(yi)選(xuan)擇將其(qi)應用在(zai)當(dang)前畫板或(huo)(huo)者所有畫板，十分方便易(yi)用。由于是(shi) Ps 自帶的(de)參考線，所以(yi)它可(ke)以(yi)通過快捷鍵靈活的(de)控制(zhi)顯示或(huo)(huo)隱藏。

利用(yong)Ps標(biao)(biao)注(zhu)工具(ju)Assistor Ps進行柵(zha)格系統的(de)(de)(de)建立(li)Assistor Ps 在之前主(zhu)要是(shi)一款頁面標(biao)(biao)注(zhu)工具(ju)，但是(shi)隨著藍湖等自動標(biao)(biao)注(zhu)工具(ju)的(de)(de)(de)流行，這(zhe)個小軟件(jian)基(ji)本沒(mei)人用(yong)了，但我(wo)發現它設(she)置參考線(xian)的(de)(de)(de)功能(neng)還是(shi)很強大(da)的(de)(de)(de)，可(ke)以媲美大(da)名鼎(ding)鼎(ding)的(de)(de)(de) guideguid，所(suo)以就介(jie)紹給大(da)家。（安裝包在文(wen)末下(xia)載，Win&Mac，解壓后跟常規裝軟件(jian)一樣，正常安裝就行）但是(shi)這(zhe)個插件(jian)由(you)于很多數值都要自己算，實際上沒(mei)有 Ps 自帶的(de)(de)(de)新建參考線(xian)面板的(de)(de)(de)功能(neng)好用(yong)，算是(shi)一個工具(ju)的(de)(de)(de)補充吧(ba)。

2. Sketch柵格系(xi)統(tong)工具Sketch自帶(dai)柵格系(xi)統(tong)設定：Layout Settings

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

Sketch柵(zha)格(ge)系統(tong)插件(jian)(jian)：BootstrapGrid-masteBootstrapGrid是一個專門用(yong)(yong)于建(jian)立(li)柵(zha)格(ge)系統(tong)的(de)插件(jian)(jian)（插件(jian)(jian)在(zai)文(wen)末附件(jian)(jian)中(zhong)下載），插件(jian)(jian)可以(yi)對柵(zha)格(ge)系統(tong)的(de)基本數據做個性化的(de)設定(ding)，可以(yi)對多個形狀同時建(jian)立(li)柵(zha)格(ge)系統(tong)，還(huan)可以(yi)通(tong)過快(kuai)捷(jie)鍵快(kuai)速調用(yong)(yong)。具(ju)體用(yong)(yong)法：先(xian)選(xuan)中(zhong)要建(jian)立(li)柵(zha)格(ge)的(de)畫板(ban)或者畫板(ban)里的(de)形狀（可以(yi)多選(xuan)），然后：插件(jian)(jian)>Bootstrap

Grid（Plugins -> Bootstrap Grid）

柵格系統參數設計

跨平臺的web端(duan)柵格(ge)工具

GridGuide 最大優點是可以(yi)針對(dui)一種(zhong)柵格(ge)系(xi)統生成(cheng) 4 組不(bu)同水槽(cao)寬度(du)的柵格(ge)化方案，能比(bi)較直觀的比(bi)較不(bu)同水槽(cao)寬度(du)下(xia)(xia)各個(ge)柵格(ge)系(xi)統的視覺感受。使用方法(fa)：在右上角(jiao)設置(zhi)好頁面寬度(du)以(yi)及(ji)欄目數(shu)量，頁面內就會自動生成(cheng)可以(yi)下(xia)(xia)載為(wei) png 圖片的柵格(ge)。

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

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

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

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

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

建(jian)立柵格(ge)系(xi)統時(shi)(shi)并不是必須使欄目(mu)(mu)寬(kuan)度(du)(du)與水(shui)槽(cao)寬(kuan)相等，并等分(fen)內(nei)容(rong)區域。本篇文(wen)章介紹(shao)柵格(ge)系(xi)統時(shi)(shi)采用這種處(chu)理(li)方式(shi)是為了讓大(da)家(jia)更好(hao)的(de)理(li)解(jie)柵格(ge)系(xi)統建(jian)立的(de)原理(li)與過程，事(shi)實上(shang)，欄目(mu)(mu)的(de)寬(kuan)度(du)(du)在實際(ji)應(ying)用中(zhong)往(wang)往(wang)大(da)于(yu)(yu)水(shui)槽(cao)寬(kuan)度(du)(du)，我(wo)們(men)通(tong)常會先計(ji)劃好(hao)水(shui)槽(cao)的(de)寬(kuan)度(du)(du)、內(nei)容(rong)區域總寬(kuan)度(du)(du)與欄目(mu)(mu)的(de)數(shu)量，這時(shi)(shi)候欄目(mu)(mu)的(de)寬(kuan)度(du)(du)通(tong)過計(ji)算(suan)可(ke)得到，對(dui)于(yu)(yu)響應(ying)式(shi)頁(ye)面(mian)，欄目(mu)(mu)的(de)寬(kuan)度(du)(du)可(ke)以是百分(fen)比而不是具體的(de)數(shu)值。