柵格系統(tǒng)（grid systems）

規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。

基本原理

在網(wǎng)頁設(shè)計(jì)中，把寬度為“W”的頁面分割成n個(gè)網(wǎng)格單元“a”，每個(gè)單元與單元之間的間隙設(shè)為“i”,把“a+i”定義“A”。他們之間的關(guān)系如下：

W =（a×n）+（n-1）i

由于a+i=A，

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

我們通常把a(bǔ)稱為“柱”，對(duì)應(yīng)代碼中的Column；i稱為“水槽”，對(duì)應(yīng)代碼中的Gutter；a+i=A稱為“列”

設(shè)計(jì)柵格系統(tǒng)，本質(zhì)就是定義a，i，n的數(shù)值。

UI設(shè)計(jì)中有一個(gè)通用做法，就是元素的寬度盡量是8的倍數(shù)，基于今天的大多數(shù)的網(wǎng)頁設(shè)計(jì)，畫板寬度都為1440px ，此時(shí)我們將a=24,i=24,n=24,這是一組簡單美妙的數(shù)值，可算得W=（24x24）+23x24=47x24=1128px；將柵格居中于畫板(偏置156px)，此時(shí)的柵格系統(tǒng)如下：

1128柵格系統(tǒng)：

得到的這個(gè)柵格布局被廣泛使用，比如站酷網(wǎng)首頁:

觀察計(jì)算公式W=1128=47x24=（24+23）x24，這里的47不是8的倍數(shù)，我們?nèi)菀紫氲桨阉兂?8，

將a=25,i=24,n=24,算得W=（24x24）+（25-1）x24=48x24=1152px；此時(shí)的柵格系統(tǒng)如下：

1152柵格系統(tǒng)：

這個(gè)柵格系統(tǒng)的美感在于，寬度W=48x24=1152px，兩邊的留白為畫板1440px寬度的1/10等于144px。Ant Dseign中運(yùn)用了此柵格：

以上兩個(gè)柵格布局都是24柵格系統(tǒng)，使用24柵格系統(tǒng)的好處是，它可以輕松實(shí)現(xiàn)2等分、3等分、4等分、6等分、8等分、12等分，也可以進(jìn)行1：2：1、   1：3：2、   1：2、 1：3  等不對(duì)稱分割的布局。

除了最常見的24柵格布局外，也可進(jìn)行36柵格布局，例如：

a=16，i=16，n=36，W=（16x36）+16x（36-1）=16x（36+35）=1136

1136柵格系統(tǒng)：

a=26，i=24，n=24，W=（26x24）+24x23=24x49=1176px

例如騰訊文檔：

1176柵格系統(tǒng)：

“廠”型布局網(wǎng)頁的柵格布局：

以上的網(wǎng)頁布局都是瀑布式布局，在許多應(yīng)用型網(wǎng)站中，常使用“廠”字布局，對(duì)于“廠”布局的網(wǎng)頁，該如何設(shè)計(jì)合適的柵格系統(tǒng)呢？

我們可以先確定左側(cè)菜單欄的寬度，例如飛書管理后臺(tái)中左側(cè)菜單欄的寬度為228px，在拉動(dòng)瀏覽器時(shí)，這部分通常是不動(dòng)的，再確定主體內(nèi)容去和左側(cè)菜單欄間的間隙，比如12px。

此時(shí)可以計(jì)算W=1440-228-12x2=1188。

使用24柵格系統(tǒng)時(shí)，12a+11i=1188，方程中有兩個(gè)未知數(shù)，我們?cè)O(shè)定其中一個(gè)時(shí)，就可計(jì)算出另一個(gè)。另i=12,解

W =（a×n）+（n-1）i

1188=（ax24）+23x12

a=38

是幫助，而非限制

對(duì)開發(fā)者而言柵格是實(shí)現(xiàn)動(dòng)態(tài)布局的手段，而設(shè)計(jì)師對(duì)于柵格的理解源自平面設(shè)計(jì)中的柵格，不應(yīng)把柵格系統(tǒng)當(dāng)成一種限制，而是幫助，也不用總是擔(dān)心元素超出柵格。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：站酷   作者：隔岸吃瓜

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

對(duì)于網(wǎng)頁設(shè)計(jì)來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對(duì)于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。