提升網(wǎng)站用戶體驗(yàn)的100個(gè)設(shè)計(jì)技巧

時(shí)間：2023-10-03 09:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-03 09:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

提升網(wǎng)站用戶體驗(yàn)的100個(gè)設(shè)計(jì)技巧：網(wǎng)頁(yè)設(shè)計(jì)中的用戶體驗(yàn)設(shè)計(jì)（UXD 或UX）是通過(guò)提高用戶與網(wǎng)站交互的可用性、可訪問(wèn)性和效率來(lái)提高用戶滿意度的過(guò)程。此前我們分享過(guò)

今天我們深入細(xì)節(jié)，羅列100個(gè)提升網(wǎng)站用戶體驗(yàn)的實(shí)踐技巧。

Flow瀑布流

1. 把網(wǎng)站想象成一條通路：通過(guò)了解用戶角色的目標(biāo)和需求，使用戶順滑的從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面（從一個(gè)信息單元移動(dòng)到另一個(gè)信息單元）。

2. 用戶更容易注意到靠近頁(yè)面頂部的項(xiàng)目，請(qǐng)按重要性由上至下排序 。

3. 保持一致并且易于使用的 Web 界面可以幫助用戶更專注于內(nèi)容、瀏覽內(nèi)容。

4. 避免在網(wǎng)站上創(chuàng)建錯(cuò)誤的頁(yè)面，這會(huì)給用戶帶來(lái)困惑，并為用戶增加額外的獲取信息的難度。

5、使用常用的網(wǎng)站模式和界面習(xí)慣；不要讓用戶學(xué)習(xí)新東西。




Scrolling滾動(dòng)

6. 用戶習(xí)慣一直向下滾動(dòng)瀏覽網(wǎng)頁(yè)，附加的內(nèi)容應(yīng)當(dāng)在相關(guān)信息的下方折疊。

7.您的網(wǎng)站應(yīng)該一直有視覺提示朝向頁(yè)面滾動(dòng)方向，并且確認(rèn)有更多可用內(nèi)容呈現(xiàn)（用戶想要的內(nèi)容）。

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

9. 快速瀏覽網(wǎng)頁(yè)要好過(guò)跳轉(zhuǎn)，因?yàn)闈L動(dòng)比點(diǎn)擊更快——只是注意不要讓頁(yè)面太長(zhǎng)。




Contrast & Color對(duì)比度和顏色

10.將您的網(wǎng)頁(yè)顏色轉(zhuǎn)換為灰度（黑白效果）測(cè)試效果，確保所有用戶都可以閱讀重要信息，比如色盲用戶。

11. 不要將藍(lán)色用于鏈接以外的任何文本。

12. 注意移動(dòng)網(wǎng)站上的對(duì)比。屏幕眩光會(huì)使您的網(wǎng)站無(wú)法使用。

13. 在您的網(wǎng)站上為 CTA按鈕（call to action）保留一種顏色，不要將其用于其他任何用途。

14. 溫暖、明亮的顏色凸顯，冷、暗的顏色留在背景中。




Loading加載等待

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

16.對(duì)用戶來(lái)說(shuō)最重要的是你的網(wǎng)站感覺很快（即使這只是他們的感覺）。

17. 網(wǎng)站速度的感知基于加載時(shí)間、加載行為、等待時(shí)間和動(dòng)畫流暢度幾個(gè)維度。

18.顯示網(wǎng)站元素的脈絡(luò)，在加載等待時(shí)傳達(dá)布局 。

19. 網(wǎng)站文本應(yīng)該在圖片之前加載，以便用戶可以在網(wǎng)站其余部分加載之前開始閱讀，減緩等待焦慮。

20. 超過(guò)幾秒的延遲往往會(huì)讓用戶離開網(wǎng)站。




Mobile移動(dòng)

21. 如果移動(dòng)界面元素很小或靠得很近，就很難準(zhǔn)確點(diǎn)擊它們 。

22. 手機(jī)上觸摸目標(biāo)的最小尺寸應(yīng)為1cm x 1cm 并帶有適當(dāng)?shù)奶畛?。

23. 有人在您的移動(dòng)網(wǎng)站或應(yīng)用程序上使用小指表示界面目標(biāo)太小 。

24. 手持平板電腦時(shí)，拇指最容易觸及屏幕的兩側(cè)和底部 。

25. 除了正常的網(wǎng)頁(yè)滾動(dòng)之外，不需要垂直滑動(dòng) 。

26. 不要在移動(dòng)設(shè)備上雙擊。確保用戶可以通過(guò)一次觸摸進(jìn)行交互。

27. 在設(shè)計(jì)移動(dòng)布局時(shí)確定用戶會(huì)用一只手還是兩只手使用設(shè)備。




Navigation導(dǎo)航

28. 總是有一個(gè)明顯的方式讓用戶找到網(wǎng)站上的導(dǎo)航菜單 。

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

30. 考慮使用快捷菜單，尤其是在較長(zhǎng)的網(wǎng)頁(yè)上或需要快速訪問(wèn)時(shí) 。

31. 好的網(wǎng)站導(dǎo)航可以隨時(shí)隱藏，不影響主體內(nèi)容的閱讀。

32. 不要讓導(dǎo)航改變，它應(yīng)該在整個(gè)網(wǎng)站上始終保持一致。

33. 導(dǎo)航標(biāo)簽具體，不超過(guò)2-3個(gè)詞，從最能承載信息的詞開始排序。

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

35. 移動(dòng)導(dǎo)航：顯示最常用的選項(xiàng)并隱藏其他選項(xiàng)在漢堡菜單下面。

36.漢堡菜單在桌面上不太明顯和熟悉，會(huì)增加交互成本、減少信息傳遞。

37.對(duì)于手機(jī)上的二級(jí)導(dǎo)航，使用分類落地頁(yè)、子菜單或頁(yè)內(nèi)菜單 。

38. 下拉菜單應(yīng)該是垂直的，而不是水平懸停；水平滾動(dòng)比垂直滾動(dòng)要困難得多。

39. Megamenus 應(yīng)該比頁(yè)面更窄，這樣很容易“點(diǎn)擊”它們 。

40.如果使用megamenus，將組織分類鏈接并區(qū)分可點(diǎn)擊和不可點(diǎn)擊的項(xiàng)目。

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




Forms表單

42. 將標(biāo)簽和字段樣式對(duì)齊在一條垂直線上，實(shí)現(xiàn)快捷瀏覽。

43. 字段標(biāo)簽應(yīng)該在文本字段的外面，而不是里面，這樣用戶就不會(huì)忘記它們 。

44. 用分隔符分割不同的區(qū)域，可以使長(zhǎng)網(wǎng)頁(yè)體驗(yàn)更加友好 。

45. 把表格的錯(cuò)誤提示，放在出現(xiàn)錯(cuò)誤的位置附近，而非表格的其它位置。

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

47. 一次性在每個(gè)有問(wèn)題的字段旁邊，提示所有導(dǎo)致錯(cuò)誤的字段，這樣移動(dòng)用戶就不會(huì)錯(cuò)過(guò)警告，反復(fù)修改。




Links鏈接

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

49. 鏈接應(yīng)該總是看起來(lái)像鏈接。

50. 用戶不應(yīng)該點(diǎn)擊鏈接之后才知道去向，鏈接文本應(yīng)該提示這一信息。

51. 不要對(duì)網(wǎng)站或應(yīng)用程序中的非鏈接元素使用藍(lán)色文本或下劃線。

52. 對(duì)網(wǎng)站上任何地方的完整 URL的引用應(yīng)始終鏈接到該頁(yè)面。

53. 某些元素，例如產(chǎn)品圖片或評(píng)論，總是被默認(rèn)為是可點(diǎn)擊的。

54. 為網(wǎng)站上訪問(wèn)過(guò)的鏈接使用不同的顏色，減少用戶的記憶負(fù)載。




Buttons按鈕

55. 網(wǎng)站上的按鈕必須看起來(lái)可以點(diǎn)擊并且大小足以讓用戶舒適地點(diǎn)擊。

56. 網(wǎng)站或應(yīng)用程序上的高頻操作應(yīng)該選擇大按鈕，放置在容易到達(dá)的區(qū)域 。

57. 網(wǎng)站上的背景顏色、邊框和面向操作的標(biāo)簽向用戶表明某個(gè)元素是可點(diǎn)擊的 。

58. 對(duì)于扁平化設(shè)計(jì)，確?？牲c(diǎn)擊的按鈕采用對(duì)比色和動(dòng)效的標(biāo)簽 。

59. 網(wǎng)站應(yīng)該有一個(gè)視覺提示，表明在交互的 0.1 秒內(nèi)按鈕點(diǎn)擊成功 。

60. 更改或刪除手機(jī)上數(shù)據(jù)的按鈕應(yīng)該需要更多的確認(rèn)點(diǎn)擊，防止意外碰觸。




Search搜索

61.除非你的網(wǎng)站很小，內(nèi)容很少，否則總是需要有一個(gè)搜索欄。

62. 搜索字段應(yīng)始終看起來(lái)像桌面上的文本框。搜索圖標(biāo)可用于移動(dòng)設(shè)備。

63. 使搜索按鈕易于查找，用戶通常在右上角尋找它。

64. 在網(wǎng)站上尋找搜索時(shí)，用戶通常會(huì)尋找“要輸入的小框” 。

65. 網(wǎng)站上的搜索字段應(yīng)該足夠?qū)?，可以查看整個(gè)搜索查詢 。







Carousels輪播

66. 避免輪播：每張新幻燈片都會(huì)抹去上一張幻燈片的記憶。用戶一次只能專注于一件事。

67. 在移動(dòng)網(wǎng)站上很難看到輪播上的圓點(diǎn)，改用從左右滑動(dòng)的圖像。

68. 使用描述性標(biāo)簽代替輪播導(dǎo)航箭頭，讓用戶知道下一張圖片會(huì)發(fā)生什么。

69. 只有大約 1% 的用戶點(diǎn)擊網(wǎng)站上的輪播幻燈片，所以不要寄希望于這些點(diǎn)擊。

70.一旦用戶與他們互動(dòng)，自動(dòng)滑動(dòng)的網(wǎng)站輪播應(yīng)該切換到手動(dòng)。




Accordions折疊

71.使用折疊壓縮移動(dòng)網(wǎng)站上冗長(zhǎng)的內(nèi)容。

72. 使用折疊時(shí)，用戶一旦展開了折疊，需要提供一種方法收起折疊的方法 。

73. 在移動(dòng)網(wǎng)站上使用折疊的優(yōu)點(diǎn)：較短的頁(yè)面比頁(yè)內(nèi)跳轉(zhuǎn)鏈接更容易使用 。

74. 在移動(dòng)網(wǎng)站上使用折疊的缺點(diǎn)：增加交互成本，增加關(guān)閉的幾率。




Help and Hints幫助提示

75. 每個(gè)網(wǎng)頁(yè)的主要目的對(duì)用戶來(lái)說(shuō)應(yīng)該是明確的。

76. 用戶不愿意在網(wǎng)站上訪問(wèn)幫助中心。將其放在上下文中并在適當(dāng)時(shí)提供向?qū)Ш统Ｒ妴?wèn)題解答。

77.在需要時(shí)才在上下文中顯示網(wǎng)站和應(yīng)用程序的提示 。

78. 幫助和說(shuō)明應(yīng)該簡(jiǎn)短且在視覺上與其他界面元素不同。

79. 在網(wǎng)站和移動(dòng)應(yīng)用程序上一次只顯示一個(gè)提示。這減少了內(nèi)存負(fù)擔(dān)。







Icons圖標(biāo)

80. 圖標(biāo)必須直觀地描述其功能和目的。使它們簡(jiǎn)單、熟悉且有意義。

81. 圖標(biāo)只應(yīng)在必要時(shí)使用。避免過(guò)度使用它們，不要僅僅將它們用于裝飾。







Content內(nèi)容

82. 網(wǎng)頁(yè)上最重要的信息應(yīng)始終以最顯眼的方式突出。

83. 把關(guān)鍵信息放在第一位。用戶從左上角開始，最多掃描前 2-3 個(gè)詞語(yǔ)。

84. 將高優(yōu)先級(jí)的內(nèi)容放在網(wǎng)站頁(yè)面的頂部。使用熱力圖分析來(lái)確定不同設(shè)備上的優(yōu)先級(jí)。

85. 在網(wǎng)站上使用顏色和尺寸對(duì)比來(lái)區(qū)分主要信息和支持細(xì)節(jié)。

86. 優(yōu)先級(jí)，例如上下文、位置和緊急信息，對(duì)移動(dòng)用戶更重要 。

87. 移動(dòng)優(yōu)先級(jí)：位置、事件、電話號(hào)碼、提示信息、時(shí)間敏感信息和隨時(shí)隨地需要的信息 。

88. 簡(jiǎn)單明了的術(shù)語(yǔ)比網(wǎng)站導(dǎo)航的行業(yè)術(shù)語(yǔ)或流行術(shù)語(yǔ)更好 。







Readability可讀性

89. 大多數(shù)用戶先掃描后閱讀。使用視覺多樣性和有意義的文本使瀏覽更容易。

90. 可讀性不僅僅是你能不能讀懂——它還關(guān)乎你是否想讀。

91. 在項(xiàng)目符號(hào)列表、編號(hào)列表、行和段落之間使用增加的行距以提高可讀性 。

92. 選擇網(wǎng)站字體時(shí)，請(qǐng)考慮其易讀性、可讀性、粗細(xì)和樣式 。

93. 在移動(dòng)網(wǎng)站和應(yīng)用程序上，考慮使字體的 x 高度更大以提高其可讀性 。

94. 避免在所有設(shè)備上使用小字體，尤其是長(zhǎng)文案。不要在正文中使用壓縮字體。

95.確保移動(dòng)網(wǎng)站的標(biāo)題，通過(guò)字體大小可以凸顯出與其他內(nèi)容的區(qū)別。

96. 自適應(yīng)移動(dòng)網(wǎng)站的字體大小 - 始終將字體大小縮放到屏幕大小合適的比例。

97. Banner失效：用戶會(huì)刻意回避任何看起來(lái)像廣告的東西。

98. 每段只包含一個(gè)觀點(diǎn)，使長(zhǎng)文本更易于閱讀 。

99.斜體文本更難閱讀，特別是對(duì)于閱讀障礙的讀者。

100. 不要將英文標(biāo)題和標(biāo)語(yǔ)全部使用大寫。閱讀起來(lái)要困難得多。







用戶體驗(yàn)優(yōu)化需要基于研究、數(shù)據(jù)做出客觀的決策，而不是根據(jù)設(shè)計(jì)者自己的猜測(cè)。在滿足了以上的基礎(chǔ)設(shè)計(jì)原理的基礎(chǔ)上，通過(guò)與用戶互動(dòng)獲得更多的見解。唐碩體驗(yàn)云幫助企業(yè)將用戶態(tài)度、興趣、看法和未知需求數(shù)字化，通過(guò)適宜的方式和渠道采集用戶主觀數(shù)據(jù)，更好的了解消費(fèi)者，從而為企業(yè)的用戶增長(zhǎng)和業(yè)務(wù)創(chuàng)新提供有力的數(shù)據(jù)支撐。

用戶體驗(yàn)數(shù)據(jù)可以更好的了解您的用戶，知曉他們?nèi)绾闻c網(wǎng)站互動(dòng)、哪些有效、哪些無(wú)效，從用戶的角度使其變得更好。用戶研究和用戶體驗(yàn)優(yōu)化是個(gè)持續(xù)的工作，體驗(yàn)數(shù)據(jù)的積累還將幫助品牌更好地為未來(lái)迭代設(shè)計(jì)做好準(zhǔn)備。因此，在網(wǎng)站迭代或重新設(shè)計(jì)時(shí)，可以避免此前的不良體驗(yàn)，有助于確保改版成功。