日本阿v片在线播放免费,成人国产片视频在线观看,日韩黄片毛片在线观看,一区亚洲电影,琪琪秋霞午夜av影视在线,中文字幕在线视频不卡,最新大伊香蕉精品视频在线,亚洲AV无码日韩一区二区乱

告別 4px 間距，迎接斐波那契數(shù)列

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 吧？每次……都……這樣。

一個(gè)帶有指向內(nèi)邊距值的標(biāo)簽的藥丸組件。左右內(nèi)邊距為 16，上下內(nèi)邊距為 12。

雖然這種設(shè)計(jì)方法有助于提高可預(yù)測性，并成為快速設(shè)置組件的肌肉記憶，但我不禁想到，我們已經(jīng)進(jìn)入了一個(gè)不幸的一切看起來都一樣的世界。

奇數(shù)

也許我們值得考慮使用奇數(shù)而不是偶數(shù)來作為間距，以便改變現(xiàn)狀并讓我們保持理智。

我已準(zhǔn)備好進(jìn)入網(wǎng)格系統(tǒng)監(jiān)獄。我準(zhǔn)備去網(wǎng)格系統(tǒng)監(jiān)獄。

我對偶數(shù) 4px 計(jì)算網(wǎng)格系統(tǒng)感到不滿的是，它們在垂直或水平方向上都感覺有點(diǎn)松散。雖然這現(xiàn)在是產(chǎn)品設(shè)計(jì)的事實(shí)標(biāo)準(zhǔn)，但我發(fā)現(xiàn)自己還是會(huì)把注意力集中在組件中那些感覺像多余幾個(gè)像素的地方。

比較

我們來看一下對比。上圖左側(cè)是采用 4px 系統(tǒng)的傳統(tǒng)間距組件。右側(cè)是我們將其調(diào)整為奇數(shù)。個(gè)人感覺這樣更好。你覺得呢？

我在這里所做的是手動(dòng)上下調(diào)整一兩個(gè)像素，以優(yōu)化填充，使其感覺更緊密。這在從上往下數(shù)第二個(gè)和第四個(gè)藥丸中尤為明顯，比較起來，你會(huì)發(fā)現(xiàn)奇數(shù)填充方式感覺填充效果更加一致。

那么字體呢？

對此想法的第一個(gè)反對意見可能來自于字體因其固有大小而如何破壞間距的差異。

讓我們來看看吧！

使用 4px 系統(tǒng)或奇數(shù)系統(tǒng)的 6 種字體的比較：Oxygen Mono、Noto Serif、Roboto、Poppins、Palatino、Koulen。

有意思！感覺上沒什么區(qū)別。無論是單聲道還是襯線字體，奇數(shù)間距的最終效果仍然更緊湊。

這里需要注意的是，行高會(huì)影響所有內(nèi)容的呈現(xiàn)效果。對于單行文本，設(shè)置為 100% 行高效果很好，但對于較大區(qū)域的文本，我們需要進(jìn)行實(shí)驗(yàn)。

重要的

在這些藥丸里，所有的字體大小和圖標(biāo)都被設(shè)置為均勻大小！所以，或許內(nèi)部為偶數(shù)、外部為奇數(shù)的組合能給我們帶來和諧。

在野外

Notion Mail 登陸頁面英雄的屏幕截圖，表單頂部的注釋顯示了其像素完美度。

注意：此資源的先前版本在 Notion 按鈕上的填充值不正確。它列出的是垂直 7px 和水平 15px，但當(dāng)前網(wǎng)站上的填充值為垂直 6px 和水平 14px。感謝您發(fā)現(xiàn)這個(gè)問題。

馬漢
和
盧卡斯
。

最近，我在查看 Notions 的新郵件登錄頁面時(shí)發(fā)現(xiàn)了這種處理方法。

他們通過混合奇偶數(shù)來達(dá)到這一目的，效果非常好。為了獲得更好的手感，他們將按鈕的內(nèi)邊距微調(diào)為奇數(shù)，然后使用經(jīng)典的邊框半徑計(jì)算方法，對內(nèi)部和外部元素的半徑進(jìn)行了微調(diào)和計(jì)算。

系統(tǒng)化——斐波那契數(shù)列簡介

如果我要嘗試把這個(gè)想法變成一個(gè)系統(tǒng)，我可能至少會(huì)想嘗試構(gòu)建一個(gè)方法來應(yīng)對這種瘋狂。這時(shí)，我們可以依靠像斐波那契數(shù)列這樣的系統(tǒng)來處理這些繁重的工作。

在 4px 系統(tǒng)中，我們像這樣設(shè)置間距 - 以 4 為基本單位，然后乘以 1（或者如果我們更時(shí)髦的話，乘以 x.5）以獲得我們的系統(tǒng)：

但斐波那契系統(tǒng)可以通過將兩個(gè)前值相加來發(fā)揮作用。

就像我們之前發(fā)現(xiàn)的那樣，這確實(shí)……很奇怪，但這里有一些我喜歡的東西。

使用滑塊對 4px 網(wǎng)格系統(tǒng)和斐波那契網(wǎng)格系統(tǒng)進(jìn)行比較。

在示例組件上比較系統(tǒng)時(shí)，差異很小，但這不正是我們的目的嗎？這是一個(gè)反問句

蘭亭妙微(www.jjddy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

« 在用戶體驗(yàn)研究中使用人工智能：個(gè)人觀點(diǎn)：什么有效，什么無效表盤設(shè)計(jì)分享【一】 »