最全面！柵格系統(tǒng)及其在后臺設(shè)計中的應(yīng)用總結(jié)

關(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，用戶已習(xí)慣通過鼠標滾輪或滾動條（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是最普適易用的。具體原因有以下幾點：

 

可以被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)的原子單位。

 

符合「偶數(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ù)原則」可以最大程度上避免各種潛在的問題。

 

 

前端開源組件庫基于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等分。

 

12等分

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

 

 

24等分

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

 

 

三、柵格系統(tǒng)的應(yīng)用

1. 頁面布局與版式設(shè)計

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

建立好柵格系統(tǒng)后，就可以根據(jù)自己的實際業(yè)務(wù)，在柵格系統(tǒng)上安排內(nèi)容了。頁面上最終承載內(nèi)容的其實是一個個「盒子（Box）」，這個盒子的高度由盒子要容納的內(nèi)容與頁面版式設(shè)計決定，按8n規(guī)律變化；寬度則由欄目與水槽按比例組合得到。

在柵格系統(tǒng)上容納業(yè)務(wù)內(nèi)容的容器我們把它稱之為盒子（Box），柵格系統(tǒng)上的盒子其實跟前端工程師寫頁面時用到的盒子是一致的。如圖所示，當我們?yōu)g覽任何一個網(wǎng)頁時，右鍵>檢查元素（審查元素），然后在 style 菜單下就可以看到這個盒子結(jié)構(gòu)了。其中 Padding 就是主體內(nèi)容（Element）距離盒子外側(cè)的距離，我把它稱之為內(nèi)邊距，（Element 可以是一個按鈕，一段文本、一張圖片或者一個表格等）而 Margin 就是相鄰兩個盒子間的距離，對應(yīng)在后臺柵格系統(tǒng)中其實就是水槽的大小。了解完柵格系統(tǒng)的盒子模型之后，下一步我們需要根據(jù)具體業(yè)務(wù)內(nèi)容來確定盒子的寬度，也就是如何利用柵格系統(tǒng)做實際內(nèi)容的布局與版式設(shè)計。

 

 

根據(jù)業(yè)務(wù)內(nèi)容分配頁面比例，確定盒子寬度

以24柵格系統(tǒng)為例，一個24柵格系統(tǒng)可以根據(jù)業(yè)務(wù)需要被2等分、3等分、4等分、6等分、8等分、12等分，還可以被1：1：1、1：2：1、1：3：2、2：3：3、1：2、1：3、1：5、3：5等不對稱分割，具體采用哪種比例的組合需要我們根據(jù)自己業(yè)務(wù)需求來定，我們此處所說的比例實際上就是盒子的寬度。

 

 

上圖展示了盒子在24柵格系統(tǒng)上的分布情況，圖中只列舉了部分比例，實際業(yè)務(wù)中，同一個頁面上使用一到兩組比例值的組合來布局是比較合適的（如下圖），組合形式過多頁面就會顯得瑣碎、雜亂，不利于閱讀和使用。因為盒子的高度根據(jù)內(nèi)容來定，故下圖中沒有體現(xiàn)高度這一維度的變化規(guī)律。

 

 

當我們完成上圖規(guī)劃后，需要做的便是根據(jù)實際內(nèi)容往每個盒子里安排內(nèi)容，做視覺與交互的落地了。

2. 元素對齊與間距設(shè)定

柵格系統(tǒng)大的層面可以幫助設(shè)計者更好的進行版式設(shè)計與內(nèi)容布局，而小的方面可以輔助設(shè)計師規(guī)范頁面內(nèi)各種元素的對齊與間距的設(shè)定。從用戶體驗角度來講，這兩者同等重要，從執(zhí)行層面來講，我們一般先做版式設(shè)計與布局，然后再填充內(nèi)容、調(diào)整細節(jié)。

柵格系統(tǒng)輔助對齊的作用類似于各種設(shè)計軟件中的參考線，它能讓我們更直觀的安排、調(diào)整內(nèi)容的位置及對齊方式，可以使內(nèi)容變得規(guī)律、有序，方便用戶瀏覽閱讀，幫助用戶提高獲取信息的效率。

柵格系統(tǒng)對于元素間距設(shè)定的幫助是直觀的，當我們定義了柵格原子單位為8時，這意味頁面上各元素間距的變化也應(yīng)遵循8n 的規(guī)律，一致的變化規(guī)律讓頁面富有節(jié)奏感跟韻律感，在提高頁面一致性的同時也減少了設(shè)計決策成本。我們知道，柵格系統(tǒng)中水槽與欄目的變化也遵循8n 的變化規(guī)律，此處 n 為大于0的正整數(shù)，即 n=1、2、3……但是用于規(guī)范元素間距的8n，n 可以是0.5、1.5這類包含二分之一8的情況，原因是實際工作中，我們面臨的情況是復(fù)雜的，這樣處理可以讓間距的設(shè)定適應(yīng)一些特殊的場景，從而使其更靈活普適。

 

 

四、注意事項

1. 水槽寬度的設(shè)定

確定好內(nèi)容模塊比例后，我們會發(fā)現(xiàn)由于之前等分的緣故，此時水槽較寬，我們需要調(diào)整水槽寬度到一個合適的值。

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

 

 

五、柵格化工具推薦

1. Ps柵格系統(tǒng)工具

PS自帶柵格系統(tǒng)設(shè)定：新建參考線版面（重點推薦）

Ps 有個功能叫做「新建參考線版面」，打開這個面板后，在預(yù)設(shè)這里可以看到 Ps 已經(jīng)預(yù)設(shè)了8列、12列、16列、24列的柵格系統(tǒng)，選擇對應(yīng)列數(shù)就可以看到頁面上參考線的變化。預(yù)設(shè)中「裝訂線」的寬度即柵格系統(tǒng)中水槽的寬度。默認均為20px，我們可以根據(jù)之前討論的8的倍數(shù)原則，將其手動更改為24。

如果預(yù)設(shè)的柵格系統(tǒng)無法滿足我們工作需要，我們也可以自定義柵格系統(tǒng)，并能將柵格參數(shù)保存為預(yù)設(shè)，這樣就可以重復(fù)利用自定義的柵格系統(tǒng)了。柵格系統(tǒng)還可以選擇將其應(yīng)用在當前畫板或者所有畫板，十分方便易用。由于是 Ps 自帶的參考線，所以它可以通過快捷鍵靈活的控制顯示或隱藏。

 

 

利用Ps標注工具Assistor Ps進行柵格系統(tǒng)的建立

Assistor Ps 在之前主要是一款頁面標注工具，但是隨著藍湖等自動標注工具的流行，這個小軟件基本沒人用了，但我發(fā)現(xiàn)它設(shè)置參考線的功能還是很強大的，可以媲美大名鼎鼎的 guideguid，所以就介紹給大家。（安裝包在文末下載，Win&Mac，解壓后跟常規(guī)裝軟件一樣，正常安裝就行）但是這個插件由于很多數(shù)值都要自己算，實際上沒有 Ps 自帶的新建參考線面板的功能好用，算是一個工具的補充吧。

 

 

2. Sketch柵格系統(tǒng)工具

Sketch自帶柵格系統(tǒng)設(shè)定：Layout Settings

 

 

Sketch 端利用 sketch 自帶的柵格工具 Layout Settings 即可完成柵格系統(tǒng)的設(shè)置，由于 sketch 的柵格工具是自帶的，與 Ps 類似，它也可以通過快捷鍵快速顯示或隱藏，點擊左下角「Make Default」還可以將自定義的柵格系統(tǒng)設(shè)置為默認的柵格系統(tǒng)，方便以后重復(fù)調(diào)用，但 sketch 貌似只能儲存一組柵格系統(tǒng)的數(shù)值，而 Ps 可以儲存多組。

Sketch柵格系統(tǒng)插件：BootstrapGrid-maste

BootstrapGrid 是一個專門用于建立柵格系統(tǒng)的插件（插件在文末附件中下載），插件可以對柵格系統(tǒng)的基本數(shù)據(jù)做個性化的設(shè)定，可以對多個形狀同時建立柵格系統(tǒng)，還可以通過快捷鍵快速調(diào)用。具體用法：先選中要建立柵格的畫板或者畫板里的形狀（可以多選），然后：插件>Bootstrap Grid（Plugins -> Bootstrap Grid）

柵格系統(tǒng)參數(shù)設(shè)計

 

 

單個形狀（畫板）建立柵格系統(tǒng)動圖演示

 

 

多個形狀（畫板）建立柵格系統(tǒng)動圖演示

 

 

跨平臺的web端柵格工具

GridGuide 最大優(yōu)點是可以針對一種柵格系統(tǒng)生成4組不同水槽寬度的柵格化方案，能比較直觀的比較不同水槽寬度下各個柵格系統(tǒng)的視覺感受。使用方法：在右上角設(shè)置好頁面寬度以及欄目數(shù)量，頁面內(nèi)就會自動生成可以下載為 png 圖片的柵格。

 

 

七、參考按鈕，例如一個視頻網(wǎng)站實例

 

 

八、常見問題解答

 

當柵格系統(tǒng)中奇數(shù)不可避免的出現(xiàn)時，如何處理？

理想狀態(tài)下，我們應(yīng)該調(diào)整內(nèi)容區(qū)域的大小，使其盡可能成為可以被8整除的尺寸，但實際應(yīng)用中，有時會出現(xiàn)無法整除的情況?；趯凶幽Ｐ偷睦斫猓藭r我們保持 padding、margin 的值不變，改變盒子的大小去適應(yīng)奇數(shù)的頁面（元素）即可，因為一致性跟效率才是柵格化要達成的首要目的，偶爾有一些不「完美」的尺寸是完全允許的，因為用戶在實際使用頁面時，并不能看到我們使用的柵格系統(tǒng)，也很難注意到那幾像素的變化，他們能感受到的是頁面整體呈現(xiàn)出來的節(jié)奏與韻律感，以及持續(xù)、一致的視覺語言帶給他們的嚴謹、可靠的心理感受。

 

柵格系統(tǒng)必須以8作為原子單位？使用其它數(shù)值是否可以？

首先需要指出的是使用其它數(shù)值當然也可以，柵格系統(tǒng)只是手段，提升設(shè)計效率、減少溝通成本、提高頁面一致性才是最終目的，所以如果你所在團隊有其它柵格化習(xí)慣，且一直以來效果良好，那么繼續(xù)使用它也是沒問題的。但是對于設(shè)計新人，如果能理解前人的經(jīng)驗，并能較好的運用，對于他們來講，是會少一些彎路，更好的完成設(shè)計工作。

 

柵格系統(tǒng)建立初期是否必須使欄目寬度與水槽寬相等，并等分內(nèi)容區(qū)域？

建立柵格系統(tǒng)時并不是必須使欄目寬度與水槽寬相等，并等分內(nèi)容區(qū)域。本篇文章介紹柵格系統(tǒng)時采用這種處理方式是為了讓大家更好的理解柵格系統(tǒng)建立的原理與過程，事實上，欄目的寬度在實際應(yīng)用中往往大于水槽寬度，我們通常會先計劃好水槽的寬度、內(nèi)容區(qū)域總寬度與欄目的數(shù)量，這時候欄目的寬度通過計算可得到，對于響應(yīng)式頁面，欄目的寬度可以是百分比而不是具體的數(shù)值。

 

插件下載：AssistorPs&BootstrapGrid

圖片素材作者：Avian Rizky