編者按：在進行 UI 設計的時候，很多小技巧能夠恰到好處地提升界面的設計視覺效果、用戶體驗。這篇來自Marc Andrew 的文章梳理了 8 個實用性很強的 UI 效果提升小技巧，是系列文章的十篇，原文最早發布于 marcandrew.me 。
在創建實用、可訪問性良好且視覺效果頗為出彩的 UI 界面的時候，我們大多只需要進行有限度的微調，即可達到頗為不錯的效果。在之前，我已經撰寫了很多實用的 UI & UX 優化小貼士（看完文章在文末獲取），這篇文章繼續增加 8 條實用的建議，一起來看看吧！
在上面的兩個設計示例中， 一個嵌套的矩形的圓角半徑看起來不是同心的，另一個則顯得更加一致合理。
在設計帶有圓角的控件的時候，如果兩者不是嵌套關系，那么圓角需要保持一致，確保整體視覺的統一性，如果是嵌套關系，那么需要讓兩者的邊角是協調的「同心」的效果。
這種按照比例縮小的邊角更加符合現實世界的邏輯，而且能夠制造出令人愉悅和諧的視覺體驗，給人感知會更加精致而專業。
在深色模式下，不要用純黑應該已經達成共識了，盡量使用深灰色來呈現應該已經是眾所周知的事情。不過當 UI 控件有互相重疊的情況發生的時候，需要注意，控件在 Z 軸的高程上存在差異的時候，要控制好深灰色的色階深淺變化，來確保它在 UI 視覺邏輯上的合理性。
在現實世界當中，元素距離你越近，一般也會距離光源越近，在視覺上顏色也應該越淺。在這種情況下，可以根據近淺遠深的邏輯來控制色階，讓界面的「高程」邏輯 更加合理自恰。
在深色模式下，由于顏色總體偏黑灰，這個時候幾乎不需要進行任何陰影上的設計，只需要控制控件主色的色階變化，就足以呈現出這種規律。
在上方的兩個設計范例當中，靠下的案例使用了更加簡短明確的文本來描述，簡略而明確地傳遞了信息。
如果不是要進行完整全面的解釋，一般文本內容，最好在消除了可能存在的歧義之后，盡可能簡短地表達，這樣可以幫助用戶更好地獲得他們想要要的關鍵。
在上方的兩個設計示例當中，一個使用了單選按鈕，另一個采用了下來菜單來承載多個選項。
當涉及到類似這種產品列表的選項設計時，UI 控件的選取常常會出現混亂的情況，看起來兩種設計似乎都是合理，但是實際上是要分情況的。
一般而言，是選用單選按鈕，還是使用下拉菜單，關鍵的判據是「用戶認知負荷」，通常當可選選項數目少于4個的時候，使用單選按鈕即可，當數量超過4個的時候，使用下拉菜單來承載選項。
在上方的兩個設計示例當中， 一個使用的是默認的黑色陰影樣式，另一個則使用的是帶有背景顏色傾向的陰影樣式。
在彩色背景上處理 UI 元素時，盡量避免使用黑色陰影，因為在現實世界當中，實際陰影效果是會受到環境顏色的影響的，如果可以的話，采用偏向背景色的陰影，能夠讓 UI 變得更加真實。
如果你也要避免那些看起來很假的陰影，最簡單的方法就是在其中混入一點背景色。
在上方的兩個設計示例當中， 一個是使用純白色背景的通知元素，另一個具有更暗更微妙的白色背景。
正如我在之前的技巧中提到的，在創建深色主題設計時永遠不要選擇純黑色，因為它會影響許多用戶的可用性，適當調亮黑色，能夠軟化強對比所造成的刺眼狀況。
當深色主題下需要使用白色元素的時候，類似的規則也同樣適用。這個時候需要適當讓白色的明度更暗，降低對比度，讓用戶不會因為過強對比而產生視覺頻閃效果。
上面是兩個表單設計示例，一個案例僅僅使用紅色邊框作為錯誤狀態警告，另一個案例則在紅色邊框的基礎上添加了圖標和說明。
這個主要是可訪問性的問題，不要僅僅使用顏色來向用戶傳達狀態信息，因為如果用戶存在視覺障礙，很容易漏掉錯誤狀態的指引。
始終使用圖標和文本說明，來告知用戶到底發生了什么錯誤，問題的癥結在哪里，確保信息的正確傳遞。
在上面的兩個設計示例當中， 一個使用默認占位符文本，另一個占位符則使用了貼合內容的格式。
與其只使用「輸入您的電子郵件」之類的占位符文本，不如提供一個真實的示例，即：「hello@marcandrew.me」，這樣可以更加直觀地告知用戶，這個地方要填寫的內容是什么格式的。
下面是往期的內容：
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 D.va