網(wǎng)站用戶體驗(yàn)設(shè)計(jì)（UXD或UX）是通過提高用戶與網(wǎng)站交互的可用性、可訪問性和效率來提升用戶滿意度的過程。在Intechnique機(jī)構(gòu)，我們一直都在研究并應(yīng)用最好的用戶體驗(yàn)原則。今年早些時(shí)候，我成為了世界上第9個(gè)獲得尼爾森諾曼集團(tuán)(Nielsen Norman Group)頒發(fā)的UX碩士學(xué)位的人。在此，我想分享一下這些年來我獲得的一些最佳實(shí)踐原則。以下是我列出的100個(gè)頂級(jí)用戶體驗(yàn)實(shí)踐，供網(wǎng)頁設(shè)計(jì)師們參考。

一、關(guān)于用戶流程

1. 把網(wǎng)站設(shè)計(jì)想象成鋪設(shè)一條黃色的磚路，理解用戶角色的目標(biāo)和需要，然后不斷讓用戶從一個(gè)區(qū)塊跳轉(zhuǎn)到下一個(gè)。

2. 用戶更有可能注意到網(wǎng)站/頁面頂部附近的內(nèi)容/選項(xiàng)，建議按其重要性排序。

3. 風(fēng)格一致且易于使用的web界面可以讓用戶專注于內(nèi)容并進(jìn)行瀏覽。

4. 避免在網(wǎng)站上創(chuàng)建死循環(huán)頁面，它們不僅會(huì)讓用戶困惑，并且會(huì)給他們?cè)鎏眍~外的操作。

5. 使用常見的網(wǎng)站模式和界面，不要增加用戶的學(xué)習(xí)成本。

二、關(guān)于滾動(dòng)頁面

6. 只要明確頁面下方的折疊區(qū)域有更多相關(guān)的信息，用戶就會(huì)向下滾動(dòng)頁面。

7. 網(wǎng)站應(yīng)該提供用戶一個(gè)強(qiáng)大的視覺指示器，用于滾動(dòng)頁面和查看是否有更多的內(nèi)容。

8. 網(wǎng)站頁面越長(zhǎng)，用戶滾動(dòng)到底部的可能性就越小。

9. 設(shè)計(jì)滾動(dòng)頁面的想法很棒，因?yàn)闈L動(dòng)頁面的速度比點(diǎn)擊更快，但注意不要讓頁面過長(zhǎng)。

三、對(duì)比和顏色應(yīng)用

10. 如果是專為色盲人士設(shè)計(jì)的網(wǎng)頁/產(chǎn)品，將整體顏色調(diào)整至灰度，以確保所有用戶都能閱讀重要信息。

11. 除了鏈接外，網(wǎng)站上的任何文本都不要使用藍(lán)色。

12. 注意手機(jī)網(wǎng)站上的色彩對(duì)比，屏幕眩光讓用戶無法使用網(wǎng)站/產(chǎn)品。

13. 為網(wǎng)站的CTA按鈕專門保留一種顏色，不要用于其他元素。

14. 溫暖、明亮的顏色可以應(yīng)用在顯眼位置，寒冷、黑暗的顏色則應(yīng)用在背景中。

四、關(guān)于加載設(shè)計(jì)

15. 確保網(wǎng)站用戶能夠快速輕松地完成他們的主要目標(biāo)

16. 對(duì)用戶來說，最重要的是網(wǎng)站看起來加載很快(即使這只是他們的感覺)。

17. 用戶對(duì)網(wǎng)站速度的感知是基于加載時(shí)間、加載行為、等待時(shí)間和動(dòng)畫的流暢性。

18. 優(yōu)先向用戶展示網(wǎng)站框架和默認(rèn)元素，以便在加載時(shí)了解網(wǎng)站布局。

19. 網(wǎng)站的文本應(yīng)該在圖片完成加載前出現(xiàn)，以便用戶可以在網(wǎng)站加載其他內(nèi)容時(shí)開始閱讀。

20. 超過幾秒鐘的加載延遲，往往會(huì)讓用戶選擇離開網(wǎng)站。

五、關(guān)于移動(dòng)端設(shè)計(jì)

21. 如果手機(jī)界面元素很小，或者元素間靠得很近，用戶很難準(zhǔn)確地點(diǎn)擊它們。

22. 手機(jī)觸控目標(biāo)的最小尺寸應(yīng)該是1cm x 1cm，并適當(dāng)填充。

23. 如果用戶需要用小拇指去點(diǎn)擊手機(jī)網(wǎng)站或應(yīng)用程序，這說明界面上的交互目標(biāo)太小。

24. 當(dāng)用戶拿著平板電腦時(shí)，大拇指最容易接觸到的地方是屏幕的兩側(cè)和底部。

25. 除了正常的網(wǎng)頁滾動(dòng)，其他任何地方都不需要設(shè)計(jì)垂直滑動(dòng)。

26. 移動(dòng)設(shè)備上盡量不要設(shè)計(jì)雙擊交互，確保用戶可以通過一次觸摸完成交互。

27. 在設(shè)計(jì)移動(dòng)布局時(shí)，考慮用戶是否會(huì)單手或兩只手使用設(shè)備的情況。

六、關(guān)于導(dǎo)航設(shè)計(jì)

28. 在網(wǎng)站上設(shè)置一個(gè)明顯的路徑供用戶訪問導(dǎo)航菜單。

29. 如果你的網(wǎng)站層次結(jié)構(gòu)超過3-4級(jí)，是時(shí)候考慮重新設(shè)計(jì)了。

30. 考慮使用粘性菜單導(dǎo)航(跟隨瀏覽器滾動(dòng)的導(dǎo)航)，特別是在較長(zhǎng)的網(wǎng)頁中或需要快速訪問時(shí)。

31. 一個(gè)好的網(wǎng)站導(dǎo)航并不會(huì)妨礙網(wǎng)頁，使用后會(huì)消失在背景中。

32. 導(dǎo)航與網(wǎng)站應(yīng)該保持一致，不能改變整個(gè)網(wǎng)站的風(fēng)格。

33. 導(dǎo)航標(biāo)簽需要具體化，使用承載信息最多的單詞，不要超過2-3個(gè)單詞。

34. 使用面包屑導(dǎo)航，讓用戶知道他們?cè)诰W(wǎng)站上所處的位置。

35. 移動(dòng)端導(dǎo)航設(shè)計(jì)：顯示最常用的選項(xiàng)，并將其他選項(xiàng)隱藏在漢堡包菜單下。

36. 桌面端的漢堡菜單使用場(chǎng)景較少，因?yàn)樗⒉皇欠浅Ｒ俗⒛?，用戶也不熟悉，增加了交互成本，減少了信息的呈現(xiàn)。

37. 對(duì)于手機(jī)的輔助導(dǎo)航，可以使用分類登錄頁面、子菜單或頁面內(nèi)菜單。

38. 菜單下拉列表應(yīng)該是垂直的，而不是水平懸停，因?yàn)樗綕L動(dòng)要困難得多。

39. Megamenus菜單的設(shè)計(jì)應(yīng)該比網(wǎng)頁更窄，用戶才能很輕松地“點(diǎn)擊”菜單。

40. 如果使用megamenus菜單，需要將鏈接整理成組，并區(qū)分可點(diǎn)擊和不可點(diǎn)擊項(xiàng)。

41. 不要在網(wǎng)站菜單中隱藏登錄或搜索功能。

七、關(guān)于表單設(shè)計(jì)

42. 將表單標(biāo)簽和字段對(duì)齊到一條垂直線上，以便快速掃描。

43. 字段標(biāo)簽應(yīng)該在文本字段之外，而不是在文本字段內(nèi)，這樣用戶才不會(huì)丟失目標(biāo)。

44. 使用分隔符區(qū)分不同部分，使長(zhǎng)的網(wǎng)頁表單對(duì)用戶更加友好。

45. 將表單錯(cuò)誤提示放在網(wǎng)頁表單中所有導(dǎo)致錯(cuò)誤的字段旁邊。

46. 錯(cuò)誤消息提示應(yīng)該是有用的、可用的、簡(jiǎn)潔的和容易理解的。

47. 一次性在所有導(dǎo)致錯(cuò)誤的字段旁邊顯示錯(cuò)誤提示彈窗，這樣移動(dòng)用戶就不會(huì)錯(cuò)過這些提示了。

八、關(guān)于鏈接

48. 網(wǎng)站上的鏈接必須突出——使用藍(lán)色文本或下劃線來表示超鏈接。

49. 鏈接應(yīng)該看起來就是鏈接的樣子。

50. 鏈接文本應(yīng)該表明鏈接的指向，而不是讓用戶通過點(diǎn)擊一個(gè)鏈接來找出它的指向。

以上就是《用戶體驗(yàn)大師的100個(gè)UX設(shè)計(jì)技巧——上篇》，感興趣的朋友請(qǐng)繼續(xù)關(guān)注。不久就會(huì)為大家推出《用戶體驗(yàn)大師的100個(gè)UX設(shè)計(jì)技巧——下篇》。

原文作者：Andrew Kucheriavy

原文地址：https://www.intechnic.com/blog/100-ux-design-pro-tips-from-user-experience-master/