在網站設計中板式運用的刪格化計算法，使網站的頁面看起來更加舒服和平衡增強了內容上的閱讀性，使網站設計上布局更加清晰有條理性、邏輯性。網站建設中設計師也通過刪格化，使頁面看起來更具有層次感，那么什么話到底是怎么規范的呢？

1. 柵格

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

2. 網頁柵格

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

3. 為什么要使用柵格

通過柵格的使用，可以用邏輯解釋商業設計的細節問題。

設計內容都應該有所依據，當其他人質疑時，可以系統有底氣的解釋設計內容。設計師可以利用柵格讓畫面更有調性，讓內容更具可讀性；可以快速校準元素的位置，讓畫面更平衡；可以模塊化地管理元素，讓版面更有層次感。

4. 柵格基礎七要素

最小單位

需要先定好界面的單位基礎，后續內容元素和布局規則都是基于它整數倍遞增。

網頁端最小單位：10

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

總寬度/W

總寬度：對整體布局進行規范，且還可以保證設計尺寸的統一性。

界面設計要有具體尺寸，由于內容多少不確定，所以高度沒有辦法定死，但內容區的寬度是可以定的。

列數/N

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

網頁端：12列、24列（常用等分列數，當然不是固定的，需要根據自己的內容設定列數）

移動端：6列（常用等分列數）

大列寬/L

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

計算公式：L = W / N

大列寬包含：列寬和水槽

水槽/G

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

水槽寬度越大，頁面留白和呼吸感會更好，反之則更緊湊。水槽可以將內容更規范的區分開來。

列寬/C

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

安全邊距/M

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

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

計算公式：M = G / 2

5. 安全邊距

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

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

6. 各種公式匯總

N 是自定義設置的列數。

小結

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

如何用柵格系統布局頁面

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

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

第三步：根據內容布局頁面，確定模塊之間是否有「間隔」，間隔尺寸是多少，6px、8px、10px、12px和20px選一個方便計算、方便記憶和整除的數值即可。

就像過去，開發人員發現960px是最適合作為網格布局的寬度，因為960可以整除3，4，5，6，8，10，12，15，是不是突然發現設計其實是一道數學題。

1. 網頁舉例

根據具體內容，使用方格布局整個頁面。

Sketch 柵格設置，這里的總寬度1190是內容設計的實際寬度，設計頁面寬度是1920，因為有些內容展示選用居中布局方式，兩邊留白。

影響網頁設計的兩大因素

影響網頁設計的兩大因素：分辨率和瀏覽器。

1. 分辨率

什么是分辨率？

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

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

注意：

關于分辨率，可以選用適合自己團隊的分辨率尺寸，我們團隊是梳理出所有產品的分辨率的使用情況，及團隊產品設計的特點，選取2~3個作為后續統一使用的尺寸。

2. 瀏覽器

在網頁設計的時候也要考慮到各大瀏覽器的現實問題，有的瀏覽器窗口比較高，有的瀏覽器窗口比較窄，那么我們在做設計的過程中應適當的考慮到效果圖在瀏覽器上呈現的效果在全屏滾動的時候要考慮的每一屏內容的規劃，各大瀏覽器是否能夠顯示完整。

文章標題：網頁設計中如何掌握柵格系統基礎知識！
地址分享：http://www.kartarina.com/news44/49994.html

成都網站建設公司_創新互聯，為您提供做網站、定制開發、品牌網站設計、ChatGPT、網站建設、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯