(翻译)无限滚动最佳实践

  无限滚动是一种用户界面趋势,很多网站都在使用该功能。有了无限滚动功能,用户不用点击分页并等待新页面,恰恰相反,用户只需滚动到页面底部,新的内容就会自动加载到当前页面。
  无限滚动功能不仅降低了鼠标点击量,也避免了加载新的页面。这种有效浏览内容的新技术有很多优点,但是,在没有最佳实践的情况下,难以实现无限滚动功能。可以参考下面一组最佳实践,使你的无限滚动功能能满足用户的期望。

导航栏始终可见

  当在正常页面中向下滚动时,导航栏会逐渐消失。但是在支持无限滚动的页面上,最好保持导航栏始终可见,让用户能导航到新的目录、搜索新内容或随时登录网站。如果导航栏不是始终可见,当用户深入浏览页面内容后,他们得将页面回滚回去才能看到导航栏。保持导航栏始终可见,便于用户跳转到网站的其它位置。
在这里插入图片描述

加载新内容时要有反馈

  页面加载新内容时,需要给用户明确的标识,指明网站正在做内容加载操作。让用户知道页面正在加载新内容,使他们做好准备面对更长的页面及新内容。最不想看到的情况是用户感到困惑或奇怪,因此采用进度指示器,告知用户正在加载新内容并将很快出现在页面上[1]。
在这里插入图片描述

显示内容加载量及剩余量

  使用无限滚动功能,用户会在页面中加载大量内容,因此,最好是让用户知道已经加载了多少内容以及还有多少内容没有加载。这样有利于用户了解浏览进度,下次再浏览时能够找到上次浏览的位置。这也让用户了解网站的内容容量、已经浏览了多少内容以及何时停止滚动。通过了解当前位置及终点,让用户有安全感和舒适感,使他们觉得自己在不断进步。
在这里插入图片描述

在页脚处使用“更多内容”按钮

  如果网页有页脚,且准备支持无限滚动功能,最好使用“更多内容”按钮加载新内容。用户点击“更多内容”按钮后才加载新内容,这样他们不用紧赶慢赶就能轻松地访问页脚内容。如果没有“更多内容”按钮,用户只有很短的时间访问页脚内容,之后页脚就会被新内容冲下去了,这导致很难访问页脚内容。有了“更多内容”按钮,用户可以轻松掌控页面内容和页脚。
在这里插入图片描述

用户点击后退时能回到之前的位置[2]

  用户点击后退时,他们不止是想回到之前的页面,最好是能回到页面上之前的位置[3]。在不断的浏览内容后,丢失页面上的位置迫使用户不得不持续的翻过已经看过的内容,给用户带来了不便,使得用户退出网站[4]。如果能让用户回到页面上之前的位置,他们可以不费力地接着浏览后续内容。页面角上的退回链接也可以使点击后退变得简单方便。
在这里插入图片描述
  无限滚动功能用得好会有好处。上述最佳实践将引导你朝着正确的方向前进,让用户满意你提供的无限滚动功能,不会让他们产生疑惑。无限滚动功能作为新兴的用户界面技术,上述最佳实践对于提供友好的浏览体验至关重要[5]。

原文地址:https://uxmovement.com/navigation/infinite-scrolling-best-practices/

[1]原文:The last thing you want is a confused or surprised user. Keep them informed by using a progress indicator to show that new content is loading and will soon appear on the page.
[2]原文:Bring users back to their previous spot when they click back
[3]原文:When users click back they not only expect to land on their previous page, but their previous spot on the page.
[4]原文:After endlessly scrolling through content, losing their spot on the page forces users to have to endlessly scroll through content they have already seen. This inconveniently gives users more work than they need. It can cause users to give up on your site and move on.
[5]原文:With an interface technique as new as this, these best practices are crucial for delivering a friendly browsing experience.

发布了157 篇原创文章 · 获赞 102 · 访问量 45万+

猜你喜欢

转载自blog.csdn.net/gc_2299/article/details/103743287
今日推荐