在創(chuàng)建實用、可訪問性良好且視覺效果頗為出彩的 UI 界面的時候，我們大多只需要進行有限度的微調(diào)，即可達到頗為不錯的效果。這篇文章梳理了 8 個實用性很強的 UI 效果提升小技巧，一起來看看吧！

1. 盡量采用一致且同心的圓弧邊角

在上面的兩個設(shè)計示例中， 一個嵌套的矩形的圓角半徑看起來不是同心的，另一個則顯得更加一致合理。

在設(shè)計帶有圓角的控件的時候，如果兩者不是嵌套關(guān)系，那么圓角需要保持一致，確保整體視覺的統(tǒng)一性，如果是嵌套關(guān)系，那么需要讓兩者的邊角是協(xié)調(diào)的「同心」的效果。

這種按照比例縮小的邊角更加符合現(xiàn)實世界的邏輯，而且能夠制造出令人愉悅和諧的視覺體驗，給人感知會更加精致而專業(yè)。

2. 深色模式下注意高程變化對于顏色的影響

在深色模式下，不要用純黑應該已經(jīng)達成共識了，盡量使用深灰色來呈現(xiàn)應該已經(jīng)是眾所周知的事情。不過當 UI 控件有互相重疊的情況發(fā)生的時候，需要注意，控件在 Z 軸的高程上存在差異的時候，要控制好深灰色的色階深淺變化，來確保它在 UI 視覺邏輯上的合理性。

在現(xiàn)實世界當中，元素距離你越近，一般也會距離光源越近，在視覺上顏色也應該越淺。在這種情況下，可以根據(jù)近淺遠深的邏輯來控制色階，讓界面的「高程」邏輯 更加合理自恰。

在深色模式下，由于顏色總體偏黑灰，這個時候幾乎不需要進行任何陰影上的設(shè)計，只需要控制控件主色的色階變化，就足以呈現(xiàn)出這種規(guī)律。

3. 使用簡短明確的文本標簽來傳遞信息

在上方的兩個設(shè)計范例當中，靠下的案例使用了更加簡短明確的文本來描述，簡略而明確地傳遞了信息。

如果不是要進行完整全面的解釋，一般文本內(nèi)容，最好在消除了可能存在的歧義之后，盡可能簡短地表達，這樣可以幫助用戶更好地獲得他們想要要的關(guān)鍵。

4. 何時使用單選按鈕，何時使用下拉菜單

在上方的兩個設(shè)計示例當中，一個使用了單選按鈕，另一個采用了下來菜單來承載多個選項。

當涉及到類似這種產(chǎn)品列表的選項設(shè)計時，UI 控件的選取常常會出現(xiàn)混亂的情況，看起來兩種設(shè)計似乎都是合理，但是實際上是要分情況的。

一般而言，是選用單選按鈕，還是使用下拉菜單，關(guān)鍵的判據(jù)是「用戶認知負荷」，通常當可選選項數(shù)目少于4個的時候，使用單選按鈕即可，當數(shù)量超過4個的時候，使用下拉菜單來承載選項。

5. 避免使用默認的陰影樣式

在上方的兩個設(shè)計示例當中， 一個使用的是默認的黑色陰影樣式，另一個則使用的是帶有背景顏色傾向的陰影樣式。

在彩色背景上處理 UI 元素時，盡量避免使用黑色陰影，因為在現(xiàn)實世界當中，實際陰影效果是會受到環(huán)境顏色的影響的，如果可以的話，采用偏向背景色的陰影，能夠讓 UI 變得更加真實。

如果你也要避免那些看起來很假的陰影，最簡單的方法就是在其中混入一點背景色。

6. 深色模式下的白色需要適當調(diào)暗

在上方的兩個設(shè)計示例當中， 一個是使用純白色背景的通知元素，另一個具有更暗更微妙的白色背景。

正如我在之前的技巧中提到的，在創(chuàng)建深色主題設(shè)計時永遠不要選擇純黑色，因為它會影響許多用戶的可用性，適當調(diào)亮黑色，能夠軟化強對比所造成的刺眼狀況。

當深色主題下需要使用白色元素的時候，類似的規(guī)則也同樣適用。這個時候需要適當讓白色的明度更暗，降低對比度，讓用戶不會因為過強對比而產(chǎn)生視覺頻閃效果。

7. 不要僅靠顏色來傳達表單的錯誤狀態(tài)

上面是兩個表單設(shè)計示例，一個案例僅僅使用紅色邊框作為錯誤狀態(tài)警告，另一個案例則在紅色邊框的基礎(chǔ)上添加了圖標和說明。

這個主要是可訪問性的問題，不要僅僅使用顏色來向用戶傳達狀態(tài)信息，因為如果用戶存在視覺障礙，很容易漏掉錯誤狀態(tài)的指引。

始終使用圖標和文本說明，來告知用戶到底發(fā)生了什么錯誤，問題的癥結(jié)在哪里，確保信息的正確傳遞。

8. 使用占位符示例來改進表單體驗

在上面的兩個設(shè)計示例當中， 一個使用默認占位符文本，另一個占位符則使用了貼合內(nèi)容的格式。

與其只使用「輸入您的電子郵件」之類的占位符文本，不如提供一個真實的示例，即：「hello@marcandrew.me」，這樣可以更加直觀地告知用戶，這個地方要填寫的內(nèi)容是什么格式的。

以上就是本次分享的全部內(nèi)容，想學習更多繪畫技巧，歡迎前往杰越教育官網(wǎng)！