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

一、為什么是 4 點網(wǎng)格系統(tǒng)

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

Materials Design 8PX 網(wǎng)格

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

Materials Design 4PX 網(wǎng)格

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

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

IBM 2PX 網(wǎng)格

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

二、4 點網(wǎng)格的優(yōu)勢

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

基于 8 去定義網(wǎng)格系統(tǒng)數(shù)字 8、16、24、32、40、48、56、64；基于 4 去定義網(wǎng)格系統(tǒng)數(shù)字 4、8、12、16、20、24、32、40、48

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

比如下面這個案例：

左邊按鈕使用 8px 網(wǎng)格系統(tǒng)定義的間距 24，右邊使用 4px 網(wǎng)格系統(tǒng)定義的 20，相對來說，間距節(jié)奏感會更好。

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

所以如果使用 4px 網(wǎng)格他的面會更廣，也能覆蓋 8px 網(wǎng)格的數(shù)值。

三、4 點網(wǎng)格系統(tǒng)的應(yīng)用

使用“4 的增量”來定義頁面上元素的大小和間距，簡稱為 4 點網(wǎng)格系統(tǒng)。任何定義的高度或?qū)挾榷紤?yīng)能被 4 整除，包括布局間距、組件與元素間距、組件大小等。

4 點網(wǎng)格系統(tǒng)相較之前 8 網(wǎng)格系統(tǒng)的優(yōu)勢大很多，比如以前只能在 8 和 16 選擇，那么如果使用 4 網(wǎng)格可以選擇 12px 的間距。

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

如果沒有使用網(wǎng)格系統(tǒng)去定義 UI 界面中的板式，就會導(dǎo)致各個設(shè)計師之間各自去定義，最終界面呈現(xiàn)出很糟糕的效果。

如何定義 4px 網(wǎng)格系統(tǒng)？

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

下面看這張圖。

4px 網(wǎng)格系統(tǒng)

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

作者：功夫體驗設(shè)計