无限滚动的最佳实践经验

无限滚动,有时候也叫做无尽头的滚动,是一种让用户滚动浏览大量内容,一直看不到内容尽头的技术。当你向下滚动时,页面一直在刷新。

01

无限滚动

这个技术,让用户在滚动浏览内容时,没有任何的干扰或多余的交互。当用户向下滚动页面时,内容就呈现出来了。很明显地,它被使用在Facebook的消息页面,Google的图片搜索结果页面和Twitter的时间表页面。尽管这个技术听起来很吸引人,但对每一个网站或app来说,这个技术并不是一个一刀切的办法。

优秀无限滚动案例的五个原则

做出一个优秀的无限滚动案例,并非是不可完成的任务。要想做出来,你应该记住并且遵循以下的设计原则。

1. 保持导航栏可见

当你使用无限滚动的时候,最好一直保持导航栏是可见的,这样用户能够比较快速便捷地通过导航进入网站或者app的其他部分。如果触及不到导航栏,用户就不得不返回滚动页面。

02

Facebook’s 的顶部导航始终可见

仅移动设备:因为移动设备的屏幕小得多,导航栏占据了屏幕相当大的一部分。如果这个页面是通过滚动来获取内容的话,当用户滚动获取新内容时导航栏隐藏,当用户向下拉动想要回到顶部时导航栏出现。

03

Facebook 通过隐藏导航栏节约垂直方向的空间. 图片来源: lmjabreu

2. 如果有页脚的话,使用“加载更多”按钮

无限滚动阻碍了用户访问页脚,这个实际上是设计无限滚动时遇到的主要挑战。当用户向下滚动到接近页面底部的时候,内容还在不停加载,这样用户短暂地瞥见页脚就会立马被新加载的内容推远,这阻止了用户接近页脚。

拿bing的图片网页为例,页脚包含了“了解更多”、“帮助”之类的链接。但是用户并不能真正点击到这些链接,除非网页停止了无限滚动,而通常来说,停止无限滚动要好一会儿。

04

图片来源: Bing Images

如果你的网页或者app有页脚,并且你觉得这个页脚很重要(或者对你的用户来说非常重要)的话,你应该使用“加载更多”入口。对于一个简单的网页来说,这可能是加载额外内容花费最小的认知负荷的方法。例如,Instagram使用“加载更多”按钮来提供页脚的快捷入口。

05

Instagram 上的“加载更多”按钮,既有无限滚动的优势又保证网页页脚方便可用

3. 返回按钮回到先前的页面

有时候,无限滚动会引起一个可用性的缺陷:滚动的位置并没有作为一个状态被记录下来。如果用户进入列表中的链接之后按返回按钮,他们期望的是回到原来页面同样的位置,但用户在原来页面的位置信息并没有被保存,这意味着当用户按返回按钮的时候,他会回到初始的页面顶部。这就并不奇怪:用户会因为没有合适的“返回列表”功能,很快就感到沮丧了。

06

Safari上的返回按钮

不要让你的用户失去在内容列表中的位置,只是因为他们使用了返回按钮。这点是至关重要的,当用户访问了列表中的特定网页之后,他们能够通过点击浏览器的返回按钮回到列表中的原位置。比如,Flickr就符合了用户对于浏览器返回按钮的期望。Flickr能够记住用户的滚动位置,所以当用户按返回按钮时,他们会回到原来的位置。

07

图片来源: Flickr

4. 让收藏特定内容成为可能

无限滚动经常被诟病的一个缺点,就是不可能收藏特定的内容。对你的用户来说,为喜欢的内容加书签(或保存)是一个非常强大的工具,只要网站或者app提供了书签功能,用户就会去使用。以Pinterest为例,使用书签功能帮助用户保存创意。

08

Pinterest的用户可用收藏或者分享网页列表中的内容

5. 当新内容加载时提供视觉反馈

当新内容正在加载时,用户需要一个明显的信号。可以使用进度条来告知用户,新内容正在加载并且很快就加载完成。因为加载新内容是一个很迅速的动作(时长不应该超过2-10s),你可以使用循环动画来反馈。

09

巧妙的动画(比如Tumblr加载指示动画)告诉用户“我正在为你加载更多内容。”

增加额外的信息,包括解释用户等待原因的文本(例如:正在加载评论……)也是有用的。

旋转动画

结论

优秀的无限滚动案例,可以创造出顺滑无缝的体验。希望你从中得到一些做出优秀无限滚动案例的启发,这将会帮助你创建优秀的用户体验。谢谢!

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部