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

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

1、保持信息簡短直白，去掉枝節(jié)

確保文本信息足夠簡短，切題，去掉文本當(dāng)中不必要的修飾和枝節(jié)，讓用戶容易理解，有直接對(duì)話的感覺。

向用戶呈現(xiàn)清晰簡潔的信息，有助于更好地達(dá)成預(yù)期的目標(biāo)。

2、在創(chuàng)建較長文本時(shí)用 20pt 字號(hào)

對(duì)于長篇的文本內(nèi)容，比如博客文章，項(xiàng)目描述，正文文本部分建議使用 20 pt(甚至更大也可以)的字號(hào)，這樣能夠確保整體內(nèi)容的可讀性。

當(dāng)然，在具體應(yīng)用的時(shí)候，需要根據(jù)實(shí)際設(shè)定的字體來靈活處理，有些很纖細(xì)的字體在 20 pt 的時(shí)候閱讀體驗(yàn)不夠好，這個(gè)時(shí)候可能需要適當(dāng)放大。

3、不要僅靠色彩來傳遞報(bào)錯(cuò)信息

在設(shè)計(jì)的時(shí)候，不要僅靠顏色來傳遞信息，這一行點(diǎn)很重要。尤其是在表單的報(bào)錯(cuò)信息當(dāng)中，僅僅給輸入框增加一圈紅色的描邊，并不足以讓用戶清晰地意識(shí)到出錯(cuò)，以及要如何修正。

一方面，要使用明確的指引信息幫用戶了解要如何改正錯(cuò)誤，另一方面，需要考慮到有視覺障礙的用戶無法通過色彩感知到信息。

實(shí)際項(xiàng)目中，使用圖標(biāo)和文本來共同傳達(dá)信息，有助于讓信息更容易理解，提升整體的可訪問性。

4、使用4pt基線和8pt網(wǎng)格來控制縱向間隔

說道字體和排版，可以將 4pt 基線和 8pt 網(wǎng)格系統(tǒng)結(jié)合起來使用，可以在設(shè)計(jì)中制造出更強(qiáng)的韻律感。

借助 4pt 的基線來做行高的控制，使用 4pt 的倍數(shù)(4pt、8pt、12pt、16pt、20pt)來設(shè)置行高的數(shù)值。

最主要的原因在于，在傳統(tǒng)的 8pt 網(wǎng)格系統(tǒng)當(dāng)中，行高的控制相對(duì)而言比較粗糙，可選的范疇比較窄，單獨(dú)使用 4pt 基線系統(tǒng)來控制行距則會(huì)好很多。

5、減少標(biāo)題文本的字間距和行高

和較長的正文文本不一樣，標(biāo)題文本通常會(huì)比較短，但是相應(yīng)的，因?yàn)槲谋境叽巛^大，你需要適當(dāng)?shù)亟档妥珠g距和行高，來確保標(biāo)題的整體感更強(qiáng)。

適當(dāng)?shù)慕档托懈吆妥珠g距能能夠獲得更好的可讀性，也會(huì)讓視覺舒適感更強(qiáng)。

6、使用多層次陰影和微妙的邊框讓元素突出

在 UI 界面當(dāng)中，可以給元素添加多層次的陰影，或者使用非常微妙的 1px 的邊框(僅比實(shí)際陰影更深一點(diǎn)的色彩)，可以讓它們看起來更加清晰和突出。這種處理方法制造出來的陰影不會(huì)顯得太過渾濁，也可以讓整體視覺更加清晰。