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