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

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

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

Materials Design 8PX 網(wǎng)格

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

Materials Design 4PX 網(wǎng)格

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

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

IBM 2PX 網(wǎng)格

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

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

首先要說(shuō)明一點(diǎn)，8 點(diǎn)網(wǎng)格和 4 點(diǎn)網(wǎng)格系統(tǒng)都沒(méi)有對(duì)錯(cuò)，如今推薦大家使用 4 點(diǎn)網(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)，其實(shí)存在一些細(xì)節(jié)的間距是沒(méi)有的，這樣我們?cè)诙x一些較小的組件時(shí)候是很難滿(mǎn)足的。

比如下面這個(gè)案例：

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

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

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

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

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

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

當(dāng)然如果能被 8 整除的也可以被 4 整除，相對(duì)來(lái)說(shuō) 4 的空間與靈活性會(huì)更大。

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

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

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

下面看這張圖。

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

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

作者：功夫體驗(yàn)設(shè)計(jì)