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

時間：2023-08-31 07:00:02 | 來源：網(wǎng)站運營

時間：2023-08-31 07:00:02 來源：網(wǎng)站運營

如何用柵格系統(tǒng)布局頁面：著急啊，需要馬上使用柵格，可用：http://grid.guide 在線柵格工具，快速生成柵格使用。




沒那么著急，想系統(tǒng)的了解柵格系統(tǒng)，便于以后更靈活的應(yīng)用，可以查看以下內(nèi)容。

（閱讀以下內(nèi)容，需要15分鐘）




目錄：

• 什么是柵格系統(tǒng)
• 主流網(wǎng)站如何使用柵格系統(tǒng)
• 如何用柵格系統(tǒng)布局頁面
• 影響網(wǎng)頁設(shè)計的兩大因素

---

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

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

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

柵格：

柵格最早起源于平面設(shè)計。1692年法國為提高印刷水平，以方格為設(shè)計基礎(chǔ)，將一個印刷版面分成上千個小格，這就是最早的柵格雛形。再后來，慢慢演變成運用固定的格子設(shè)計版面的平面設(shè)計風格。（參考圖1）

網(wǎng)頁柵格：

包括網(wǎng)頁端和移動端，是以規(guī)則的網(wǎng)格陣列來指導規(guī)范界面中的版面布局以及信息分布。

為什么要使用柵格：

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

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

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

01、最小單位：

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

網(wǎng)頁端 最小單位：10（參考圖2）

移動端 最小單位：3、4、5

02、總寬度/ W：

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

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

03、列數(shù)/ N：

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

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

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

04、大列寬/ L：

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

計算公式：L = W / N（參考圖5）

大列寬包含：列寬和水槽

05、水槽/ G：

相鄰兩個列寬之間的間隔是水槽。

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

06、列寬/ C：

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

07、安全邊距/ M：

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

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

計算公式：M = G / 2（參考圖8）

安全邊距：

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

注意：

柵格是輔助頁面布局的，所以需要根據(jù)實際內(nèi)容靈活的使用柵格，而不要被柵格所束縛。

各種公式匯總：

N 是自定義設(shè)置的列數(shù)（參考圖9）

總結(jié)：

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

---

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

電商網(wǎng)站：

一起看一下兩個主流電商如何使用柵格布局頁面，進一步加深對柵格系統(tǒng)使用的了解。（參考圖10）

淘寶布局：

下圖包含：（1）完整內(nèi)容展示布局、(2)瀏覽器縮小時內(nèi)容展示布局。

淘寶布局分為4列內(nèi)容：1、2、3、4，在情況（2）下，內(nèi)容3被隱藏。（參考圖11）

柵格布局：

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

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

在（2）柵格布局里，隱藏4列，內(nèi)容2寬度變窄占10列，其他內(nèi)容不變。（參考圖12）

柵格布局設(shè)定后，可以很方便計算出每個模塊內(nèi)容的寬度（參考圖13）

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

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

京東布局：

下圖包含：（1）完整內(nèi)容展示布局、(2)瀏覽器縮小時內(nèi)容展示布局。

京東布局和淘寶布局一樣分為4列內(nèi)容：1、2、3、4，在情況（2）下，內(nèi)容3被隱藏。（參考圖16）

柵格布局：

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

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

在（2）柵格布局里，隱藏4列，其他內(nèi)容不變。（參考圖17）

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

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

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

---

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

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

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

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

網(wǎng)頁舉例

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

Sketch柵格設(shè)置，這里的總寬度1190是內(nèi)容設(shè)計的實際寬度，設(shè)計頁面寬度是1920，因為有些內(nèi)容展示選用居中布局方式，兩邊留白。（參考圖22）

---

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

分辨率和瀏覽器（參考圖23）

分辨率

什么是分辨率？

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

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

注意：

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




瀏覽器

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

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

下面來看看最近一年瀏覽器市場份額占比情況。（參考圖24）

數(shù)據(jù)來源：https://netmarketshare.com/browser-market-share




以上內(nèi)容為原創(chuàng)，如果有任何問題，歡迎隨時來撩~

http://weixin.qq.com/r/VBMvN8PE-p6BrYdU90ZG (二維碼自動識別)

文 | 蝸牛醒