在進(jìn)行 UI 設(shè)計(jì)的時(shí)候，很多小技巧能夠恰到好處地提升界面的設(shè)計(jì)視覺(jué)效果、用戶體驗(yàn)。這篇來(lái)自Marc Andrew 的文章梳理了 8 個(gè)實(shí)用性很強(qiáng)的 UI 效果提升小技巧，是系列文章的十一篇，原文最早發(fā)布于 marcandrew.me 。

在創(chuàng)建實(shí)用、可訪問(wèn)性良好且視覺(jué)效果頗為出彩的 UI 界面的時(shí)候，我們大多只需要進(jìn)行有限度的微調(diào)，即可達(dá)到頗為不錯(cuò)的效果。在之前，我已經(jīng)撰寫(xiě)了很多實(shí)用的 UI & UX 優(yōu)化小貼士（看完文章在文末獲?。?，這篇文章繼續(xù)增加 6 條實(shí)用的建議，一起來(lái)看看吧！

1. 少用點(diǎn)色彩一樣可以讓視覺(jué)充滿凝聚力

在上方的兩個(gè)設(shè)計(jì)范例當(dāng)中，左邊使用的配色明顯不搭，右邊則基于基礎(chǔ)色微調(diào)明度和飽和度來(lái)進(jìn)行配色，更加協(xié)調(diào)。

如果你的設(shè)計(jì)項(xiàng)目可以讓你在顏色選擇方面有更多的自由，不要總是傾向于用花哨的彩虹色來(lái)包裝它。

如果你沿著彩虹系的配色走下去，你可能會(huì)很快發(fā)現(xiàn)你所選取的色彩總會(huì)在視覺(jué)上顯得不那么協(xié)調(diào)。

實(shí)際上，你只需要基礎(chǔ)的色彩，然后基于這個(gè)顏色，借助微調(diào)明度和飽和度來(lái)拓展配色方案，就能夠得到更加均勻、更加具有凝聚力和專業(yè)感的外觀了，不需要閃亮的彩虹色和復(fù)雜的配色技巧，同樣能夠拿出好設(shè)計(jì)。

當(dāng)然，基于基礎(chǔ)的顏色快速搭建出配色，我推薦這個(gè)網(wǎng)站：https://maketintsandshades.com。

2.抓住用戶的注意力的技巧

在上面的兩個(gè)設(shè)計(jì)范例當(dāng)中， 一個(gè)菜單選項(xiàng)使用了簡(jiǎn)單的方形選框，另一個(gè)使用了彩色的背景。

UI 可以是干凈簡(jiǎn)約又直觀的，但可用性和易用性更重要，不能以犧牲用戶體驗(yàn)為代價(jià)。對(duì)于關(guān)鍵信息，UI元素需要有足夠的對(duì)比度，以抓住用戶的注意力。

對(duì)于像選項(xiàng)菜單這樣簡(jiǎn)單的東西，請(qǐng)確保用戶在快速瀏覽的時(shí)候，能立刻注意到所選的項(xiàng)目。

相比于小巧的選框，使用彩色的背景來(lái)進(jìn)行區(qū)分，會(huì)更加直覺(jué)，也更容易被用戶所識(shí)別出來(lái)。

3. 使用細(xì)文本的時(shí)候加深顏色

在上方的兩個(gè)設(shè)計(jì)范例中，一個(gè)文本使用淺灰色，另一個(gè)則使用了更深的黑色。

當(dāng)涉及到長(zhǎng)篇文本內(nèi)容的時(shí)候，如果字體是普通粗細(xì)，使用可讀性有所保障的某種灰色是目前多數(shù)設(shè)計(jì)師的選擇，它相比于黑色更加優(yōu)雅，不會(huì)顯得對(duì)比過(guò)于強(qiáng)烈導(dǎo)致視覺(jué)感知上的突兀。但是當(dāng)字體文本非常細(xì)的時(shí)候，灰色的可讀性可能就存在問(wèn)題了。

這個(gè)時(shí)候，可以通過(guò)使文本變暗，讓盡可能多的用戶在閱讀的時(shí)候不會(huì)出現(xiàn)可用性的問(wèn)題。

4. 讓界面上最重要的元素更加突出

在上面的兩個(gè)設(shè)計(jì)范例當(dāng)中，左邊的一個(gè)視覺(jué)層次較差，右邊的視覺(jué)層次則改善了很多。

在做 UI 設(shè)計(jì)的時(shí)候，你總會(huì)希望用戶的眼睛每次都能快速、高效地被關(guān)鍵的元素所吸引，并且只需付出最少的認(rèn)知努力，不會(huì)覺(jué)得費(fèi)勁。

通過(guò)控制 字體大小、字重、顏色和布局等視覺(jué)層次，您可以輕松突出最重要的元素：重要的元素字體更大、字重更粗、顏色有差異、在排版的時(shí)候更加突出。

5. 打消用戶的顧慮，讓用戶放心點(diǎn)擊下一步

在上面的兩個(gè)設(shè)計(jì)案例中， 一個(gè)僅僅只使用了CTA按鈕，另一個(gè)則在此基礎(chǔ)上，提供了額外的說(shuō)明，打消了用戶的顧慮。

當(dāng)用戶在 UI 中需要進(jìn)行重要操作的時(shí)候，尤其是面對(duì)某些帶有號(hào)召性用語(yǔ)的按鈕，請(qǐng)確保用戶對(duì)于當(dāng)前的局面有充分的了解，不會(huì)對(duì)接下來(lái)可能發(fā)生的事情一無(wú)所知。對(duì)于一些常見(jiàn)的、可能普遍存在于用戶內(nèi)心的顧慮，一定要提前考慮到，并提供說(shuō)明。

改善用戶體驗(yàn)的每一步，都不要讓用戶在交互的歷程中的任何環(huán)節(jié)產(chǎn)生質(zhì)疑。

6. 請(qǐng)對(duì) CTA 元素的設(shè)計(jì)「更自私」一點(diǎn)

在上方的兩個(gè)設(shè)計(jì)范例當(dāng)中，一個(gè) CTA 按鈕和其他元素使用了相同的顏色，另一個(gè)則做出了差異化，讓CTA 按鈕更突出。

引導(dǎo)用戶行為的 CTA 按鈕必須是屏幕上最關(guān)鍵的元素之一，它理應(yīng)得到最高的視覺(jué)優(yōu)先級(jí)，換句話說(shuō)，就是應(yīng)該盡可能「自私」一點(diǎn)，將最吸引人注意力的顏色分配給它，讓用戶不會(huì)將它和其他的 UI 控件在優(yōu)先級(jí)上出現(xiàn)混淆。

當(dāng)然，你也可以在尺寸、形狀等方面更進(jìn)一步設(shè)計(jì)，但 CTA 按鈕應(yīng)該保持一種突出的顏色，僅此一項(xiàng)，就可以規(guī)避掉絕大部分的問(wèn)題。

作者：Marc Andrew