編輯導(dǎo)語：對于設(shè)計師來說，柵格系統(tǒng)是一種可以更有邏輯地進(jìn)行工作的布局思想。它有哪些優(yōu)勢？又是如何與前端聯(lián)系的？本文作者對柵格系統(tǒng)進(jìn)行了分析，希望能給你帶來幫助。

一、柵格系統(tǒng)的定義

講解柵格系統(tǒng)之前，先來了解一下什么是柵格系統(tǒng)。不妨來看看百度百科跟維基百科是怎么解釋的：

• 百度百科：柵格系統(tǒng)英文為“grid systems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，運用固定的格子設(shè)計版面布局，其風(fēng)格工整簡潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計的主流風(fēng)格之一。
• 維基百科：柵格設(shè)計系統(tǒng)（又稱網(wǎng)格設(shè)計系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計、瑞士平面設(shè)計風(fēng)格、國際主義平面設(shè)計風(fēng)格），是一種平面設(shè)計的方法與風(fēng)格。

二、柵格系統(tǒng)的簡介

1692年，新登基的法國國王路易十四感到法國的印刷水平不盡人意，因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務(wù)是設(shè)計出科學(xué)的、合理的， 重視功能性的新字體。

委員會由數(shù)學(xué)家尼古拉斯加宗（Nicolas Jaugeon）擔(dān)任領(lǐng)導(dǎo)，他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計依據(jù)，每個字體方格分為64個基本方格單位，每個方格單位再分成36個小格，這樣，一個印刷版面就有2304個小格組成。在這個嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計字體的形狀、版面的編排、試驗傳達(dá)功能的效能，這是世界上最早對字體和版面進(jìn)行科學(xué)實驗的活動，也是柵格系統(tǒng)最早的雛形。

說白了這玩意就像小時候?qū)W習(xí)寫字的田字格，橫平豎直的。其實它更多的作用是哪怕你的字再難看，最起碼整體看起來還是顯得規(guī)整。

首先是規(guī)整，然后字的大小整齊劃一，最后熟練度高了，自然會慢慢寫好看。再舉個例子，故宮一共有房間八千七百零七間，可從沒感覺規(guī)劃的亂。所以有良好的秩序是美最基礎(chǔ)的前提。這就是柵格系統(tǒng)最重要的作用之一。

三、柵格系統(tǒng)的原理

在網(wǎng)頁設(shè)計中，我們把寬度為“W”的頁面分割成n個網(wǎng)格單元“a”，每個單元與單元之間的間隙設(shè)為“i”,此時我們把“a+i”定義“A”。他們之間的關(guān)系如下：

W =（a×n）+（n-1）i

由于a+i=A，可得：

(A×n) – i = W

四、柵格系統(tǒng)的優(yōu)勢

對于設(shè)計師來說，柵格系統(tǒng)更多的是一種布局思想，可以更有邏輯地進(jìn)行設(shè)計工作。靈活地運用柵格系統(tǒng)，不僅可以讓整個網(wǎng)站各個頁面的布局保持一致，讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，讓設(shè)計稿有更好的結(jié)構(gòu)，更可以通過匹配不同組合，做出很多優(yōu)秀和獨特的排版設(shè)計。

使用網(wǎng)格系統(tǒng)，可以使網(wǎng)頁設(shè)計給用戶正式感和規(guī)范感，還具有一種結(jié)構(gòu)分明的設(shè)計感，提升用戶體驗。網(wǎng)格系統(tǒng)不意味著循規(guī)蹈矩，一味按照網(wǎng)格線來進(jìn)行布局。網(wǎng)格系統(tǒng)的意義在于更靈活的幫助設(shè)計師有序布局，而不是限制設(shè)計師的設(shè)計。

對于前端開發(fā)人員來說，柵格系統(tǒng)的使用，給整個網(wǎng)站的頁面結(jié)構(gòu)定義了一個標(biāo)準(zhǔn)，大大提高了網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的，可重用的，這對于大型網(wǎng)站的開發(fā)和維護(hù)來說，能節(jié)約不少成本。

隨著響應(yīng)式設(shè)計的流行，柵格系統(tǒng)開始被賦予新的意義，那就是，一種響應(yīng)式設(shè)計的實現(xiàn)方式。響應(yīng)式的要點是為同一個頁面設(shè)計多種布局形態(tài)，分別適配不同屏幕尺寸的設(shè)備。

五、柵格系統(tǒng)與前端的結(jié)合

由于柵格系統(tǒng)最早出現(xiàn)在印刷品中，起到的作用更多就是規(guī)范布局。但是在現(xiàn)在的UI設(shè)計中，柵格系統(tǒng)的實際用途除了規(guī)范我們平時設(shè)計稿的布局以外，更重要的原因一切設(shè)計稿都是為了與前端開發(fā)結(jié)合，形成自適應(yīng)布局。前端css中有個叫Flexbox。

https://getbootstrap.com/docs/4.0/layout/grid/這個網(wǎng)站算是前端第三方的界面框架，開發(fā)利用第三方的框架會高效很多。

我們通常定義柵格系統(tǒng)為12個列（根據(jù)實際項目需求可能存在不同），柵格布局中的12是1，2，3，4，6的最小公倍數(shù)，意思是要實現(xiàn)1等分，2等分，3等分…..而12是最小的數(shù)，也是最好的，當(dāng)然如果分成16列，24列，32列，就需要更多的代碼來開發(fā)維護(hù)項目。

以下圖為例，第一行三個模塊平分，一個模塊就占據(jù)4列。第二行2個模塊，左邊就占了12格的8列，右邊就占了4列。

結(jié)合實際案例，以我的語雀為例，網(wǎng)頁的大框架分為三列：

隨著瀏覽器寬度縮小，整個網(wǎng)頁的比例也在發(fā)生變化，第二列在不停地縮小。當(dāng)瀏覽器寬度縮小到某個特定的數(shù)值，第三列消失，只有第一列和第二列。這個就是俗稱的自適應(yīng)。

六、設(shè)計與前端的聯(lián)系

下圖的某一個色塊代表內(nèi)容的一部分，每個色塊的寬度并不是隨便畫的。是有規(guī)劃的想要每個色塊占多少個柵格。這就是與前端開發(fā)聯(lián)系的點。當(dāng)然我們也可以隨意的拉伸，但不管怎么拉伸，所占的柵格比例是不變的。

七、柵格系統(tǒng)三個重要的屬性

柵格系統(tǒng)主要是三部分構(gòu)成，列、水槽、邊距。

顧名思義，“列”就是柵格的寬度，“水槽”是兩個柵格之間的間距；“邊距”是柵格與畫布的邊距。

根據(jù)列寬屬性不同，可以分為兩種網(wǎng)格，一種是流動網(wǎng)格，也可以叫拉伸網(wǎng)格，是根據(jù)尺寸不同實時做變化；

八、常用的柵格系統(tǒng)

1. 960柵格系統(tǒng)

960柵格系統(tǒng)是：寬度為960px，12列，每列60px，水槽為20px。內(nèi)容區(qū)域總寬度為940px。

秉承知其然知其所以然的原則，特意查了一下來源。以下內(nèi)容牽扯部分?jǐn)?shù)學(xué)問題，略微枯燥，有興趣的可以嘗試了解一下。

根據(jù)上面的簡單分析可以認(rèn)為：當(dāng)搭建頁面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時，開發(fā)工程師們不約而同地都選擇將頁面寬度定為950px/960px。上面的“自然”出現(xiàn)，細(xì)究自然是不讓人信服的。

蘋果系統(tǒng)的設(shè)計者們在沒有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數(shù)，自然另有奧妙。

科學(xué)界有很多問題都可以歸結(jié)到數(shù)學(xué)問題上，我們也從數(shù)學(xué)著手：960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍：2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480。共26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身），我們標(biāo)記為：N(960) = N(2^6 * 3 * 5) = 26。

根據(jù)上面的算法，可以得到：

• N(360) = N(2^3 * 3^2 * 5) = 22
• N(480) = N(2^5 * 3 * 5) = 22
• N(720) = N(2^4 * 3^2 * 5) = 28
• N(750) = N(2 * 3 * 5^3) = 14
• N(800) = N(2^5 * 5^2) = 16
• N(960) = N(2^6 * 3 * 5) = 26
• N(1000) = N(2^3 * 5^3) = 14
• N(1024) = N(2^10) = 9
• N(1440) = N(2^6 * 3^2 * 5) = 34
• N(1920) = N(2^7 * 3 * 5) = 30

根據(jù)直覺（嚴(yán)格證明也不難，不過還是留給數(shù)學(xué)系的學(xué)生去證明吧），我們得到一個有趣的結(jié)論——要使得N（width）最大，width的取值有兩個系列：

1. A系列：……320, 720, 1440……
2. B系列：……480, 960, 1920……

N越大，可組合的寬度值就越多。對柵格系統(tǒng)來說，這意味著越靈活！

2. 8pt柵格系統(tǒng)

8pt柵格系統(tǒng)，也稱8點柵格?；镜氖褂迷瓌t是，設(shè)計是在設(shè)計中需要一致的使用8的倍數(shù)來定義元素的尺寸、填充和編劇。也就意味著在開發(fā)的世界中任何padding、margin、sizing都是8的倍數(shù)。

秉承知其然知其所以然的原則，有興趣的可以嘗試了解。

在iPhoneX的例子中，有賴于它的Super Retina屏幕，在實際屏幕分辨率下每英寸顯示出來的像素是畫布的三倍。通過最小尺寸設(shè)計，我們可以輕松地將組件放大到其他設(shè)備需要的屏幕尺寸，同時確保渲染具有完美的像素清晰度。這意味著，1個像素可以被轉(zhuǎn)化成4px（@2x分辨率），9px（@3x分辨率），如此類推。

所以如果我們有一個大小為16px的icon，當(dāng)我們導(dǎo)出到@2x和@3x的分辨率，渲染出來的icon大小分別就是32px和48px，并適用于Rentina和Super Retina的屏幕。

那為什么是8？

1. 以8個像素為基礎(chǔ)單位的尺寸可以完美地轉(zhuǎn)化成其他不同的屏幕尺寸（包括安卓的0.75倍和1.5倍）
2. 理由是，盡管沒有解釋過多，Apple和Google都有建議這樣做。
3. 以4或8為倍數(shù)的尺寸很容易計算，它們靈活且一致。用這個倍數(shù)設(shè)定組件之間的間距，也比較明顯（如下圖）

九、常見的響應(yīng)式柵格

1. 排列式柵格

顧名思義，這種柵格中，卡片（即內(nèi)容區(qū)塊）尺寸和間距不變，每行能放幾張卡片就放幾張，擺不下就換行，邏輯非常簡單。典型的例子有 Youtube 、Pinterest、Behance ……

這么簡單的響應(yīng)式柵格系統(tǒng)，其問題也很明顯：頁邊距不確定，所以為了視覺的平衡感，大多將列表居中（像 Google Play 那樣堅持左對齊也不是不可以）。一整頁最好只有一種尺寸的卡片，否則邊距無法不統(tǒng)一。

固定的卡片尺寸和邊距可能在大屏里看起來太小，小屏里看起來又太大。但是如果產(chǎn)品夠簡單，列表單一的話，用這種是沒問題的。

2. 彈性式柵格

這種柵格系統(tǒng)的間距和頁邊距是固定的，卡片尺寸在一定程度下彈性伸縮，以確保填滿整個屏幕。因為間距和頁邊距固定，也不用擔(dān)心卡片混排。典型的例子有： Google Drive 、Spotify ……

3. 定制式柵格

其實國內(nèi)的大部分網(wǎng)頁并沒有做響應(yīng)式布局（比如知乎、淘寶、愛奇藝等），即便是部分做了的（比如簡書、京東、騰訊視頻等），也大多沒有使用上面講的那兩種自適應(yīng)的柵格，而是定制類響應(yīng)式布局。

以騰訊視頻為例，你可以看到它的尺寸伸縮并不是依賴一套通用的規(guī)范，而是人為設(shè)計了幾種尺寸。這個例子還算相對復(fù)雜了，如果你去看國內(nèi)其它響應(yīng)式界面，可能因為是人力設(shè)計，所以大多變化范圍并不大，最大尺寸和最小尺寸之間的差別有限。

十、如何創(chuàng)建柵格系統(tǒng)

1. 設(shè)置屏幕總寬度

做界面設(shè)計前會先設(shè)置一個個尺寸，寬度是固定的，因為內(nèi)容不定所以高度也是情況而定，使用布局設(shè)置，sketch中默認(rèn)屏幕內(nèi)容寬度是960，是現(xiàn)在最常用的一個網(wǎng)頁寬度。

2. 設(shè)置列數(shù)

就是縱向分欄數(shù)量，sketch默認(rèn)分為12列，也可以分為24列，這是網(wǎng)頁端的常用分法，移動端一般是6列。

3. 設(shè)置水槽寬度

布局設(shè)置中間距寬度就是水槽，紅色區(qū)域?qū)挾染褪撬郏ㄩg隔），水槽寬度越大，頁面留白和呼吸感會更好，反之則更緊湊。水槽可以將內(nèi)容更規(guī)范地區(qū)分開來。

本文由 @卡洛設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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