一文讀懂定寬、自適應(yīng)、響應(yīng)式柵格系統(tǒng)怎么設(shè)置

時(shí)間：2023-09-28 22:24:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-28 22:24:01 來源：網(wǎng)站運(yùn)營(yíng)

一文讀懂定寬、自適應(yīng)、響應(yīng)式柵格系統(tǒng)怎么設(shè)置：概要

1. 柵格系統(tǒng)的必要性
2. 柵格系統(tǒng)的基本概念
3. 柵格系統(tǒng)的分類及計(jì)算公式
4. 柵格系統(tǒng)在響應(yīng)式布局中的應(yīng)用
5. 網(wǎng)頁柵格系統(tǒng)的使用步驟

網(wǎng)頁柵格系統(tǒng)的必要性

更專業(yè)

使設(shè)計(jì)有跡可循，具有邏輯性，同時(shí)也更規(guī)范，減少設(shè)計(jì)中的尺寸計(jì)算和無效嘗試，設(shè)計(jì)師可以將更多的精力放在設(shè)計(jì)本身。

更高效

統(tǒng)一設(shè)計(jì)規(guī)范，減少?zèng)Q策時(shí)間，使溝通更高效。

布局更方便

特別是對(duì)響應(yīng)式布局，能夠使不同設(shè)備上呈現(xiàn)的界面更具統(tǒng)一性。

柵格系統(tǒng)的基本概念

基本組成:

1. 柵格總寬度（W）
2. 列（a）
3. 水槽（i）
4. 外邊距（M）

柵格總寬度(W)


柵格總寬度就是設(shè)計(jì)內(nèi)容的寬度，一般來說網(wǎng)頁的頂部和側(cè)邊導(dǎo)航、背景裝飾元素、通欄banner和底欄（footer）可以不受柵格總寬度限制。

列(a)

柵格的單位，它們構(gòu)成了內(nèi)容寬度。最常用的12列、24列。列的寬度一般會(huì)計(jì)算得出，或直接自定義，首先要確定的是列的數(shù)目。

水槽(i)

水槽是列與列之間的間隔，水槽寬度越小內(nèi)容越緊湊；越大留白越多，頁面更有呼吸感，但水槽寬度不能比列寬大，否則不利于內(nèi)容的展示。水槽內(nèi)不可以放內(nèi)容，不然的話使用柵格還有什么意義。

外邊距(M)

是內(nèi)容寬度之外的留白部分，會(huì)隨著設(shè)備的寬度不同而變化。外邊距一般有個(gè)安全距離，可以按照水槽寬度的（常用0.5、1.0、1.5、2.0）倍數(shù)來計(jì)算。




柵格系統(tǒng)的分類和計(jì)算公式

a、有邊距的柵格：適合已知要設(shè)計(jì)的內(nèi)容寬度（即W已知）




b、無邊距的柵格：適合已知要適配的網(wǎng)頁尺寸，使用最接近網(wǎng)頁內(nèi)容尺寸的柵格系統(tǒng)。




c、直接等分的網(wǎng)格：已知要設(shè)計(jì)的內(nèi)容寬度和列寬及列的數(shù)目




柵格系統(tǒng)在響應(yīng)式布局中的應(yīng)用

柵格系統(tǒng)應(yīng)用于響應(yīng)式布局，有三種類型：

1. 固定網(wǎng)格布局；
2. 流動(dòng)網(wǎng)格布局；
3. 混合網(wǎng)格

在此之前有個(gè)斷點(diǎn)的概念，需要了解一下

斷點(diǎn)：是具有特定布局要求的預(yù)定屏幕尺寸的范圍。在給定的斷點(diǎn)范圍內(nèi)，布局會(huì)根據(jù)屏幕大小和方向進(jìn)行調(diào)整。超出范圍則相當(dāng)于達(dá)到某個(gè)臨界點(diǎn)，界面布局會(huì)發(fā)生變化。

a、固定網(wǎng)格布局

固定網(wǎng)格，列寬和水槽寬不會(huì)改變，只是改變列的數(shù)目，當(dāng)窗口縮放時(shí)，排版布局不會(huì)發(fā)生任何改變，只有當(dāng)達(dá)到一個(gè)臨界值（開發(fā)那邊設(shè)置好的固定的值），界面才會(huì)發(fā)生改變。在此之前界面排版都是不變的，就像一部分被切掉了。




b、流動(dòng)網(wǎng)格布局

內(nèi)容寬度會(huì)隨著窗口的縮放而發(fā)生改變，例如圖片會(huì)縮小，文本會(huì)換行。水槽的寬度不一定是固定的，可以隨著頁面寬度變化。




c、混合網(wǎng)格

即固定網(wǎng)格和流動(dòng)網(wǎng)格組合的形式，常用于后臺(tái)系統(tǒng)設(shè)計(jì)、工具型界面設(shè)計(jì)等。




例如上面的后臺(tái)管理系統(tǒng)（dashboard）側(cè)邊欄是固定網(wǎng)格，右側(cè)內(nèi)容是流動(dòng)網(wǎng)格。水槽寬度保持不變。




柵格系統(tǒng)的使用步驟

1. 確定內(nèi)容的總寬度W（常用的1180px、1190px、1200px、1400px）
2. 確定柵格數(shù)目n（如果你的網(wǎng)頁結(jié)構(gòu)相對(duì)簡(jiǎn)單，則n=12即可，如果網(wǎng)頁結(jié)構(gòu)比較復(fù)雜或者具有排版的不確定性，則用n=24。）
3. 確定水槽的寬度i（水槽寬度常用的6、8、10、15、20px）
   
4. 在sketch/ps里設(shè)置上面的參數(shù)即可得到一套柵格系統(tǒng)

Sketch非常方便，在「視圖」-「畫布」-「布局設(shè)置」即可得到如下界面設(shè)置柵格系統(tǒng)（中文和英文對(duì)照）

Ps中「視圖」-「新建參考線版面」，雖然沒有Sketch那么方便，但依然能夠很方便設(shè)置出柵格系統(tǒng)，如圖。




本文總結(jié)：

1. 柵格系統(tǒng)組成：總寬度（W）、列（a）、水槽（i）、外邊距（M）
2. 計(jì)算公式：有邊距網(wǎng)格：W=（a+i）*n；無邊距網(wǎng)格：W=（a+i）*n-i；確定總寬度，確定列寬和數(shù)目直接等分
3. 響應(yīng)式布局三種類型：固定網(wǎng)格布局；流動(dòng)網(wǎng)格布局；混合網(wǎng)格
4. 柵格使用三步驟：第一步確定總寬度（W），第二步確定柵格的數(shù)目（n），③第三步確定水槽寬度（i）

其他的一些小技巧：

1. 網(wǎng)頁中常用100px柵格，也就是列寬與水槽的常見組合（90+10、80+20、70+30、85+15）px
2. 網(wǎng)頁中圖片推薦使用常用比例（21:9、16:10、16:9、7:5、4:3、1:1）
3. 柵格不是固定死的，可以自定義符合當(dāng)前項(xiàng)目的柵格系統(tǒng)。

推薦一個(gè)智能生成柵格系統(tǒng)的網(wǎng)站http://grid.guide/

有了這個(gè)省去了很多計(jì)算的過程，可以直接下載下來png格式，放到軟件里面直接拉參考線，就有了一套網(wǎng)格系統(tǒng)，是不是很方便。