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

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

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

优秀无限加载的五条准则

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

1466518617-8857-FScWTjDFibEqQCgPeRKWjic04eDw

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

1466518617-1579-aYia3yUcRbElcrKPXnHia5ppjxSw
而在手机端,Facebook则是让导航栏适时的可见或隐藏,因为手机屏幕空间有限。当用户向下滚动浏览内容时,导航被收起;当用户想要返回或回到顶部时,导航显示。
2. 当页面需要显示页脚时,可以使用『加载更多』

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

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

1466518618-7185-tTebxicusics5ts9W4k1NCfJjDWQ

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

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

1466518617-4264-G216ww4FVKiaH9pNXibc6arLCCDw

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

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

1466518617-8565-InofribXWhsRzu7zsYbDk7vCLVxQ

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

1466518621-9085-Qae1N7ku56AfKicX3GRmHyJXYTuA

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

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

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

1466518624-7043-ZEJicIzYxM8Lb9U7XdPeN5GfYnug

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

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

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

1466518624-1498-UUNIdtSj28oLjGMksKR1YfCVE04g

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

1466518626-9257-MU26gyCoIiahdODNnp2oyWicnI3Q

结尾

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

作者:Nick Babich

译者:LeeQ

转自:视觉交互设计

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/15862/

(0)
iouedioued
上一篇 2016-06-21
下一篇 2016-06-21

相关推荐

  • 用户体验进一步提升!微信官方将优化小程序授权

    序多多小程序无需开发,轻松上手,小程序极速免费生成!十分完美的事物中在这个世界上是不存在的,每个事物需在近乎完美的道路上苛求自己,不断完善。小程序亦是如此,它是互联网时代进步的产物,被互联网大佬们追逐,被用户用完即走。但它也有被人诟病的地方,即会在用户首次启动时直接要求授权,甚至有的小程序会出现若用户不授权,小程序将会出现异常,或进入死循环的情况。相信很多用户都遇到过不授权便会出现死循环的小程序,最后只能退出微信重新进入,造成用户体验很...

    2018-04-21
  • 实践分析产品第一天

    【分析思路】 首先要明确,产品是面向用户的,当分析一个产品的时候,我们要先以用户的角色按照设计师的引导整体走一遍,也就是遍历每一个操作,每个设计师都会有一条设计主线,把杂乱无章的功能点根据用户的期望及…

    交互设计 2015-08-25
  • 通知邮件,潜移默化地影响着用户体验

    在打造一个产品的过程中,创业公司往往会把绝大多数的财力和精力用在开发应用或者搭建网站上,很少投入到给用户发的提醒邮件上。

    2017-05-31
  • 产品原型设计之交互体验的思考过程(二)

    接着上一篇《产品原型设计之交互体验的思考过程(一)》,这篇主要针对微记第二版的原型设计调整的思考过程作一下详细的说明。

    2017-05-23
  • 回顾与展望!从9个方面聊聊用户体验设计的发展

    这是一篇国外的用户体验设计回顾总结文,里边提到的9个观点都特别有前瞻性,剥离开细枝末节的视觉风格和交互原则,这些很有可能成为未来优秀设计师必备的硬能力。在甲方的阴沟里待久了,来仰头展望下真正「以人为本」的设计思考。

    2017-05-28
  • 雪糕游戏(南京上海)聘:运营/商务/主策/主美/原画/程序等

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)公司简介:南京雪糕网络科技有限公司(简称雪糕游戏)是一家集研发、运营、发行为一体的新锐游戏公司。自2015年成立至今,自主研发了《全民神仙》、《行侠仗义五千年》、《童话大乱斗》、《西游记口袋版》等产品;IOS联运了涵盖三国、武侠、魔幻、神话等题材产品,游戏多次在App Store上榜,凭借精准的IOS流量整合能力、优秀的产品运营能力,雪糕游戏IOS联运产品月收入稳定在千万级水平,也为...

    2018-04-08
  • 招聘 | 年薪百万不是梦,八爪鱼一大波高薪职位与伯乐奖在等你

    八爪鱼又开始招人啦如果你对大数据充满热情技术与才华兼并就赶快行动吧行业销售总监(政企)企)N15k-30k /深圳 / 经验3-5年 / 本科及以上 / 全职>>>岗位职责:基于公司的大数据产品、资源和技术,面向企业/政府等客户,提供数据采集软件、数据分析产品,数据服务,大数据解决方案等产品或服务;销售团队的人员招聘,管理及考核淘汰工作;完成客户需求的挖掘,商务谈判,项目回款工作;负责外部销售渠道和资源的对接,开发与维护;配合市场运营部...

    2018-03-15
  • 当我们在讨论用户至上的时候,我们在讨论什么?

    用户价值=用户收益-用户成本用户价值=用户收益-用户成本-机会成本机会成本=备选产品用户收益-备选产品用户成本。

    2017-05-31
  • 微交互的设计案例与思考(上篇)

    作为一名交互设计爱好者,在此抛砖引玉,用6类约30个案例供大家参考,本文先分享前面两部分,即为懒而做的设计和为等待而做的设计。

    2017-05-03
  • 据说这是一个用户体验设计师必须掌握的

      引言:计算出你手机上的内容布局是一件很棘手的事情。桌面设备会给你所有用它工作的空间。但在移动设备上,你只有有限的屏幕空间。用户在滚动屏幕浏览更多内容之前,只可以浏览内容的一部分。 你最终想知道…

    2015-11-22