創(chuàng)建美觀又實用的用戶界面需要花費一定時間，而且在設(shè)計過程中，還要進行大量的迭代與優(yōu)化。通過多年來的經(jīng)驗累積，我發(fā)現(xiàn)有的設(shè)計進行一些簡單、快速的調(diào)整后，就可以大大提升效果。

本指南中，我整理了2020年12個月中流行的UI/UX技巧，而這些技巧可以毫不費力地幫助我們改善設(shè)計與用戶體驗。

01 使用細(xì)微的邊框，使元素看起來更加清晰

在某些元素周圍使用多重陰影或是一個細(xì)微的邊框，能使元素看起來更清晰，并幫助避免那些看起來很混亂的陰影。

02 減少標(biāo)題中的字母間距，保持視覺平衡

標(biāo)題通常會比正文的字號要大，字重也不同，也會使字母的間距顯得較大，在視覺上會覺的很散。通過降低字間距值，使標(biāo)題在視覺上更平衡易讀。

03 圖標(biāo)視覺風(fēng)格保持統(tǒng)一

用戶界面中的圖標(biāo)風(fēng)格，請保持一致，如相同的視覺風(fēng)格、顏色和輪廓，不要混搭。

04 在設(shè)計中只使用一種字體并沒有錯

在創(chuàng)建設(shè)計時，只使用一種字體并沒有壞處，這樣做實際上可以幫助你的界面簡潔一致。你可能會產(chǎn)生“是否會顯得單調(diào)？”的問題，結(jié)合Weights，Sizes和Color，即便用同一種字樣，用戶也是可以接受的。

05 界面中巧用空白

在界面中適度地使用空白，可以讓畫面更有呼吸感，這是最快、最直接的設(shè)計改進方法之一。

06 創(chuàng)建長篇內(nèi)容？嘗試20pt

對于長篇內(nèi)容（例如，博客文章，項目描述等），請嘗試使用20pt作正文字號，當(dāng)然，這也取決于具體選擇的字體，不過大多流行的正文字體，在20pt時效果很好，當(dāng)用戶面對文字模塊時也不會太糟糕。

07 使用字體比例，創(chuàng)造字體組

使用字體比例可以幫助你輕松實用地定義一組字體大小，Type Scale是基于比例因子（例如1.25）工作的。從基本字號18px開始，將其與比例因子相乘（或除以），以得到高層級字體（即H1，H2等）或較低層級，如字幕，按鈕的注釋說明。

不妨來這個網(wǎng)站，詳細(xì)了解下字體比例——https://type-scale.com

08 選擇一種底色，用色調(diào)和陰影進行統(tǒng)一變化

在界面中，不必用大量的顏色來填充，會造成畫面花哨。如果項目允許，只需選擇一個基礎(chǔ)顏色，調(diào)整色調(diào)和陰影，效果就很棒了。

09 改善用戶流程體驗

使用戶可以隨時跳過你的開屏動畫，請將“跳過”按鈕放置在容易觸及的范圍內(nèi)，也能給新用戶建立不錯的應(yīng)用體驗。

10 頁面中的按鈕陰影來自相同光源

確保你的按鈕陰影始終來自一個光源，我發(fā)現(xiàn)這是設(shè)計師常犯的一個錯誤，雖然不大但也讓整體設(shè)計有了瑕疵。

11 使用字體家族

選擇困難癥設(shè)計師的福音，更降低了出錯率。字體家族是字體的集合，例如Serif和Sans-Serif變體，但在視覺上仍是一致的。我強烈推薦的一些是  Merriweather & Merriweather Sans 和 Roboto & Roboto Slab 你可以在Google字體庫中找到。

12 疊加顏色蒙版，提升圖片與文字的對比度

根據(jù)文本在圖像上的位置，來測試疊加層的具體色值，也可以使用漸變疊加層（從下到上，或從上到下），以實現(xiàn)兩者之間的簡單對比，無需太復(fù)雜。

13 適度居中文本

文本居中，盡量用作標(biāo)題和少量文字段落，而其他內(nèi)容請左對齊。

14 多用途文字，選擇多種字重的字體

你找的字體是否有大量的字重和樣式？建議避免使用僅有一種樣式與字重的字體。有的設(shè)計項目可能在標(biāo)題上進行特別設(shè)計，但從多數(shù)情況來看，選擇的字體樣式盡量豐富。

15 在淺色背景上使文本變暗

在淺色背景下工作時，別使文本顏色太淺，避免增加用戶的閱讀成本。

16 文本色過于厚重，請使其變亮

當(dāng)涉及到長篇內(nèi)容時，某些常規(guī)粗體字體就顯得很沉重，在屏幕上也顯得很呆板。不妨試試Dark Gray（即#4F4F4F）之類的色號來淡化文本，使其在視覺上更容易閱讀。

17 行為號召按鈕，放在最醒目的位置

通過使用顏色對比、大小和標(biāo)簽，確保行為號召按鈕盡可能突出。

如果可以的話，不要總是依賴Icon，使用文本標(biāo)簽，也能實現(xiàn)，還能使用戶更好地理解。

原文：https://uxdesign.cc/the-ui-ux-tips-collection-volume-one-f69f0969ed17

翻譯：UX辭典