Hi，我是彩云。界面是用戶在與任何產(chǎn)品、APP或平臺(tái)交互時(shí)看到的內(nèi)容，用戶體驗(yàn)就是建立在堅(jiān)實(shí)的界面設(shè)計(jì)基礎(chǔ)之上的。所以，如果你想要在UI設(shè)計(jì)上提升能力，應(yīng)該多去思考界面設(shè)計(jì)背后的原因。 

今天會(huì)跟大家分享一些被廣泛運(yùn)用的界面設(shè)計(jì)規(guī)則，它們能快速使得你的界面設(shè)計(jì)更干凈、高效。

1. 文案要易于理解 

用更容易讓用戶理解（說(shuō)人話）的引導(dǎo)文案，提升使用體驗(yàn)。 

（彩云注：下面2個(gè)案例中，左側(cè)的“購(gòu)物車”和“庫(kù)存2”太過(guò)于術(shù)語(yǔ)化，右側(cè)的“僅剩2”和“加入購(gòu)物車”更加貼近用戶的日常理解。大家平時(shí)工作的時(shí)候，也一定要注意界面中的文案，尤其是說(shuō)明文字，控件文字等等，這個(gè)點(diǎn)經(jīng)常容易被忽略。）

2. 垂直對(duì)齊易于掃視

良好的對(duì)齊方式，可以增強(qiáng)內(nèi)容的可讀性，讓用戶的視線更容易掃描。 

（彩云注：左側(cè)的“之”字形視動(dòng)線比較難閱讀，且不夠?qū)I(yè)；右側(cè)的垂直對(duì)齊增強(qiáng)了可讀性，也讓設(shè)計(jì)看起來(lái)更加統(tǒng)一，能夠快速的提升設(shè)計(jì)細(xì)節(jié)。）

3.給選項(xiàng)加圖標(biāo) 

使用圖標(biāo)、動(dòng)畫(huà)作為標(biāo)簽，有助于更輕松地理解內(nèi)容，它使界面看起來(lái)更加理性和豐富，能瞬間抓住用戶的眼球。 

（彩云注：左側(cè)的導(dǎo)航相較于右邊，很難第一時(shí)間準(zhǔn)確識(shí)別它的意思，增加圖標(biāo)后不僅更快看清，視覺(jué)上也更加美觀。）

4. 大段內(nèi)容要拆分 

大段的長(zhǎng)句會(huì)讓內(nèi)容變得難以閱讀。

為了獲得好的體驗(yàn)和UI，應(yīng)該注意拆分內(nèi)容，并使用項(xiàng)目符號(hào)突出關(guān)鍵點(diǎn)，利用拆分好的內(nèi)容塊讓用戶更快抓住重點(diǎn)。特別是在“功能說(shuō)明和條款條件”或任何聲明時(shí)，提煉要點(diǎn)有助于提升用戶體驗(yàn)，這樣也不至于讓用戶直接忽略。 

（彩云注：左側(cè)的大段文字我想應(yīng)該沒(méi)多少人會(huì)去閱讀，右邊的至少還能在短時(shí)間內(nèi)快速看看幾個(gè)關(guān)鍵詞。） 

5. 流程增加進(jìn)度條 

進(jìn)度條幫助用戶追蹤流程，它也能使查看上下步驟更加容易。線上購(gòu)物，表單填寫(xiě)，申請(qǐng)流程等場(chǎng)景使用這種格式能很好的簡(jiǎn)化流程。 

（彩云注：左邊的表單UI不方便跟蹤進(jìn)度和流程，右邊的表單把進(jìn)度放在頂部能幫助用戶清楚的知道流程進(jìn)度。） 

6.錯(cuò)誤提示要明確 

錯(cuò)誤提示一定要明確，易于理解，方便用戶進(jìn)行下一步的操作。如果用戶不理解界面上出現(xiàn)的錯(cuò)誤，用戶就會(huì)感到很失望，可能會(huì)放棄接下來(lái)的流程。在UI設(shè)計(jì)時(shí)，在正確的地方用通俗的語(yǔ)言說(shuō)明問(wèn)題，以避免歧義，這一點(diǎn)非常重要。 

（彩云注：我常常遇到各種出錯(cuò)，但出現(xiàn)的提示太過(guò)于術(shù)語(yǔ)化，也沒(méi)有提示在正確的地方讓我非?？鄲?。） 

7.按鈕要正確合理 

從菲茨定律（Fitt's Law）中我們應(yīng)該知道，目標(biāo)區(qū)域的距離和外觀與所采取的行動(dòng)成正比。因此，為了將注意力集中在轉(zhuǎn)化按鈕上，按鈕應(yīng)該準(zhǔn)確放置在合理位置上。此外，按鈕的大小應(yīng)該易于點(diǎn)擊，避免用戶因嘗試點(diǎn)擊時(shí)不方便而流失。 

（彩云注：左側(cè)的按鈕不在正確的決策位置以及按鈕太小，右側(cè)的按鈕簡(jiǎn)潔明了并且符合用戶的心理預(yù)期，能夠讓用戶更快決策并點(diǎn)擊。） 

8. 用好色彩心理學(xué)

顏色是UI中不可缺少的部分，它能影響用戶使用應(yīng)用時(shí)的情緒。正確地使用顏色將使UI看起來(lái)更加豐富合理。 

（彩云注：左側(cè)的藍(lán)色按鈕顏色并不符合用戶對(duì)于刪除的心理預(yù)期，右側(cè)的紅色按鈕對(duì)用戶的心理預(yù)期有危險(xiǎn)和警告，用紅色代表刪除能夠讓用戶集中注意力關(guān)注這一特殊的操作。） 

9. 單列更易保持關(guān)注度 

用單列展示內(nèi)容，能更好地幫助用戶掃描。當(dāng)你的應(yīng)用和網(wǎng)站上要展示大量信息時(shí)，將所有信息垂直對(duì)齊時(shí)，能更好的保持用戶關(guān)注度。 

10. 優(yōu)先社交媒體賬號(hào)登錄

用戶準(zhǔn)備登錄或注冊(cè)你平臺(tái)的時(shí)候，把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫(xiě)表格時(shí)付出額外的認(rèn)知負(fù)擔(dān)和時(shí)間消耗而流失。首先使用社交媒體賬號(hào)，能很好地增加點(diǎn)擊率。 

11. 選擇狀態(tài)要清晰 

在用戶做選擇的時(shí)候，需要清晰地告訴用戶選中的到底是哪一個(gè)選項(xiàng)。模棱兩可的顏色會(huì)增加用戶的認(rèn)知負(fù)擔(dān)。更少的顏色和清晰的選中狀態(tài)能讓用戶獲得更好的體驗(yàn)。 

（彩云注：左側(cè)的問(wèn)題在于選中狀態(tài)不清晰且選項(xiàng)的顏色過(guò)于豐富，右側(cè)的選中狀態(tài)清晰且選項(xiàng)顏色只有2種，選中和非選中，體驗(yàn)會(huì)更好。） 

12. 用留白分組 

如果想給信息分組，使用留白是最好的方式。加條線作為分組符號(hào)會(huì)在界面中增加了一個(gè)額外元素，空白能讓UI看起來(lái)更加干凈和優(yōu)雅。用線分組的情況適用于類似Twitter、Medium之類的重內(nèi)容平臺(tái)等場(chǎng)景。 

13. 控件樣式保持一致 

保持設(shè)計(jì)的一致性，能夠降低功能復(fù)雜度并讓用戶更快決策，一致性設(shè)計(jì)讓用戶更快熟悉操作而不需要太多思考。

（彩云注：左側(cè)的選項(xiàng)圓角不一致，會(huì)讓用戶思考為什么這里會(huì)有不同，而右側(cè)的一致性選項(xiàng)設(shè)計(jì)，能讓用戶忽略內(nèi)容外的干擾。）

14. 搜索中的占位符要用好 

在搜索輸入欄添加適當(dāng)?shù)恼嘉环?，提示用戶可以在平臺(tái)上搜索和找到的內(nèi)容，這樣可以提供用戶參考并帶來(lái)更好的用戶體驗(yàn)。

15. 暗色模式下飽和度不宜過(guò)高 

高飽和度的顏色能形成強(qiáng)烈的對(duì)比。在暗黑模式下使用高飽和度會(huì)很刺眼，給用戶很不好的體驗(yàn)。暗黑模式一般在晚上使用，因此對(duì)設(shè)計(jì)師來(lái)說(shuō)，需要做的是讓整個(gè)配色相對(duì)柔和，讓用戶感到放松。基于此，在設(shè)計(jì)的時(shí)候應(yīng)該將飽和度限制在200-500之間。 

(彩云注：這里的200-500彩云去查了不少資料，但沒(méi)有找到最好的答案，這里引用的是Material Design中的顏色規(guī)范，感興趣的同學(xué)可以自行查找) 

16. 按鈕要有優(yōu)先級(jí) 

在同一個(gè)界面，最理想的狀態(tài)是只有一個(gè)最主要的關(guān)鍵按鈕和緊跟著的次要按鈕。這是因?yàn)槿绻粋€(gè)界面上有太多這種行動(dòng)按鈕（CTA）按鈕，會(huì)讓關(guān)鍵操作淹沒(méi)在這些按鈕中，讓用戶不知所措。

17. 簡(jiǎn)化不必要的動(dòng)詞 

沒(méi)必要在菜單上增加動(dòng)詞和短語(yǔ)，用最少的信息寫(xiě)清楚功能就足夠讓用戶理解了。所以，在菜單設(shè)計(jì)上要盡量避免增加無(wú)關(guān)緊要的詞，這樣才不會(huì)影響用戶體驗(yàn)。

18. 字體尺寸類別越少越好 

你可能注意到，很少有表單的字體大小不平衡，字體之間的類別盡量少一些看起來(lái)會(huì)更加平衡。在決定字體大小時(shí)，盡量規(guī)范字號(hào)的標(biāo)準(zhǔn)。比如標(biāo)題（16px），副標(biāo)題（12px），正文（10px），說(shuō)明文字（8px），這些尺寸都是以2為倍數(shù)的。 

19. 不要混用圖標(biāo)風(fēng)格 

盡管我知道要做好圖標(biāo)一致性，但在實(shí)際工作中依然經(jīng)常犯錯(cuò)。很多設(shè)計(jì)師經(jīng)常用不同風(fēng)格的圖標(biāo)混在一起，這樣會(huì)讓整個(gè)UI界面的設(shè)計(jì)顯得很不成熟。圖標(biāo)是為了讓用戶更有效率地理解事物。在使用圖標(biāo)的時(shí)候一定要注意圖標(biāo)的一致性，尤其是一些是一些風(fēng)格細(xì)節(jié)。 

這里也跟大家分享2個(gè)我自己常用的figma圖標(biāo)庫(kù)：

1)Unicorn (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons (https://www.figma.com/community/file/931906394678748246) 

20. 不同背景下的顏色飽和度適當(dāng)微調(diào) 

通常情況下，我們會(huì)認(rèn)為一個(gè)顏色在深色模式和亮色模式下是用的同一個(gè)顏色值，但這其實(shí)是錯(cuò)誤的。一個(gè)顏色在亮色模式下看起來(lái)非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個(gè)問(wèn)題最好辦法是使用2套不同飽和度的顏色。 

21. 新手引導(dǎo)多給用戶自主權(quán)

App的新手引導(dǎo)決定了用戶第一次體驗(yàn)產(chǎn)品時(shí)的感受。在設(shè)計(jì)的時(shí)候，試著公開(kāi)需要哪些具體步驟，增加”跳過(guò)“和前后移動(dòng)查看的能力對(duì)新用戶來(lái)說(shuō)非常重要。 

22. 在圖片上增加疊加層 

許多網(wǎng)站和App都是用圖片驅(qū)動(dòng)的，但在圖片上直接增加文字內(nèi)容有時(shí)候會(huì)被淹沒(méi)掉。在圖片上增加一個(gè)疊加層可以提升內(nèi)容的可讀性。 

23. 信息部分露出 

對(duì)于一些大屏設(shè)備來(lái)說(shuō)，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對(duì)于這些閑置的空間來(lái)說(shuō)，盡量通過(guò)設(shè)計(jì)告訴它底部還有更多內(nèi)容。這對(duì)UI和UX方面都有好處，因?yàn)榭臻g的使用方式能夠讓用戶清晰的知道所有內(nèi)容。 

24. 拆分大段文字 

為了讓用戶聚焦閱讀，應(yīng)盡量避免使用大段的長(zhǎng)/寬行。保持短句和簡(jiǎn)潔能夠增加內(nèi)容的可讀性。

（彩云注：這點(diǎn)用在你的作品集里也是很合適的，有些人經(jīng)常使用大段的文字內(nèi)容來(lái)描述，很可能直接勸退面試官） 

25.Z字形原理 

Z字形原理，也就是大眾所熟知的”古騰堡原理“，它描述了當(dāng)人們看到一個(gè)均勻分布元素的設(shè)計(jì)時(shí)，眼睛的總體運(yùn)動(dòng)情況。通過(guò)這個(gè)原理我們知道，用戶在內(nèi)容上的視線是沿著Z字形來(lái)閱讀的，所以遵循這一原理設(shè)計(jì)你想要核心表達(dá)的內(nèi)容。 

26. 擴(kuò)大可點(diǎn)擊范圍 

擴(kuò)大點(diǎn)擊區(qū)域，維護(hù)像按鈕、單選、多選等控件的響應(yīng)尺寸，如果你設(shè)計(jì)的點(diǎn)擊區(qū)域太小會(huì)讓用戶點(diǎn)擊困難，造成流失。

27. 盡量使用簡(jiǎn)潔的圖標(biāo) 

避免使用花俏和俗氣的圖標(biāo)，它們會(huì)讓整個(gè)設(shè)計(jì)顯得非常不成熟，同時(shí)也是很難理解的。用上更簡(jiǎn)單的圖標(biāo)形式，會(huì)讓界面更高級(jí)。

（彩云注：當(dāng)然越簡(jiǎn)單的圖標(biāo)其實(shí)想畫(huà)出彩會(huì)更難，另外也需要區(qū)分不同的場(chǎng)景，像一些運(yùn)營(yíng)類的圖標(biāo)可能會(huì)為了活動(dòng)氛圍做的相對(duì)風(fēng)格化一些。）

28. 正確的文案表達(dá) 

選錯(cuò)文案，會(huì)讓人們對(duì)于任務(wù)缺乏興趣，根據(jù)上下文使用更合適的詞組。

29. 考慮手勢(shì)操作 

輕敲和點(diǎn)擊有時(shí)候很累人，可能不如使用滑動(dòng)、拖拽等手勢(shì)操作，這些操作會(huì)讓界面更簡(jiǎn)潔并且也能順利地完成既定任務(wù)。 

30. 展示部分文案 

在探索酒店、目的地甚至是閱讀任何文章時(shí)，用戶經(jīng)常都需要點(diǎn)擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長(zhǎng)文本導(dǎo)致的滾動(dòng)。相反，可以加一個(gè)閱讀更多的按鈕方便想看全所有內(nèi)容的用戶。 

31. 接近法則 

”鄰近的物體往往被視為是同一組內(nèi)容“。有時(shí)候?yàn)榱税褍?nèi)容區(qū)分開(kāi)的更清晰，嘗試用線對(duì)相關(guān)內(nèi)容進(jìn)行分組。

（彩云注：其實(shí)有留白和不同顏色做區(qū)分也是可以的，建議根據(jù)自己的設(shè)計(jì)風(fēng)格和具體內(nèi)容來(lái)定）

32. 文字控件可視化 

在設(shè)計(jì)控件時(shí)，如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化，除了非常需要很精確的設(shè)置參數(shù)。對(duì)于價(jià)格范圍這種，很容易將它可視化為滑塊控件。 

33. 占位符要接近要填寫(xiě)內(nèi)容 

對(duì)一些人來(lái)說(shuō)容易理解的東西，對(duì)某些人來(lái)說(shuō)可能不是。因此，最好使用示例占位符來(lái)解釋輸入字段，這可以防止用戶在填寫(xiě)內(nèi)容時(shí)出錯(cuò)。

34. 系列位置效應(yīng) 

根據(jù)”系列位置效應(yīng)“，心理傾向于記住列表的第一項(xiàng)和最后一項(xiàng)，而不是中間項(xiàng)。因此，在任何App中設(shè)計(jì)導(dǎo)航時(shí)，根據(jù)應(yīng)用的上下文保持最左和最右的選項(xiàng)。例如instagram，最左邊是”首頁(yè)“，而最右邊是”用戶“。

（彩云注：這是一個(gè)心理學(xué)上的理論，人們對(duì)于一系列的材料更容易記住開(kāi)頭的內(nèi)容，也叫做首因效應(yīng)或者首位效應(yīng)；更容易記住末尾的內(nèi)容，就叫近因效應(yīng)。） 

35. 減少點(diǎn)擊次數(shù) 

在設(shè)計(jì)任何體驗(yàn)時(shí)，點(diǎn)擊次數(shù)都是非常重要的指標(biāo)。統(tǒng)計(jì)用戶需要點(diǎn)擊多少次才能完成他的目標(biāo)，額外的點(diǎn)擊會(huì)減慢整個(gè)操作過(guò)程。簡(jiǎn)化過(guò)程，自然體驗(yàn)就會(huì)更好，所以盡可能的減少點(diǎn)擊次數(shù)。

（彩云注：下面的案例，增加可點(diǎn)擊符號(hào)也可以減少用戶思考的時(shí)間。） 

36. 少即是多 

為了使內(nèi)容突出，沒(méi)有必要使用多種字體類型，包括加粗、改色等等。只在最需要的位置使用增強(qiáng)的的文字層次結(jié)構(gòu)、字體重量，同時(shí)只使用一種字體足以吸引用戶對(duì)內(nèi)容的注意力。 

37. 留白定義重點(diǎn) 

留白在設(shè)計(jì)中非常重要，太少或者沒(méi)有留白會(huì)使得設(shè)計(jì)非?；靵y。明智地使用留白可以明確地強(qiáng)調(diào)內(nèi)容。 

38. 別讓用戶閑著 

根據(jù)多爾蒂閾值(Doherty Threshold)這個(gè)理論：”系統(tǒng)需要在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專注，并提高生產(chǎn)效率。“。因此，我們可以使用動(dòng)畫(huà)、圖像甚至文本來(lái)保持用戶的注意力。（彩云注：給用戶的提示可以先快速加載信息框架，讓用戶有事可做，而不是什么都看不到）