編者按：在進行 UI 設計的時候，很多小技巧能夠恰到好處地提升界面的設計視覺效果、用戶體驗。這篇來自Mark Andrew 的文章梳理了 9 個實用性很強的 UI 效果提升小技巧，這篇文章最早發佈於  marcandrew.me ，快來看看吧。

在創建漂亮而高效的 UI 的時候，你需要花費不少的時間來打磨細節，並且在此過程中進行不斷的調整，讓你的客戶、用戶以及你自己感到滿足。如果你是設計師，你會很明白這種感受。

我在做設計的過程中，發掘了不少實用的、有效的細節調整的技巧，可以快速地將整個設計稿的視覺效果提升一個檔次。

在這篇文章當中， 我將這些技巧梳理了出來，希望能夠給你一些幫助。

1、讓元素看起來更清晰的技巧

其實並不複雜，就是在通常不會用陰影的元素邊緣增加「多個投影」或者使用非常微妙的邊框（比陰影要稍微暗一點），可以讓這個元素看起來更加清晰，並且避免了彌散投影帶來的那種拖泥帶水的感覺。

2、只使用一個字體族做設計

雖然使用字體組合可以創造視覺風格和樣式上的對比，但是實際上僅用一個字體族所製作的效果是完全沒問題的。

請忽略「至少使用2種不同字體」這種設計規則，通過調整字重、尺寸、配色，你同樣可以達到相當優秀的效果。

3、長篇幅文本最好在 20pt 浮動

對於長篇幅的文本內容，比如博客文章，項目說明以及需要用戶閱讀一段時間的內容，最好在正文當中，採用 20 pt 的文本參數。

當然，考慮到使用場景、字體本身的樣式差異，20pt 這一參數並非是定死的，而是可以根據實際效果進行靈活調整。在過去的 10 年間，依然有很多網站遵循傳統採用 18pt 的字號，閱讀體驗相當糟糕。

4、提供可選的新用戶引導流程

在用戶首次安裝 APP 或進入網站的時候，通常是會提供給用戶以一個新用戶教程以引導用戶熟悉產品和交互。

但是！並不是每個用戶都有看完教程的必要，在界面中提供「跳過」選項，讓用戶擁有選擇的權利，同時，這個「跳過」按鈕儘量在界面的底部，畢竟在這個大屏當道的時代，手指最便捷的交互區域主要集中在屏幕底部。

5、爲陰影統一光源

這可以算是一個統一體驗的進階技巧了，當 UI 界面元素的光源不統一的時候，可能會有一部分用戶能夠感知到並覺得奇怪。但是如果光源統一，能夠給 APP 的體驗帶來強烈的一致感。

6、用微妙的疊加圖層來改善對比度

文本和背景之間的對比度並不一定理想，這個時候你可以額外增加一個色彩疊加層，不過這個疊加圖層儘量不要使用純色，而是要用一定的漸變（從下往上或者從上往下）來變化，一方面優化了元素之間的對比度，還能確保自然舒適。

7、剋制地使用居中對齊的文本

居中對齊式的文本排版並非不能用，而是要剋制地使用。儘量只在標題和少量的小塊文本當中使用居中的文本排版，對於其他的內容，請還是遵循普世的左對齊排版。

8、請大膽使用留白

留白是排版設計的時候，最重要的元素。請不要吝嗇，不要過度追求信息的飽和度，儘量讓界面有呼吸感，在這個信息過載的時代，儘量給用戶以舒適通透的體驗。讓行高至少爲文本高度的 1.5倍，基於親近原則，合理地將元素分組的前提之下，讓元素與元素、組與組之間，不要過於密集。

這是提升設計感最快的方法之一。

9、加深淺色背景上的文本

現在的設計師同學應該很清楚不要在淺色和白色背景上使用純黑的文本了，大家通常會使用灰色或者使用使用透明度來控制文本的深淺，不過很多時候爲了展示需要，很多同學用的灰色文本，可讀性並不強。

爲了改善實際的體驗和效果，保證文本內容的可訪問性，適當加深文本的灰色，在保證色彩對比度以及和其他文本的層次感的前提下，達到優秀的視覺體驗。

結語

想要讓 UI 界面的體驗更加優秀，其實在很多時候都需要在細節上打磨即可。類似這樣的小技巧有很多，後面我還會繼續補充。