神刀安全网

无限加载的最佳实践-交互&动效

无限加载允许用户不断的通过滚动浏览大量的内容。它的实现原理就是当你在界面上滚动到离页底一定距离的时候,就会触发加载,在页底加载出新的内容。

无限加载的最佳实践-交互&动效

这种形式让用户在浏览中不会被打断——当用户浏览到页底时,新的内容就会自动加载出来。如fackbook的消息feed,Google的图片搜索结果页,twitter的时间线。听起来这种自动触发无限加载的形式很棒,但它也不是放之四海而皆准的。

优秀无限加载的五条准则

1.确保导航是可见的或方便触发的

无限加载的最佳实践-交互&动效

PC上,Facebook的导航就是一直可见的,方便用户操作。

无限加载的最佳实践-交互&动效

而在手机端,Facebook则是让导航栏适时的可见或隐藏,因为手机屏幕空间有限。当用户向下滚动浏览内容时,导航被收起;当用户想要返回或回到顶部时,导航显示。

2. 当页面需要显示页脚时,可以使用『加载更多』

无限加载功能会阻碍用户进入页脚。在这种有此功能的页面,当用户触碰到页低时新的内容就会不断的被刷出来,把页脚挤下去,用户可能只有一两秒的时间看到页脚信息。

例如,Bing Images这个网站。页脚上有’learn more’ 、’help’ 等等链接,如果只是停留一小会用户根本无法准确的点击到(甚至找到)自己需要了解的内容。

无限加载的最佳实践-交互&动效

如果你得网站或app有页脚,其实可以使用’加载更多’按钮来解决这个’无法到达页脚的问题’。这样新的内容不会自动加载,而是用户点击’加载更多’按钮手动触发后才加载。这是种方式很适合请求式的加载需求,操作简单、认识负荷也很小。

而instagram 同样的使用’Load more’加载更多按钮,来确保用户可以触达页脚信息。但是当用户点击了加载更多按钮,确认加载请求后,’Load more’按钮就不再显示了。以避免用户需要一次又一次的点击加载更多。

无限加载的最佳实践-交互&动效

3.返回按钮应该带用户回到源页面并定位到浏览的位置

无限加载有个很容易被忽略的体验问题:没有记录用户浏览到的位置。当用户浏览了一会,点击了feed上某个内容跳走,然后点击『返回』按钮想回来的时候,他们是希望定位到他们刚刚浏览到的feed列表位置。如果不记录浏览位置,用户点击返回就会回到源页面的顶部(初始状态)。毫无疑问,这很影响体验!

无限加载的最佳实践-交互&动效

不要让用户因为点了个返回就失去了之前的位置。例如,Flickr网站,用户点击浏览器返回按钮的行为和用户预期(返回到之前浏览的位置)就是匹配的。记录了他们浏览的位置。

无限加载的最佳实践-交互&动效

4. 允许用户对某条内容打标记

还有一个易忽略的体验问题是,当某条我中意的内容出现在feedlist,而我却不能mark它。。。ಥ_ಥ。。。标记功能(喜欢、收藏、分享等)有时对用户来说是很重要的。

例如,在Pinterest浏览中发现的一些有趣内容可以通过标记功能收集下来。

无限加载的最佳实践-交互&动效

5.在加载内容时提供可视化的反馈

当加载新内容时,用户需要一个明确的信号告诉他,页面正在加载、马上就好耐心等待。

由于加载行为是一个短暂行为(不应该超过2-10 秒)你可以使用一个循环动画来告诉用户程序是在工作的。

无限加载的最佳实践-交互&动效

你也可以使用带文字的加载指示器(如下图),直接解释给用户为什么需要等待。

无限加载的最佳实践-交互&动效

结尾

好的无限加载体验应该是流畅、不被打断的。希望大家可以从上文得到一些启发,谢谢!

作者:Nick Babich

译者:LeeQ

转自:视觉交互设计

IAMUE网站介绍

  1. IAMUE网站iamue.com是一个 专注分享交互设计的干货网站
  2. 交互设计师图书导航: http://books.iamue.com/
  3. 交互设计必备导航 :http://UED.xyz
  4. 交互设计讨论群 Ⅰ群: 156360020
  5. 交互设计讨论群 Ⅱ群: 247123791
  6. 交互设计讨论群 Ⅲ群: 147868955
  7. 交互设计讨论群 Ⅳ群: 362796793
  8. 微博: @IAMUE
  9. 无限加载的最佳实践-交互&动效 在微信里搜索: AioUED 并关注后回复关键字:{石头},查看结果,你绝对想不到。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 无限加载的最佳实践-交互&动效

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址