優(yōu)秀的 UI 界面設(shè)計(jì)對產(chǎn)品的成功有很大的影響。今天我想總結(jié) 30 個(gè)非常實(shí)用的設(shè)計(jì)細(xì)節(jié)，幫助提升 UI 設(shè)計(jì)品質(zhì)。

這些細(xì)節(jié)寫過很多次，但在實(shí)際項(xiàng)目中依然有人犯錯(cuò)。所以，建議你一定要完整看完，并帶入自己的項(xiàng)目進(jìn)行反思，相信會有新的收獲。

這些細(xì)節(jié)提升技巧包括了布局、顏色、字體等等，既適合新手學(xué)習(xí)拓展，也適合有經(jīng)驗(yàn)的設(shè)計(jì)師反思補(bǔ)充。

一、漸變遮罩層加強(qiáng)對比

當(dāng)設(shè)計(jì)帶有標(biāo)題和背景圖片的卡片時(shí)，在這兩個(gè)元素之間設(shè)計(jì)清晰地視覺對比非常重要。

有一個(gè)比較推薦的方法就是在圖片上增加一個(gè)帶透明度的深色漸變層，以使得文字更容易閱讀，不會受到換圖片的影響。

二、不要用純黑色作為背景

永遠(yuǎn)不要用純黑色作為背景

用純黑色作為背景，通過會設(shè)計(jì)出一種不和諧的感覺，讓人感覺不舒服。

如果要用到深色，建議可以用接近黑色的色值，比如#0F0F0F 來設(shè)計(jì)一個(gè)更自然，更美觀的背景。

這種配色在深色模式下的設(shè)計(jì)中會非常有用。

三、用同色系配色

在設(shè)計(jì)深色模式 UI 時(shí)，會遇到需要在暗色的背景上加深色卡片的情況。

例如，一張藍(lán)色的卡片在深藍(lán)色背景上比在純黑色背景上看起來更好。

同色系配色是一個(gè)比較好的配色方法，只需要在本來的色相上降低亮度值就可以比較穩(wěn)了。

四、數(shù)值對齊和視覺對齊

當(dāng)將大小相同的正方形和圓形并排放置時(shí)，由于人眼感知形狀的方式，它們在視覺上可能會出現(xiàn)不同。

使用光學(xué)校準(zhǔn)技術(shù)很重要。（說人話就是要用眼睛來感覺。）

這包括調(diào)整正方形和圓形的大小，使它們在視覺上看起來對齊，即使它們沒有完全"對齊"。

五、偶數(shù)間距

有節(jié)奏的均勻間距

一個(gè)有效的技巧是使用 8 的倍數(shù)來表示元素之間的間距。

這是因?yàn)榇蠖鄶?shù)開發(fā)會使用 8 點(diǎn)網(wǎng)格來進(jìn)行頁面布局，這樣能有效減少錯(cuò)誤的可能性并簡化開發(fā)過程。

六、投影模糊值

當(dāng)應(yīng)用投影模糊效果時(shí)，確保將模糊值設(shè)置為 Y 軸大小的 2 倍。

這能創(chuàng)造出一個(gè)和諧和平衡的效果，看起來視覺上令人愉悅，可以改善整體用戶體驗(yàn)。

七、在暗色背景上降低飽和度

低飽和度的顏色能創(chuàng)造出更微妙的效果，讓眼睛更舒適。

另一方面，高飽和度的顏色會讓視覺沉重和壓抑，導(dǎo)致眼睛疲勞，使閱讀文字變得更加困難。

不斷優(yōu)化調(diào)整色彩飽和度，特別是在用紅、綠、藍(lán)、黃色時(shí)很有用。

八、理想的字體大小

選擇合適的字體大小是設(shè)計(jì)優(yōu)秀 UI 界面的一個(gè)關(guān)鍵方面。

當(dāng)涉及到設(shè)置一般段落的字體大小時(shí)，理想的大小是 16px。這種字體大小在易讀性和可讀性之間取得了平衡。

16px 是各種設(shè)備和平臺上常用的字體大小。

九、按鈕的填充大小

垂直邊距是水平邊距的 2 倍時(shí)，看起來更完美。

在上面的例子中，按鈕有 12px 的垂直填充（頂部，底部）和 24px 的水平填充（右側(cè)，左側(cè)）。

這個(gè)按鈕看起來就是比較舒服的。

十、合適的視覺對比度

通過使用不同的樣式和顏色，咱們可以創(chuàng)建不同信息的層次結(jié)構(gòu)，使用戶更容易掃描和理解內(nèi)容。

例如，在標(biāo)題中使用粗體和較大的字體可以吸引人們對重要信息的注意，而在標(biāo)簽和內(nèi)容中使用較淺或較小的字體可以幫助創(chuàng)造一種連續(xù)性和流暢感

十一、為導(dǎo)航欄設(shè)計(jì)合適的圖標(biāo)

在為你的界面設(shè)計(jì)底部導(dǎo)航欄時(shí)，保持圖標(biāo)樣式的一致性是很重要的。

所有的圖標(biāo)都應(yīng)該是面型或者描邊的，或者任何其他一致的樣式，而不是混在一起的多種樣式。

十二、導(dǎo)航欄中的激活圖標(biāo)

區(qū)分導(dǎo)航欄中的激活態(tài)和非激活態(tài)非常重要。

通過使用差異化大的樣式，例如填充圖標(biāo)或不同的顏色，可以清楚地向用戶傳達(dá)哪個(gè)選項(xiàng)卡當(dāng)前處于活動狀態(tài)，并增強(qiáng)整體用戶體驗(yàn)。

十三、導(dǎo)出完美圖標(biāo)

在導(dǎo)出圖標(biāo)時(shí)，重要的是要確保它們并排放置時(shí)在視覺上對齊和平衡。

為了實(shí)現(xiàn)這一點(diǎn)，建議在導(dǎo)出時(shí)將圖標(biāo)放置在標(biāo)準(zhǔn)框內(nèi)。這有助于在不同的圖標(biāo)之間創(chuàng)造一致性和平衡感。

這種方法在創(chuàng)建圖標(biāo)集時(shí)特別有用。

十四、設(shè)計(jì)輪播隱喻

當(dāng)設(shè)計(jì)一個(gè)輪播卡片時(shí)，在容器的邊緣，顯示一點(diǎn)點(diǎn)下一張或上一張卡片。這種隱喻可以幫助用戶預(yù)測下一張卡片，使交互感覺更自然。

通過這樣向用戶提供接下來會發(fā)生什么的明確指示。

十五、改變按鈕的提示內(nèi)容

可以更改按鈕提示以創(chuàng)建更直觀和高效的用戶體驗(yàn)。

例如，在用戶通過點(diǎn)擊"添加到購物車"按鈕將商品添加到購物車后，可以將主按鈕更改為"查看購物車"，讓用戶快速輕松地訪問他們的購物車，而無需導(dǎo)航到其他頁面。

這個(gè)方法對于電商網(wǎng)站或涉及多個(gè)步驟或操作的其他應(yīng)用尤其有用。

十六、嵌套的圓角大小

如果卡片的圓角半徑與內(nèi)容不匹配，就會造成不均勻或不平衡的外觀。

保持設(shè)計(jì)匹配卡片的圓角半徑和里面的內(nèi)容。

這個(gè)技巧有助于在間距上創(chuàng)造完美的平衡。

十七、適合的行高

UI 中內(nèi)容的理想行高通常是字體大小的 1.5 倍。

這個(gè)間距保證了文本行與行之間有足夠的呼吸空間，使段落更容易閱讀，減少視覺混亂。

當(dāng)行高太緊時(shí)，它會使文本顯得局促而難以閱讀，一定要注意。

十八、何時(shí)用大小寫

為主要按鈕使用標(biāo)題大小寫，因?yàn)樗切枰粡?qiáng)調(diào)的按鈕。

標(biāo)題大小寫是指將文本中每個(gè)單詞的第一個(gè)字母大寫，冠詞、介詞和連詞除外。

使用標(biāo)題大小寫可以方便用戶瀏覽文本并識別按鈕的關(guān)鍵信息。

十九、何時(shí)用全大寫

大寫字母比小寫字母有更強(qiáng)的視覺沖擊力。

考慮在標(biāo)簽、狀態(tài)和其他類似元素中使用全大寫字母，設(shè)計(jì)出一個(gè)干凈而精確的外觀，從其他元素中脫穎而出，同時(shí)要記住設(shè)計(jì)的整體視覺平衡。

二十、正確使用漸變

重要的是要記住，大多數(shù) UI 元素都是方形的（一個(gè)容易被忽視的漸變角度使用的原因，卻又讓我恍然大悟，確實(shí)如此）。

因此，使用徑向漸變背景有時(shí)會在設(shè)計(jì)中看起來不合適或不平衡。

相反，使用線性漸變背景通常是一個(gè)更好的主意，它可以幫助在設(shè)計(jì)中創(chuàng)造一種深度和對比感。

線性漸變在設(shè)計(jì)暗模式 UI 時(shí)特別有用。

二十一、底部導(dǎo)航欄

始終記住，不是要每個(gè)選項(xiàng)內(nèi)容之間距離相等，而是通過把整個(gè)導(dǎo)航寬度進(jìn)行均分。當(dāng)每個(gè)選項(xiàng)卡占用相同的寬度時(shí)，每個(gè)選項(xiàng)卡中每個(gè)圖標(biāo)之間的距離將相同。

所以，在為手機(jī) UI 設(shè)計(jì)底部導(dǎo)航欄時(shí)，一定要考慮到屏幕的寬度和標(biāo)簽的數(shù)量。每個(gè)圖標(biāo)之間的間距相等，每個(gè)標(biāo)簽都有固定的寬度。

二十二、 突出顯示激活選項(xiàng)

激活選項(xiàng)應(yīng)該很容易與非激活選項(xiàng)區(qū)分開來。

一種方法是使用對比鮮明的背景色或其他視覺樣式來突出顯示激活項(xiàng)。

例如，可以使用淺色背景使激活項(xiàng)從其他選項(xiàng)中脫穎而出，這在設(shè)計(jì) web UI 時(shí)很有用。

二十三、行動按鈕的說明文字

雖然這看起來并不重要，但是在行動按鈕下面添加一行上下文對于告知用戶下一步操作非常有用，特別是在支付等情況下。

二十四、文本字段對齊

為了保持輸入表單的一致性和連貫性，最好將每個(gè)標(biāo)簽放在相應(yīng)文本字段的上方，而不是放在左側(cè)或右側(cè)。

避免上圖中左邊這種布局，可以幫助確保整體設(shè)計(jì)看起來干凈有序。

二十五、按鈕與輸入框高度相同

為了在輸入表單中保持一致的視覺風(fēng)格，請確保輸入框的高度和主要的操作按鈕的高度相同。

在設(shè)計(jì)輸入表單時(shí)，一定要注意這些元素的高度，以確保干凈的 UI。

二十六、表單標(biāo)簽文本保持簡短

在設(shè)計(jì)輸入表單時(shí)，保持標(biāo)簽文本簡潔。別用長句子，類似"請輸入您的電子郵件地址"。

簡潔的標(biāo)簽內(nèi)容能幫助用戶快速掃描表單并更容易地填寫。

二十七、使用明確的表單占位符

與其在表單中使用通用的占位符內(nèi)容，不如使用明確的示例作為占位符。

例如，郵件文本字段為"caiyun@email.com" ，每種字段類型都有類似的示例。

這有助于用戶理解所需的輸入格式，并使他們更容易填寫表單內(nèi)容。

二十八、面包屑設(shè)計(jì)

在設(shè)計(jì)面包屑時(shí)，避免把當(dāng)前頁面的位置顏色設(shè)計(jì)為鏈接色，而應(yīng)該為其他頁面保留鏈接色。

這確保了其他頁面看起來是可點(diǎn)擊的，并且很容易與當(dāng)前頁面區(qū)分開。

二十九、開關(guān)設(shè)計(jì)

當(dāng)切換開關(guān)的變化將立即在產(chǎn)品中生效時(shí)，應(yīng)該使用開關(guān)組件。

在這種情況下，不需要單獨(dú)的操作按鈕來確認(rèn)操作，因?yàn)榍袚Q本身已經(jīng)足夠確認(rèn)了。

三十、使用混合模式的漸變效果

在設(shè)計(jì)中，為了創(chuàng)造生動多彩的卡片效果，可以嘗試在黑白或彩色素材圖像的頂部疊加漸變效果。

通過使用混合模式來實(shí)現(xiàn)獨(dú)特有趣的效果。在設(shè)計(jì)圖像豐富的 UI 界面中非常有用。

作者：彩云譯設(shè)計(jì)