原標題：后臺設(shè)計經(jīng)驗總結(jié)：柵格系統(tǒng)及其在后臺設(shè)計中的應(yīng)用

關(guān)于柵格系統(tǒng)的文章不少，但鮮有專門針對柵格系統(tǒng)在后臺設(shè)計中相關(guān)應(yīng)用的文章。本文希望拋磚引玉，能引起更多同行的交流與討論。

文章大綱：

一、柵格系統(tǒng)的目的

柵格系統(tǒng)在頁面排版布局、尺寸設(shè)定方面給了設(shè)計者直觀的參考，它讓頁面設(shè)計變得有規(guī)律，從而減少了設(shè)計決策成本。柵格化提高了頁面布局的一致性跟復(fù)用性，避免了設(shè)計師與開發(fā)者在細節(jié)上的反復(fù)溝通確認，從而提升了整個設(shè)計開發(fā)流程的效率，并能幫助開發(fā)者實現(xiàn)較為理想的設(shè)計還原。

但實際應(yīng)用中，由于對柵格系統(tǒng)理解的不充分，很多設(shè)計師在應(yīng)用柵格系統(tǒng)的實踐中產(chǎn)生了各種問題，本來幫助設(shè)計的工具現(xiàn)在反而成了設(shè)計中需要解決的問題。結(jié)合我自己后臺設(shè)計的經(jīng)驗，本篇文章跟大家聊聊柵格系統(tǒng)在后臺設(shè)計中如何應(yīng)用。

二、建立柵格系統(tǒng)的方法與規(guī)則 1. 確立柵格系統(tǒng)的原子單位（網(wǎng)格）

如圖，一個比較完整的柵格系統(tǒng)是由許多規(guī)格一致的小網(wǎng)格組成，這些網(wǎng)格輔助我們更規(guī)范的排版、布局。

后臺系統(tǒng)設(shè)計中，由于后臺頁面主要以 Web 形式呈現(xiàn)，而對于 web，用戶已習慣通過鼠標滾輪或滾動條（scrollbar）來縱向瀏覽頁面內(nèi)容。因此，在不考慮內(nèi)容優(yōu)先級的情況下，Web 可以實現(xiàn)豎直方向的「無限」加載，即豎直方向可以無限延伸。

因此基于 Web 的后臺頁面，它的柵格系統(tǒng)在水平方向的柵格可以不體現(xiàn)出來，我們在執(zhí)行設(shè)計時只要在豎直方向保持規(guī)律的變化就可以了。

標準的柵格系統(tǒng)簡化為適用于 Web 后臺的設(shè)計，如下圖所示：

如上圖，對于后臺設(shè)計來講，柵格系統(tǒng)是由欄目（Column）跟水槽（Gutter）交替分布形成的，欄目（Column）是接納網(wǎng)頁內(nèi)容的容器，水槽（Gutter）用來調(diào)節(jié)相鄰兩個欄目間距，把控頁面留白。由于欄目跟水槽的寬度是以網(wǎng)格作為基本單位來增加或者減小，所以柵格化的第一步需要先定義好柵格的原子單位「網(wǎng)格」的大小。

根據(jù)本人的設(shè)計實踐以及其它已有規(guī)范經(jīng)驗，目前后臺柵格系統(tǒng)網(wǎng)格大小定義為8是最普適易用的。

具體原因有以下幾點：

（1）可以被8整除

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

我們選取4、6、8、10、12為柵格的候選原子單位，然后用目前主流屏幕分辨率與其相除，判斷各個分辨率在豎直（Y）與水平（X）方向能否被候選原子整除，統(tǒng)計結(jié)果如圖。

顯然，對于目前市場桌面設(shè)備屏幕而言，4是整除率最高的一個原子，接下來依次是8、10、6、12。但4作為基本原子實在過于小了，太小的步進單位將導(dǎo)致我們決策成本的增加，因為我們將元素間距增加4px或者減小4px視覺感受到的差異并不明顯，這種情況下我們?yōu)榱苏业侥莻�「合適、滿意」的間距，就需要反復(fù)調(diào)試。

這就造成了時間上的浪費，尤其對于沒有經(jīng)驗的新人，這點會更為突出。但這種調(diào)整并不合適，原因是后臺管理系統(tǒng)設(shè)計重點在于面向用戶使用的效率與邏輯，其次才是視覺呈現(xiàn)，使用柵格系統(tǒng)的目的之一也是想減少設(shè)計師在「細節(jié)」上的糾結(jié)，希望設(shè)計師站在更全局的角度看待設(shè)計，合理安排時間，因此我們舍棄4。

在剩下的6、8、10、12四個單位中，8的整除率最高（80%），以8像素作為一個步進單位的變化，我們視覺上也是能感受到較為明顯的差異，因此選取整除率最高的8做為柵格系統(tǒng)的原子單位。

（2）符合「偶數(shù)原則」

以8為單位符合「偶數(shù)原則」。偶數(shù)原則可以在頁面縮放中最大程度的避免類似于0.5、0.75、1.25等次像素的出現(xiàn)，從而使頁面各類元素在大多數(shù)場景下都能有比較精致的細節(jié)表現(xiàn)。

雖然對于后臺設(shè)計而言，通常設(shè)計師是直接在目標尺寸下進行設(shè)計，并在此基礎(chǔ)上標注、切圖給開發(fā)實現(xiàn)，并不存在像移動端那樣需要對各種尺寸、各種像素密度的設(shè)備進行適配的情況。但對于 Web 頁面來講，仍存在向上向下適配的可能。

因而從頁面的兼容性、可擴展性及可維護性層面來講，我們設(shè)計師還是有必要考慮的更加長遠，遵循「偶數(shù)原則」可以最大程度上避免各種潛在的問題。

（3）前端開源組件庫基于8的原子單位來設(shè)計

開發(fā)工程師使用的前端開源組件庫，比如： Metronic、Antdesign 等也是基于8的原子單位來設(shè)計，因此如果設(shè)計師也使用以8為基本單位的柵格系統(tǒng)，開發(fā)與設(shè)計師相互對接就會更加方便，開發(fā)實現(xiàn)頁面時也能更高品質(zhì)的去還原我們設(shè)計師的稿件。

2. 建立基于原子單位的柵格系統(tǒng)

經(jīng)過第一步討論，我們現(xiàn)已確定后臺設(shè)計的原子單位為8，而我們也知道柵格系統(tǒng)是由欄目（Column）跟水槽（Gutter）交替分布形成的，所以接下來我們要利用原子單位確定欄目跟水槽在具體的頁面中如何分布以及它們各自的寬度。

通常，在一套后臺設(shè)計系統(tǒng)中，水槽寬度會是幾個比較固定的數(shù)值（因為后臺系統(tǒng)的頁面相對于其它類型的Web頁面，表現(xiàn)的更加整齊、規(guī)律，所以留白的方式比較固定，加之后臺往往有大量的數(shù)據(jù)、內(nèi)容需要呈現(xiàn)，所以要盡可能提高頁面利用率，可以留白的空間也比較有限），而欄目寬度更加靈活，它可以根據(jù)頁面水平方向尺寸的改變而增大或減小以響應(yīng)頁面的變化。

當我們做后臺設(shè)計的時候首先需要確定在什么樣的分辨率下做設(shè)計，也就是首先需要確定設(shè)計稿的尺寸，當設(shè)計稿尺寸確定后，便可建立基于該尺寸的柵格系統(tǒng)。假設(shè)頁面內(nèi)容區(qū)域?qū)挾葹?W，欄目個數(shù)為 A，水槽個數(shù)為 B，欄目（Column）寬度為 C，水槽（Gutter）寬度為 G，則 W=A*C+B*G。

柵格系統(tǒng)建立初期，由于我們并不確定之后會有什么樣的內(nèi)容呈現(xiàn)我們的頁面上，所以為了讓柵格更加靈活、普適，我們先假定單個欄目與水槽的寬度是相同的，即C=8n（n=1、2、3、4…）=G，然后以此將頁面內(nèi)容區(qū)域等分，形成初步的柵格，之后再按實際內(nèi)容需要，按比例調(diào)整兩者寬度或者按比例對兩者進行組合，形成承載業(yè)務(wù)內(nèi)容的盒子。

目前有兩種比較主流的等分方式：12等分與24等分。

（1）12等分

12等分的柵格系統(tǒng)在流行的前端開發(fā)開源工具庫 Bootstrap 與 Foundation 中廣泛使用，適用于業(yè)務(wù)信息分組較少，單個盒子內(nèi)信息體積較大的中后臺頁面設(shè)計。

（2）24等分

24等分的柵格系統(tǒng)適用于業(yè)務(wù)信息量大、信息分組較多、單個盒子內(nèi)信息體積較小的中后臺頁面設(shè)計。相對12柵格系統(tǒng)，24柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場景。

三、柵格系統(tǒng)的應(yīng)用 1. 頁面布局與版式設(shè)計

（1）了解承載業(yè)務(wù)內(nèi)容的盒子模型（Box Model）