15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 提升网站用户体验的100个设计技巧

提升网站用户体验的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. 不要将英文标题和标语全部使用大写。阅读起来要困难得多。







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

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









关键词:设计,技巧,体验,用户,提升

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭