資深設計師心得：UI排版不夠精緻？掌握這1點，不再困惑

最新 08-07

1. 為什么要學習網格

有效有規律的設計布局是設計的一個基本原則，網格無處不在，可能只是你沒有注意到它的存在，簡單理解就是把一個頁面，根據版心劃分為無數統一尺寸的網格，廣泛應用於雜誌、畫冊、門戶網站、UI設計等平面設計領域。它能讓你的設計更有秩序更有規律，簡單來說就是用更科學的方法去排版。

▲ 谷歌material響應UI基於12列網格布局。該網格在布局之間創建視覺一致性，同時允許各種設計的靈活性，網格列的數量根據斷點系統而變化。

2. 網格的基礎概念

列

列是網格的垂直部分也可以理解為內容區域。網格中的列越多，其靈活性越大，但是列並不是越多越好，PC端一般是12列，移動端一般是6列，特別是移動端不適合列太多，列太多會讓頁面更碎。

▲ PC端970為解析度網格分為12列

▲ 移動端一般分為6列

行

行是網格的水平部分。也是橫向部分，它們通常在網頁設計中被省略。具有行和列的網格稱為模塊化網格。移動端行間距用的比較少可以忽略，一般在UI設計師中就是橫向的間距。

內容模塊

也叫內容區域，填充設計內容，模塊是由行和列交叉創建的空間單位。

組合區域

區域是形成組合元素的列，行或模塊的分組。

水槽

列和行由水槽分隔。溝渠越緊，視覺張力就越大。如果你希望你界面間距大點，水槽就可以留大，相反水槽越小，越緊湊，注意一點，水槽裡面是不要放內容，除非和區域一樣組合使用，內容盡量放在模塊裡面。

▲ 圖中橙色區域就是水槽，這裡做設計時候是模塊和模塊之間間距，最好不要放內容。

屏幕邊距

邊距是網格列和行之外的空間。不要填充內容，移動端主要是兩側空間和屏幕邊緣的距離，這裡設計時候切忌不要填充內容，保持頁面骨架邊界。

▲ 黃色區域就是屏幕邊距，設計時候切忌填充內容，保持設計骨架統一。

上述基本就是網格的一些常用單位，當然還有更細分的流線，標記，還有各種網格類型，但是今天我們主要學習移動端的網格，只需要掌握:移動端一般分為6列，內容區域（UI設計元素，內容）一般放置到內容模塊和組合模塊，水槽和屏幕邊距保持留白，不放內容。

3. 如何定網格，各模塊大小

知道了網格的基礎概念，那麼我們如何自己定義一套科學標準的網格系統和骨架，來保證骨架的科學性和設計連續性。

第一步：定最小設計單位

我們都學過化學，在化學裡面有最小單位原子，原子可以組成分子，分子可以組成更多的化學元素，那麼在UI系統中其實也一樣，我們先要保證你的這個世界裡面的元素是有個基礎的，常用的單位有3，（淘寶，天貓,蘑菇街等最小單位），4（funcy），5（eaby，亞馬遜，pinterest等）這個具體看你們產品的複雜程度，目前整體設計區域是最小單位越來越大，像Airbnb，pinterest等都是大留白，單位都是5甚至6。