一、柵(zha)格(ge)系統的(de)目的(de)柵(zha)格(ge)系統在頁面排版布局、尺寸(cun)設(she)(she)(she)定方(fang)面給了設(she)(she)(she)計(ji)者(zhe)直觀的(de)參考，它讓頁面設(she)(she)(she)計(ji)變得(de)有規律，從而減少了設(she)(she)(she)計(ji)決(jue)策成(cheng)本；柵(zha)格(ge)化提高了頁面布局的(de)一致(zhi)性跟復用(yong)性；避免了設(she)(she)(she)計(ji)師與(yu)開(kai)發者(zhe)在細(xi)節上的(de)反(fan)復溝通(tong)確認，從而提升了整(zheng)個設(she)(she)(she)計(ji)開(kai)發流程的(de)效(xiao)率，并能(neng)幫(bang)助開(kai)發者(zhe)實現較為(wei)理想(xiang)的(de)設(she)(she)(she)計(ji)還(huan)原。

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

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

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

可(ke)以被 8 整除

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

我們選取(qu)4、6、8、10、 12 為柵格(ge)的候選原(yuan)子單位，然(ran)后用(yong)目前主流(liu)屏幕分辨率(lv)與(yu)其相除，判斷(duan)各(ge)個分辨率(lv)在(zai)豎直（Y）與(yu)水平（X）方向能否被候選原(yuan)子整(zheng)除。

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

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

雖(sui)然(ran)對(dui)于后臺設計(ji)而(er)言，通常(chang)設計(ji)師是(shi)直接在(zai)(zai)目標尺(chi)寸下(xia)進行(xing)設計(ji)，并在(zai)(zai)此基(ji)礎(chu)上(shang)標注、切圖(tu)給開(kai)發實現，并不存(cun)在(zai)(zai)像(xiang)移動端那樣需要對(dui)各種(zhong)尺(chi)寸、各種(zhong)像(xiang)素密度的(de)(de)(de)設備(bei)進行(xing)適(shi)配的(de)(de)(de)情況，但對(dui)于 Web 頁面(mian)來講，仍存(cun)在(zai)(zai)向(xiang)上(shang)向(xiang)下(xia)適(shi)配的(de)(de)(de)可(ke)能(neng)，因而(er)從頁面(mian)的(de)(de)(de)兼容(rong)性、可(ke)擴展(zhan)性及可(ke)維護(hu)性層面(mian)來講，我(wo)們設計(ji)師還是(shi)有必要考(kao)慮(lv)的(de)(de)(de)更加(jia)長(chang)遠，遵循「偶數原則(ze)」可(ke)以最大程度上(shang)避免各種(zhong)潛在(zai)(zai)的(de)(de)(de)問題。

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

開發工程師(shi)(shi)使用的(de)(de)前端(duan)開源組(zu)件庫(ku)比如 Metronic、Antdesign 等也(ye)是基于 8 的(de)(de)原子單位來設(she)計(ji)，因此(ci)如果(guo)設(she)計(ji)師(shi)(shi)也(ye)使用以 8 為基本單位的(de)(de)柵格系統(tong)，開發與設(she)計(ji)師(shi)(shi)相互(hu)對接就會更加方便(bian)，開發實現頁(ye)面時也(ye)能(neng)更高品質的(de)(de)去還原我們設(she)計(ji)師(shi)(shi)的(de)(de)稿件。

2. 建立基于原子單(dan)位的(de)(de)(de)柵格系統(tong)經過第一步(bu)討論，我們現已確(que)(que)定后臺設(she)計的(de)(de)(de)原子單(dan)位為8，而我們也知道柵格系統(tong)是(shi)由欄目(mu)（Column）跟水(shui)槽(cao)（Gutter）交替分布形成的(de)(de)(de)，所(suo)以(yi)接(jie)下來我們要利用(yong)原子單(dan)位確(que)(que)定欄目(mu)跟水(shui)槽(cao)在具體的(de)(de)(de)頁面中如何分布以(yi)及(ji)它們各自的(de)(de)(de)寬度。

通常，在一套后臺(tai)設計(ji)系統中(zhong)，水(shui)槽寬度(du)會是幾個(ge)比(bi)較固(gu)定(ding)的(de)(de)數(shu)值（因為(wei)后臺(tai)系統的(de)(de)頁面(mian)(mian)相對于其它類型的(de)(de)Web頁面(mian)(mian)，表(biao)現(xian)(xian)的(de)(de)更(geng)(geng)加整齊(qi)、規(gui)律，所以(yi)留(liu)白的(de)(de)方式(shi)比(bi)較固(gu)定(ding)，加之(zhi)后臺(tai)往(wang)往(wang)有大量的(de)(de)數(shu)據(ju)、內(nei)容(rong)需要呈現(xian)(xian)，所以(yi)要盡可(ke)能提高頁面(mian)(mian)利(li)用率，可(ke)以(yi)留(liu)白的(de)(de)空間也比(bi)較有限）；而欄目寬度(du)更(geng)(geng)加靈活，它可(ke)以(yi)根據(ju)頁面(mian)(mian)水(shui)平方向尺寸的(de)(de)改(gai)變而增大或減小以(yi)響應(ying)頁面(mian)(mian)的(de)(de)變化。

當(dang)我(wo)們做后(hou)臺設計(ji)的時(shi)候(hou)首先(xian)(xian)需要(yao)確定(ding)在(zai)什么樣的分辨率下做設計(ji)，也(ye)就是(shi)首先(xian)(xian)需要(yao)確定(ding)設計(ji)稿(gao)的尺(chi)寸(cun)，當(dang)設計(ji)稿(gao)尺(chi)寸(cun)確定(ding)后(hou)，便可建立基于該(gai)尺(chi)寸(cun)的柵格系(xi)統(tong)。假設頁面內容區域(yu)寬(kuan)度為

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

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

12 等分與 24 等分。

12 等分

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

24 等分

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

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

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

在柵(zha)格系(xi)統(tong)上(shang)容納業務內容的(de)(de)容器我們把(ba)它稱之(zhi)為盒子(zi)（Box），柵(zha)格系(xi)統(tong)上(shang)的(de)(de)盒子(zi)其實跟前(qian)端(duan)工程師寫(xie)頁面時用到的(de)(de)盒子(zi)是(shi)一致的(de)(de)。如圖所示，當我們瀏(liu)覽(lan)任何一個網頁時，右鍵>檢查(cha)元素（審查(cha)元素），然后在

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

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

Margin

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

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

24柵格系統上的(de)(de)分布情況，圖中只列舉了部分比(bi)(bi)例，實際(ji)業務(wu)中，同一(yi)(yi)個頁面上使(shi)用(yong)一(yi)(yi)到兩(liang)組比(bi)(bi)例值的(de)(de)組合來布局是比(bi)(bi)較合適的(de)(de)（如下圖），組合形式過多(duo)頁面就會顯得瑣碎、雜亂，不利于閱讀(du)和使(shi)用(yong)。因為盒子的(de)(de)高度(du)(du)根據內(nei)容(rong)來定，故下圖中沒(mei)有體現高度(du)(du)這一(yi)(yi)維度(du)(du)的(de)(de)變化規律(lv)。

當我們(men)完成(cheng)上圖規(gui)劃后，需要(yao)做(zuo)的(de)便是(shi)根據實際(ji)內(nei)(nei)容(rong)往每個盒子里安排內(nei)(nei)容(rong)，做(zuo)視覺與交互(hu)的(de)落地了(le)。2. 元(yuan)素對(dui)齊與間(jian)距(ju)(ju)設(she)(she)定柵格系統(tong)大(da)的(de)層面可以幫助設(she)(she)計者更好的(de)進行版式設(she)(she)計與內(nei)(nei)容(rong)布局，而小的(de)方面可以輔助設(she)(she)計師規(gui)范(fan)頁面內(nei)(nei)各種元(yuan)素的(de)對(dui)齊與間(jian)距(ju)(ju)的(de)設(she)(she)定。從用(yong)戶(hu)體驗(yan)角度(du)來(lai)講(jiang)，這兩(liang)者同等重要(yao)，從執行層面來(lai)講(jiang)，我們(men)一般(ban)先做(zuo)版式設(she)(she)計與布局，然后再填充內(nei)(nei)容(rong)、調整細節。

柵格(ge)系(xi)統輔助(zhu)對齊(qi)的作用類似于各種(zhong)設計軟(ruan)件中的參(can)考線(xian)，它能讓我們(men)更直(zhi)觀的安排(pai)、調(diao)整(zheng)內容(rong)的位置及(ji)對齊(qi)方式，可以使內容(rong)變得規律(lv)、有序，方便(bian)用戶瀏覽閱讀，幫助(zhu)用戶提(ti)高獲(huo)取信息的效率(lv)。

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

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

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

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

Ps 有個功能叫(jiao)做「新建參考線(xian)版(ban)面(mian)」，打開這個面(mian)板后(hou)，在預(yu)設(she)(she)這里(li)可(ke)(ke)以(yi)看(kan)到(dao) Ps 已經預(yu)設(she)(she)了 8 列(lie)、 12 列(lie)、 16 列(lie)、 24 列(lie)的柵(zha)格系(xi)統，選擇對應(ying)列(lie)數就可(ke)(ke)以(yi)看(kan)到(dao)頁面(mian)上參考線(xian)的變化。預(yu)設(she)(she)中「裝(zhuang)訂線(xian)」的寬(kuan)度(du)(du)即柵(zha)格系(xi)統中水槽(cao)的寬(kuan)度(du)(du)。默認(ren)均為20px，我(wo)們可(ke)(ke)以(yi)根據之前討論的 8 的倍數原則，將其(qi)手動更改為24。

如果(guo)預設的(de)(de)柵格系(xi)統無法滿足(zu)我們(men)工作需要，我們(men)也可(ke)以自(zi)(zi)定義柵格系(xi)統，并能將柵格參數保存為預設，這(zhe)樣(yang)就可(ke)以重復利用自(zi)(zi)定義的(de)(de)柵格系(xi)統了。柵格系(xi)統還(huan)可(ke)以選擇將其(qi)應(ying)用在(zai)當前畫(hua)板(ban)或(huo)者(zhe)所(suo)有畫(hua)板(ban)，十(shi)分(fen)方(fang)便易用。由于是(shi) Ps 自(zi)(zi)帶的(de)(de)參考線(xian)，所(suo)以它可(ke)以通過快捷鍵(jian)靈活的(de)(de)控制顯(xian)示或(huo)隱(yin)藏。

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

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

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

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

Grid（Plugins -> Bootstrap Grid）

柵格系統參數設計

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

GridGuide 最(zui)大優點(dian)是(shi)可以(yi)(yi)針(zhen)對一(yi)種柵(zha)格系統(tong)生(sheng)成 4 組不(bu)同水(shui)槽寬(kuan)度(du)的(de)柵(zha)格化(hua)方案，能比(bi)較直觀(guan)的(de)比(bi)較不(bu)同水(shui)槽寬(kuan)度(du)下各個柵(zha)格系統(tong)的(de)視覺感受。使用方法：在右上角(jiao)設置好(hao)頁面寬(kuan)度(du)以(yi)(yi)及欄目數量，頁面內就會自動(dong)生(sheng)成可以(yi)(yi)下載為 png 圖片的(de)柵(zha)格。

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

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

柵格(ge)系統(tong)必(bi)須以(yi) 8 作為原(yuan)子(zi)單(dan)位？使用其它數值(zhi)是否可以(yi)

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

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

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