起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何用柵格系統布局頁面？
什么是柵格系統？主流網站如何使用柵格系統？如何用柵格系統布局頁面呢？
如果很著急，需要馬上使用柵格，可用：http://grid.guide在線柵格工具，快速生成柵格使用。
沒那么著急，想系統的了解柵格系統，便于以后更靈活的應用，可以查看以下內容。
（閱讀以下內容，需要15分鐘）
目錄：
- 什么是柵格系統
- 主流網站如何使用柵格系統
- 如何用柵格系統布局頁面
- 影響網頁設計的兩大因素
一、什么是柵格系統
柵格系統英文為 Grid Systems，也有翻譯為網格系統。
定義：運用固定的格子，遵循一定的規則，進行頁面的布局設計，使布局規范簡潔有規則。
柵格：
柵格最早起源于平面設計。1692年法國為提高印刷水平，以方格為設計基礎，將一個印刷版面分成上千個小格，這就是最早的柵格雛形。再后來，慢慢演變成運用固定的格子設計版面的平面設計風格。（參考圖1）
網頁柵格：
包括網頁端和移動端，是以規則的網格陣列來指導規范界面中的版面布局以及信息分布。
1. 為什么要使用柵格？
通過柵格的使用，可以用邏輯解釋商業設計的細節問題。
設計內容都應該有所依據，當其他人質疑時，可以系統有底氣的解釋設計內容。設計師可以利用柵格讓畫面更有調性，讓內容更具可讀性；可以快速校準元素的位置，讓畫面更平衡；可以模塊化地管理元素，讓版面更有層次感。
2. 柵格基礎七要素
（1）最小單位：
需要先定好界面的單位基礎，后續內容元素和布局規則都是基于它整數倍遞增。
網頁端 最小單位：10（參考圖2）
移動端 最小單位：3、4、5。
（2）總寬度/ W：
總寬度：對整體布局進行規范，且還可以保證設計尺寸的統一性。
界面設計要有具體尺寸，由于內容多少不確定，所以高度沒有辦法定死，但內容區的寬度是可以定的。（參考圖3）
（3）列數/ N：
列數是界面總寬度設定好后，縱向等分成幾列。
網頁端：12列、24列（常用等分列數，當然不是固定的，需要根據自己的內容設定列數，參考圖4）。
移動端：6列（常用等分列數）。
（4）大列寬/ L：
把界面總寬度等分成幾列，每一列的寬度即為大列寬。
計算公式：L = W / N（參考圖5）.
大列寬包含：列寬和水槽。
（5）水槽/ G：
相鄰兩個列寬之間的間隔是水槽。
水槽寬度越大，頁面留白和呼吸感會更好，反之則更緊湊。水槽可以將內容更規范的區分開來。（參考圖6）
（6）列寬/ C：
把界面總寬度等分成列，相鄰兩列之間的間隔（水槽）減去后就是列寬。（參考圖7）
（7）安全邊距/ M：
界面左右保證可讀性和美觀度的合適的空隙就是安全邊距。
Sketch里設置水槽后，安全邊距是水槽的0.5倍。
計算公式：M = G / 2（參考圖8）。
安全邊距：
除了使用水槽的0.5倍，還可以使用0、0.5、1.0、1.5、2.0等水槽的倍數。舉例：水槽是20，使用0.5倍，安全邊距為10；水槽是20，使用2.0倍，安全邊距為40。
注意：
柵格是輔助頁面布局的，所以需要根據實際內容靈活的使用柵格，而不要被柵格所束縛。
3. 各種公式匯總
N 是自定義設置的列數（參考圖9）。
總結：
在Sketch里設置柵格，定義好3個數值即可，總寬度、列數、水槽，這三個內容定義好數值后，其他內容就會自動計算，一個柵格就生成了。
4. 主流網站如何使用柵格系統
電商網站：
一起看一下兩個主流電商如何使用柵格布局頁面，進一步加深對柵格系統使用的了解。（參考圖10：左 淘寶、右 京東）
淘寶布局：
下圖包含：（1）完整內容展示布局；(2)瀏覽器縮小時內容展示布局。
淘寶布局分為4列內容：1、2、3、4，在情況（2）下，內容3被隱藏。（參考圖11）
柵格布局：
（1）完整內容展示布局：網頁總寬度為1200，列數為24，水槽為10；
（2）瀏覽器縮小時內容展示布局：總寬度為990，列數為20，水槽為10。
在（2）柵格布局里，隱藏4列，內容2寬度變窄占10列，其他內容不變。（參考圖12）
柵格布局設定后，可以很方便計算出每個模塊內容的寬度（參考圖13）
柵格的列數，根據具體內容設定。內容模塊較多，建議等分列數多一些，容易布局；如果內容模塊較少，等分列數也可以少一些，就像淘寶可以等分成24列，也可以等分成12列。（參考圖14）
柵格布局設定為12列，每個模塊內容的寬度和上面等分成24列的寬一樣（參考圖15）
京東布局：
下圖包含：（1）完整內容展示布局；(2)瀏覽器縮小時內容展示布局。
京東布局和淘寶布局一樣分為4列內容：1、2、3、4，在情況（2）下，內容3被隱藏。（參考圖16）
柵格布局：
- 完整內容展示布局：網頁總寬度為1200，列數為24，水槽為10；
- 瀏覽器縮小時內容展示布局：總寬度為990，列數為20，水槽為10。
在（2）柵格布局里，隱藏4列，其他內容不變。（參考圖17）
京東柵格布局，每個模塊內容的寬度如下圖（參考圖18）：
再來強調一下：柵格的列數，根據具體內容設定。京東網頁等分成24列，也可以等分成12列。（參考圖19）
柵格布局設定為12列，每個模塊內容的寬度和上面等分成24列的寬一樣（參考圖20）
三、如何用柵格系統布局頁面
第一步：確定頁面寬度，比如1920、1800、1600、1366、1280等等。
第二步：分析內容等分的復雜度，如果內容簡單只需要3、4等分，12列的柵格系統即可。如果有較多不等分的可能，還是建議采用24列的柵格系統，可靈活設置。
第三步：根據內容布局頁面，確定模塊之間是否有“間隔”，間隔尺寸是多少，6px、8px、10px、12px、20px選一個方便計算、方便記憶和整除的數值即可。就像過去，開發人員發現960px是最適合作為網格布局的寬度，因為960可以整除3，4，5，6，8，10，12，15，是不是突然發現設計其實是一道數學題。（參考圖21）
網頁舉例：
根據具體內容，使用方格布局整個頁面。
Sketch柵格設置，這里的總寬度1190是內容設計的實際寬度，設計頁面寬度是1920，因為有些內容展示選用居中布局方式，兩邊留白。（參考圖22）
四、影響網頁設計的兩大因素
分辨率和瀏覽器（參考圖23）：
1. 分辨率
什么是分辨率？
比如1920*1080px，整個屏幕可以看成是由很多小方格子組成，一個像素就是一個小格子，橫向有1920個小格子，豎向有1080個小格子。
電腦屏幕是14寸還是15寸的，尺寸不變，電腦分辨率是可變的，在同一個屏幕上，分辨率越大畫面就越精細，反之就越模糊。當下比較流行的屏幕分辨率：1024*768、1366*768、1280*800、1280*1024、1440*900、1600*900、1920*1080等。
注意：
關于分辨率，可以選用適合自己團隊的分辨率尺寸，我們團隊是梳理出所有產品的分辨率的使用情況，及團隊產品設計的特點，選取2-3個作為后續統一使用的尺寸。
2.? 瀏覽器
設計網頁時要考慮好瀏覽器，主流的瀏覽器有谷歌、Safari、火狐、IE、歐朋等。
因為不同瀏覽器工具欄高度不同，如果設計內容需要在小屏幕上展示，就要考慮到打開瀏覽器默認頁面及全屏頁面的高度展示情況，如果瀏覽器所占高度較多，那么內容展示區域就被壓縮了，所以就要考慮將最重要的內容盡量放在上面。
下面來看看最近一年瀏覽器市場份額占比情況。（參考圖24）
數據來源：https://netmarketshare.com/browser-market-share
本文由 @蝸牛醒 原創發布于人人都是產品經理。未經許可，禁止轉載
- 目前還沒評論，等你發揮！
