本文授權(quán)轉(zhuǎn)自：UXnext（ID：uxnext）

“本文試圖理解為什么遵循一些常見的設(shè)計(jì)實(shí)踐，幫助我們?cè)谧约旱脑O(shè)計(jì)中更好地理解和應(yīng)用這些原則。”

“你們從第一份作業(yè)中學(xué)到了什么？” 當(dāng)我分享我的想法時(shí)，Yug 給了我們一個(gè)很好的建議：雖然遵循最佳實(shí)踐至關(guān)重要，但了解這些實(shí)踐背后的 原因 也同樣重要。他解釋說，這種更深層次的理解有助于我們分層思考并做出更明智的設(shè)計(jì)決策。

分層思考

自然而然，我天生好奇，因此被深深吸引。我很快記下了一些主要收獲，并開始在網(wǎng)上搜索，以找出這些設(shè)計(jì)實(shí)踐背后的原因。我的目標(biāo)是盡可能詳細(xì)地了解這些看似簡(jiǎn)單的原則背后的 原因 。

一、確保 x 和 y 方向上的填充一致

為什么？

• x 和 y 方向上的一致填充有助于在設(shè)計(jì)中營造視覺和諧感和秩序感。它創(chuàng)建了一種平衡的布局，讓用戶更容易瀏覽和在腦海中掌握，從而增強(qiáng)用戶體驗(yàn)。

• 這種做法植根于設(shè)計(jì)心理學(xué)，特別是格式塔原理。

格式塔原則是關(guān)于我們的大腦如何將事物視為一個(gè)整體，而不是單獨(dú)的部分。因此，即使有很多塊或元素，我們的大腦也傾向于將它們組合成一個(gè)統(tǒng)一的事物。

• 視覺間距
  這或多或少是間距系統(tǒng)的“藝術(shù)”方面。

  這里使用不一致的填充來創(chuàng)建視覺層次，從而形成視覺平衡和諧的布局，同時(shí)考慮到字符的形狀及其相互作用。

  
  

• 非對(duì)稱焦點(diǎn)
  為了吸引用戶對(duì)特定內(nèi)容或部分的注意力，我們可以在 x 和 y 方向上應(yīng)用不同的填充值。此技術(shù)可以引導(dǎo)用戶的注意力并突出顯示界面中的關(guān)鍵信息。

• 在大多數(shù)情況下，保持 x 和 y 方向上的填充一致。對(duì)于需要光學(xué)對(duì)齊圖像或矢量的情況，應(yīng)使用不一致的填充。

• 如果您想使用不一致的填充來聚焦任何元素，那么請(qǐng)確保它不會(huì)干擾設(shè)計(jì)的整體流程。

• 大多數(shù)現(xiàn)代顯示器和監(jiān)視器分辨率都可以被 4 或 8 整除。因此，遵循這一點(diǎn)可以獲得更具凝聚力和精致的外觀。

• Google 和 Apple 都推薦使用 8pt 系統(tǒng)。如果 Apple 在其設(shè)計(jì)系統(tǒng)（人機(jī)界面）中使用 8pt 網(wǎng)格，而 Google 也在其設(shè)計(jì)系統(tǒng)（Material Design）中使用 8pt 網(wǎng)格，那么對(duì)于我們這些產(chǎn)品設(shè)計(jì)師來說，這非常重要。

• 這也使得設(shè)計(jì)更容易擴(kuò)展。無論是增加元素的大小還是整個(gè)布局，擁有可被 8 或 4 整除的基礎(chǔ)網(wǎng)格都可以實(shí)現(xiàn)無縫擴(kuò)展，而不會(huì)失去設(shè)計(jì)的和諧性。

• 使用 8 或 4 的倍數(shù)有助于實(shí)現(xiàn)更具視覺吸引力、更有條理和一致的設(shè)計(jì)，使用戶更容易瀏覽和消費(fèi)內(nèi)容。

建議使用 8pt 或 4pt（以獲得更高的粒度）網(wǎng)格系統(tǒng)。但沒有必要一直這樣做，重要的是平衡設(shè)計(jì)的結(jié)構(gòu)和順序與創(chuàng)造力。

三、避免使用小數(shù)

為什么？

• 高密度屏幕可以處理小數(shù)，但低密度屏幕可能會(huì)因?yàn)槿鄙佟邦~外”像素來準(zhǔn)確呈現(xiàn)設(shè)計(jì)而導(dǎo)致設(shè)計(jì)顯示模糊。

• 這可能會(huì)導(dǎo)致視覺不一致和在低密度屏幕上渲染復(fù)雜等問題。這也可能導(dǎo)致意想不到的設(shè)計(jì)問題。

避免使用小數(shù)是最好的做法。

四、將文本行高保持為“自動(dòng)”為什么？

• 這可以確保行之間的間距動(dòng)態(tài)調(diào)整，從而保持視覺上令人愉悅的布局。

• 這也與設(shè)計(jì)師和開發(fā)人員之間的交接麻煩有關(guān)，保持行高自動(dòng)可以幫助緩解這個(gè)問題。

• 這使得 Figma 可以像 Web 一樣分配行高。當(dāng)行高設(shè)置為自動(dòng)時(shí)，F(xiàn)igma 會(huì)根據(jù)字體大小計(jì)算行高，這可以使文本樣式的維護(hù)更加簡(jiǎn)單，并簡(jiǎn)化整體設(shè)計(jì)流程。

• 在大多數(shù)情況下，保持行高為“自動(dòng)”是最好的方法。為了便于閱讀，行高應(yīng)介于字體大小的 120% 到 145% 之間。

• 我們可以使用不同的行高，但它不應(yīng)該擾亂視覺設(shè)計(jì)流程，并且還要確保它在交接時(shí)不會(huì)產(chǎn)生沖突。

為什么？

• 圖標(biāo)在特定尺寸下效果最佳，而 24px 是圖標(biāo)的標(biāo)準(zhǔn)尺寸之一。通過使用一致的框架尺寸并以該尺寸導(dǎo)出圖標(biāo)，設(shè)計(jì)師可以確保視覺一致性并簡(jiǎn)化設(shè)計(jì)流程。

• 通常移動(dòng)設(shè)備的可點(diǎn)擊區(qū)域?yàn)?40px，因此設(shè)計(jì)良好的應(yīng)用中的大多數(shù) CTA 按鈕都很大，且在 32px 到 40px 之間，而 24px 是最低標(biāo)準(zhǔn)尺寸。我們應(yīng)避免將 CTA 按鈕的尺寸設(shè)在 24px 以下。

• 是的。在針對(duì)小屏幕或密集內(nèi)容區(qū)域進(jìn)行設(shè)計(jì)時(shí)，可能需要較小的框架尺寸來創(chuàng)建圖標(biāo)或適應(yīng)特定布局。

• 此外，在構(gòu)建圖標(biāo)集時(shí)，建議為所有圖標(biāo)選擇一個(gè)通用尺寸，例如 16px、24px 或 32px，然后根據(jù)需要縮放到其他尺寸。這有助于在設(shè)計(jì)過程中保持視覺一致性和效率。

創(chuàng)建圖標(biāo)時(shí)應(yīng)遵循一些基本的尺寸準(zhǔn)則。堅(jiān)持使用 24x24 像素圖標(biāo)是一個(gè)很好的中間圖標(biāo)尺寸。但如果特定應(yīng)用程序需要，我們也可以使用 16px 或 20px 的較小框架。

六、幽靈按鈕

什么是幽靈按鈕？

• 幽靈按鈕基本上是次要或第三級(jí)按鈕，通常用作號(hào)召性用語 (CTA) 按鈕，有助于創(chuàng)建按鈕的視覺層次結(jié)構(gòu)，從而可以推廣最重要的按鈕。

• 它們通常是透明的空按鈕，具有基本形狀，通常用非常細(xì)的線條包圍，筆觸和背景之間有微妙的顏色對(duì)比。幽靈按鈕提供干凈簡(jiǎn)約的外觀。

• 可以使用幽靈按鈕的一些用例是：“了解更多”，“注冊(cè)”，“開始”，“返回”。

• 幽靈按鈕增強(qiáng)了應(yīng)用程序的美感，同時(shí)提供了一種微妙且用戶友好的方式來引導(dǎo)訪問者執(zhí)行重要的操作。

• 最終，使用幽靈按鈕的選擇應(yīng)該與整體設(shè)計(jì)策略和目標(biāo)受眾的偏好相一致。

在科技浪潮奔涌向前的當(dāng)下，人工智能正深刻重塑我們的生活與工作。人機(jī)之間的關(guān)系，也從簡(jiǎn)單交互邁向深度協(xié)作。想知道如何在這一趨勢(shì)下把握體驗(yàn)設(shè)計(jì)的新方向嗎？2025 年 10 月將在北京舉辦的 IXDC 國際體驗(yàn)設(shè)計(jì)大會(huì)聚焦 “人機(jī)共生：人工智能時(shí)代人機(jī)協(xié)作新范式” ，作為全球領(lǐng)先的用戶體驗(yàn)創(chuàng)新盛會(huì)，它將匯聚前沿理念與實(shí)踐。一起來關(guān)注這場(chǎng)盛會(huì)，探索人機(jī)協(xié)作的無限可能。

文章轉(zhuǎn)載：UXnext，版權(quán)歸原作者所有

原文鏈接：https://mp.weixin.qq.com/s/daTl8l4qzEWMbn9ZIUEoeQ

版權(quán)聲明：“IXDC”所推送的文章，除非確實(shí)無法確認(rèn)，我們都會(huì)注明作者和來源，本公眾號(hào)對(duì)轉(zhuǎn)載、分享的內(nèi)容、陳述、觀點(diǎn)判斷保持中立，不對(duì)所包含內(nèi)容的準(zhǔn)確性、可靠性或完善性提供任何明或暗示的保證，僅供讀者參考。部分文章推送時(shí)未能與原作者取得聯(lián)系，若涉及內(nèi)容或作品等版權(quán)問題，煩請(qǐng)?jiān)髡呗?lián)系我們，給出內(nèi)容所在的網(wǎng)址并提供相關(guān)證明資料，我們會(huì)核查后立即更正或者刪除有關(guān)內(nèi)容！本公眾號(hào)不承擔(dān)任何責(zé)任，并擁有對(duì)此聲明的最終解釋權(quán)。

聯(lián)系微信：18802086168

聯(lián)系電話：18802086168

編排 | 羅家玉

終審 | 蘇 菁

點(diǎn)這里，學(xué)習(xí)更多設(shè)計(jì)知識(shí)！