編者按：在進(jìn)行 UI 設(shè)計(jì)的時(shí)候，很多小技巧能夠恰到好處地提升界面的設(shè)計(jì)視覺(jué)效果、用戶體驗(yàn)。這篇來(lái)自Mark Andrew 的文章梳理了 14 個(gè)實(shí)用性很強(qiáng)的 UI 效果提升小技巧，這篇文章由兩篇文章組合而成，原文最早發(fā)布于 marcandrew.me，快來(lái)看看吧。

在創(chuàng)建漂亮而高效的 UI 的時(shí)候，你需要花費(fèi)不少的時(shí)間來(lái)打磨細(xì)節(jié)，并且在此過(guò)程中進(jìn)行不斷的調(diào)整，讓你的客戶、用戶以及你自己感到滿足。如果你是設(shè)計(jì)師，你會(huì)很明白這種感受。

這篇文章是之前的《第一波！快速提升 UI 設(shè)計(jì)效果的 9 個(gè)小技巧》的后續(xù)，文章繼續(xù)梳理了14個(gè)我所總結(jié)梳理出來(lái)的小技巧，來(lái)看看吧：

1、微調(diào)明度讓文本更顯輕盈

在長(zhǎng)篇幅文本當(dāng)中，如果文本字體使用「常規(guī)」的粗細(xì)，視覺(jué)上依然顯得有點(diǎn)過(guò)于重，可以通過(guò)微調(diào)它的色彩，選擇諸如 #4F4F4F 這樣的色彩，讓它對(duì)眼睛更加友好、舒適。

2、字號(hào)越小，行高越大

在文本排版當(dāng)中，字號(hào)和行高并不是等比縮放的，當(dāng)字號(hào)縮小的時(shí)候，行高不要等比例縮小，而是要把字號(hào)和行高的比例提高。同理，當(dāng)字號(hào)放大的時(shí)候，對(duì)應(yīng)的行高應(yīng)該比按比例放大之后的行高要小。

3、基于色調(diào)和飽和度來(lái)豐富配色

在很多設(shè)計(jì)當(dāng)中，你并沒(méi)有必要用很多不同的色相來(lái)豐富配色方案，基于一個(gè)基礎(chǔ)色，然后微調(diào)色彩的色調(diào)和飽和度，就可以快速搭配出合理且協(xié)調(diào)的視覺(jué)效果，增強(qiáng)整個(gè)設(shè)計(jì)的一致性。

4、突出最重要的元素

凸顯最重要的元素，讓視覺(jué)中心明顯。通過(guò)調(diào)整字體尺寸、字重、色彩以及和背景的對(duì)比度，可以讓這些元素顯得明顯。只需簡(jiǎn)單的調(diào)整，即可達(dá)到良好的用戶體驗(yàn)。

5、確保圖標(biāo)樣式高度一致

在用戶界面中使用圖標(biāo)的時(shí)候，請(qǐng)使用一致的圖標(biāo)，確保它們?cè)诖笮〕叽?、視覺(jué)風(fēng)格、筆觸粗細(xì)、填充樣式都一致，不要混搭。

6、始終讓行為召喚語(yǔ)句在最醒目的位置

這應(yīng)該是常識(shí)吧？不過(guò)在信息過(guò)多、或者摻雜過(guò)多意圖的頁(yè)面當(dāng)中，這種常識(shí)也常常被忽略。同樣的，通過(guò)色彩、大小和樣式對(duì)比，讓行為召喚語(yǔ)句盡可能凸顯。盡量不要總依賴圖標(biāo)這樣的元素，使用文本標(biāo)簽會(huì)更加顯著一些。

7、為表單報(bào)錯(cuò)信息提供視覺(jué)指引

在用戶填寫表單的時(shí)候，如果出錯(cuò)，用戶可能不知道問(wèn)題出現(xiàn)在哪里，通過(guò)明確的視覺(jué)指引，一方面告知用戶出錯(cuò)的情況，另一方面，讓用戶明白出錯(cuò)的原因，對(duì)于整個(gè)流程好處更明顯。

8、凸顯菜單中最常用的功能和操作

在設(shè)計(jì)程序菜單的時(shí)候，優(yōu)先級(jí)最高的功能和選項(xiàng)應(yīng)該高亮顯示，在屏幕上保持顯眼，比如「上傳圖片」等等。

9、從產(chǎn)品圖中提取背景色

基于你的核心產(chǎn)品圖片的色彩來(lái)取色，用于背景、文本和其他的的視覺(jué)元素，然后合理地分別給不同的元素賦予不同的視覺(jué)效果。而這其中，背景色的一致性能夠給整個(gè)視覺(jué)帶來(lái)最直接、最直觀的影響。

10、使用更大的可點(diǎn)擊區(qū)域

在給移動(dòng)端設(shè)計(jì)UI界面的時(shí)候，這些控件和可交互的元素要盡可能地大一點(diǎn)，確保用戶的手指能夠準(zhǔn)確地點(diǎn)擊到所看到的元素。使用按鈕控件替代文本鏈接，結(jié)合指引性的圖標(biāo)，并且確保尺寸足夠大。在 iOS 中，最小的按鈕尺寸為 44×44 pt，在 AndROId 當(dāng)中，為 48×48 dp 。

11、確保淺色文本和圖片之間的對(duì)比度

淺色文本和淺色圖片之間的對(duì)比度可能會(huì)不足，這個(gè)時(shí)候，可以在文本底下增加一個(gè)深色的半透明疊加層，從而達(dá)到提升對(duì)比度的效果，并且這種設(shè)計(jì)的好處在于，當(dāng)你更換背景的時(shí)候，前景文本可以不用進(jìn)行調(diào)整。

12、一組超贊的標(biāo)題英文字體

這組字體是我在過(guò)往的設(shè)計(jì)項(xiàng)目當(dāng)中總結(jié)出來(lái)的，特別適合用來(lái)作為標(biāo)題來(lái)使用的字體。

13、一組很棒的正文英文字體

在長(zhǎng)篇幅的文本當(dāng)中，使用這些久經(jīng)驗(yàn)證的字體，可以給用戶帶來(lái)極為突出的閱讀體驗(yàn)。

14、給進(jìn)度條增加更加清晰的信息指引

這可能是最不應(yīng)該精簡(jiǎn)的組件了，盡可能在進(jìn)度條，尤其是下載進(jìn)度條當(dāng)中，提供更多的信息，比如下載的進(jìn)度和百分比，并不復(fù)雜，但是這卻是用戶最想獲得的信息。

作者：陳子木