【译】无穷转动加载最好实践

本文转载自:众成翻译
译者:文蔺
链接:http://www.zcfy.cc/article/673
原文:https://uxplanet.org/infinite-scrolling-best-practices-c7f24c9af1d#.1xzr65wil

无穷转动(Infinite scrolling),有时刻被称为无尽转动(endless scrolling),这类手艺许可用户在大批内容上转动,眼中看不到完毕的处所。这类手艺很简朴,就是页面往下转动的时刻坚持革新。

《【译】无穷转动加载最好实践》

这项手艺运用户在没有打断分外交互的情况下转动列表 —— 跟着用户转动,一条条的内容就涌现了。Facebook 的消息推送页,Google 的图片搜刮,Twitter 的时候线,这些页面都用到了这项手艺。虽然听起来还挺有诱惑力的,但并非对一切网站或运用都通用的

优异无穷转动的五项原则

将无穷转动做好,并非不能够完成的使命。为了完成它,记着并恪守以下目标。

1. 导航条坚持可见

运用无穷转动时刻,最好坚持导航条延续可见,如许能够很快导航到页面或运用的差别地区,对用户来讲也更简朴。假如找不到导航条,用户将不得不一路向大将页面滚回去。

《【译】无穷转动加载最好实践》

仅实用挪动装备:由于挪动端屏幕要小得多,导航条所占比例能够相对大一些。假如屏幕上是转动的内容,用户转动猎取新内容的时刻,导航条能够隐蔽起来;当用户最先往回转动试图回到顶部的时刻再显现出来。

《【译】无穷转动加载最好实践》

2. 假如有页脚,加上“加载更多”按钮

无穷转动障碍用户的接见页脚。实际上,这也是无穷转动设想的主要应战之一:用户抵达列表底部的时刻,内容在不断地加载进来,用户会有一两秒时候看到页脚,直到下一组效果加载胜利并将页脚挤出视图以外。这阻挠用户接触到页脚。

拿 Bing 图片举例子。页脚包含“相识更多”、“协助”等链接,但用户没办法真正点到任何一个,直到过一会儿,页面住手无穷转动。

《【译】无穷转动加载最好实践》

假如你的网站或运用有页脚,且它对你(或许,更要紧的,对你的用户)很主要,那就应该用“加载更多”的要领。新内容不会自动加载,直到用户点击了“加载更多”的按钮。这构成了一个很简朴的交互界面,也使得按需加载分外内容的认知负荷多是最小。

Instagram 运用“加载”更多按钮以便页脚简朴可及,而且不会强迫用户再三点击“加载更多”。

《【译】无穷转动加载最好实践》

3. 返回按钮将用户待回至之前的位置

有时刻,无穷转动的完成带来一个主要的可用性瑕玷:转动位置并未被纪录为“状况”。假如用户从列表中的链接跳转了,然后点返回按钮,他们希望能回到页面本来雷同的位置。然则列表的位置不再存在了,这意味着运用浏览器的返回按钮平常都致使转动位置重置到页面顶部。无怪乎用户很快就以为懊丧,都没有一个适宜的“回到列表”的功用。

《【译】无穷转动加载最好实践》

别让你的用户就由于运用返回按钮,找不到列表的位置。很主要的是,用户经由过程列表接见了某一个项目的详情页,他们点击浏览器返回按钮返回列表的时刻,也应该在雷同的位置。

Flickr 监听用户点击浏览器退却按钮的行动,满足用户的希冀。APP 记着用户的转动位置,所以当用户按退却按钮的时刻,返回到原始位置。

《【译】无穷转动加载最好实践》

4. 供应为特定项增加书签的能够

无穷转动最常见的瑕玷之一就是,内容涌现的时刻,没法增加书签。喜欢内容的简朴的书签(或许
“保留稍后再看”),作为将来的参照,对用户来讲是很有效的东西。当网站或运用供应书签功用的时刻,用户会运用的。比方说,Pinterest,运用书签东西协助用户保留创意。

《【译】无穷转动加载最好实践》

5. 加载新内容时供应视觉反应

当内容在加载的时刻,用户须要明白的指导,申明正在进行中。运用进度指导(process indicator)让用户晓得,新内容正在加载,很快就会在页面上显现。

由于加载新内容是一个很快的行动(不会凌驾 2-10 秒钟),你能够运用轮回动画来供应反应,表明体系正在事情。

《【译】无穷转动加载最好实践》

也能够有助于为用户增加分外的清楚,包含文本诠释了为什么用户守候(比方“加载批评…”)。
为用户增加分外声明,供应申明为什么用户在守候的文本(如“正在加载批评”),也是很有效的。

《【译】无穷转动加载最好实践》

结论

无穷转动完成得好的话,能够到达令人难以置信的润滑无缝体验。很好的是,关于好的无穷转动,你已取得一些线索了,这会帮你竖立圆满的用户体验。

感谢!

点赞