關于網格系統(tǒng)的文章很多，但是專門關注網格系統(tǒng)在后端設計中的應用的文章卻很少。本文希望能夠引發(fā)同行更多的交流和討論。

文章大綱：

1. 網格系統(tǒng)的目的

網格系統(tǒng)為設計者在頁面布局和尺寸設置方面提供了直觀的參考。使頁面設計變得規(guī)則化，從而降低設計決策成本。光柵化提高了頁面布局的一致性和復用性，避免了設計者和開發(fā)者之間對細節(jié)的重復溝通和確認，從而提高了整個設計開發(fā)過程的效率，幫助開發(fā)者實現更理想的設計。減少。

然而在實際應用中，由于對網格系統(tǒng)的了解不夠，很多設計者在應用網格系統(tǒng)的實踐中遇到了各種問題。原本對設計有幫助的工具，現在已經成為設計中需要解決的問題。本文結合我自己的后臺設計經驗，和大家聊聊如何在后臺設計中應用網格系統(tǒng)。

2. 建立網格系統(tǒng)的方法和規(guī)則 1. 建立網格系統(tǒng)的原子單元（網格）

如圖所示，一個比較完整的網格系統(tǒng)是由許多規(guī)格一致的小網格組成的。這些網格幫助我們進行更標準化的排版和布局。

在后端系統(tǒng)的設計中，由于后端頁面主要以Web的形式呈現，而對于Web來說，用戶習慣于通過鼠標滾輪或者滾動條（）來垂直瀏覽頁面內容。因此，在不考慮內容優(yōu)先級的情況下，Web可以實現垂直方向的“無限”加載，即垂直方向可以無限延伸。

因此，對于基于Web的后臺頁面，其網格系統(tǒng)不需要體現在水平網格中。我們在執(zhí)行設計的時候，只需要保持垂直方向的規(guī)律變化即可。

標準的網格系統(tǒng)被簡化為適合Web后端的設計，如下圖所示：

如上圖所示，對于后端設計，網格系統(tǒng)是由（）和sink（）交替分布形成的。 () 是接受網頁內容的容器。 ink()用于調整相鄰兩列之間的間距。保持頁面空白。由于柱和匯的寬度以網格為基本單位增大或減小，因此光柵化的第一步需要定義網格的原子單元“網格”的大小。

根據我的設計實踐和其他現有的標準經驗，目前后臺網格系統(tǒng)的網格大小定義為8，這是最通用且易于使用的。

具體原因如下：

(1) 能被 8 整除

目前主流桌面設備的屏幕分辨率在垂直和水平方向上基本都能被8整除。使用8作為最小原子是足夠通用的。

我們選擇4、6、8、10、12作為網格的候選原子單元，然后將它們除以當前主流屏幕分辨率，以確定每個分辨率是否可以在垂直（Y）和水平（X）上作為候選。 ) 方向。原子可分性，統(tǒng)計結果如圖所示。

顯然，對于目前市場上的桌面設備屏幕來說，4是整除性最高的原子，其次是8、10、6和12。但是4作為基本原子太小了。步長單位太小會增加我們的決策成本，因為元素間距增加4px或者減少4px，視覺上的差異并不明顯。在這種情況下，我們想要找到“合適且滿意”的間距，就需要反復調試。

這會浪費時間，尤其是對于沒有經驗的新手。但這種調整并不合適。原因在于后臺管理系統(tǒng)的設計注重以用戶為中心的效率和邏輯，其次是可視化呈現。使用網格系統(tǒng)的目的之一也是為了減少設計者對“細節(jié)”的糾結。 ，我們希望設計師能夠以更全局的視角來看待設計，合理安排時間，所以我們丟棄4。

其余4個單位6、8、10、12中，8的整除率最高（80%）。采用8個像素作為步長單位變化，我們也可以在視覺上感受到明顯的差異，因此選擇整除性最高的8個作為網格系統(tǒng)的原子單位。

（二）遵守“偶數原則”

以8為單位，符合“偶數原則”。偶數原則可以在頁面縮放時最大程度地避免類似0.5、0.75、1.25等像素的出現，從而使頁面的各個元素在大多數場景下都能擁有更加精致的細節(jié)。

雖然對于后端設計來說，設計師通常會直接在目標尺寸下進行設計，并在此基礎上標記和剪切圖片以進行開發(fā)和實現。無需像移動終端那樣設計各種尺寸和像素密度。該設備已適應。但對于網頁來說，仍然存在向上和向下適配的可能性。

因此，從頁面兼容性、可擴展性和可維護性的角度來看，我們設計師還是需要考慮得更長遠。遵循“偶數原則”可以最大程度地避免各種潛在的問題。

(3)前端開源組件庫基于8的原子單元設計

開發(fā)工程師使用的前端開源組件庫，如：等，也是基于8這個原子單位來設計的。因此，如果設計者也使用以8為基本單位的網格系統(tǒng)，那就是更方便開發(fā)者和設計者相互聯(lián)系。在實現頁面的時候，我們還可以更高質量的還原我們設計師的手稿。

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

經過第一步的討論sketch安裝打不開，我們已經確定后端設計的原子單元為8，并且我們也知道網格系統(tǒng)是由()和sinks()交替分布形成的，所以接下來我們需要使用原子單位來確定列以及接收器如何分布在特定頁面上及其各自的寬度。

通常，在后端設計系統(tǒng)中，水箱的寬度會是幾個相對固定的值（因為后端系統(tǒng)的頁面比其他類型的網頁更加整齊和規(guī)則，所以這樣的方式留白的空間相對固定，另外，后臺往往有大量的數據和內容需要呈現，所以必須盡可能提高頁面利用率（能留白的空間也是如此）。相對有限），而且欄寬比較靈活，可以根據頁面水平尺寸的變化增減以響應頁面的變化。

我們在做后端設計的時候，首先需要確定我們是在什么分辨率下進行設計的，也就是首先需要確定設計稿的大小。一旦確定了設計稿的尺寸，我們就可以根據該尺寸建立網格系統(tǒng)。假設頁面內容區(qū)域的寬度為W，列數為A，匯點數量為B，列()寬度為C，匯點()寬度為G，則W= A*C+B*G。

在建立網格系統(tǒng)的初期，由于我們不確定將來我們的頁面上會呈現什么樣的內容，為了讓網格更加靈活和通用，我們首先假設單列的寬度和sink相同，即C=8n(n=1,2,3,4...)=G，然后將頁面內容區(qū)域等分，形成初步網格。然后根據實際內容需要，按比例調整兩者的寬度或者按比例比較。兩者結合起來形成一個承載業(yè)務內容的盒子。

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

(1) 12等份

12段網格系統(tǒng)廣泛應用于流行的前端開發(fā)開源工具庫，適合業(yè)務信息組數較少、單盒信息量較大的中后端頁面設計。

(2) 24等份

24等網格系統(tǒng)適合業(yè)務信息量大、信息組多、單框信息量小的中后端頁面設計。與12網格系統(tǒng)相比，24網格系統(tǒng)更加靈活，更適合內容多樣、復雜的場景。

三、網格系統(tǒng)的應用 1、頁面布局和格式設計

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

建立網格系統(tǒng)后，您可以根據自己的實際業(yè)務安排網格系統(tǒng)上的內容。頁面上最終的內容實際上是一個“盒子”。這個盒子的高度是由盒子里要容納的內容和頁面布局設計來決定的。它按照8n規(guī)則變化，寬度由立柱和水槽按比例組合得到。

我們將網格系統(tǒng)上保存業(yè)務內容的容器稱為盒子。網格系統(tǒng)上的盒子其實和前端工程師寫頁面時使用的盒子是一樣的。

如圖：當我們?yōu)g覽任意網頁的時候，右鍵> （檢查元素），然后在樣式菜單下就可以看到這個盒子結構了。其中是主要內容()與盒子外部的距離。我稱之為內邊距（它可以是一個按鈕、一段文本、一張圖片或一個表格等），它是兩個相鄰框之間的距離。背景網格系統(tǒng)中對應的值實際上就是水槽的大小。

了解了網格系統(tǒng)的盒子模型后，下一步就是根據具體的業(yè)務內容確定盒子的寬度，即如何利用網格系統(tǒng)進行實際內容的布局和格式設計。

(2)根據業(yè)務內容分配頁面比例并確定框寬

以24網格系統(tǒng)為例。 24格系統(tǒng)可以根據業(yè)務需求分為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等不對稱劃分。具體的比例組合需要根據我們自己的需求來確定。這取決于業(yè)務需求。我們這里所說的比例實際上就是盒子的寬度。

上圖是24網格系統(tǒng)上盒子的分布情況。圖片只列出了部分比例。實際業(yè)務中，在同一頁面上使用一組或兩組比例值的組合進行布局是比較合適的（如下圖），組合過多的頁面會顯得瑣碎、雜亂，不利于閱讀和使用。因為盒子的高度是根據內容來確定的，所以下圖中沒有體現出高度尺寸的變化規(guī)律。

當我們完成了上圖中的規(guī)劃后，我們要做的就是根據實際的內容來安排每個框中的內容，并進行可視化和交互的實現。

2. 元素對齊和間距設置

網格系統(tǒng)的大層次可以幫助設計者更好地實現布局設計和內容布局，而小層次可以幫助設計者規(guī)范頁面上各種元素的對齊方式和間距。從用戶體驗的角度來看，兩者同等重要。從執(zhí)行角度來說，我們一般會先進行版式設計和布局，然后填寫內容并調整細節(jié)。

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

網格系統(tǒng)在設置元素之間的間距方面的幫助是直觀的。當我們將網格原子單位定義為8時，意味著頁面上元素之間的間距變化也應該遵循8n規(guī)則。一致的變化規(guī)則使頁面富有節(jié)奏感。不僅提高了頁面一致性，還降低了設計決策成本。

我們知道，網格系統(tǒng)中匯和列的變化也遵循8n的變化規(guī)律，其中n是大于0的正整數，即n=1,2,3……但是8n，n過去是標準化元素的間距可以是0.5、1.5這樣包含了8的一半的情況。原因是在實際工作中，我們面臨的情況比較復雜。這種處理可以使間距設置適應一些特殊場景，使其更加靈活和通用。 。

4、注意事項：水槽寬度的設置

確定了內容模塊的比例后，我們會發(fā)現，由于之前的均分，此時水箱變寬了，我們需要將水箱的寬度調整到合適的值。

水箱的寬度為8n，這意味著水箱可以以8為基本單位進行增減。為了降低設計決策成本，我們會提前設定一系列水槽寬度，定義使用場景對應每個寬度，然后根據每個場景使用對應的值。

我定義了一組sink數值為8、16、24、32、40，為了區(qū)分它們的使用場景，我們依次命名為XS、SM、MD、LG、XL。根據實踐經驗，一般情況下，當兩個盒子（水槽）之間的距離值為24（MD）時，視覺上最舒適。

五、推薦光柵化工具 1、PS光柵系統(tǒng)工具

（1）PS自帶網格系統(tǒng)設置：創(chuàng)建新的參考線布局（強烈推薦）

Ps有一個功能叫“新指南布局”。打開這個面板后，在預設中可以看到Ps預設了8列、12列、16列、24列的網格系統(tǒng)。選擇相應的列數。您可以看到頁面上的引導線發(fā)生變化。 “裝訂線”的默認寬度是網格系統(tǒng)中裝訂線的寬度。默認是20px，我們可以根據前面討論的8的倍數原則手動將其更改為24。

如果預設的網格系統(tǒng)不能滿足我們的工作需求，我們還可以自定義網格系統(tǒng)，并將網格參數保存為預設，以便自定義的網格系統(tǒng)可以重復使用。網格系統(tǒng)還可以應用于當前畫板或所有畫板，非常方便易用。由于是Ps自帶的引導線，所以可以通過快捷鍵靈活顯示或隱藏。

（2）使用Ps標注工具Ps建立網格系統(tǒng)

ps之前主要是一個頁面標注工具，但是隨著Blue Lake等自動標注工具的流行，這個小軟件基本上已經不再使用了。但我發(fā)現它的設置參考線的功能還是很強大的，堪比大名鼎鼎的，所以介紹給大家。 （下載文末安裝包，Win&Mac，解壓后和常規(guī)軟件安裝一樣，正常安裝即可）

不過，由于這個插件的很多數值都要自己計算，所以實際上不如Ps自帶的新的參考線面板那么好用?？梢运闶且粋€輔助工具。

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

(1)自帶網格系統(tǒng)設置：

您可以使用內置的網格工具來完成網格系統(tǒng)的設置。由于網格工具是內置的，與Ps類似，也可以通過快捷鍵快速顯示或隱藏。您也可以點擊左下角的“制作”。將自定義的網格系統(tǒng)設置為默認網格系統(tǒng)，方便以后重復調用。但看起來它只能存儲網格系統(tǒng)中的一組值sketch安裝打不開，而Ps可以存儲多組。

(2) 網格系統(tǒng)插件：-maste

是專門用于建立網格系統(tǒng)的插件（該插件可在文末附件中下載）。該插件可以對網格系統(tǒng)的基礎數據進行個性化設置，可以同時建立多種形狀的網格系統(tǒng)。也可以使用快捷鍵進行快速調用。具體用法：首先選擇畫板或者畫板中要創(chuàng)建網格的形狀（可以多選），然后：插件>網格（->網格）

網格系統(tǒng)參數設計：

從單一形狀（畫板）創(chuàng)建網格系統(tǒng)的動畫演示：

從多個形狀（畫板）創(chuàng)建網格系統(tǒng)的動畫演示：

(3) 跨平臺Web端網格工具

最大的優(yōu)點是可以為一個網格系統(tǒng)生成4組不同匯寬度的網格解決方案，可以直觀地比較每個網格系統(tǒng)在不同匯寬度下的視覺體驗。

使用方法：在右上角設置頁面寬度和列數，頁面中會自動生成一個可以下載為png圖片的柵格。

7. 常見問題

(1)如何處理網格系統(tǒng)中不可避免出現的奇數？

理想情況下，我們應該調整內容區(qū)域的大小，使其盡可能被8整除，但在實際應用中，有時是不可整除的。基于我們對盒子模型的理解，此時我們保持 和 的值不變，改變盒子的大小來適應奇數個頁面（元素）。

因為一致性和效率是光柵化要實現的主要目標，有時一些不“完美”的尺寸是完全允許的，因為用戶在實際使用頁面時看不到我們使用的網格系統(tǒng)。很難注意到那幾個像素的變化。他們能感受到的是頁面整體的韻律和韻律，以及連續(xù)一致的視覺語言給他們帶來的嚴謹可靠的心理感受。

（2）網格系統(tǒng)必須使用8作為原子單位？是否可以使用其他值？

首先需要指出的是，當然也可以使用其他值。網格系統(tǒng)只是一種手段。提高設計效率、降低溝通成本、提高頁面一致性是最終目標。所以如果你的團隊有其他的網格習慣，并且一直效果不錯，那么繼續(xù)使用是沒有問題的。

但對于新設計師來說，如果能夠了解前人的經驗并更好地運用，就會少走彎路，更好地完成設計工作。

（3）網格系統(tǒng)建立初期，是否需要使柱寬等于水箱寬度，并均分內容區(qū)域？

構建網格系統(tǒng)時，不必使列寬等于裝訂線寬度并均等劃分內容區(qū)域。

本文在介紹網格系統(tǒng)時就采用了這種處理方法，以便讓大家更好地理解建立網格系統(tǒng)的原理和流程。事實上，在實際應用中立柱的寬度往往大于水箱的寬度。我們通常會規(guī)劃水箱的寬度、內容區(qū)域的總寬度以及立柱的數量。這時候就可以計算出柱子的寬度了。對于響應式頁面，列的寬度可以是百分比而不是特定值。

如有侵權請聯(lián)系刪除！