2025-7-15 杰睿
我和新設計師合作的時候，有一個固定的流程。我會去谷歌，搜索“8px grid Medium.com”，然后找到 Elliot Dahl 的綜合指南，發(fā)給他們。指南如下。
這本指南太棒了，強烈推薦。直到今年，我?guī)缀醢?4 的倍數(shù)（而不是 8 的倍數(shù)！）奉為設計圣經(jīng)。新元素？左邊距肯定是 16，上邊距肯定是 12 吧？每次……都……這樣。
雖然這種設計方法有助于提高可預測性，并成為快速設置組件的肌肉記憶，但我不禁想到，我們已經(jīng)進入了一個不幸的一切看起來都一樣的世界。
也許我們值得考慮使用奇數(shù)而不是偶數(shù)來作為間距，以便改變現(xiàn)狀并讓我們保持理智。
我已準備好進入網(wǎng)格系統(tǒng)監(jiān)獄。我準備去網(wǎng)格系統(tǒng)監(jiān)獄。
我對偶數(shù) 4px 計算網(wǎng)格系統(tǒng)感到不滿的是，它們在垂直或水平方向上都感覺有點松散。雖然這現(xiàn)在是產(chǎn)品設計的事實標準，但我發(fā)現(xiàn)自己還是會把注意力集中在組件中那些感覺像多余幾個像素的地方。
我們來看一下對比。上圖左側是采用 4px 系統(tǒng)的傳統(tǒng)間距組件。右側是我們將其調(diào)整為奇數(shù)。個人感覺這樣更好。你覺得呢？
我在這里所做的是手動上下調(diào)整一兩個像素，以優(yōu)化填充，使其感覺更緊密。這在從上往下數(shù)第二個和第四個藥丸中尤為明顯，比較起來，你會發(fā)現(xiàn)奇數(shù)填充方式感覺填充效果更加一致。
對此想法的第一個反對意見可能來自于字體因其固有大小而如何破壞間距的差異。
讓我們來看看吧！
有意思！感覺上沒什么區(qū)別。無論是單聲道還是襯線字體，奇數(shù)間距的最終效果仍然更緊湊。
這里需要注意的是，行高會影響所有內(nèi)容的呈現(xiàn)效果。對于單行文本，設置為 100% 行高效果很好，但對于較大區(qū)域的文本，我們需要進行實驗。
重要的
在這些藥丸里，所有的字體大小和圖標都被設置為均勻大小！所以，或許內(nèi)部為偶數(shù)、外部為奇數(shù)的組合能給我們帶來和諧。
注意：此資源的先前版本在 Notion 按鈕上的填充值不正確。它列出的是垂直 7px 和水平 15px，但當前網(wǎng)站上的填充值為垂直 6px 和水平 14px。感謝您發(fā)現(xiàn)這個問題。
和 。
最近，我在查看 Notions 的新郵件登錄頁面時發(fā)現(xiàn)了這種處理方法。
他們通過混合奇偶數(shù)來達到這一目的，效果非常好。為了獲得更好的手感，他們將按鈕的內(nèi)邊距微調(diào)為奇數(shù)，然后使用經(jīng)典的邊框半徑計算方法，對內(nèi)部和外部元素的半徑進行了微調(diào)和計算。
如果我要嘗試把這個想法變成一個系統(tǒng)，我可能至少會想嘗試構建一個方法來應對這種瘋狂。這時，我們可以依靠像斐波那契數(shù)列這樣的系統(tǒng)來處理這些繁重的工作。
在 4px 系統(tǒng)中，我們像這樣設置間距 - 以 4 為基本單位，然后乘以 1（或者如果我們更時髦的話，乘以 x.5）以獲得我們的系統(tǒng)：
但斐波那契系統(tǒng)可以通過將兩個前值相加來發(fā)揮作用。
就像我們之前發(fā)現(xiàn)的那樣，這確實……很奇怪，但這里有一些我喜歡的東西。
在示例組件上比較系統(tǒng)時，差異很小，但這不正是我們的目的嗎？這是一個反問句