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