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

文章大綱：

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

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

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

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

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

在后端系統(tǒng)的設(shè)計(jì)中，由于后端頁(yè)面主要以Web的形式呈現(xiàn)，而對(duì)于Web來(lái)說(shuō)，用戶習(xí)慣于通過(guò)鼠標(biāo)滾輪或者滾動(dòng)條（）來(lái)垂直瀏覽頁(yè)面內(nèi)容。因此，在不考慮內(nèi)容優(yōu)先級(jí)的情況下，Web可以實(shí)現(xiàn)垂直方向的“無(wú)限”加載，即垂直方向可以無(wú)限延伸。

因此，對(duì)于基于Web的后臺(tái)頁(yè)面，其網(wǎng)格系統(tǒng)不需要體現(xiàn)在水平網(wǎng)格中。我們?cè)趫?zhí)行設(shè)計(jì)的時(shí)候，只需要保持垂直方向的規(guī)律變化即可。

標(biāo)準(zhǔn)的網(wǎng)格系統(tǒng)被簡(jiǎn)化為適合Web后端的設(shè)計(jì)，如下圖所示：

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

根據(jù)我的設(shè)計(jì)實(shí)踐和其他現(xiàn)有的標(biāo)準(zhǔn)經(jīng)驗(yàn)，目前后臺(tái)網(wǎng)格系統(tǒng)的網(wǎng)格大小定義為8，這是最通用且易于使用的。

具體原因如下：

(1) 能被 8 整除

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

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

顯然，對(duì)于目前市場(chǎng)上的桌面設(shè)備屏幕來(lái)說(shuō)，4是整除性最高的原子，其次是8、10、6和12。但是4作為基本原子太小了。步長(zhǎng)單位太小會(huì)增加我們的決策成本，因?yàn)樵亻g距增加4px或者減少4px，視覺(jué)上的差異并不明顯。在這種情況下，我們想要找到“合適且滿意”的間距，就需要反復(fù)調(diào)試。

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

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

（二）遵守“偶數(shù)原則”

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

雖然對(duì)于后端設(shè)計(jì)來(lái)說(shuō)，設(shè)計(jì)師通常會(huì)直接在目標(biāo)尺寸下進(jìn)行設(shè)計(jì)，并在此基礎(chǔ)上標(biāo)記和剪切圖片以進(jìn)行開(kāi)發(fā)和實(shí)現(xiàn)。無(wú)需像移動(dòng)終端那樣設(shè)計(jì)各種尺寸和像素密度。該設(shè)備已適應(yīng)。但對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，仍然存在向上和向下適配的可能性。

因此，從頁(yè)面兼容性、可擴(kuò)展性和可維護(hù)性的角度來(lái)看，我們?cè)O(shè)計(jì)師還是需要考慮得更長(zhǎng)遠(yuǎn)。遵循“偶數(shù)原則”可以最大程度地避免各種潛在的問(wèn)題。

(3)前端開(kāi)源組件庫(kù)基于8的原子單元設(shè)計(jì)

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

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

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

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

我們?cè)谧龊蠖嗽O(shè)計(jì)的時(shí)候，首先需要確定我們是在什么分辨率下進(jìn)行設(shè)計(jì)的，也就是首先需要確定設(shè)計(jì)稿的大小。一旦確定了設(shè)計(jì)稿的尺寸，我們就可以根據(jù)該尺寸建立網(wǎng)格系統(tǒng)。假設(shè)頁(yè)面內(nèi)容區(qū)域的寬度為W，列數(shù)為A，匯點(diǎn)數(shù)量為B，列()寬度為C，匯點(diǎn)()寬度為G，則W= A*C+B*G。

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

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

(1) 12等份

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

(2) 24等份

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

三、網(wǎng)格系統(tǒng)的應(yīng)用 1、頁(yè)面布局和格式設(shè)計(jì)

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

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

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

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

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

(2)根據(jù)業(yè)務(wù)內(nèi)容分配頁(yè)面比例并確定框?qū)?/p>

以24網(wǎng)格系統(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等不對(duì)稱劃分。具體的比例組合需要根據(jù)我們自己的需求來(lái)確定。這取決于業(yè)務(wù)需求。我們這里所說(shuō)的比例實(shí)際上就是盒子的寬度。

上圖是24網(wǎng)格系統(tǒng)上盒子的分布情況。圖片只列出了部分比例。實(shí)際業(yè)務(wù)中，在同一頁(yè)面上使用一組或兩組比例值的組合進(jìn)行布局是比較合適的（如下圖），組合過(guò)多的頁(yè)面會(huì)顯得瑣碎、雜亂，不利于閱讀和使用。因?yàn)楹凶拥母叨仁歉鶕?jù)內(nèi)容來(lái)確定的，所以下圖中沒(méi)有體現(xiàn)出高度尺寸的變化規(guī)律。

當(dāng)我們完成了上圖中的規(guī)劃后，我們要做的就是根據(jù)實(shí)際的內(nèi)容來(lái)安排每個(gè)框中的內(nèi)容，并進(jìn)行可視化和交互的實(shí)現(xiàn)。

2. 元素對(duì)齊和間距設(shè)置

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

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

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

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

4、注意事項(xiàng)：水槽寬度的設(shè)置

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

水箱的寬度為8n，這意味著水箱可以以8為基本單位進(jìn)行增減。為了降低設(shè)計(jì)決策成本，我們會(huì)提前設(shè)定一系列水槽寬度，定義使用場(chǎng)景對(duì)應(yīng)每個(gè)寬度，然后根據(jù)每個(gè)場(chǎng)景使用對(duì)應(yīng)的值。

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

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

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

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

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

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

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

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

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

(1)自帶網(wǎng)格系統(tǒng)設(shè)置：

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

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

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

網(wǎng)格系統(tǒng)參數(shù)設(shè)計(jì)：

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

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

(3) 跨平臺(tái)Web端網(wǎng)格工具

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

使用方法：在右上角設(shè)置頁(yè)面寬度和列數(shù)，頁(yè)面中會(huì)自動(dòng)生成一個(gè)可以下載為png圖片的柵格。

7. 常見(jiàn)問(wèn)題

(1)如何處理網(wǎng)格系統(tǒng)中不可避免出現(xiàn)的奇數(shù)？

理想情況下，我們應(yīng)該調(diào)整內(nèi)容區(qū)域的大小，使其盡可能被8整除，但在實(shí)際應(yīng)用中，有時(shí)是不可整除的?；谖覀儗?duì)盒子模型的理解，此時(shí)我們保持 和 的值不變，改變盒子的大小來(lái)適應(yīng)奇數(shù)個(gè)頁(yè)面（元素）。

因?yàn)橐恢滦院托适枪鈻呕獙?shí)現(xiàn)的主要目標(biāo)，有時(shí)一些不“完美”的尺寸是完全允許的，因?yàn)橛脩粼趯?shí)際使用頁(yè)面時(shí)看不到我們使用的網(wǎng)格系統(tǒng)。很難注意到那幾個(gè)像素的變化。他們能感受到的是頁(yè)面整體的韻律和韻律，以及連續(xù)一致的視覺(jué)語(yǔ)言給他們帶來(lái)的嚴(yán)謹(jǐn)可靠的心理感受。

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

首先需要指出的是，當(dāng)然也可以使用其他值。網(wǎng)格系統(tǒng)只是一種手段。提高設(shè)計(jì)效率、降低溝通成本、提高頁(yè)面一致性是最終目標(biāo)。所以如果你的團(tuán)隊(duì)有其他的網(wǎng)格習(xí)慣，并且一直效果不錯(cuò)，那么繼續(xù)使用是沒(méi)有問(wèn)題的。

但對(duì)于新設(shè)計(jì)師來(lái)說(shuō)，如果能夠了解前人的經(jīng)驗(yàn)并更好地運(yùn)用，就會(huì)少走彎路，更好地完成設(shè)計(jì)工作。

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

構(gòu)建網(wǎng)格系統(tǒng)時(shí)，不必使列寬等于裝訂線寬度并均等劃分內(nèi)容區(qū)域。

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

如有侵權(quán)請(qǐng)聯(lián)系刪除！