一、栅格系統的(de)目的(de)栅格系統在頁面排版布局、尺寸設定方面給了(le)設計者直觀的(de)參考，它讓頁面設計變得(de)有規律，從而減少了(le)設計決策成本；栅格化(huà)提高(gāo)了(le)頁面布局的(de)一緻性跟複用(yòng)性；避免了(le)設計師與開發者在細節上的(de)反複溝通(tōng)确認，從而提升了(le)整個(gè)設計開發流程的(de)效率，并能幫助開發者實現較爲理(lǐ)想的(de)設計還(hái)原。

但實際應用(yòng)中，由于對(duì)栅格系統理(lǐ)解的(de)不充分(fēn)，很多(duō)設計師在應用(yòng)栅格系統的(de)實踐中産生了(le)各種問題，本來(lái)幫助設計的(de)工具現在反而成了(le)設計中需要解決的(de)問題。結合我自己後台設計的(de)經驗，本篇文章(zhāng)跟大(dà)家聊聊栅格系統在後台設計中如何應用(yòng)。二、建立栅格系統的(de)方法與規則1. 确立栅格系統的(de)原子單位（網格）如圖，一個(gè)比較完整的(de)栅格系統是由許多(duō)規格一緻的(de)小網格組成，這(zhè)些網格輔助我們更規範的(de)排版、布局。

後台系統設計中，由于後台頁面主要以 Web 形式呈現，而對(duì)于 web，用(yòng)戶已習(xí)慣通(tōng)過鼠标滾輪或滾動條（scrollbar）來(lái)縱向浏覽頁面内容，因此，在不考慮内容優先級的(de)情況下(xià)，Web 可(kě)以實現豎直方向的(de)「無限」加載，即豎直方向可(kě)以無限延伸，因此基于 Web 的(de)後台頁面，它的(de)栅格系統在水(shuǐ)平方向的(de)栅格可(kě)以不體現出來(lái)，我們在執行設計時(shí)隻要在豎直方向保持規律的(de)變化(huà)就可(kě)以了(le)。标準的(de)栅格系統簡化(huà)爲适用(yòng)于 Web 後台的(de)設計如下(xià)圖所示。

對(duì)于後台設計來(lái)講，栅格系統是由欄目（Column）跟水(shuǐ)槽（Gutter）交替分(fēn)布形成的(de)，欄目（Column）是接納網頁内容的(de)容器，水(shuǐ)槽（Gutter）用(yòng)來(lái)調節相鄰兩個(gè)欄目間距，把控頁面留白；由于欄目跟水(shuǐ)槽的(de)寬度是以網格作爲基本單位來(lái)增加或者減小，所以栅格化(huà)的(de)第一步需要先定義好栅格的(de)原子單位「網格」的(de)大(dà)小。根據本人(rén)的(de)設計實踐以及其它已有規範經驗，目前後台栅格系統網格大(dà)小定義爲 8 是最普适易用(yòng)的(de)。具體原因有以下(xià)幾點：

可(kě)以被 8 整除

目前主流桌面設備的(de)屏幕分(fēn)辨率在豎直與水(shuǐ)平方向基本都可(kě)以被 8 整除，使用(yòng) 8 作爲最小原子足夠普适。

我們選取4、6、8、10、 12 爲栅格的(de)候選原子單位，然後用(yòng)目前主流屏幕分(fēn)辨率與其相除，判斷各個(gè)分(fēn)辨率在豎直（Y）與水(shuǐ)平（X）方向能否被候選原子整除。

顯然，對(duì)于目前市場(chǎng)桌面設備屏幕而言， 4 是整除率最高(gāo)的(de)一個(gè)原子，接下(xià)來(lái)依次是8、10、6、12。但 4 作爲基本原子實在過于小了(le)，太小的(de)步進單位将導緻我們決策成本的(de)增加，因爲我們将元素間距增加4px或者減小4px視覺感受到的(de)差異并不明(míng)顯，這(zhè)種情況下(xià)我們爲了(le)找到那個(gè)「合适、滿意」的(de)間距，就需要反複調試，這(zhè)就造成了(le)時(shí)間上的(de)浪費，尤其對(duì)于沒有經驗的(de)新人(rén)，這(zhè)點會更爲突出。但這(zhè)種調整并不合适，原因是後台管理(lǐ)系統設計重點在于面向用(yòng)戶使用(yòng)的(de)效率與邏輯，其次才是視覺呈現，使用(yòng)栅格系統的(de)目的(de)之一也(yě)是想減少設計師在「細節」上的(de)糾結，希望設計師站在更全局的(de)角度看待設計，合理(lǐ)安排時(shí)間，因此我們舍棄4。在剩下(xià)的(de)6、8、10、 12 四個(gè)單位中， 8 的(de)整除率最高(gāo)（80%），以 8 像素作爲一個(gè)步進單位的(de)變化(huà)，我們視覺上也(yě)是能感受到較爲明(míng)顯的(de)差異，因此選取整除率最高(gāo)的(de) 8 做(zuò)爲栅格系統的(de)原子單位。

符合「偶數原則」以 8 爲單位符合「偶數原則」。偶數原則可(kě)以在頁面縮放中最大(dà)程度的(de)避免類似于0.5、0.75、1. 25 等次像素的(de)出現，從而使頁面各類元素在大(dà)多(duō)數場(chǎng)景下(xià)都能有比較精緻的(de)細節表現。

雖然對(duì)于後台設計而言，通(tōng)常設計師是直接在目标尺寸下(xià)進行設計，并在此基礎上标注、切圖給開發實現，并不存在像移動端那樣需要對(duì)各種尺寸、各種像素密度的(de)設備進行适配的(de)情況，但對(duì)于 Web 頁面來(lái)講，仍存在向上向下(xià)适配的(de)可(kě)能，因而從頁面的(de)兼容性、可(kě)擴展性及可(kě)維護性層面來(lái)講，我們設計師還(hái)是有必要考慮的(de)更加長(cháng)遠(yuǎn)，遵循「偶數原則」可(kě)以最大(dà)程度上避免各種潛在的(de)問題。

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

開發工程師使用(yòng)的(de)前端開源組件庫比如 Metronic、Antdesign 等也(yě)是基于 8 的(de)原子單位來(lái)設計，因此如果設計師也(yě)使用(yòng)以 8 爲基本單位的(de)栅格系統，開發與設計師相互對(duì)接就會更加方便，開發實現頁面時(shí)也(yě)能更高(gāo)品質的(de)去還(hái)原我們設計師的(de)稿件。

2. 建立基于原子單位的(de)栅格系統經過第一步討(tǎo)論，我們現已确定後台設計的(de)原子單位爲8，而我們也(yě)知道栅格系統是由欄目（Column）跟水(shuǐ)槽（Gutter）交替分(fēn)布形成的(de)，所以接下(xià)來(lái)我們要利用(yòng)原子單位确定欄目跟水(shuǐ)槽在具體的(de)頁面中如何分(fēn)布以及它們各自的(de)寬度。

通(tōng)常，在一套後台設計系統中，水(shuǐ)槽寬度會是幾個(gè)比較固定的(de)數值（因爲後台系統的(de)頁面相對(duì)于其它類型的(de)Web頁面，表現的(de)更加整齊、規律，所以留白的(de)方式比較固定，加之後台往往有大(dà)量的(de)數據、内容需要呈現，所以要盡可(kě)能提高(gāo)頁面利用(yòng)率，可(kě)以留白的(de)空間也(yě)比較有限）；而欄目寬度更加靈活，它可(kě)以根據頁面水(shuǐ)平方向尺寸的(de)改變而增大(dà)或減小以響應頁面的(de)變化(huà)。

當我們做(zuò)後台設計的(de)時(shí)候首先需要确定在什(shén)麽樣的(de)分(fēn)辨率下(xià)做(zuò)設計，也(yě)就是首先需要确定設計稿的(de)尺寸，當設計稿尺寸确定後，便可(kě)建立基于該尺寸的(de)栅格系統。假設頁面内容區(qū)域寬度爲

W，欄目個(gè)數爲 A，水(shuǐ)槽個(gè)數爲 B，欄目（Column）寬度爲 C，水(shuǐ)槽（Gutter）寬度爲 G，則

W=A*C+B*G。栅格系統建立初期，由于我們并不确定之後會有什(shén)麽樣的(de)内容呈現我們的(de)頁面上，所以爲了(le)讓栅格更加靈活、普适，我們先假定單個(gè)欄目與水(shuǐ)槽的(de)寬度是相同的(de)，即C=8n（n=1、2、3、4…）=G，然後以此将頁面内容區(qū)域等分(fēn)，形成初步的(de)栅格，之後再按實際内容需要，按比例調整兩者寬度或者按比例對(duì)兩者進行組合，形成承載業務内容的(de)盒子。目前有兩種比較主流的(de)等分(fēn)方式：

12 等分(fēn)與 24 等分(fēn)。

12 等分(fēn)

12 等分(fēn)的(de)栅格系統在流行的(de)前端開發開源工具庫 Bootstrap 與 Foundation 中廣泛使用(yòng)，适用(yòng)于業務信息分(fēn)組較少，單個(gè)盒子内信息體積較大(dà)的(de)中後台頁面設計。

24 等分(fēn)

24 等分(fēn)的(de)栅格系統适用(yòng)于業務信息量大(dà)、信息分(fēn)組較多(duō)、單個(gè)盒子内信息體積較小的(de)中後台頁面設計；相對(duì) 12 栅格系統， 24 栅格系統變化(huà)更加靈活，更适合内容比較多(duō)樣複雜(zá)的(de)場(chǎng)景。

三、栅格系統的(de)應用(yòng)1. 頁面布局與版式設計了(le)解承載業務内容的(de)盒子模型（Box Model）

建立好栅格系統後，就可(kě)以根據自己的(de)實際業務，在栅格系統上安排内容了(le)。頁面上最終承載内容的(de)其實是一個(gè)個(gè)「盒子（Box）」，這(zhè)個(gè)盒子的(de)高(gāo)度由盒子要容納的(de)内容與頁面版式設計決定，按8n規律變化(huà)；寬度則由欄目與水(shuǐ)槽按比例組合得(de)到。

在栅格系統上容納業務内容的(de)容器我們把它稱之爲盒子（Box），栅格系統上的(de)盒子其實跟前端工程師寫頁面時(shí)用(yòng)到的(de)盒子是一緻的(de)。如圖所示，當我們浏覽任何一個(gè)網頁時(shí)，右鍵>檢查元素（審查元素），然後在

style 菜單下(xià)就可(kě)以看到這(zhè)個(gè)盒子結構了(le)。其中 Padding

就是主體内容（Element）距離盒子外側的(de)距離，我把它稱之爲内邊距，（Element 可(kě)以是一個(gè)按鈕，一段文本、一張圖片或者一個(gè)表格等）而

Margin

就是相鄰兩個(gè)盒子間的(de)距離，對(duì)應在後台栅格系統中其實就是水(shuǐ)槽的(de)大(dà)小。了(le)解完栅格系統的(de)盒子模型之後，下(xià)一步我們需要根據具體業務内容來(lái)确定盒子的(de)寬度，也(yě)就是如何利用(yòng)栅格系統做(zuò)實際内容的(de)布局與版式設計。

根據業務内容分(fēn)配頁面比例，确定盒子寬度以24 栅格系統爲例，一個(gè) 24 栅格系統可(kě)以根據業務需要被 2 等分(fēn)、 3 等分(fēn)、 4 等分(fēn)、 6 等分(fēn)、 8 等分(fēn)、 12等分(fēn)，還(hái)可(kě)以被1：1：1、1：2：1、1：3：2、2：3：3、1：2、1：3、1：5、3： 5等不對(duì)稱分(fēn)割，具體采用(yòng)哪種比例的(de)組合需要我們根據自己業務需求來(lái)定，我們此處所說的(de)比例實際上就是盒子的(de)寬度。

24栅格系統上的(de)分(fēn)布情況，圖中隻列舉了(le)部分(fēn)比例，實際業務中，同一個(gè)頁面上使用(yòng)一到兩組比例值的(de)組合來(lái)布局是比較合适的(de)（如下(xià)圖），組合形式過多(duō)頁面就會顯得(de)瑣碎、雜(zá)亂，不利于閱讀和(hé)使用(yòng)。因爲盒子的(de)高(gāo)度根據内容來(lái)定，故下(xià)圖中沒有體現高(gāo)度這(zhè)一維度的(de)變化(huà)規律。

當我們完成上圖規劃後，需要做(zuò)的(de)便是根據實際内容往每個(gè)盒子裏安排内容，做(zuò)視覺與交互的(de)落地了(le)。2. 元素對(duì)齊與間距設定栅格系統大(dà)的(de)層面可(kě)以幫助設計者更好的(de)進行版式設計與内容布局，而小的(de)方面可(kě)以輔助設計師規範頁面内各種元素的(de)對(duì)齊與間距的(de)設定。從用(yòng)戶體驗角度來(lái)講，這(zhè)兩者同等重要，從執行層面來(lái)講，我們一般先做(zuò)版式設計與布局，然後再填充内容、調整細節。

栅格系統輔助對(duì)齊的(de)作用(yòng)類似于各種設計軟件中的(de)參考線，它能讓我們更直觀的(de)安排、調整内容的(de)位置及對(duì)齊方式，可(kě)以使内容變得(de)規律、有序，方便用(yòng)戶浏覽閱讀，幫助用(yòng)戶提高(gāo)獲取信息的(de)效率。

栅格系統對(duì)于元素間距設定的(de)幫助是直觀的(de)，當我們定義了(le)栅格原子單位爲8 時(shí)，這(zhè)意味頁面上各元素間距的(de)變化(huà)也(yě)應遵循8n的(de)規律，一緻的(de)變化(huà)規律讓頁面富有節奏感跟韻律感，在提高(gāo)頁面一緻性的(de)同時(shí)也(yě)減少了(le)設計決策成本。我們知道，栅格系統中水(shuǐ)槽與欄目的(de)變化(huà)也(yě)遵循8n的(de)變化(huà)規律，此處 n 爲大(dà)于 0 的(de)正整數，即 n=1、2、3……但是用(yòng)于規範元素間距的(de)8n，n 可(kě)以是0.5、1. 5 這(zhè)類包含二分(fēn)之一 8的(de)情況，原因是實際工作中，我們面臨的(de)情況是複雜(zá)的(de)，這(zhè)樣處理(lǐ)可(kě)以讓間距的(de)設定适應一些特殊的(de)場(chǎng)景，從而使其更靈活普适。

四、注意事項1. 水(shuǐ)槽寬度的(de)設定确定好内容模塊比例後，我們會發現由于之前等分(fēn)的(de)緣故，此時(shí)水(shuǐ)槽較寬，我們需要調整水(shuǐ)槽寬度到一個(gè)合适的(de)值。

水(shuǐ)槽的(de)寬度是8n，也(yě)就是水(shuǐ)槽可(kě)以以 8 爲基本單位去增加或減小。爲了(le)減少設計決策成本，我們會事先設定好一系列水(shuǐ)槽寬度，并定義好每個(gè)寬度對(duì)應的(de)使用(yòng)場(chǎng)景，然後根據每個(gè)場(chǎng)景使用(yòng)對(duì)應數值就可(kě)以了(le)。我定義了(le)一組水(shuǐ)槽的(de)值是8、16、 24、32 、40，爲了(le)區(qū)分(fēn)它們的(de)使用(yòng)場(chǎng)景我們依次爲其命名爲 XS、SM、MD、LG、XL。根據實踐經驗，正常情況下(xià)，兩個(gè)盒子間距（水(shuǐ)槽）的(de)值爲24（MD）時(shí)，視覺上是最爲舒适。

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

Ps 有個(gè)功能叫做(zuò)「新建參考線版面」，打開這(zhè)個(gè)面闆後，在預設這(zhè)裏可(kě)以看到 Ps 已經預設了(le) 8 列、 12 列、 16 列、 24 列的(de)栅格系統，選擇對(duì)應列數就可(kě)以看到頁面上參考線的(de)變化(huà)。預設中「裝訂線」的(de)寬度即栅格系統中水(shuǐ)槽的(de)寬度。默認均爲20px，我們可(kě)以根據之前討(tǎo)論的(de) 8 的(de)倍數原則，将其手動更改爲24。

如果預設的(de)栅格系統無法滿足我們工作需要，我們也(yě)可(kě)以自定義栅格系統，并能将栅格參數保存爲預設，這(zhè)樣就可(kě)以重複利用(yòng)自定義的(de)栅格系統了(le)。栅格系統還(hái)可(kě)以選擇将其應用(yòng)在當前畫(huà)闆或者所有畫(huà)闆，十分(fēn)方便易用(yòng)。由于是 Ps 自帶的(de)參考線，所以它可(kě)以通(tōng)過快(kuài)捷鍵靈活的(de)控制顯示或隐藏。

利用(yòng)Ps标注工具Assistor Ps進行栅格系統的(de)建立Assistor Ps 在之前主要是一款頁面标注工具，但是随著(zhe)藍湖等自動标注工具的(de)流行，這(zhè)個(gè)小軟件基本沒人(rén)用(yòng)了(le)，但我發現它設置參考線的(de)功能還(hái)是很強大(dà)的(de)，可(kě)以媲美(měi)大(dà)名鼎鼎的(de) guideguid，所以就介紹給大(dà)家。（安裝包在文末下(xià)載，Win&Mac，解壓後跟常規裝軟件一樣，正常安裝就行）但是這(zhè)個(gè)插件由于很多(duō)數值都要自己算(suàn)，實際上沒有 Ps 自帶的(de)新建參考線面闆的(de)功能好用(yòng)，算(suàn)是一個(gè)工具的(de)補充吧。

2. Sketch栅格系統工具Sketch自帶栅格系統設定：Layout Settings

Sketch 端利用(yòng) sketch 自帶的(de)栅格工具 Layout Settings 即可(kě)完成栅格系統的(de)設置，由于 sketch 的(de)栅格工具是自帶的(de)，與 Ps 類似，它也(yě)可(kě)以通(tōng)過快(kuài)捷鍵快(kuài)速顯示或隐藏，點擊左下(xià)角「Make Default」還(hái)可(kě)以将自定義的(de)栅格系統設置爲默認的(de)栅格系統，方便以後重複調用(yòng)，但 sketch 貌似隻能儲存一組栅格系統的(de)數值，而 Ps 可(kě)以儲存多(duō)組。

Sketch栅格系統插件：BootstrapGrid-masteBootstrapGrid是一個(gè)專門用(yòng)于建立栅格系統的(de)插件（插件在文末附件中下(xià)載），插件可(kě)以對(duì)栅格系統的(de)基本數據做(zuò)個(gè)性化(huà)的(de)設定，可(kě)以對(duì)多(duō)個(gè)形狀同時(shí)建立栅格系統，還(hái)可(kě)以通(tōng)過快(kuài)捷鍵快(kuài)速調用(yòng)。具體用(yòng)法：先選中要建立栅格的(de)畫(huà)闆或者畫(huà)闆裏的(de)形狀（可(kě)以多(duō)選），然後：插件>Bootstrap

Grid（Plugins -> Bootstrap Grid）

栅格系統參數設計

跨平台的(de)web端栅格工具

GridGuide 最大(dà)優點是可(kě)以針對(duì)一種栅格系統生成 4 組不同水(shuǐ)槽寬度的(de)栅格化(huà)方案，能比較直觀的(de)比較不同水(shuǐ)槽寬度下(xià)各個(gè)栅格系統的(de)視覺感受。使用(yòng)方法：在右上角設置好頁面寬度以及欄目數量，頁面内就會自動生成可(kě)以下(xià)載爲 png 圖片的(de)栅格。

七、常見問題解答(dá)當栅格系統中奇數不可(kě)避免的(de)出現時(shí)，如何處理(lǐ)？

理(lǐ)想狀态下(xià)，我們應該調整内容區(qū)域的(de)大(dà)小，使其盡可(kě)能成爲可(kě)以被8 整除的(de)尺寸，但實際應用(yòng)中，有時(shí)會出現無法整除的(de)情況。基于對(duì)盒子模型的(de)理(lǐ)解，此時(shí)我們保持 padding、margin的(de)值不變，改變盒子的(de)大(dà)小去适應奇數的(de)頁面（元素）即可(kě)，因爲一緻性跟效率才是栅格化(huà)要達成的(de)首要目的(de)，偶爾有一些不「完美(měi)」的(de)尺寸是完全允許的(de)，因爲用(yòng)戶在實際使用(yòng)頁面時(shí)，并不能看到我們使用(yòng)的(de)栅格系統，也(yě)很難注意到那幾像素的(de)變化(huà)，他(tā)們能感受到的(de)是頁面整體呈現出來(lái)的(de)節奏與韻律感，以及持續、一緻的(de)視覺語言帶給他(tā)們的(de)嚴謹、可(kě)靠的(de)心理(lǐ)感受。

栅格系統必須以 8 作爲原子單位？使用(yòng)其它數值是否可(kě)以

首先需要指出的(de)是使用(yòng)其它數值當然也(yě)可(kě)以，栅格系統隻是手段，提升設計效率、減少溝通(tōng)成本、提高(gāo)頁面一緻性才是最終目的(de)，所以如果你所在團隊有其它栅格化(huà)習(xí)慣，且一直以來(lái)效果良好，那麽繼續使用(yòng)它也(yě)是沒問題的(de)。但是對(duì)于設計新人(rén)，如果能理(lǐ)解前人(rén)的(de)經驗，并能較好的(de)運用(yòng)，對(duì)于他(tā)們來(lái)講，是會少一些彎路，更好的(de)完成設計工作。

栅格系統建立初期是否必須使欄目寬度與水(shuǐ)槽寬相等，并等分(fēn)内容區(qū)域？

建立栅格系統時(shí)并不是必須使欄目寬度與水(shuǐ)槽寬相等，并等分(fēn)内容區(qū)域。本篇文章(zhāng)介紹栅格系統時(shí)采用(yòng)這(zhè)種處理(lǐ)方式是爲了(le)讓大(dà)家更好的(de)理(lǐ)解栅格系統建立的(de)原理(lǐ)與過程，事實上，欄目的(de)寬度在實際應用(yòng)中往往大(dà)于水(shuǐ)槽寬度，我們通(tōng)常會先計劃好水(shuǐ)槽的(de)寬度、内容區(qū)域總寬度與欄目的(de)數量，這(zhè)時(shí)候欄目的(de)寬度通(tōng)過計算(suàn)可(kě)得(de)到，對(duì)于響應式頁面，欄目的(de)寬度可(kě)以是百分(fēn)比而不是具體的(de)數值。