編者按：在 UI 設(shè)計當中采用網(wǎng)格系統(tǒng)是相當普遍的存在，而 4px 網(wǎng)格則是其中的關(guān)鍵。但是即便如此，我們也在越來越多的優(yōu)秀設(shè)計中，看到打破 4px 網(wǎng)格系統(tǒng)的設(shè)計，它真的夠用么？今天資深設(shè)計師 Luis Ouriach 的這篇文章提出了一個全新的解決方案。以下是正文：

傳統(tǒng)4 px 網(wǎng)格系統(tǒng)與斐波那契網(wǎng)格系統(tǒng)的對比圖示

每次和新設(shè)計師合作時，我都會保持一個固定流程。我會打開谷歌搜索「8 px grid Medium.com」，找到 Elliot Dahl 的完整指南發(fā)送給對方。這是指南鏈接。

雖然這個指南非常優(yōu)秀（強烈推薦），但直到今年之前，我都把4的倍數(shù)（不是8?。┮暈樵O(shè)計圣經(jīng)。新增元素？左側(cè)內(nèi)邊距肯定是16 px，頂部是12 px，每次都是這樣操作的。

藥丸形組件標注著內(nèi)邊距數(shù)值，左右16 px ，上下12 px

這種設(shè)計方法雖然能帶來可預測性，也能快速建立組件的肌肉記憶，但我不禁覺得我們已經(jīng)陷入了一個困境：所有東西看起來都千篇一律。

嘗試用奇數(shù)

使用偶數(shù)和奇數(shù)內(nèi)邊距的藥丸形組件對比

或許我們應(yīng)該考慮使用奇數(shù)間距數(shù)值來打破常規(guī)。我已經(jīng)準備好被網(wǎng)格系統(tǒng)警察逮捕了。

傳統(tǒng)4 px 網(wǎng)格系統(tǒng)的問題在于垂直或水平間距總感覺略顯松散。雖然這已成為產(chǎn)品設(shè)計的默認標準，但我發(fā)現(xiàn)自己總會糾結(jié)組件中那些多出來的像素。

擴展對比

分別使用兩種內(nèi)邊距設(shè)計系統(tǒng)的藥丸形組件對比

在上圖中，左側(cè)是傳統(tǒng) 4 px 系統(tǒng)的組件，右側(cè)是調(diào)整后的奇數(shù)間距版本。個人認為后者看起來更協(xié)調(diào)。你的感受如何？

我在這里手動調(diào)整了1-2 px 來優(yōu)化內(nèi)邊距。從頂部往下數(shù)第二個和第四個藥丸形組件尤為明顯，奇數(shù)間距方案呈現(xiàn)出更均衡的視覺效果。

那字體怎么辦？

這種方案面臨的第一個質(zhì)疑可能來自字體內(nèi)置尺寸對間距的影響。那么我們用不同的字體來測試一下！

六大字體（Oxygen Mono、Noto Serif、Roboto、Poppins、Palatino、Koulen）在兩種系統(tǒng)中的對比效果

有趣的是，視覺感受差異微乎其微。無論是等寬字體還是襯線體，奇數(shù)間距都能帶來更緊湊的效果。需要注意的是行高會影響最終效果，這種方案在單行文本（100%行高）表現(xiàn)良好，但大段文字仍需測試。

重要提示
所有藥丸形組件內(nèi)的字號和圖標尺寸都保持偶數(shù)！這說明偶數(shù)內(nèi)部元素與奇數(shù)外圍間距可以形成和諧搭配。

實際案例

Notion郵件產(chǎn)品著陸頁首屏截圖，標注著表單元素的像素級調(diào)整

在研究Notion新推出的郵件產(chǎn)品頁時，我發(fā)現(xiàn)他們巧妙混用偶奇數(shù)值的思路，并且沒有遵循我們之前封為圭臬的 4px 網(wǎng)格。

系統(tǒng)化實踐：斐波那契網(wǎng)格系統(tǒng)

4 px 網(wǎng)格與斐波那契數(shù)列網(wǎng)格系統(tǒng)對比

若要將這種理念轉(zhuǎn)化為系統(tǒng)，可以借助斐波那契數(shù)列建立數(shù)學規(guī)律：每個數(shù)值都是前兩項之和。

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

斐波那契網(wǎng)格系統(tǒng)可以通過將兩個前值相加來獲得。

斐波那契網(wǎng)格系統(tǒng)示意圖

雖然結(jié)果明顯呈現(xiàn)之前的奇數(shù)網(wǎng)格特征，但其中蘊含的美學規(guī)律令人著迷。

對比兩種系統(tǒng)的組件的視覺效果

兩種系統(tǒng)的組件差異雖小，但這正是我們追求的精妙之處，設(shè)計不就是從理所當然固化的系統(tǒng)當中，逐步向著更加有趣且實用的方向發(fā)展的嗎？

作者：陳子木