快速提升 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 的邊框(僅比實際陰影更深一點的色彩),可以讓它們看起來更加清晰和突出。這種處理方法制造出來的陰影不會顯得太過渾濁,也可以讓整體視覺更加清晰。