本文將為大家介紹設(shè)計網(wǎng)頁里非常重要的一個網(wǎng)格系統(tǒng)，也叫柵格系統(tǒng)。那么柵格系統(tǒng)的作用以及設(shè)計要點是什么呢？本文將為大家揭曉。

“UI設(shè)計的不就是這些細節(jié)，難道要比誰畫的圓更圓誰畫的方更方嘛？”

——引用自我設(shè)計路上的引路人美m(xù)o語錄

這篇我就給大家介啥一下設(shè)計網(wǎng)頁里非常重要的一個網(wǎng)格系統(tǒng)，也叫柵格系統(tǒng)英文為“grid systems”。

這東西的作用其實有點兒像小時候?qū)懽值奶镒指癖咀?，它起到的作用就是讓你就算字寫的很難看，但是最起碼能在這個橫平豎直的田字范圍里顯得規(guī)規(guī)整整。

第一步先是規(guī)整，大小整齊劃一，第二步再是慢慢寫好看，秩序是美感的重要前提。那故宮的建筑和布局，橫平豎直田字分布，規(guī)整中透著美感，規(guī)整中透著威嚴，天下盡在掌握的感覺撲面而來。

你品，你細品～

這種秩序的美感在我們的網(wǎng)頁設(shè)計里也是非常重要及基礎(chǔ)的一個環(huán)節(jié)，規(guī)范的頁面基礎(chǔ)柵設(shè)計也能讓前端與UI無縫對接加速開發(fā)并保證視覺還原，減少撕逼的時間，你好我好大家好～

柵格系統(tǒng)實例

960 gird柵格系統(tǒng)從2009年就開始正式推出。http://grid.guide/在這個網(wǎng)站你可以根據(jù)不同寬度的網(wǎng)頁來制定你要的列寬和間距，這就是柵格系統(tǒng)，一個網(wǎng)頁版的田字格，可以根據(jù)不同的網(wǎng)頁風格調(diào)整內(nèi)容寬度，產(chǎn)生不同間距和不同列寬。

怎么用呢，先看看下面的案例。很多網(wǎng)頁給人的感覺非常不同，有的寬松大氣，有的內(nèi)容繁多亂中有序；

頁面的邊緣間距是相同的，同頁面內(nèi)容里的間距也是固定的，上面的頁面同等寬度下分成了8列、5列，下面的頁面分成了3列，整個頁面給人的感覺就不同，上版面緊湊，下一個版面舒展，相應的，他們的柵格也有區(qū)別。

柵格在頁面上起到統(tǒng)一間距，讓每個板塊可以在固定的尺寸下保留相同的間距，讓頁面風格統(tǒng)一規(guī)范。

下面這兩張，就是在柵格的基礎(chǔ)上做的“填字游戲”。在固定列寬里做組合，既保持了等間距，透氣感相似，又在縱向上做模塊占比不同的跳躍式分布。

響應式布局

柵格在網(wǎng)頁最重要的一個作用是為了迎合不同尺寸的屏幕適配問題，迎合響應式布局而產(chǎn)生的一個設(shè)計體系，是跨屏設(shè)計優(yōu)化體驗的重點。設(shè)計不同的頁面選擇不同的柵格選項，一共有四種柵格選項，超小屏（手機）、小屏（平板）、中屏（桌面）、大屏（超大桌面）根據(jù)你產(chǎn)品覆蓋的設(shè)備類型做選擇。

柵格通常分為12列，即每行最多可容納12列，最早的960柵格還有分成12列、16列、24列三種。12X（60+20）、16X（40+20）、24X（30+10）三種。

目前網(wǎng)頁的主流的寬度有 960px / 980px / 1190px / 1210px /1440px等，內(nèi)容寬度目前主流的淘寶京東等是做成1190px，從最早的960px擴展而來，也是網(wǎng)頁顯示器尺寸越來越大越來越寬的緣由。

1190px的內(nèi)容寬度分成12列，12X（90+10）、12X（79+22）、12X（68+34），頁面排布就根據(jù)列寬和間距進行排布，當然有的不一定完全是在柵格線上的，根據(jù)實際情況做取舍。

而現(xiàn)在后臺網(wǎng)頁寬度一般會設(shè)計成1440px，下面列舉兩種實例運用，

• 一種是：左側(cè)導航208+右側(cè)內(nèi)容區(qū)域1232，柵格12x（88+16）；
• 第二種：左側(cè)導航224+右側(cè)內(nèi)容區(qū)域1200，柵格12x（85+16）；

后臺頁面一般會固定左側(cè)，而右側(cè)則根據(jù)屏幕大小可以拉寬，根據(jù)頁面需要靈活調(diào)整右側(cè)的布局寬度。你可以縮到很小，也可以拉很寬，會根據(jù)頁面給你一個靈活調(diào)動的適配。

柵格的作用

• 柵格類是頁面結(jié)構(gòu)的規(guī)范
• 在設(shè)計團隊配合和協(xié)作的時候可以起到統(tǒng)一作用，設(shè)計師可以根據(jù)柵格快速作出設(shè)計，讓整體變得有規(guī)律
• 和開發(fā)無縫銜接保真還原視覺效果，整個網(wǎng)頁使用一種柵格可以提高復用性，提升開發(fā)效率
• 根據(jù)不同尺寸屏幕切換做響應式布局，優(yōu)化跨屏連貫體驗

柵格作為網(wǎng)頁設(shè)計不得不學的一個重點，大家要知其然還要知其所以然，用的時候邊用邊學，對你的設(shè)計提升也是很大的哦。還有，一定一定要和你的前端開發(fā)小哥哥多溝通，他會教給你很多意想不到的知識哦

好啦，以上就是今天的分享。

作者：就不，公眾號：就設(shè)計

本文由 @就不 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash， 基于CC0協(xié)議