過去，我們一直在使用 8 點網格系統，它幫助我們在 UI 界面中，或者一致性上做了有力的貢獻。但是今天我想說 8 點網格系統其實并非最完美的，我們可以選擇 4 點網格系統，他靈活性更強，今天文章和大家一起來分享下 4 點網格系統的未來。

關于8點網格：

一、為什么是 4 點網格系統

在谷歌的 Materials Design 設計系統中，就一直在倡導 8 點網格系統，使用 8 網格可以更好的幫助 UI 設計師完成界面設計，同時在一致性與多平臺適配的效果會更好。

Materials Design 8PX 網格

Google 同時也使用了 4 點網格系統，這就會導致很多人分不清到底使用 4 還是 8 去定義 UI 界面的網格系統？

Materials Design 4PX 網格

目前我看到很多設計師，絕大部分都是單獨基于 8 去定義，而較少將其合并使用，這就會導致很多場景下，我們定義出來的間距、組件等使用時候要么有些場景間距過大，最終呈現結果也不是很理想。

所以，如果都要去使用，那就需要設計師分清楚 4 和 8 如何去定義及使用場景，這就會有些麻煩。

IBM 2PX 網格

如今，我們可以完全拋棄 8 點網格系統，而直接使用 4 點網格。因為 IBM 已經提前給我們鋪好路了，IBM 使用 2 點網格系統覆蓋他們軟件 UI 界面的一致性，最終呈現結果依然不輸 8 網格，畢竟他們都是 8 的倍數，但是設計細節會更容易滿足。

二、4 點網格的優勢

首先要說明一點，8 點網格和 4 點網格系統都沒有對錯，如今推薦大家使用 4 點網格系統，是有一定道理的，下面我們先看看這張圖。

基于 8 去定義網格系統數字 8、16、24、32、40、48、56、64；基于 4 去定義網格系統數字 4、8、12、16、20、24、32、40、48

從上面可以看出，基于 8 定義的網格系統，其實存在一些細節的間距是沒有的，這樣我們在定義一些較小的組件時候是很難滿足的。

比如下面這個案例：

左邊按鈕使用 8px 網格系統定義的間距 24，右邊使用 4px 網格系統定義的 20，相對來說，間距節奏感會更好。

可能有人會說，兩個看起來差不多，但如果是追求極致的細節感，兩個間距相差 4px 已經是非常大了。

所以如果使用 4px 網格他的面會更廣，也能覆蓋 8px 網格的數值。

三、4 點網格系統的應用

使用“4 的增量”來定義頁面上元素的大小和間距，簡稱為 4 點網格系統。任何定義的高度或寬度都應能被 4 整除，包括布局間距、組件與元素間距、組件大小等。

4 點網格系統相較之前 8 網格系統的優勢大很多，比如以前只能在 8 和 16 選擇，那么如果使用 4 網格可以選擇 12px 的間距。

當然如果能被 8 整除的也可以被 4 整除，相對來說 4 的空間與靈活性會更大。

如果沒有使用網格系統去定義 UI 界面中的板式，就會導致各個設計師之間各自去定義，最終界面呈現出很糟糕的效果。

如何定義 4px 網格系統？

這個很簡單，他和定義 8px 網格系統思路一樣，比如 4 網格系統，我們可以基于 4 的增量去定義。

下面看這張圖。

4px 網格系統

寫到最后，4px 網格系統的靈活與兼容性大于 8px 網格系統，在未來的 UI 界面設計中，大家可以使用起來吧。

歡迎關注作者的微信公眾號：功夫體驗設計