網格系統不就是設計師精神和態度的表達嗎？
設計中的網格系統
在版式設計中， 將網格視為一種秩序系統來進行使用，是設計師某種特定的精神和態度的表達 ，因為它體現了設計師是以一種結構性、預見性的方式進行構思和設計的。
設計師的作品應該是易懂的、客觀的、功能性的和具有教學美感的。
一個合適的網格使得視覺設計變得更容易：
1、可以通過視覺傳達的手段客觀地構建主題
2、可以系統和邏輯地構建文字和插圖類材料
3、可以在一個緊湊的空間中根據文字和插圖的特點建立節奏關係
網格系統通常被應用在平面設計、UI設計、甚至於空間設計中。
下面我們就平面設計和UI設計，展開對網格系統的探討。
平面設計中的網格系統
▐ 版心
版心是頁面中主要內容所在的區域。在確定版心之前，設計師必須明確設計的性質和目的，即在頁面中有多少的文字和圖片需要設計。
經典的版心設計
基於黃金分割比例的頁面
▐ 網格的結構
在開始設計之前，版面的分欄數是需要進行考慮的要點之一。
一般分為兩欄、三欄、四欄，四欄還可以進一步分成八欄、十六欄甚至更多。
確定版心；將版心分欄。
將欄分成單元格；劃分單元格。
▐ 8格網格系統 
8格網格系統的版面經常用於廣告宣傳單和畫冊的設計。在很多情況下，只需通過 對8種不同尺寸的圖片進行組合，就可以解決許多簡單的問題。
在8格網格系統中， 可以組合成8種不同尺寸的圖片，版面足以容易各種大小的插圖。
▐ 20格網格系統 
利用20格網格系統來編排，可以產生20種尺寸參與排版的可能性。在設計前期更多的嘗試，將會發現網格的創造力是無窮的。 
總之，我們可以說， 善於利用網格系統來進行版面設計的設計師們，總是可以非常專業的設計出豐富多樣且令人滿意的作品。
▐ 32格網格系統 
相對與20網格來說， 32網格系統可以為設計師提供更多的可能性， 甚至可以說是無限的可能性。 
32格網格系統提供了非常多的編排方案，幾乎涵蓋了所有型別的版面設計，尤其對於那些涉及到大量圖片的設計作品。
UI設計中的網格系統
有些設計師對於網格系統有點陌生，但是在網際網路設計領域， 提到柵格系統，想必都是有所耳聞的。
柵格系統就是利用均分的垂直和水平線，將頁面分割成若干有秩序的格子， 按照這些分割好的格子去安排頁面的設計元素，控制元素之間的節奏關係。
在谷歌的Material Design和蘋果的Ios設計規範中，都有對柵格作出一定的建議，裝置系統中的原生軟體也都是嚴格按照規範去實施設計的。
而在Web端的設計中，各網際網路大廠也有製作相應的設計規範來統一自家產品的設計。
下面我們將通過四個基本概念，分別對PC端和移動端的柵格設計展開探討：
柵格的最小單位：柵格系統基礎，定義柵格的步進距離
欄目：柵格系統的容器，盛放文字、圖片等元素
水槽：相鄰兩欄之間的間距，控制整體頁面的留白
安全邊距：內容區域與螢幕兩端留出的間距
▐ PC端
對於PC端來講，欄目和水槽交替形成欄柵格系統，欄目主要放置內容，水槽則控制頁面元素的間距。 
欄目和水槽的寬度則是以柵格的最小單位為基準，所以在頁面柵格化之前先定義好柵格的最小單位。
▐ 8的倍數 
如何定義柵格系統最小單位？參考已有的設計規範和前輩的經驗，加上目前市場上主流的螢幕解析度， 以8畫素作為一個步進單位的變化，在視覺上能感受到較為明顯的差異， 因此選取8做為柵格系統的原子單位。
▐ 12等分和24等分
確定好了柵格系統的最小單位，接下來就可以確定欄目（8n）和水槽（8m）的寬度，並以此形成初步的柵格。 
目前主流的等分方式有12等分和24等分。
而在多數業務情況下，我們需要在設計區域解決大量資訊收納的問題， 24等分可以更多樣性的佈局排版，適合更加複雜的場景。
▐ 盒子
在經過等分之後，劃分出的資訊區塊我們稱之為“盒子”，盒子便是頁面承載內容的容器，而每一個盒子的寬度，則是根據具體的業務內容去分配的。 
建議橫行排列的盒子數量最多四個，最少一個。 設計部分基於盒子的單位定製盒子內部的排版規則，以保證視覺層面的舒適感。
▐ 下面介紹幾個案例
▐ 移動端
在設計移動端產品的時候，我們會考慮到色彩、文字、圖形、結構等要素，往往忽略來網格系統的構建。 
網格系統可以說是整個產品的骨架，所有的頁面都按照網格系統有理、有序的搭建，產品的整體性也會有很大的提高。
▐ 最小單位
和PC端類似， 移動端的網格系統也是由一個個的最小單位構成。 
根據移動端物理裝置的特性，我們建議以4或者8畫素作為步進單位，但是4畫素會把頁面分割過度，所以 整體上還是以8畫素做為網格最小單位 ，只有在某些特殊的場景使用4畫素。
▐ 安全邊距
我們在PC端的時候沒有提到安全邊距，因為web設計基本不設定安全邊距，或者直接在中間960畫素佈局內容。 
而在移動裝置的特殊性，一般存在8px-48px的安全邊距。
▐ 欄目和水槽
確定好了安全邊距和最小單位，就可以根據產品的風格去設定欄目和水槽的寬度。
建議在實際使用中以12列欄目或者6列欄目為主，水槽以8畫素或者16畫素為主。
▐ 盒子 
網格的作用就是去控制盒子的佈局，而移動端螢幕小，可設定的更加緊湊。橫行分割1-6等分都是合適的。
▐ 下面介紹幾個案例 
sketch柵格設定 
▐ 總結
如果在設定網格系統或者說是柵格系統的時候， 出現了小數點，不用擔心，直接取整就好。 一套完美的網格系統也不可能在所有的解析度下完美適應，1畫素以內的尺寸都是肉眼不可分辨的。
在平面設計版式構成中，我們提到版式設計的原則都是僅供參考的，我們只有 在充分理解原則的情況下，去做突破，才能讓頁面規範有序、具有節奏感，同時不失靈動。
---end---
推薦閱讀：
版式篇
ofollow,noindex" target="_blank">《關於排版，給你幾個甲方不懟你的理由！（一）》
色彩篇
