第六波！快速提升 UI 設計效果的 6 個小技巧

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

在創建實用、可訪問性良好且視覺效果頗為出彩的 UI 界面的時候，我們大多只需要進行有限度的微調，即可達到頗為不錯的效果。在之前，我已經撰寫了很多實用的 UI & UX 優化小貼士（看完文章在文末獲?。?，這篇文章繼續增加 6 條實用的建議，一起來看看吧！

1、保持信息簡短直白，去掉枝節

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

向用戶呈現清晰簡潔的信息，有助于更好地達成預期的目標。

2、在創建較長文本時用 20pt 字號

對于長篇的文本內容，比如博客文章，項目描述，正文文本部分建議使用 20 pt（甚至更大也可以）的字號，這樣能夠確保整體內容的可讀性。

當然，在具體應用的時候，需要根據實際設定的字體來靈活處理，有些很纖細的字體在 20 pt 的時候閱讀體驗不夠好，這個時候可能需要適當放大。

3、不要僅靠色彩來傳遞報錯信息

在設計的時候，不要僅靠顏色來傳遞信息，這一行點很重要。尤其是在表單的報錯信息當中，僅僅給輸入框增加一圈紅色的描邊，并不足以讓用戶清晰地意識到出錯，以及要如何修正。

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

實際項目中，使用圖標和文本來共同傳達信息，有助于讓信息更容易理解，提升整體的可訪問性。

4、使用4pt基線和8pt網格來控制縱向間隔

說道字體和排版，可以將 4pt 基線和 8pt 網格系統結合起來使用，可以在設計中制造出更強的韻律感。

借助 4pt 的基線來做行高的控制，使用 4pt 的倍數（4pt、8pt、12pt、16pt、20pt）來設置行高的數值。

最主要的原因在于，在傳統的 8pt 網格系統當中，行高的控制相對而言比較粗糙，可選的范疇比較窄，單獨使用 4pt 基線系統來控制行距則會好很多。

5、減少標題文本的字間距和行高

和較長的正文文本不一樣，標題文本通常會比較短，但是相應的，因為文本尺寸較大，你需要適當地降低字間距和行高，來確保標題的整體感更強。

適當的降低行高和字間距能能夠獲得更好的可讀性，也會讓視覺舒適感更強。

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

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

往期內容：