起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識從柵格系統實例，了解柵格基礎知識
本文將為大家介紹設計網頁里非常重要的一個網格系統，也叫柵格系統。那么柵格系統的作用以及設計要點是什么呢？本文將為大家揭曉。
“UI設計的不就是這些細節，難道要比誰畫的圓更圓誰畫的方更方嘛？”
——引用自我設計路上的引路人美mo語錄
這篇我就給大家介啥一下設計網頁里非常重要的一個網格系統，也叫柵格系統英文為“grid systems”。
這東西的作用其實有點兒像小時候寫字的田字格本子，它起到的作用就是讓你就算字寫的很難看，但是最起碼能在這個橫平豎直的田字范圍里顯得規規整整。
第一步先是規整，大小整齊劃一，第二步再是慢慢寫好看，秩序是美感的重要前提。那故宮的建筑和布局，橫平豎直田字分布，規整中透著美感，規整中透著威嚴，天下盡在掌握的感覺撲面而來。
你品，你細品～
這種秩序的美感在我們的網頁設計里也是非常重要及基礎的一個環節，規范的頁面基礎柵設計也能讓前端與UI無縫對接加速開發并保證視覺還原，減少撕逼的時間，你好我好大家好～
柵格系統實例
960 gird柵格系統從2009年就開始正式推出。http://grid.guide/在這個網站你可以根據不同寬度的網頁來制定你要的列寬和間距，這就是柵格系統，一個網頁版的田字格，可以根據不同的網頁風格調整內容寬度，產生不同間距和不同列寬。
怎么用呢，先看看下面的案例。很多網頁給人的感覺非常不同，有的寬松大氣，有的內容繁多亂中有序；
頁面的邊緣間距是相同的，同頁面內容里的間距也是固定的，上面的頁面同等寬度下分成了8列、5列，下面的頁面分成了3列，整個頁面給人的感覺就不同，上版面緊湊，下一個版面舒展，相應的，他們的柵格也有區別。
柵格在頁面上起到統一間距，讓每個板塊可以在固定的尺寸下保留相同的間距，讓頁面風格統一規范。
下面這兩張，就是在柵格的基礎上做的“填字游戲”。在固定列寬里做組合，既保持了等間距，透氣感相似，又在縱向上做模塊占比不同的跳躍式分布。
響應式布局
柵格在網頁最重要的一個作用是為了迎合不同尺寸的屏幕適配問題，迎合響應式布局而產生的一個設計體系，是跨屏設計優化體驗的重點。設計不同的頁面選擇不同的柵格選項，一共有四種柵格選項，超小屏（手機）、小屏（平板）、中屏（桌面）、大屏（超大桌面）根據你產品覆蓋的設備類型做選擇。
柵格通常分為12列，即每行最多可容納12列，最早的960柵格還有分成12列、16列、24列三種。12X（60+20）、16X（40+20）、24X（30+10）三種。
目前網頁的主流的寬度有 960px / 980px / 1190px / 1210px /1440px等，內容寬度目前主流的淘寶京東等是做成1190px，從最早的960px擴展而來，也是網頁顯示器尺寸越來越大越來越寬的緣由。
1190px的內容寬度分成12列，12X（90+10）、12X（79+22）、12X（68+34），頁面排布就根據列寬和間距進行排布，當然有的不一定完全是在柵格線上的，根據實際情況做取舍。
而現在后臺網頁寬度一般會設計成1440px，下面列舉兩種實例運用，
- 一種是：左側導航208+右側內容區域1232，柵格12x（88+16）；
- 第二種：左側導航224+右側內容區域1200，柵格12x（85+16）；
后臺頁面一般會固定左側，而右側則根據屏幕大小可以拉寬，根據頁面需要靈活調整右側的布局寬度。你可以縮到很小，也可以拉很寬，會根據頁面給你一個靈活調動的適配。
柵格的作用
- 柵格類是頁面結構的規范
- 在設計團隊配合和協作的時候可以起到統一作用，設計師可以根據柵格快速作出設計，讓整體變得有規律
- 和開發無縫銜接保真還原視覺效果，整個網頁使用一種柵格可以提高復用性，提升開發效率
- 根據不同尺寸屏幕切換做響應式布局，優化跨屏連貫體驗
柵格作為網頁設計不得不學的一個重點，大家要知其然還要知其所以然，用的時候邊用邊學，對你的設計提升也是很大的哦。還有，一定一定要和你的前端開發小哥哥多溝通，他會教給你很多意想不到的知識哦
好啦，以上就是今天的分享。
作者：就不，公眾號：就設計
本文由 @就不 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash， 基于CC0協議
哈哈哈哈 首先被你那句“不然比誰畫的圓更圓，誰畫得方更方嗎？”笑到??然后又被你的用戶名“就不-關注作者”笑到，哈哈哈哈哈，好喜歡你的幽默 如果你是小姐姐 那我們就是集美 如果你是小哥哥 那我就是你的小迷妹了