編者按：在 UI 設(shè)計(jì)當(dāng)中采用網(wǎng)格系統(tǒng)是相當(dāng)普遍的存在，而 4px 網(wǎng)格則是其中的關(guān)鍵。但是即便如此，我們也在越來越多的優(yōu)秀設(shè)計(jì)中，看到打破 4px 網(wǎng)格系統(tǒng)的設(shè)計(jì)，它真的夠用么？今天資深設(shè)計(jì)師 Luis Ouriach 的這篇文章提出了一個(gè)全新的解決方案。以下是正文：
傳統(tǒng)4 px 網(wǎng)格系統(tǒng)與斐波那契網(wǎng)格系統(tǒng)的對(duì)比圖示
每次和新設(shè)計(jì)師合作時(shí)，我都會(huì)保持一個(gè)固定流程。我會(huì)打開谷歌搜索「8 px grid Medium.com」，找到 Elliot Dahl 的完整指南發(fā)送給對(duì)方。這是指南鏈接。
雖然這個(gè)指南非常優(yōu)秀（強(qiáng)烈推薦），但直到今年之前，我都把4的倍數(shù)（不是8?。┮暈樵O(shè)計(jì)圣經(jīng)。新增元素？左側(cè)內(nèi)邊距肯定是16 px，頂部是12 px，每次都是這樣操作的。
藥丸形組件標(biāo)注著內(nèi)邊距數(shù)值，左右16 px ，上下12 px
這種設(shè)計(jì)方法雖然能帶來可預(yù)測(cè)性，也能快速建立組件的肌肉記憶，但我不禁覺得我們已經(jīng)陷入了一個(gè)困境：所有東西看起來都千篇一律。
使用偶數(shù)和奇數(shù)內(nèi)邊距的藥丸形組件對(duì)比
或許我們應(yīng)該考慮使用奇數(shù)間距數(shù)值來打破常規(guī)。我已經(jīng)準(zhǔn)備好被網(wǎng)格系統(tǒng)警察逮捕了。
傳統(tǒng)4 px 網(wǎng)格系統(tǒng)的問題在于垂直或水平間距總感覺略顯松散。雖然這已成為產(chǎn)品設(shè)計(jì)的默認(rèn)標(biāo)準(zhǔn)，但我發(fā)現(xiàn)自己總會(huì)糾結(jié)組件中那些多出來的像素。
分別使用兩種內(nèi)邊距設(shè)計(jì)系統(tǒng)的藥丸形組件對(duì)比
在上圖中，左側(cè)是傳統(tǒng) 4 px 系統(tǒng)的組件，右側(cè)是調(diào)整后的奇數(shù)間距版本。個(gè)人認(rèn)為后者看起來更協(xié)調(diào)。你的感受如何？
我在這里手動(dòng)調(diào)整了1-2 px 來優(yōu)化內(nèi)邊距。從頂部往下數(shù)第二個(gè)和第四個(gè)藥丸形組件尤為明顯，奇數(shù)間距方案呈現(xiàn)出更均衡的視覺效果。
這種方案面臨的第一個(gè)質(zhì)疑可能來自字體內(nèi)置尺寸對(duì)間距的影響。那么我們用不同的字體來測(cè)試一下！
六大字體（Oxygen Mono、Noto Serif、Roboto、Poppins、Palatino、Koulen）在兩種系統(tǒng)中的對(duì)比效果
有趣的是，視覺感受差異微乎其微。無論是等寬字體還是襯線體，奇數(shù)間距都能帶來更緊湊的效果。需要注意的是行高會(huì)影響最終效果，這種方案在單行文本（100%行高）表現(xiàn)良好，但大段文字仍需測(cè)試。
重要提示
所有藥丸形組件內(nèi)的字號(hào)和圖標(biāo)尺寸都保持偶數(shù)！這說明偶數(shù)內(nèi)部元素與奇數(shù)外圍間距可以形成和諧搭配。
Notion郵件產(chǎn)品著陸頁(yè)首屏截圖，標(biāo)注著表單元素的像素級(jí)調(diào)整
在研究Notion新推出的郵件產(chǎn)品頁(yè)時(shí)，我發(fā)現(xiàn)他們巧妙混用偶奇數(shù)值的思路，并且沒有遵循我們之前封為圭臬的 4px 網(wǎng)格。
4 px 網(wǎng)格與斐波那契數(shù)列網(wǎng)格系統(tǒng)對(duì)比
若要將這種理念轉(zhuǎn)化為系統(tǒng)，可以借助斐波那契數(shù)列建立數(shù)學(xué)規(guī)律：每個(gè)數(shù)值都是前兩項(xiàng)之和。
典型的 4px 網(wǎng)格系統(tǒng)
斐波那契網(wǎng)格系統(tǒng)可以通過將兩個(gè)前值相加來獲得。
斐波那契網(wǎng)格系統(tǒng)示意圖
雖然結(jié)果明顯呈現(xiàn)之前的奇數(shù)網(wǎng)格特征，但其中蘊(yùn)含的美學(xué)規(guī)律令人著迷。
對(duì)比兩種系統(tǒng)的組件的視覺效果
兩種系統(tǒng)的組件差異雖小，但這正是我們追求的精妙之處，設(shè)計(jì)不就是從理所當(dāng)然固化的系統(tǒng)當(dāng)中，逐步向著更加有趣且實(shí)用的方向發(fā)展的嗎？
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
繼續(xù)閱讀本文相關(guān)話題
發(fā)評(píng)論！每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后，在評(píng)論區(qū)留言，系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今，是國(guó)內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái)，提供獎(jiǎng)品贊助 聯(lián)系我們
品牌形象設(shè)計(jì)標(biāo)準(zhǔn)教程
已累計(jì)誕生 726 位幸運(yùn)星
發(fā)表評(píng)論 為下方 16 條評(píng)論點(diǎn)贊，解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓