Flow
1. 把網(wǎng)站想象成一條通路：通過了解用戶角色的目標(biāo)和需求，使用戶順滑的從一個頁面跳轉(zhuǎn)到另一個頁面（從一個信息單元移動到另一個信息單元）。
2. 用戶更容易注意到靠近頁面頂部的項目，請按重要性由上至下排序 。
3. 保持一致并且易于使用的 Web 界面可以幫助用戶更專注于內(nèi)容、瀏覽內(nèi)容。
4. 避免在網(wǎng)站上創(chuàng)建錯誤的頁面，這會給用戶帶來困惑，并為用戶增加額外的獲取信息的難度。
5、使用常用的網(wǎng)站模式和界面習(xí)慣；不要讓用戶學(xué)習(xí)新東西。
Scrolling
6. 用戶習(xí)慣一直向下滾動瀏覽網(wǎng)頁，附加的內(nèi)容應(yīng)當(dāng)在相關(guān)信息的下方折疊。
7.您的網(wǎng)站應(yīng)該一直有視覺提示朝向頁面滾動方向，并且確認有更多可用內(nèi)容呈現(xiàn)（用戶想要的內(nèi)容）。
8. 網(wǎng)站頁面越長，用戶向下滾動到底部的可能性就越小。
9. 快速瀏覽網(wǎng)頁要好過跳轉(zhuǎn)，因為滾動比點擊更快——只是注意不要讓頁面太長。
Contrast & Color
10.將您的網(wǎng)頁顏色轉(zhuǎn)換為灰度（黑白效果）測試效果，確保所有用戶都可以閱讀重要信息，比如色盲用戶。
11. 不要將藍色用于鏈接以外的任何文本。
12. 注意移動網(wǎng)站上的對比。屏幕眩光會使您的網(wǎng)站無法使用。
13. 在您的網(wǎng)站上為 CTA按鈕（call to action）保留一種顏色，不要將其用于其他任何用途。
14. 溫暖、明亮的顏色凸顯，冷、暗的顏色留在背景中。
Loading
15.確保網(wǎng)站用戶可以快速輕松地完成他們的主要目標(biāo) 。
16.對用戶來說最重要的是你的網(wǎng)站感覺很快（即使這只是他們的感覺）。
17. 網(wǎng)站速度的感知基于加載時間、加載行為、等待時間和動畫流暢度幾個維度。
18.顯示網(wǎng)站元素的脈絡(luò)，在加載等待時傳達布局 。
19. 網(wǎng)站文本應(yīng)該在圖片之前加載，以便用戶可以在網(wǎng)站其余部分加載之前開始閱讀，減緩等待焦慮。
20. 超過幾秒的延遲往往會讓用戶離開網(wǎng)站。
Mobile
21. 如果移動界面元素很小或靠得很近，就很難準(zhǔn)確點擊它們 。
22. 手機上觸摸目標(biāo)的最小尺寸應(yīng)為1cm x 1cm 并帶有適當(dāng)?shù)奶畛?。
23. 有人在您的移動網(wǎng)站或應(yīng)用程序上使用小指表示界面目標(biāo)太小 。
24. 手持平板電腦時，拇指最容易觸及屏幕的兩側(cè)和底部 。
25. 除了正常的網(wǎng)頁滾動之外，不需要垂直滑動 。
26. 不要在移動設(shè)備上雙擊。確保用戶可以通過一次觸摸進行交互。
27. 在設(shè)計移動布局時確定用戶會用一只手還是兩只手使用設(shè)備。
Navigation
28. 總是有一個明顯的方式讓用戶找到網(wǎng)站上的導(dǎo)航菜單 。
29. 如果您的網(wǎng)站層次結(jié)構(gòu)超過3-4 級，那么是時候重新設(shè)計了 。
30. 考慮使用快捷菜單，尤其是在較長的網(wǎng)頁上或需要快速訪問時 。
31. 好的網(wǎng)站導(dǎo)航可以隨時隱藏，不影響主體內(nèi)容的閱讀。
32. 不要讓導(dǎo)航改變，它應(yīng)該在整個網(wǎng)站上始終保持一致。
33. 導(dǎo)航標(biāo)簽具體，不超過2-3個詞，從最能承載信息的詞開始排序。
34. 使用面包屑導(dǎo)航讓用戶知道他們在網(wǎng)站上的位置。
35. 移動導(dǎo)航：顯示最常用的選項并隱藏其他選項在漢堡菜單下面。
36.漢堡菜單在桌面上不太明顯和熟悉，會增加交互成本、減少信息傳遞。
37.對于手機上的二級導(dǎo)航，使用分類落地頁、子菜單或頁內(nèi)菜單 。
38. 下拉菜單應(yīng)該是垂直的，而不是水平懸停；水平滾動比垂直滾動要困難得多。
39. Megamenus 應(yīng)該比頁面更窄，這樣很容易“點擊”它們 。
40.如果使用megamenus，將組織分類鏈接并區(qū)分可點擊和不可點擊的項目。
41. 不要在網(wǎng)站菜單中隱藏登錄或搜索功能。
Forms
42. 將標(biāo)簽和字段樣式對齊在一條垂直線上，實現(xiàn)快捷瀏覽。
43. 字段標(biāo)簽應(yīng)該在文本字段的外面，而不是里面，這樣用戶就不會忘記它們 。
44. 用分隔符分割不同的區(qū)域，可以使長網(wǎng)頁體驗更加友好 。
45. 把表格的錯誤提示，放在出現(xiàn)錯誤的位置附近，而非表格的其它位置。
46. 錯誤提示應(yīng)該是有幫助的、可用的、簡潔的和易于理解的。
47. 一次性在每個有問題的字段旁邊，提示所有導(dǎo)致錯誤的字段，這樣移動用戶就不會錯過警告，反復(fù)修改。
Links
48. 網(wǎng)站上的鏈接必須突出——使用藍色文本、“/“或下劃線表示超鏈接 。
49. 鏈接應(yīng)該總是看起來像鏈接。
50. 用戶不應(yīng)該點擊鏈接之后才知道去向，鏈接文本應(yīng)該提示這一信息。
51. 不要對網(wǎng)站或應(yīng)用程序中的非鏈接元素使用藍色文本或下劃線。
52. 對網(wǎng)站上任何地方的完整 URL的引用應(yīng)始終鏈接到該頁面。
53. 某些元素，例如產(chǎn)品圖片或評論，總是被默認為是可點擊的。
54. 為網(wǎng)站上訪問過的鏈接使用不同的顏色，減少用戶的記憶負載。
Buttons
55. 網(wǎng)站上的按鈕必須看起來可以點擊并且大小足以讓用戶舒適地點擊。
56. 網(wǎng)站或應(yīng)用程序上的高頻操作應(yīng)該選擇大按鈕，放置在容易到達的區(qū)域 。
57. 網(wǎng)站上的背景顏色、邊框和面向操作的標(biāo)簽向用戶表明某個元素是可點擊的 。
58. 對于扁平化設(shè)計，確保可點擊的按鈕采用對比色和動效的標(biāo)簽 。
59. 網(wǎng)站應(yīng)該有一個視覺提示，表明在交互的 0.1 秒內(nèi)按鈕點擊成功 。
60. 更改或刪除手機上數(shù)據(jù)的按鈕應(yīng)該需要更多的確認點擊，防止意外碰觸。
Search
61.除非你的網(wǎng)站很小，內(nèi)容很少，否則總是需要有一個搜索欄。
62. 搜索字段應(yīng)始終看起來像桌面上的文本框。搜索圖標(biāo)可用于移動設(shè)備。
63. 使搜索按鈕易于查找，用戶通常在右上角尋找它。
64. 在網(wǎng)站上尋找搜索時，用戶通常會尋找“要輸入的小框” 。
65. 網(wǎng)站上的搜索字段應(yīng)該足夠?qū)?，可以查看整個搜索查詢 。
Carousels
66. 避免輪播：每張新幻燈片都會抹去上一張幻燈片的記憶。用戶一次只能專注于一件事。
67. 在移動網(wǎng)站上很難看到輪播上的圓點，改用從左右滑動的圖像。
68. 使用描述性標(biāo)簽代替輪播導(dǎo)航箭頭，讓用戶知道下一張圖片會發(fā)生什么。
69. 只有大約 1% 的用戶點擊網(wǎng)站上的輪播幻燈片，所以不要寄希望于這些點擊。
70.一旦用戶與他們互動，自動滑動的網(wǎng)站輪播應(yīng)該切換到手動。
Accordions
71.使用折疊壓縮移動網(wǎng)站上冗長的內(nèi)容。
72. 使用折疊時，用戶一旦展開了折疊，需要提供一種方法收起折疊的方法 。
73. 在移動網(wǎng)站上使用折疊的優(yōu)點：較短的頁面比頁內(nèi)跳轉(zhuǎn)鏈接更容易使用 。
74. 在移動網(wǎng)站上使用折疊的缺點：增加交互成本，增加關(guān)閉的幾率。
Help and Hints
75. 每個網(wǎng)頁的主要目的對用戶來說應(yīng)該是明確的。
76. 用戶不愿意在網(wǎng)站上訪問幫助中心。將其放在上下文中并在適當(dāng)時提供向?qū)Ш统Ｒ妴栴}解答。
77.在需要時才在上下文中顯示網(wǎng)站和應(yīng)用程序的提示 。
78. 幫助和說明應(yīng)該簡短且在視覺上與其他界面元素不同。
79. 在網(wǎng)站和移動應(yīng)用程序上一次只顯示一個提示。這減少了內(nèi)存負擔(dān)。
Icons
80. 圖標(biāo)必須直觀地描述其功能和目的。使它們簡單、熟悉且有意義。
81. 圖標(biāo)只應(yīng)在必要時使用。避免過度使用它們，不要僅僅將它們用于裝飾。
Content
82. 網(wǎng)頁上最重要的信息應(yīng)始終以最顯眼的方式突出。
83. 把關(guān)鍵信息放在第一位。用戶從左上角開始，最多掃描前 2-3 個詞語。
84. 將高優(yōu)先級的內(nèi)容放在網(wǎng)站頁面的頂部。使用熱力圖分析來確定不同設(shè)備上的優(yōu)先級。
85. 在網(wǎng)站上使用顏色和尺寸對比來區(qū)分主要信息和支持細節(jié)。
86. 優(yōu)先級，例如上下文、位置和緊急信息，對移動用戶更重要 。
87. 移動優(yōu)先級：位置、事件、電話號碼、提示信息、時間敏感信息和隨時隨地需要的信息 。
88. 簡單明了的術(shù)語比網(wǎng)站導(dǎo)航的行業(yè)術(shù)語或流行術(shù)語更好 。
Readability
89. 大多數(shù)用戶先掃描后閱讀。使用視覺多樣性和有意義的文本使瀏覽更容易。
90. 可讀性不僅僅是你能不能讀懂——它還關(guān)乎你是否想讀。
91. 在項目符號列表、編號列表、行和段落之間使用增加的行距以提高可讀性 。
92. 選擇網(wǎng)站字體時，請考慮其易讀性、可讀性、粗細和樣式 。
93. 在移動網(wǎng)站和應(yīng)用程序上，考慮使字體的 x 高度更大以提高其可讀性 。
94. 避免在所有設(shè)備上使用小字體，尤其是長文案。不要在正文中使用壓縮字體。
95.確保移動網(wǎng)站的標(biāo)題，通過字體大小可以凸顯出與其他內(nèi)容的區(qū)別。
96. 自適應(yīng)移動網(wǎng)站的字體大小 - 始終將字體大小縮放到屏幕大小合適的比例。
97. Banner失效：用戶會刻意回避任何看起來像廣告的東西。
98. 每段只包含一個觀點，使長文本更易于閱讀 。
99.斜體文本更難閱讀，特別是對于閱讀障礙的讀者。
100. 不要將英文標(biāo)題和標(biāo)語全部使用大寫。閱讀起來要困難得多。

當(dāng)前標(biāo)題：提升網(wǎng)站用戶體驗的100個設(shè)計技巧
文章網(wǎng)址：http://jinyejixie.com/news8/286308.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、電子商務(wù)、服務(wù)器托管、網(wǎng)站維護、外貿(mào)建站、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)