編輯導(dǎo)讀：UI設(shè)計(jì)是體現(xiàn)一個(gè)產(chǎn)品審美屬性的重要部分，能給用戶帶來(lái)視覺(jué)上的影響。本文作者分析了快速提升UI設(shè)計(jì)效果的44個(gè)小技巧，與你分享，一起來(lái)看看吧。

1.用微妙的雙重投影來(lái)讓你的卡片看起來(lái)更加清晰

在某些元素周圍使用多個(gè)放置陰影或非常精細(xì)的邊框（僅比實(shí)際陰影暗一點(diǎn)）可以使這些元素看起來(lái)更清晰、更清晰，并幫助你避免那些看起來(lái)渾濁的陰影。

2. 減少標(biāo)題上的字母間距以提供更好的光學(xué)平衡

你的標(biāo)題很可能會(huì)比正文更大，也比正文更重，所以字母之間的間距有時(shí)會(huì)看起來(lái)更大，

減少一點(diǎn)間距，就可以使你的標(biāo)題更加清晰。

3. 為了保持一致性，請(qǐng)確保圖標(biāo)共享相同的視覺(jué)樣式

在ui中實(shí)現(xiàn)圖標(biāo)時(shí)，保持一致。

確保它們具有相同的視覺(jué)風(fēng)格；相同的重量，或者填充，或者輪廓。

4. 在你的設(shè)計(jì)中只用一種字體就好了

在創(chuàng)建設(shè)計(jì)時(shí)只使用一種字體是比較好的，這樣做實(shí)際上可以幫助你產(chǎn)生統(tǒng)一的設(shè)計(jì)效果。

使用字重、大小和顏色的組合，你還是可以用一個(gè)單獨(dú)的字體表達(dá)清晰的文字的結(jié)構(gòu)。

5. 留白

留白可以讓你的設(shè)計(jì)具有呼吸感，更加舒適。

6. 選擇底色，然后使用色調(diào)和陰影來(lái)增加一致

通過(guò)選擇一個(gè)基色，然后使用你選擇的顏色的色調(diào)和陰影，可以以最簡(jiǎn)單的方式為你的設(shè)計(jì)增加一致性。

7. 提高用戶的入職體驗(yàn)。拇指法則記住

允許用戶隨時(shí)跳過(guò)你的移動(dòng)應(yīng)用程序登錄序列，并將該跳過(guò)鏈接放在拇指容易觸及的位置。

只是一個(gè)簡(jiǎn)單的調(diào)整，可以讓你的用戶有更好的體驗(yàn)（我常常體驗(yàn)國(guó)內(nèi)一些APP，關(guān)閉按鈕特別遠(yuǎn)，特別難按）

8. 光影需要是來(lái)自同一個(gè)光源

確保你的陰影總是來(lái)自同一個(gè)光源，會(huì)素描的同學(xué)很好理解，光源關(guān)系一致表達(dá)空間統(tǒng)一性的基礎(chǔ)

9. 提高文本和圖像之間的對(duì)比度

基本的處理方式是，在圖片上增加一個(gè)透明漸變蒙版來(lái)使得字體看的更加清楚

10. 同一種字體時(shí)，使用多字重的字體

如果只使用一個(gè)字體，盡量選擇有多字重的字體，比如：阿里巴巴普惠體、思源、OPPO

11. 在淺色背景上你的文字可見(jiàn)性需要注意

在淺色背景下工作時(shí)，文字顏色不要太淺，雖然看起來(lái)很舒服，但可見(jiàn)性不較差，不利于閱讀

12. 長(zhǎng)文本中，文字閱讀感不要太搶眼

當(dāng)涉及到長(zhǎng)格式的內(nèi)容時(shí)，某些常規(guī)的粗體字體在屏幕上看起來(lái)還是有點(diǎn)太重，太呆板了。

建議，選擇像深灰色（即# 4f4f）來(lái)降低文本的色調(diào)，這樣閱讀起來(lái)會(huì)更加舒服

13. 行動(dòng)按鈕需要是最聚焦的

通過(guò)使用顏色對(duì)比、尺寸和標(biāo)簽，確?！靶袆?dòng)按鈕”盡可能突出。

14. 字號(hào)越小，你的行距就越高

隨著字號(hào)的減小，增加行高可以獲得更好的易讀性

15. 突出菜單中最常用的元素

在設(shè)計(jì)應(yīng)用程序內(nèi)部使用的菜單時(shí)，請(qǐng)確保提供最常用的操作（即；上傳圖像，添加文件等…）最突出的屏幕。

16. 從你的圖像中挑選顏色，讓你的產(chǎn)品栩栩如生

只需從你的產(chǎn)品圖像中挑選顏色，然后將你選擇的顏色的各種色調(diào)和陰影應(yīng)用到你的背景、文本、圖標(biāo)……，就能為你的設(shè)計(jì)增添大量的視覺(jué)趣味

17. 根據(jù)字體的x高度設(shè)置行高

不同x高度的字體需要不同的行高測(cè)量來(lái)實(shí)現(xiàn)文本行之間的正確分隔。

即使你可能有兩種字體大小相同（即；18px）它們的x高度可能會(huì)有很大差異，選擇正確行高是非常有必要的

18. 突出最重要的元素

通過(guò)使用字體大小、權(quán)重、顏色和布局的組合，你可以輕松突出UI中最重要的元素

19. 告知錯(cuò)誤的原因

在用戶剛剛執(zhí)行的操作附近添加一條錯(cuò)誤消息，可以幫助用戶提高正確登入，也可以緩解用戶焦慮（他可以更加清晰那里出錯(cuò)）

20. 嘗試在手機(jī)上創(chuàng)建更大可點(diǎn)擊的區(qū)域

當(dāng)為移動(dòng)設(shè)備設(shè)計(jì)時(shí)，嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域

對(duì)于按鈕和僅由文本組成的鏈接來(lái)說(shuō)，點(diǎn)擊區(qū)域會(huì)很小，所以盡可能使用帶有標(biāo)簽的圖標(biāo)。

iOS和Android的最低建議點(diǎn)擊區(qū)域

iOS為44 x 44pt

安卓48 x 48dp

21. 在短標(biāo)題上使用所有都是大寫(xiě)的字母

長(zhǎng)標(biāo)題都是大寫(xiě)字母的話，閱讀轉(zhuǎn)化上比較慢（你明白他是什么意思比較慢）

短標(biāo)題都是大字母的話，相對(duì)來(lái)說(shuō)比較快可以和記憶中的單詞對(duì)應(yīng)上

22. 保持淺色文本和圖像之間的對(duì)比度

始終確保淺色文本在淺色圖像背景下清晰可見(jiàn)。

只需在文本后面應(yīng)用一個(gè)低透明的深色背景，就能保持這些元素之間的良好對(duì)比度

23. 排版的親密性，要一直記得

標(biāo)題、正文、標(biāo)題、正文……這樣的排列中如果是間距都是相同的，那么在閱讀上就很難區(qū)分標(biāo)題是屬于上文還是下文的。

正確的做法是，標(biāo)題距離上文的距離＞標(biāo)題距離下文的距離，這樣閱讀起來(lái)，標(biāo)題會(huì)比較清晰的對(duì)應(yīng)的是下文

24. 在下載中盡量給進(jìn)度提醒

當(dāng)下載速度是一閃而過(guò)時(shí)，則無(wú)需提示

當(dāng)下載等待時(shí)間＞3S時(shí)，建議給進(jìn)度提示

25. 文字也有情緒

在項(xiàng)目中處理文本時(shí)，選擇正確的字體將影響文本的語(yǔ)音類型。那么大聲、或者溫柔、或者正式，嚴(yán)肅，或者有趣。每種字體都有自己獨(dú)特的聲音

26. 為正文選擇合適的行長(zhǎng)，并提高可讀性

基于人閱讀情緒，如果閱讀一行很長(zhǎng)，一直閱讀下去，會(huì)出現(xiàn)你眼前閱讀的內(nèi)容“不見(jiàn)”的情況

對(duì)于單列頁(yè)面，45到75個(gè)字符被廣泛認(rèn)為是令人滿意的行長(zhǎng)，66個(gè)字符的行（包括字母和空格）是最合適的。

當(dāng)然，字體大小和行高也是決定可讀性的一個(gè)因素，但是對(duì)于行長(zhǎng)，要保持在45到75個(gè)字符之間

27. 偶爾使用純粹的裝飾性元素是可以的，但要保持可訪問(wèn)性

需要適當(dāng)，如果裝飾的強(qiáng)了主要表達(dá)的，則不可取

28. 使UI中的元素相互區(qū)分

按鈕。通知。UI中兩個(gè)獨(dú)立但必不可少的元素。

一定要確保你的用戶能夠快速準(zhǔn)確地將他們區(qū)分開(kāi)來(lái)

29. 陰影不要太重

舒服的投影會(huì)增加你的設(shè)計(jì)的質(zhì)感，和透氣感。太重的投影會(huì)顯得你畫(huà)面比較臟

30. 使用遞進(jìn)分類時(shí)，需要明確當(dāng)前選中的元素

31. 使用高度飽和的顏色？試著用色調(diào)或陰影把事情調(diào)小一點(diǎn)

高度飽和的顏色（明亮的藍(lán)色、紅色、綠色等）在網(wǎng)站上看起來(lái)很不錯(cuò)，但過(guò)度使用時(shí)，會(huì)讓用戶眼睛疲勞，主要是與文本內(nèi)容一起使用時(shí)。

32. 使用用戶熟悉認(rèn)知的圖標(biāo)表達(dá)

在向設(shè)計(jì)中添加圖標(biāo)時(shí)，使用用戶熟悉認(rèn)知的圖標(biāo)。新的圖標(biāo)雖有很好看，很有個(gè)性，但是會(huì)讓用戶疑惑

33. 接近律

需要承上表達(dá)的元素，排版上接近對(duì)應(yīng)的元素，可以讓用戶心理聯(lián)系起來(lái)是一體的。

34. 減少標(biāo)題的行高是很好的

與長(zhǎng)格式正文文本（需要足夠的行高以提高可讀性）不同，標(biāo)題通常要短得多，因此可以稍微縮小間距。標(biāo)題的建議行高通常是文本大小的1到1.3倍

35. 從色輪上挑選配色

類比色和鄰近色是最和諧的配色方案之一，也是最不會(huì)出錯(cuò)的配色

36. 想用更輕松的語(yǔ)氣， 盡量用小寫(xiě)字母

在處理特定項(xiàng)目時(shí)，使用類似于所有小寫(xiě)字母的文本可以表達(dá)更加輕松的意思

但需要注意，在圖像和文本之間使用某種顏色疊加，以獲得更強(qiáng)的對(duì)比度

37. 使用重量、大小和顏色來(lái)表示你的結(jié)構(gòu)層次感

38. 深色背景+淺色文本， 增加字重，提升易讀性

當(dāng)在淺色背景下設(shè)置深色文本時(shí)，偶爾可以選擇較輕的字體。

但是…

反之：淺色文本>深色背景。

最好是把字體的重量增加一點(diǎn)，尤其是長(zhǎng)文本，原因是，讓用戶避免視覺(jué)疲勞，獲得更好的易讀性

39. 使用爭(zhēng)取的字體類型，表達(dá)對(duì)應(yīng)的情感

正確的字體選擇對(duì)于讓你的內(nèi)容更快的正確傳達(dá)更重要

40. 全部大寫(xiě)+字母間距=更好的易讀性

只需稍微增加字母之間的間距，就可以提高字體的易讀性，并為大寫(xiě)字母增加一些設(shè)計(jì)感

41. 讓表單上的錯(cuò)誤信息變得有用和容易理解

確保錯(cuò)誤提示，解釋了哪里出錯(cuò)和如何解決

始終讓用戶了解最新情況，即使是普通的表單，讓這些錯(cuò)誤消息變得有用，不要讓用戶懵逼

42. 嘗試向用戶保證在加載應(yīng)用程序時(shí)發(fā)生了一些事情

使用占位符可以更好的緩解用戶焦慮

43. 通知用戶如果應(yīng)用某個(gè)特定操作將會(huì)發(fā)生什么

在應(yīng)用可能產(chǎn)生后果的特定操作之前，請(qǐng)?jiān)敿?xì)地通知用戶。尤其適用于具有不可逆轉(zhuǎn)后果的行為，例如永久刪除某個(gè)內(nèi)容。讓用戶知道將要發(fā)生什么，并要求他們確認(rèn)

44. 不要在下拉列表中隱藏重要的操作

用戶需要采取的基本操作（例如，注冊(cè)或登錄）隱藏在下拉列表中，甚至可能找到用戶想要的。

解決：將重要的功能提出來(lái)，不要隱藏

文章參考/翻譯自：《UI & UX Micro-Tips: 》

作者：木七木七，歡迎交流~

本文由 @木七木七 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pixabay，基于 CC0 協(xié)議