提升网站用户体验的100个设计技巧

Flow
1. 把网站想象成一条通路：通过了解用户角色的目标和需求，使用户顺滑的从一个页面跳转到另一个页面（从一个信息单元移动到另一个信息单元）。
2. 用户更容易注意到靠近页面顶部的项目，请按重要性由上至下排序 。
3. 保持一致并且易于使用的 Web 界面可以帮助用户更专注于内容、浏览内容。
4. 避免在网站上创建错误的页面，这会给用户带来困惑，并为用户增加额外的获取信息的难度。
5、使用常用的网站模式和界面习惯；不要让用户学习新东西。
Scrolling
6. 用户习惯一直向下滚动浏览网页，附加的内容应当在相关信息的下方折叠。
7.您的网站应该一直有视觉提示朝向页面滚动方向，并且确认有更多可用内容呈现（用户想要的内容）。
8. 网站页面越长，用户向下滚动到底部的可能性就越小。
9. 快速浏览网页要好过跳转，因为滚动比点击更快——只是注意不要让页面太长。
Contrast & Color
10.将您的网页颜色转换为灰度（黑白效果）测试效果，确保所有用户都可以阅读重要信息，比如色盲用户。
11. 不要将蓝色用于链接以外的任何文本。
12. 注意移动网站上的对比。屏幕眩光会使您的网站无法使用。
13. 在您的网站上为 CTA按钮（call to action）保留一种颜色，不要将其用于其他任何用途。
14. 温暖、明亮的颜色凸显，冷、暗的颜色留在背景中。
Loading
15.确保网站用户可以快速轻松地完成他们的主要目标 。
16.对用户来说最重要的是你的网站感觉很快（即使这只是他们的感觉）。
17. 网站速度的感知基于加载时间、加载行为、等待时间和动画流畅度几个维度。
18.显示网站元素的脉络，在加载等待时传达布局 。
19. 网站文本应该在图片之前加载，以便用户可以在网站其余部分加载之前开始阅读，减缓等待焦虑。
20. 超过几秒的延迟往往会让用户离开网站。
Mobile
21. 如果移动界面元素很小或靠得很近，就很难准确点击它们 。
22. 手机上触摸目标的最小尺寸应为1cm x 1cm 并带有适当的填充 。
23. 有人在您的移动网站或应用程序上使用小指表示界面目标太小 。
24. 手持平板电脑时，拇指最容易触及屏幕的两侧和底部 。
25. 除了正常的网页滚动之外，不需要垂直滑动 。
26. 不要在移动设备上双击。确保用户可以通过一次触摸进行交互。
27. 在设计移动布局时确定用户会用一只手还是两只手使用设备。
Navigation
28. 总是有一个明显的方式让用户找到网站上的导航菜单 。
29. 如果您的网站层次结构超过3-4 级，那么是时候重新设计了 。
30. 考虑使用快捷菜单，尤其是在较长的网页上或需要快速访问时 。
31. 好的网站导航可以随时隐藏，不影响主体内容的阅读。
32. 不要让导航改变，它应该在整个网站上始终保持一致。
33. 导航标签具体，不超过2-3个词，从最能承载信息的词开始排序。
34. 使用面包屑导航让用户知道他们在网站上的位置。
35. 移动导航：显示最常用的选项并隐藏其他选项在汉堡菜单下面。
36.汉堡菜单在桌面上不太明显和熟悉，会增加交互成本、减少信息传递。
37.对于手机上的二级导航，使用分类落地页、子菜单或页内菜单 。
38. 下拉菜单应该是垂直的，而不是水平悬停；水平滚动比垂直滚动要困难得多。
39. Megamenus 应该比页面更窄，这样很容易“点击”它们 。
40.如果使用megamenus，将组织分类链接并区分可点击和不可点击的项目。
41. 不要在网站菜单中隐藏登录或搜索功能。
Forms
42. 将标签和字段样式对齐在一条垂直线上，实现快捷浏览。
43. 字段标签应该在文本字段的外面，而不是里面，这样用户就不会忘记它们 。
44. 用分隔符分割不同的区域，可以使长网页体验更加友好 。
45. 把表格的错误提示，放在出现错误的位置附近，而非表格的其它位置。
46. 错误提示应该是有帮助的、可用的、简洁的和易于理解的。
47. 一次性在每个有问题的字段旁边，提示所有导致错误的字段，这样移动用户就不会错过警告，反复修改。
Links
48. 网站上的链接必须突出——使用蓝色文本、“/“或下划线表示超链接 。
49. 链接应该总是看起来像链接。
50. 用户不应该点击链接之后才知道去向，链接文本应该提示这一信息。
51. 不要对网站或应用程序中的非链接元素使用蓝色文本或下划线。
52. 对网站上任何地方的完整 URL的引用应始终链接到该页面。
53. 某些元素，例如产品图片或评论，总是被默认为是可点击的。
54. 为网站上访问过的链接使用不同的颜色，减少用户的记忆负载。
Buttons
55. 网站上的按钮必须看起来可以点击并且大小足以让用户舒适地点击。
56. 网站或应用程序上的高频操作应该选择大按钮，放置在容易到达的区域 。
57. 网站上的背景颜色、边框和面向操作的标签向用户表明某个元素是可点击的 。
58. 对于扁平化设计，确保可点击的按钮采用对比色和动效的标签 。
59. 网站应该有一个视觉提示，表明在交互的 0.1 秒内按钮点击成功 。
60. 更改或删除手机上数据的按钮应该需要更多的确认点击，防止意外碰触。
Search
61.除非你的网站很小，内容很少，否则总是需要有一个搜索栏。
62. 搜索字段应始终看起来像桌面上的文本框。搜索图标可用于移动设备。
63. 使搜索按钮易于查找，用户通常在右上角寻找它。
64. 在网站上寻找搜索时，用户通常会寻找“要输入的小框” 。
65. 网站上的搜索字段应该足够宽，可以查看整个搜索查询 。
Carousels
66. 避免轮播：每张新幻灯片都会抹去上一张幻灯片的记忆。用户一次只能专注于一件事。
67. 在移动网站上很难看到轮播上的圆点，改用从左右滑动的图像。
68. 使用描述性标签代替轮播导航箭头，让用户知道下一张图片会发生什么。
69. 只有大约 1% 的用户点击网站上的轮播幻灯片，所以不要寄希望于这些点击。
70.一旦用户与他们互动，自动滑动的网站轮播应该切换到手动。
Accordions
71.使用折叠压缩移动网站上冗长的内容。
72. 使用折叠时，用户一旦展开了折叠，需要提供一种方法收起折叠的方法 。
73. 在移动网站上使用折叠的优点：较短的页面比页内跳转链接更容易使用 。
74. 在移动网站上使用折叠的缺点：增加交互成本，增加关闭的几率。
Help and Hints
75. 每个网页的主要目的对用户来说应该是明确的。
76. 用户不愿意在网站上访问帮助中心。将其放在上下文中并在适当时提供向导和常见问题解答。
77.在需要时才在上下文中显示网站和应用程序的提示 。
78. 帮助和说明应该简短且在视觉上与其他界面元素不同。
79. 在网站和移动应用程序上一次只显示一个提示。这减少了内存负担。
Icons
80. 图标必须直观地描述其功能和目的。使它们简单、熟悉且有意义。
81. 图标只应在必要时使用。避免过度使用它们，不要仅仅将它们用于装饰。
Content
82. 网页上最重要的信息应始终以最显眼的方式突出。
83. 把关键信息放在第一位。用户从左上角开始，最多扫描前 2-3 个词语。
84. 将高优先级的内容放在网站页面的顶部。使用热力图分析来确定不同设备上的优先级。
85. 在网站上使用颜色和尺寸对比来区分主要信息和支持细节。
86. 优先级，例如上下文、位置和紧急信息，对移动用户更重要 。
87. 移动优先级：位置、事件、电话号码、提示信息、时间敏感信息和随时随地需要的信息 。
88. 简单明了的术语比网站导航的行业术语或流行术语更好 。
Readability
89. 大多数用户先扫描后阅读。使用视觉多样性和有意义的文本使浏览更容易。
90. 可读性不仅仅是你能不能读懂——它还关乎你是否想读。
91. 在项目符号列表、编号列表、行和段落之间使用增加的行距以提高可读性 。
92. 选择网站字体时，请考虑其易读性、可读性、粗细和样式 。
93. 在移动网站和应用程序上，考虑使字体的 x 高度更大以提高其可读性 。
94. 避免在所有设备上使用小字体，尤其是长文案。不要在正文中使用压缩字体。
95.确保移动网站的标题，通过字体大小可以凸显出与其他内容的区别。
96. 自适应移动网站的字体大小 - 始终将字体大小缩放到屏幕大小合适的比例。
97. Banner失效：用户会刻意回避任何看起来像广告的东西。
98. 每段只包含一个观点，使长文本更易于阅读 。
99.斜体文本更难阅读，特别是对于阅读障碍的读者。
100. 不要将英文标题和标语全部使用大写。阅读起来要困难得多。

当前标题：提升网站用户体验的100个设计技巧
文章网址：/news8/286308.html

成都网站建设公司_创新互联，为您提供网站改版、电子商务、服务器托管、网站维护、外贸建站、网站设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联