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

时间：2023-10-03 09:24:01 | 来源：网站运营

时间：2023-10-03 09:24:01 来源：网站运营

提升网站用户体验的100个设计技巧：网页设计中的用户体验设计（UXD 或UX）是通过提高用户与网站交互的可用性、可访问性和效率来提高用户满意度的过程。此前我们分享过

今天我们深入细节，罗列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. 不要将英文标题和标语全部使用大写。阅读起来要困难得多。







用户体验优化需要基于研究、数据做出客观的决策，而不是根据设计者自己的猜测。在满足了以上的基础设计原理的基础上，通过与用户互动获得更多的见解。唐硕体验云帮助企业将用户态度、兴趣、看法和未知需求数字化，通过适宜的方式和渠道采集用户主观数据，更好的了解消费者，从而为企业的用户增长和业务创新提供有力的数据支撑。

用户体验数据可以更好的了解您的用户，知晓他们如何与网站互动、哪些有效、哪些无效，从用户的角度使其变得更好。用户研究和用户体验优化是个持续的工作，体验数据的积累还将帮助品牌更好地为未来迭代设计做好准备。因此，在网站迭代或重新设计时，可以避免此前的不良体验，有助于确保改版成功。