深度好文！如何用柵格系統(tǒng)布局網(wǎng)頁(yè)界面

時(shí)間：2023-09-29 00:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-29 00:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

深度好文！如何用柵格系統(tǒng)布局網(wǎng)頁(yè)界面：

網(wǎng)頁(yè)柵格系統(tǒng)像謎一樣的困擾著眾多網(wǎng)頁(yè)初級(jí)設(shè)計(jì)師，關(guān)于網(wǎng)頁(yè)柵格系統(tǒng)是網(wǎng)頁(yè)設(shè)計(jì)的一套標(biāo)準(zhǔn)的布局設(shè)計(jì)方法！

從維基百科查到柵格的定義為：柵格設(shè)計(jì)系統(tǒng)（又稱網(wǎng)格設(shè)計(jì)系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計(jì)、瑞士平面設(shè)計(jì)風(fēng)格、國(guó)際主義平面設(shè)計(jì)風(fēng)格），是一種平面設(shè)計(jì)的方法與風(fēng)格。運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。







目 錄

什么是柵格系統(tǒng)

主流網(wǎng)站如何使用柵格系統(tǒng)

如何用柵格系統(tǒng)布局頁(yè)面

影響網(wǎng)頁(yè)設(shè)計(jì)的兩大因素

GridGuide工具介紹







一、柵格系統(tǒng)

柵格系統(tǒng) 英文為 Grid Systems，也有翻譯為 網(wǎng)格系統(tǒng)。

定義：運(yùn)用固定的格子，遵循一定的規(guī)則，進(jìn)行頁(yè)面的布局設(shè)計(jì)，使布局規(guī)范簡(jiǎn)潔有規(guī)則。




其實(shí)也沒(méi)那么玄乎，我給網(wǎng)頁(yè)柵格系統(tǒng)這樣定義的：以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。網(wǎng)頁(yè)柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來(lái)。1692年法國(guó)為提高印刷水平，以方格為設(shè)計(jì)基礎(chǔ)，將一個(gè)印刷版面分成上千個(gè)小格，這就是最早的柵格雛形。再后來(lái)，慢慢演變成運(yùn)用固定的格子設(shè)計(jì)版面的平面設(shè)計(jì)風(fēng)格。不過(guò)對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對(duì)于前端開發(fā)來(lái)說(shuō)，網(wǎng)頁(yè)將更加的靈活與規(guī)范。








1.1 網(wǎng)頁(yè)柵格

這里所說(shuō)的包括網(wǎng)頁(yè)端和移動(dòng)端，是以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)規(guī)范界面中的版面布局以及信息分布。




1.2 為什么要使用柵格

通過(guò)柵格的使用，可以用邏輯解釋商業(yè)設(shè)計(jì)的細(xì)節(jié)問(wèn)題。

設(shè)計(jì)內(nèi)容都應(yīng)該有所依據(jù)，當(dāng)其他人質(zhì)疑時(shí)，可以系統(tǒng)有底氣的解釋設(shè)計(jì)內(nèi)容。設(shè)計(jì)師可以利用柵格讓畫面更有調(diào)性，讓內(nèi)容更具可讀性；可以快速校準(zhǔn)元素的位置，讓畫面更平衡；可以模塊化地管理元素，讓版面更有層次感。







1.3 柵格基礎(chǔ)七要素

1.3.1最小單位

需要先定好界面的單位基礎(chǔ)，后續(xù)內(nèi)容元素和布局規(guī)則都是基于它整數(shù)倍遞增。

網(wǎng)頁(yè)端 最小單位：10

移動(dòng)端 最小單位：3、4、5










1.3.2 總寬度 / W

總寬度：對(duì)整體布局進(jìn)行規(guī)范，且還可以保證設(shè)計(jì)尺寸的統(tǒng)一性。

界面設(shè)計(jì)要有具體尺寸，由于內(nèi)容多少不確定，所以高度沒(méi)有辦法定死，但內(nèi)容區(qū)的寬度是可以定的。







1.3.3 列數(shù) / N

列數(shù)是界面總寬度設(shè)定好后，縱向等分成幾列。




網(wǎng)頁(yè)端：12列、24列（常用等分列數(shù)，當(dāng)然不是固定的，需要根據(jù)自己的內(nèi)容設(shè)定列數(shù)）




移動(dòng)端：6列（常用等分列數(shù)）










1.3.4 大列寬/ L

把界面總寬度等分成幾列，每一列的寬度即為大列寬。

計(jì)算公式：L = W / N

大列寬包含：列寬和水槽










1.3.5 水槽 / G

相鄰兩個(gè)列寬之間的間隔是水槽。

水槽寬度越大，頁(yè)面留白和呼吸感會(huì)更好，反之則更緊湊。水槽可以將內(nèi)容更規(guī)范的區(qū)分開來(lái)。










1.3.6 列寬 / C

把界面總寬度等分成列，相鄰兩列之間的間隔（水槽）減去后就是列寬。













1.3.7 安全邊距/ M

界面左右保證可讀性和美觀度的合適的空隙就是安全邊距。

Sketch里設(shè)置水槽后，安全邊距是水槽的0.5倍。

計(jì)算公式：M = G / 2







安全邊距：

除了使用水槽的0.5倍，還可以使用0、0.5、1.0、1.5、2.0等水槽的倍數(shù)。舉例：水槽是20，使用0.5倍，安全邊距為10；水槽是20，使用2.0倍，安全邊距為40。







各種公式匯總：

N 是自定義設(shè)置的列數(shù)
















綜上所述，在Sketch里設(shè)置柵格，定義好3個(gè)數(shù)值即可，總寬度、列數(shù)、水槽，這三個(gè)內(nèi)容定義好數(shù)值后，其他內(nèi)容就會(huì)自動(dòng)計(jì)算，一個(gè)柵格就生成了。







如果沒(méi)Sketch，也可以在AI生成一個(gè)柵格！










柵格計(jì)算方式

已知：

寬度（W） 列寬（a） 列數(shù)（n） 間距寬度（i） 列數(shù)+間隙（A）








公示如下：

方式一

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







方式二

因?yàn)椋毫袛?shù)+間隙為A

也可得(A×n)-i=W




AI操作方法

1.比如950PX為類，模擬瀏覽器背景1920，新建主要區(qū)域950px；










2.選中950矩形，進(jìn)行對(duì)象—路徑—分割為網(wǎng)格
















3.輸入總寬，列寬就可以自動(dòng)幫你計(jì)算了







通過(guò)AI也可以做個(gè)簡(jiǎn)單的柵格系統(tǒng)，可以嘗試一下！










二、主流網(wǎng)站如何使用柵格系統(tǒng)




2.1 電商網(wǎng)站

看一下兩個(gè)主流電商如何使用柵格布局頁(yè)面，進(jìn)一步加深對(duì)柵格系統(tǒng)使用的了解。







（左 淘寶 & 右 京東）




淘寶布局


下圖包含：

第一張圖為完整內(nèi)容展示布局

第二張為瀏覽器縮小時(shí)內(nèi)容展示布局




淘寶布局分為4列內(nèi)容：1、2、3、4，第二張縮小后，內(nèi)容3則被隱藏。










柵格布局：

第一張圖完整內(nèi)容展示布局：網(wǎng)頁(yè)總寬度為1200，列數(shù)為24，水槽為10；

第二張圖瀏覽器縮小時(shí)內(nèi)容展示布局：總寬度為990，列數(shù)為20，水槽為10。




在第二張圖柵格布局里，隱藏4列，內(nèi)容2寬度變窄占10列，其他內(nèi)容不變。










柵格布局設(shè)定后，可以很方便計(jì)算出每個(gè)模塊內(nèi)容的寬度










柵格的列數(shù)，根據(jù)具體內(nèi)容設(shè)定。內(nèi)容模塊較多，建議等分列數(shù)多一些，容易布局；如果內(nèi)容模塊較少，等分列數(shù)也可以少一些，就像淘寶可以等分成24列，也可以等分成12列。













柵格布局設(shè)定為12列，每個(gè)模塊內(nèi)容的寬度和上面等分成24列的寬一樣













京東布局

下圖包含：

第一張圖為完整內(nèi)容展示布局

第二張圖瀏覽器縮小時(shí)內(nèi)容展示布局




京東布局和淘寶布局一樣分為4列內(nèi)容：1、2、3、4，在被縮小的情況下，內(nèi)容3被隱藏。










柵格布局：

第一張完整內(nèi)容展示布局：網(wǎng)頁(yè)總寬度為1200，列數(shù)為24，水槽為10；

第二張瀏覽器縮小時(shí)內(nèi)容展示布局：總寬度為990，列數(shù)為20，水槽為10。




在被縮小的圖二的柵格布局里，隱藏4列，其他內(nèi)容不變。
















京東柵格布局，每個(gè)模塊內(nèi)容的寬度如下圖













再來(lái)強(qiáng)調(diào)一下：柵格的列數(shù)，根據(jù)具體內(nèi)容設(shè)定。京東網(wǎng)頁(yè)等分成24列，也可以等分成12列。













柵格布局設(shè)定為12列，每個(gè)模塊內(nèi)容的寬度和上面等分成24列的寬一樣













三、如何用柵格系統(tǒng)布局頁(yè)面

第一步：確定頁(yè)面寬度，比如1920、1800、1600、1366、1280等等




第二步：分析內(nèi)容等分的復(fù)雜度，如果內(nèi)容簡(jiǎn)單只需要3、4等分，12列的柵格系統(tǒng)即可。如果有較多不等分的可能，還是建議采用24列的柵格系統(tǒng)，可靈活設(shè)置。




第三步：根據(jù)內(nèi)容布局頁(yè)面，確定模塊之間是否有“間隔”，間隔尺寸是多少，6px、8px、10px、12px、20px選一個(gè)方便計(jì)算、方便記憶和整除的數(shù)值即可。就像過(guò)去，開發(fā)人員發(fā)現(xiàn)960px是最適合作為網(wǎng)格布局的寬度，因?yàn)?60可以整除3，4，5，6，8，10，12，15，是不是突然發(fā)現(xiàn)設(shè)計(jì)其實(shí)是一道數(shù)學(xué)題。







3.1 網(wǎng)頁(yè)舉例

根據(jù)具體內(nèi)容，使用方格布局整個(gè)頁(yè)面。

Sketch柵格設(shè)置，這里的總寬度1190是內(nèi)容設(shè)計(jì)的實(shí)際寬度，設(shè)計(jì)頁(yè)面寬度是1920，因?yàn)橛行﹥?nèi)容展示選用居中布局方式，兩邊留白。



















四、影響網(wǎng)頁(yè)設(shè)計(jì)的兩大因素




分辨率和瀏覽器








4.1 什么是分辨率？

比如1920*1080px，整個(gè)屏幕可以看成是由很多小方格子組成，一個(gè)像素就是一個(gè)小格子，橫向有1920個(gè)小格子，豎向有1080個(gè)小格子。




電腦屏幕是14寸還是15寸的，尺寸不變，電腦分辨率是可變的，在同一個(gè)屏幕上，分辨率越大畫面就越精細(xì)，反之就越模糊。當(dāng)下比較流行的屏幕分辨率：1024*768、1366*768、1280*800、1280*1024、1440*900、1600*900、1920*1080等。




注意：

關(guān)于分辨率，可以選用適合自己團(tuán)隊(duì)的分辨率尺寸，我們團(tuán)隊(duì)是梳理出所有產(chǎn)品的分辨率的使用情況，及團(tuán)隊(duì)產(chǎn)品設(shè)計(jì)的特點(diǎn)，選取2-3個(gè)作為后續(xù)統(tǒng)一使用的尺寸。







4.2 瀏覽器

設(shè)計(jì)網(wǎng)頁(yè)時(shí)要考慮好瀏覽器，主流的瀏覽器有谷歌、Safari、火狐、IE、歐朋等。

因?yàn)椴煌瑸g覽器工具欄高度不同，如果設(shè)計(jì)內(nèi)容需要在小屏幕上展示，就要考慮到打開瀏覽器默認(rèn)頁(yè)面及全屏頁(yè)面的高度展示情況，如果瀏覽器所占高度較多，那么內(nèi)容展示區(qū)域就被壓縮了，所以就要考慮將最重要的內(nèi)容盡量放在上面。

下面來(lái)看看最近一年瀏覽器市場(chǎng)份額占比情況。

五、GridGuide工具介紹

網(wǎng)址：http://grid.guide/




5.1 GridGuide介紹

首先來(lái)認(rèn)識(shí)下「GridGuide」她是幫你在設(shè)計(jì)里創(chuàng)建完美柵格的一個(gè)工具。（用她而不是它，是因?yàn)镚G如果是個(gè)人，應(yīng)該是個(gè)聰慧伶俐的大美人吧~）




使用方式：輸入3個(gè)數(shù)值，自動(dòng)生成所有可使用的柵格最佳組合方案。打開網(wǎng)頁(yè)，她長(zhǎng)這樣













網(wǎng)頁(yè)包含4大版塊內(nèi)容







關(guān)閉與柵格操作無(wú)關(guān)的信息，如下圖點(diǎn)擊「Dismis this message」可隱藏產(chǎn)品介紹內(nèi)容







關(guān)掉產(chǎn)品介紹后，顯示如下圖










5.2 如何設(shè)置柵格

之前我們也有介紹過(guò)，柵格系統(tǒng)設(shè)置只需要設(shè)置3個(gè)數(shù)值即可，是「總寬度、列數(shù)、水槽」而「GridGuide」工具，設(shè)置的是「總寬度、列數(shù)、水槽的幾倍(也就是左右兩側(cè)安全邊距)」，如下圖










輸入「總寬度、列數(shù)、水槽的幾倍」3個(gè)數(shù)值后，自動(dòng)生成所有可使用的柵格最佳組合方案，如下圖







自動(dòng)生成的柵格，會(huì)計(jì)算出每個(gè)方案「列寬、水槽」的數(shù)值







上圖設(shè)置的內(nèi)容，「水槽的幾倍」為0，以第一個(gè)方案為例，水槽為12，12*0=0，所以安全邊距為0，如果「水槽的幾倍」設(shè)置為1.0就會(huì)生成下面這些方案










「水槽的幾倍」設(shè)置為1.5又會(huì)生成下面這些方案







「水槽的幾倍」可以選擇設(shè)置為0、0.5、1.0、1.5、2.0等倍數(shù)。

剛才設(shè)置「水槽的幾倍」為1.5不變的情況下，再設(shè)置下「總寬度、列數(shù)」這些數(shù)值，看看又會(huì)變化出哪些神奇的方案吶，如下圖













5.3 如何用柵格布局頁(yè)面

首先評(píng)估下內(nèi)容，選取一種最適合自己內(nèi)容的柵格方案，下載后放在設(shè)計(jì)軟件里設(shè)置出柵格系統(tǒng)就可以了，如果沒(méi)有可以自動(dòng)生成的功能，也可以自己繪制。







其實(shí)柵格系統(tǒng)了解后是不是感覺也挺簡(jiǎn)單的，最重要的一點(diǎn)，這里再啰嗦一句：

「柵格是輔助頁(yè)面布局的，所以需要根據(jù)實(shí)際內(nèi)容靈活的使用柵格，而不要被柵格所束縛了，注意靈活運(yùn)用，！




相關(guān)文章

我要進(jìn)群

2019UI設(shè)計(jì)面試資源大禮包（第三期）

UI設(shè)計(jì)進(jìn)階干貨 - 應(yīng)用圖標(biāo)

UI設(shè)計(jì)進(jìn)階干貨 - 動(dòng)效

UI設(shè)計(jì)進(jìn)階干貨-閃屏

UI設(shè)計(jì)進(jìn)階干貨-引導(dǎo)頁(yè)

UI設(shè)計(jì)進(jìn)階干貨-注冊(cè)登錄

UI設(shè)計(jì)進(jìn)階干貨 - 首頁(yè)

UI設(shè)計(jì)進(jìn)階干貨 - Banner

UI設(shè)計(jì)進(jìn)階干貨-列表頁(yè)

UI設(shè)計(jì)進(jìn)階干貨 - 適配&標(biāo)注

UI設(shè)計(jì)進(jìn)階干貨 - 切圖&命名

UI設(shè)計(jì)進(jìn)階干貨-重陽(yáng)節(jié)閃屏賞析

關(guān)鍵詞回復(fù)：