柵格系統(tǒng)讓我們的頁面設(shè)計(jì)變得有規(guī)律，提升了頁面的一致性和復(fù)用性，也減少了設(shè)計(jì)、開發(fā)溝通成本。今天就聊聊柵格化設(shè)計(jì)。

一、為什么要柵格系統(tǒng)

做了好幾次規(guī)范設(shè)計(jì)了，每次都做的不是讓自己很滿意，所以值得自己好好反思一下了。我們在做設(shè)計(jì)的時(shí)候，有時(shí)候比較隨意，尤其是產(chǎn)品從0-1的時(shí)候，由于前期的隨意，就導(dǎo)致后面越來越不規(guī)范，不同頁面有不同的尺寸規(guī)則。這時(shí)候應(yīng)該好好想想，為什么我們的設(shè)計(jì)越來越雜亂？主要原因還是我們前期沒有搭建好規(guī)范。比如柵格，就是我們設(shè)計(jì)的基石。

柵格系統(tǒng)讓我們的頁面設(shè)計(jì)變得有規(guī)律，提升了頁面的一致性和復(fù)用性，也減少了設(shè)計(jì)、開發(fā)溝通成本。很多設(shè)計(jì)師對柵格只知道大致意思，但沒有深入了解，所以今天我們就來深入探討下柵格設(shè)計(jì)。

二、屏幕分布

我們講柵格，主要講pc的柵格設(shè)計(jì)，當(dāng)然移動端也應(yīng)該利用柵格設(shè)計(jì)。我們在做移動端的設(shè)計(jì)的時(shí)候，經(jīng)常會抱怨某某某公司又出新手機(jī)了，我又要去適配它們了。移動端的屏幕分辨率是比較多樣的，從iPhone的4到現(xiàn)在的iPhone XS Max，屏幕分辨率已經(jīng)好幾種了，再加上安卓系統(tǒng)，就更多了。我們在抱怨移動端的屏幕尺寸過多，適配難度大，那么，pc端又何嘗不是呢。

首先來看看，目前pc端的屏幕尺寸占比

從圖中我們可以看出，目前國內(nèi) PC端用戶屏幕分辨率排名前三的分別是19201080、1366768、1400*900；他們?nèi)咧蜑?0.96%，占了很大的比例。

如果我們是面向企業(yè)內(nèi)部的設(shè)計(jì)，企業(yè)通常是批量采購，那我們就以主要屏幕尺寸為基礎(chǔ)進(jìn)行設(shè)計(jì)就行。如果企業(yè)使用的屏幕沒有統(tǒng)一，使用比例和全國的分布差不多，那就應(yīng)該按照整體屏幕分布來決定如何設(shè)計(jì)了。

根據(jù)比例來看，1440的尺寸處于中間位置，如果以它為基準(zhǔn)設(shè)計(jì)，最終向上向下響應(yīng)適配后，相對誤差最小，從而較好的用戶使用體驗(yàn)。目前，Ant design設(shè)計(jì)規(guī)范也采用1440作為基準(zhǔn)尺寸（Ant design是螞蟻金服開源的一套設(shè)計(jì)規(guī)范，做過規(guī)范的同學(xué)應(yīng)該不陌生。其實(shí)很多時(shí)候，我們可以直接拿來用，沒必要另外造車輪，還沒別人做的好）。

三、建立你的原子單位

基準(zhǔn)屏幕確定好后，那我們開始來確定下柵格的原子單位。從上面的屏幕分辨率可以看出，屏幕的尺寸都為偶數(shù)，為了保證我們的基本單元能夠被整除，我們需要確定最小尺寸的單位，通常我們定為8。為什么是8，而不是4、6、10、12呢，我們可以看看下面的這張圖。4和8在x軸整除率是一樣大的，如果算上y軸，4的整除率是最高的。不過4太小，有時(shí)候區(qū)分不明顯，設(shè)計(jì)需要反復(fù)修改，在這個(gè)過程中設(shè)計(jì)成本會很大。

不僅設(shè)計(jì)如此，其實(shí)開發(fā)在設(shè)計(jì)的時(shí)候也是遵循偶數(shù)原則。前端開源組件庫比如 Metronic、Antdesign 等也是基于8的原子單位來設(shè)計(jì)。這樣能更好的還原我們的設(shè)計(jì)稿，降低開發(fā)成本。

如圖所示，左邊采用8為原子單位，所有的尺寸都是8的倍數(shù)，能很好的確定設(shè)計(jì)規(guī)律。右邊的尺寸比較隨意，沒有規(guī)律所循，設(shè)計(jì)一致性比較難達(dá)到，若有新的組件，那尺寸該如何定呢，都是比較麻煩的事情。所以，確定好你的原子單位是很重要的，而通常我們就是采用8為原子單位。

四、柵格設(shè)計(jì)的幾大要素

確定好基準(zhǔn)屏幕、原子單位后，我們就要來了解柵格設(shè)計(jì)的一些基本要素了。

在做柵格的時(shí)候，我們需要明白幾個(gè)關(guān)鍵詞：屏幕分辨率、設(shè)計(jì)尺寸、內(nèi)容寬度、水槽、列寬、頁邊距、留白

1、屏幕分辨率，我們上面也講了，由于設(shè)備的不同，導(dǎo)致市場上使用著各種分辨率的尺寸，具體什么是分辨率就不講了。只是我們在做設(shè)計(jì)之前，需要了解我們的用戶屏幕分辨率的使用情況

2、設(shè)計(jì)尺寸，前面說了，根據(jù)用戶的使用情況，選一個(gè)合適的設(shè)計(jì)尺寸，這個(gè)是隨著用戶的使用情況變化而變化的，通常設(shè)備更新沒那么快，所以暫時(shí)建議采用比較通用的設(shè)計(jì)尺寸。1440x900

3、內(nèi)容寬度，我們在設(shè)計(jì)的時(shí)候，并不是確定好設(shè)計(jì)尺寸了就在這個(gè)尺寸內(nèi)鋪滿設(shè)計(jì)內(nèi)容。畢竟我們的用戶的屏幕分辨率各不相同，為了更好的滿足絕大多數(shù)用戶，我們要確定好設(shè)計(jì)的內(nèi)容寬度。因?yàn)槲覀兦懊嬉呀?jīng)確定好基準(zhǔn)設(shè)計(jì)尺寸了，那我們的內(nèi)容寬度就根據(jù)這個(gè)基準(zhǔn)尺寸來確定。具體的寬度需要根據(jù)各自業(yè)務(wù)來定。

4、水槽（Gutter），水槽就是列和行的分割間距，水槽越大頁面布局間距就越大，水槽越小頁面就越緊湊。水槽的寬度是8n，也就是水槽可以以8為基本單位去增加或減小。為了減少設(shè)計(jì)決策成本，我們會事先設(shè)定好一系列水槽寬度，并定義好每個(gè)寬度對應(yīng)的使用場景，然后根據(jù)每個(gè)場景使用對應(yīng)數(shù)值就可以了。比如8、16、 24、32 、40。根據(jù)實(shí)踐經(jīng)驗(yàn)，正常情況下，兩個(gè)模塊間距（水槽）的值為24時(shí)，視覺上是最為舒適。比如Ant design中的設(shè)計(jì)水槽就是24px

5、列寬，目前有兩種比較主流的等分方式是12等分與24等分。列是柵格系統(tǒng)縱向排布依據(jù)，列數(shù)越多縱向排布內(nèi)容就可以越細(xì)致，但是版面內(nèi)容就會變的更稠密，內(nèi)容更碎。

6、頁邊距，就是設(shè)計(jì)內(nèi)容到邊框的間距，也可以理解為到屏幕邊框的間距

7、留白，留白的目的是讓我們的設(shè)計(jì)有一定的呼吸韻律，不能過于緊湊。當(dāng)然，我們可以把所有空白的地方都統(tǒng)稱為留白，但是我們這里就簡單的描述為具體內(nèi)容到模塊之間的距離。

說了這么多，我們來看看圖

看了這么多是不是有點(diǎn)懵逼，那我們繼續(xù)簡化下，因?yàn)橛械臅r(shí)候頁邊距和留白是合二為一的，主要還是根據(jù)你們自己設(shè)計(jì)的風(fēng)格來定。

由于a+i=A，

可得：W=(A×n) – i

網(wǎng)格寬度=（一個(gè)柵格單元寬度xn）-水槽

比如，本設(shè)計(jì)尺寸以1440px為基礎(chǔ)，那么兩邊間距設(shè)為24，從而得出W=1440 - 24 - 24 = 1392，水槽寬度也定為i=24=8x3，設(shè)置為12列：

W=（A x 12）-24

A=（1392+24）÷ 12 = 118

a= 118 - 24 =94

五、柵格的應(yīng)用

現(xiàn)在，我們公式算法搞清楚后，我們就來進(jìn)行排版設(shè)計(jì)。以12柵格系統(tǒng)為例，一個(gè)12柵格系統(tǒng)可以根據(jù)業(yè)務(wù)需要被等分或者不等分，比如，1：1：1、1：2：1、2：5：5、3：4：5、1：1：1：1，具體采用哪種比例的組合需要我們根據(jù)自己業(yè)務(wù)需求來定，我們此處所說的比例實(shí)際上就是具體內(nèi)容的寬度。當(dāng)然，如果你柵格是24，那么你的比例會更加細(xì)致，排布也更多變

前面我們看了頂部導(dǎo)航的設(shè)置方式，側(cè)邊導(dǎo)航也是一樣的，原理懂了就好辦了。比如，我們以Ant design的設(shè)計(jì)為參考樣式

六、工具介紹

看了這些，那我們來介紹下工具，在sketch中，我們有2個(gè)方法可以使用。

第1種，是采用sketch自帶的工具，在顯示-畫布-布局設(shè)置，找到布局設(shè)置界面，可以根據(jù)自己的需要設(shè)置。但是有個(gè)缺點(diǎn)，就是這個(gè)布局是該頁面全局的，不能針對某一塊設(shè)定。如下圖

第2種，我們可以采用插件，BootstrapGrid-maste，這個(gè)插件比較方便，可以設(shè)置多個(gè)，選擇好你的內(nèi)容，就可以根據(jù)內(nèi)容設(shè)置柵格了。但是，有個(gè)缺點(diǎn)，目前最大只能設(shè)置12柵格。下載地址：https://www.cr173.com/mac/811601.html

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

另外，PS插件Assistor Ps 的參考線功能也比較好用，推薦下，還有就是GuideGuide雖然插件多種多樣，大家的使用的軟件也各不相同，萬變不離其宗，我們掌握好原理了，這些就能很好的被我們使用，提升我們的工作效率和設(shè)計(jì)質(zhì)量了。

最后，其實(shí)我還想深入了解下移動端的柵格設(shè)計(jì)，其實(shí)發(fā)現(xiàn)移動端的界面比較小，大家在實(shí)際情況中偶爾會使用一些，尤其是視覺設(shè)計(jì)的時(shí)候。但其實(shí)原理都一樣，也就不再啰嗦了。以上內(nèi)容也是我在閱讀大量文章后，根據(jù)自己的一些理解寫的，我寫文章只是讓自己更好的系統(tǒng)理解設(shè)計(jì)原理，形成自己的系統(tǒng)知識，若有的同學(xué)還是比較迷茫，感覺自己的知識還是很散，也可以采用這種方法，讀書也一樣。

轉(zhuǎn)至站酷。