作者：sky，微信公眾號“我們的設計日記 ”
有效、有規律的設計布局是設計的一個基本原則，網格無處不在，可能只是你沒有注意到它的存在，簡單理解就是把一個頁面，根據版心劃分為無數統一尺寸的網格，廣泛應用于雜志、畫冊、門戶網站、UI設計等平面設計領域。
它能讓你的設計更有秩序、更有規律，簡單來說就是用更科學的方法去排版。
▲ 谷歌material響應UI基于 12 列網格布局
該網格在布局之間創建視覺一致性，同時允許各種設計的靈活性，網格列的數量根據斷點系統而變化。
列是網格的垂直部分也可以理解為內容區域，網格中的列越多，其靈活性越大。但是列并不是越多越好，PC端一般是 12 列，移動端一般是 6 列，特別是移動端不適合列太多，列太多會讓頁面更碎。
▲ PC端 970 為分辨率網格分為 12 列
▲ 移動端一般分為 6 列
行是網格的水平部分，也是橫向部分，它們通常在網頁設計中被省略。具有行和列的網格稱為模塊化網格，移動端行間距用的比較少可以忽略，一般在UI設計師中就是橫向的間距。
也叫內容區域，填充設計內容，模塊是由行和列交叉創建的空間單位。
區域是形成組合元素的列，行或模塊的分組。
列和行由水槽分隔。溝渠越緊，視覺張力就越大。如果你希望你界面間距大點，水槽就可以留大，相反水槽越小，越緊湊，注意一點，水槽里面是不要放內容，除非和區域一樣組合使用，內容盡量放在模塊里面。
▲ 圖中橙色區域就是水槽
這里做設計時候是模塊和模塊之間間距，最好不要放內容。
邊距是網格列和行之外的空間，不要填充內容，移動端主要是兩側空間和屏幕邊緣的距離，這里設計時候切忌不要填充內容，保持頁面骨架邊界。
▲ 黃色區域就是屏幕邊距，設計時候切忌填充內容，保持設計骨架統一
上述基本就是網格的一些常用單位，當然還有更細分的流線，標記，還有各種網格類型。但是今天我們主要學習移動端的網格，只需要掌握：移動端一般分為 6 列，內容區域（UI設計元素，內容）一般放置到內容模塊和組合模塊，水槽和屏幕邊距保持留白，不放內容。
QQ客服