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