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

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

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

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

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

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

你品，你細(xì)品～

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

柵格系統(tǒng)實(shí)例

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

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

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

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

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

響應(yīng)式布局

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

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

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

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

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

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

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

柵格的作用

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

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

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

作者：就不，公眾號(hào)：就設(shè)計(jì)

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

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