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

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

這些細節(jié)提升技巧包括了布局、顏色、字體等等，既適合新手學習拓展，也適合有經驗的設計師反思補充。

一、漸變遮罩層加強對比

當設計帶有標題和背景圖片的卡片時，在這兩個元素之間設計清晰地視覺對比非常重要。

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

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

永遠不要用純黑色作為背景

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

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

這種配色在深色模式下的設計中會非常有用。

三、用同色系配色

在設計深色模式 UI 時，會遇到需要在暗色的背景上加深色卡片的情況。

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

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

四、數值對齊和視覺對齊

當將大小相同的正方形和圓形并排放置時，由于人眼感知形狀的方式，它們在視覺上可能會出現不同。

使用光學校準技術很重要。（說人話就是要用眼睛來感覺。）

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

五、偶數間距

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

一個有效的技巧是使用 8 的倍數來表示元素之間的間距。

這是因為大多數開發(fā)會使用 8 點網格來進行頁面布局，這樣能有效減少錯誤的可能性并簡化開發(fā)過程。

六、投影模糊值

當應用投影模糊效果時，確保將模糊值設置為 Y 軸大小的 2 倍。

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

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

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

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

不斷優(yōu)化調整色彩飽和度，特別是在用紅、綠、藍、黃色時很有用。

八、理想的字體大小

選擇合適的字體大小是設計優(yōu)秀 UI 界面的一個關鍵方面。

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

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

九、按鈕的填充大小

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

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

這個按鈕看起來就是比較舒服的。

十、合適的視覺對比度

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

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

十一、為導航欄設計合適的圖標

在為你的界面設計底部導航欄時，保持圖標樣式的一致性是很重要的。

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

十二、導航欄中的激活圖標

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

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

十三、導出完美圖標

在導出圖標時，重要的是要確保它們并排放置時在視覺上對齊和平衡。

為了實現這一點，建議在導出時將圖標放置在標準框內。這有助于在不同的圖標之間創(chuàng)造一致性和平衡感。

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

十四、設計輪播隱喻

當設計一個輪播卡片時，在容器的邊緣，顯示一點點下一張或上一張卡片。這種隱喻可以幫助用戶預測下一張卡片，使交互感覺更自然。

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

十五、改變按鈕的提示內容

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

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

這個方法對于電商網站或涉及多個步驟或操作的其他應用尤其有用。

十六、嵌套的圓角大小

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

保持設計匹配卡片的圓角半徑和里面的內容。

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

十七、適合的行高

UI 中內容的理想行高通常是字體大小的 1.5 倍。

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

當行高太緊時，它會使文本顯得局促而難以閱讀，一定要注意。

十八、何時用大小寫

為主要按鈕使用標題大小寫，因為它是需要被強調的按鈕。

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

使用標題大小寫可以方便用戶瀏覽文本并識別按鈕的關鍵信息。

十九、何時用全大寫

大寫字母比小寫字母有更強的視覺沖擊力。

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

二十、正確使用漸變

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

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

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

線性漸變在設計暗模式 UI 時特別有用。

二十一、底部導航欄

始終記住，不是要每個選項內容之間距離相等，而是通過把整個導航寬度進行均分。當每個選項卡占用相同的寬度時，每個選項卡中每個圖標之間的距離將相同。

所以，在為手機 UI 設計底部導航欄時，一定要考慮到屏幕的寬度和標簽的數量。每個圖標之間的間距相等，每個標簽都有固定的寬度。

二十二、 突出顯示激活選項

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

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

例如，可以使用淺色背景使激活項從其他選項中脫穎而出，這在設計 web UI 時很有用。

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

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

二十四、文本字段對齊

為了保持輸入表單的一致性和連貫性，最好將每個標簽放在相應文本字段的上方，而不是放在左側或右側。

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

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

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

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

二十六、表單標簽文本保持簡短

在設計輸入表單時，保持標簽文本簡潔。別用長句子，類似"請輸入您的電子郵件地址"。

簡潔的標簽內容能幫助用戶快速掃描表單并更容易地填寫。

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

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

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

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

二十八、面包屑設計

在設計面包屑時，避免把當前頁面的位置顏色設計為鏈接色，而應該為其他頁面保留鏈接色。

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

二十九、開關設計

當切換開關的變化將立即在產品中生效時，應該使用開關組件。

在這種情況下，不需要單獨的操作按鈕來確認操作，因為切換本身已經足夠確認了。

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

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

通過使用混合模式來實現獨特有趣的效果。在設計圖像豐富的 UI 界面中非常有用。

作者：彩云譯設計