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

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

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

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

藥丸形組件標注著內邊距數值，左右16 px ，上下12 px

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

嘗試用奇數

使用偶數和奇數內邊距的藥丸形組件對比

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

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

擴展對比

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

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

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

那字體怎么辦？

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

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

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

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

實際案例

Notion郵件產品著陸頁首屏截圖，標注著表單元素的像素級調整

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

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

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

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

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

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

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

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

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

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

作者：陳子木