編輯導語：對于設計師來說，柵格系統是一種可以更有邏輯地進行工作的布局思想。它有哪些優勢？又是如何與前端聯系的？本文作者對柵格系統進行了分析，希望能給你帶來幫助。

一、柵格系統的定義

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

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

二、柵格系統的簡介

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

委員會由數學家尼古拉斯加宗（Nicolas Jaugeon）擔任領導，他們以羅馬體為基礎，采用方格為設計依據，每個字體方格分為64個基本方格單位，每個方格單位再分成36個小格，這樣，一個印刷版面就有2304個小格組成。在這個嚴謹的幾何網格網絡中設計字體的形狀、版面的編排、試驗傳達功能的效能，這是世界上最早對字體和版面進行科學實驗的活動，也是柵格系統最早的雛形。

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

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

三、柵格系統的原理

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

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

由于a+i=A，可得：

(A×n) – i = W

四、柵格系統的優勢

對于設計師來說，柵格系統更多的是一種布局思想，可以更有邏輯地進行設計工作。靈活地運用柵格系統，不僅可以讓整個網站各個頁面的布局保持一致，讓網頁的信息呈現更加美觀易讀，讓設計稿有更好的結構，更可以通過匹配不同組合，做出很多優秀和獨特的排版設計。

使用網格系統，可以使網頁設計給用戶正式感和規范感，還具有一種結構分明的設計感，提升用戶體驗。網格系統不意味著循規蹈矩，一味按照網格線來進行布局。網格系統的意義在于更靈活的幫助設計師有序布局，而不是限制設計師的設計。

對于前端開發人員來說，柵格系統的使用，給整個網站的頁面結構定義了一個標準，大大提高了網頁的規范性。在柵格系統下，頁面中所有組件的尺寸都是有規律的，可重用的，這對于大型網站的開發和維護來說，能節約不少成本。

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

五、柵格系統與前端的結合

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

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

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

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

結合實際案例，以我的語雀為例，網頁的大框架分為三列：

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

六、設計與前端的聯系

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

七、柵格系統三個重要的屬性

柵格系統主要是三部分構成，列、水槽、邊距。

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

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

八、常用的柵格系統

1. 960柵格系統

960柵格系統是：寬度為960px，12列，每列60px，水槽為20px。內容區域總寬度為940px。

秉承知其然知其所以然的原則，特意查了一下來源。以下內容牽扯部分數學問題，略微枯燥，有興趣的可以嘗試了解一下。

根據上面的簡單分析可以認為：當搭建頁面結構復雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px。上面的“自然”出現，細究自然是不讓人信服的。

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

科學界有很多問題都可以歸結到數學問題上，我們也從數學著手：960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍：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自身），我們標記為：N(960) = N(2^6 * 3 * 5) = 26。

根據上面的算法，可以得到：

• 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

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

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

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

2. 8pt柵格系統

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

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

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

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

那為什么是8？

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

九、常見的響應式柵格

1. 排列式柵格

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

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

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

2. 彈性式柵格

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

3. 定制式柵格

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

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

十、如何創建柵格系統

1. 設置屏幕總寬度

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

2. 設置列數

就是縱向分欄數量，sketch默認分為12列，也可以分為24列，這是網頁端的常用分法，移動端一般是6列。

3. 設置水槽寬度

布局設置中間距寬度就是水槽，紅色區域寬度就是水槽（間隔），水槽寬度越大，頁面留白和呼吸感會更好，反之則更緊湊。水槽可以將內容更規范地區分開來。

本文由 @卡洛設計 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash ，基于 CC0 協議。