无限下拉滚动 Vs 分页,究竟该使用哪一个?

应该是使用无限下拉滚动还是分页的形式来展现内容?究竟那一个更好?相信这是一些设计师经常需要去思考的问题。其实任何事物都有优缺点,无限下拉滚动和分页也不例外。本文将两种方法的适用场景并分析哪类项目适合用哪种方式,相信对你有一定的帮助。

一、无线下拉滚动

无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。虽然听起来比较诱人,但该技术并不是一个面向任何网站或应用程序的通用方案。

1465266934-8915-xiala1

优点1:用户参与和内容发现

当你使用滚动作为发现数据的主要方法时,它可能使你的用户在网页上停留更长时间并提升用户参与度。随着社交媒体的流行,大量的数据被用户消费。无线滚动提供了一个高效的方法让用户浏览海量信息,而不必等待页面的预加载。

无限滚动几乎是一个发现界面的必备功能。当用户并不特意寻找特定的内容时,他们需要通过查看大量内容找到自己中意的信息。

1465266934-7934-xiala2

你可以通过Facebook信息流的例子来评估无线滚动的好处。用户知道他们不可能看到信息流里面的所有内容,因为内容更新太频繁了。通过无线滚动技术,Facebook正竭尽所能促使更多的信息能呈献给用户面前,用户则产生对信息的浏览和消费行为。

1465266937-7782-xiala3

优点2:滚动要比点击好

用户使用滚动能获得比点击/轻点更好的体验。鼠标滚轮和触控屏使滚动行为要比点击更快更容易。对于那些连续且冗长的内容,比如一本说明书,滚动要比把这些信息分成几个独立的屏幕或页面有更好的易用性。

1465266934-5933-xiala4

优点3:滚动对移动设备很友好

屏幕越小,滚动就越长。移动浏览的普及也促使了长滚动。移动设备的手势控制使滚动更直观和易用。其结果就是,用户享受响应式的体验不论他们使用何种设备。

1465266936-2887-xiala5

缺点1:页面性能和设备资源

页面加载速度是良好用户体验的一切。多项研究已经表明缓慢的加载速度会造成用户离开你的网站或者删除你的应用程序从而降低转换率。这对那些应用了无线滚动方案的开发者自然是坏消息。用户在一个页面越向下滚动,就会加载更多的内容。结果就是页面性能越来越低。

另一个问题是用户设备资源的限制性。在很多应用无线滚动方案的网站上,尤其那些包含很多图片的站点,那些受资源限制的设备,比如iPad会越来越慢因为其加载了大量外部资源。

缺点2:搜索和位置标记

无线滚动的另一个问题是当用户到了当前信息流中的一个特定点,他们没法标记当前位置且不能再随后再回到这里。他们一旦离开,就会丢失当前的浏览记录,以至于如果要回到上次的位置,他们必须得重新滚动去发现。这种做法的结果就是用户产生困扰厌烦更影响了其全程的体验。

在2012年,Esty花时间使用了无线滚动方案,最后发现该方案并没有分页方案表现的好。虽然两种方案下的购买转化率差不多,但是用户的参与度降低了—用户没再过多的使用搜索功能。

1465266937-9335-xiala6

就像Dmitry Fadeev 指出:“人们会想要回到他们的搜索结果列表中检查他们刚刚找到的东西,并跟列表之外他们发现的东西做对比。无线滚动不光打破了这种动态,它也使得上下移动列表变得困难,尤其当你返回到列表页却发现自己又回到顶部,不得不重新滚动等待结果的加载。从这个角度来看,无线滚动确实要比分页方案效率低。”

缺点3:无关紧要的滚动条

另一个讨厌的问题是滚动条并没有反映出实际的数据量。假设你快要接近底部了,你会很容易受滚动条的引诱再滚动一点点,但结果却发现当你到那里的时候数据量又翻倍了。从一个可用性的角度来说,打破滚动条的正常使用规则对用户来讲是非常糟糕的。

1465266942-5104-xiala7

缺点4:页脚的缺失

页脚的存在是有原因的:它们包含一些用户可能会需要的信息—如果用户找不到它们想找的东西或它们需要一些额外的信息的话,他们通常会到页脚看看。但是因为这种信息流的无线滚动,用户经常一到底部就会有更多的数据加载出来从而将页脚永远的置于了视野之外。

1465266942-2742-xiala8

那些应用无线滚动方案的站点应该让页脚或者固定或者将其迁移至顶部或侧边栏显示。

1465266948-7789-xiala9

另一个解决方案是出发加载更多的按钮的时候再去加载信息。新的内容不会自动加载直到用户点击了加载按钮。通过这种方法,用户能很容易地到达页脚而不要一直追赶它。

1465266948-1357-xiala10

二、分页

分页技术是指将内容信息划分成独立的页面来显示。如果你滚到一个页面的底部看到一行数字,这些数字就是当前站点或者应用程序里面的分页。

1465266948-3090-xiala11

优点1:良好的转换

当用户是在结果列表查找特定的信息而不是仅仅浏览信息流时,分页就是好的选择。

你可以用谷歌搜索的例子来评估分页的好处。查找最好的搜索结果可能需要花费1分钟或者1个小时,这取决于你的搜索。但是放你在谷歌现有的搜索格式下停止搜寻时,你会知道搜索结果的准确数量。你能够决定在哪里停下或者精读哪些结果。

优点2:掌控感

1465266951-1095-xiala12

无限滚动就像个无止境的游戏——无论你滚动多久,你会感觉永远结束不了。当用户知道可用结果的数量时,他们能够做出更知情的决定而不是被动的无限滚动列表。按照David Kieras 在他的研究Psychology in Human-Computer Interaction中提出:“能够到达结束点提供了一种掌控感”。该研究同时揭示了当用户有有限且相关的结果时,他们更容易决定他们在寻找的究竟在不在里面。

同样的,当用户能够看到结果的数量时,他们将能够预估他们找到想找的东西大概要花费多长时间。

优点3:位置标记

分页方案让我们能够大概定向搜索的目标位置。用户可能难以记录页面的精确数字,但至少能够记录大概位置,而且页码链接能让他们更容易到达那里。

1465266951-3541-xiala13

分页方案对电子商务网站或应用程序来说很好。用户在线购物的时候,他们希望能够回到他们之前离开的地方继续购物。

1465266952-5912-xiala14

缺点1:额外的动作

在分页方案中,用户要到达下一张页面,就必须找到页码链接,移动鼠标置于其上,点击然后等待新页面的加载。

1465266955-1561-xiala15

这种方案的主要的问题是大多数网站中,每一页只向用户战象相当有限的信息。在不影响加载速度的情况下,加长你的页面,用户就能在每一页获取到更多的内容,他们就不必太频繁的点击那些页码链接。

三、什么时候使用无限滚动/分页方案?

实际上,应用无限滚动方案的实例只有很少部分。它最适合于那些靠用户生产内容(Twitter,Facebook)或表现视觉内容(Printerest,Instagram)的站点/应用程序。而分页方案对那些希望满足用户目标导向的站点/应用程序来说则是一个安全、友好的解决方案。

谷歌的经验就很好的说明了这一点。谷歌图片使用无限滚动是为了保证用户能够比文本更快的浏览处理图片。阅读一个搜索结果列表往往花费一些时间。

这就是为什么谷歌索索仍旧使用传统的分页方案。

四、结论

设计者在选择解决方案前应该权衡无限滚动/分页方案的优缺点。这个选择取决于你设计中的上下午和内容的呈现方式。一般来说,无限滚动适用于向Twitter等那些用户重在消费无限的信息流而并不常搜寻特定的信息的应用。分页则适用于那些用户在寻找特定信息的搜索结果列表页以及那些用户的浏览记录比较重要的场合。

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

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

相关推荐

  • 阿里巴巴技术架构首次曝光 | 站在双11的肩膀上看阿里云企业级互联网架构

    2015天猫双11全球狂欢节以912.17亿元的答卷完美收官。 双11当天14万笔/秒的交易创建峰值和8.6万笔/秒的支付峰值双双刷新了世界纪录,相比首届双11,订单创建峰值增长了350倍,支付峰值增长了430倍。 天量数字的背后…

    2015-11-18
  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • 平衡用户体验设计和精益设计

    来源:人人都是产品经理 作者:AB Tester Blog 对你而言哪个更重要:是制作出拥有杀手级用户体验的产品来吸引用户?还是尽快制作出能满足用户的产品并抢占大量的市场份额? 如果一款产品用户体验很差的话,用户不会使…

    2014-09-27
  • 怎么让引导不再是无用小透明?

    在接触一款新应用的时候用户常常会看到一些引导页,但在操作的时候直接当透明的就快速滑过或跳过了,这种时候,大家一定会有 “这些引导好无用啊”的无力感,目前甚至有着“如果一个产品需要引导,说明该产品缺乏友好…

    2015-11-19
  • Coding Nap:迭代式体感交互设计分享

    CodingNap是为程序员设计的一款办公室睡眠闹钟。程序员是一个不分昼夜工作的群体,十分需要短暂而高质量的睡眠。当程序员十分疲惫需要休息时,按下Coding Nap的按钮,它便为程序员设定了9分钟的睡眠之旅。同时Codin…

    2015-11-18
  • 设计并不仅仅关乎视觉和感受,它要呈现的是事物运作的规律。

    动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过,动效的目标并不是单纯的娱乐用户,而是帮助用户了解交互的效果和界面中发生的变化,让用户更为有效地使用你的APP。

    2016-10-24
  • 面向友好用户体验的交互设计:刘老师课件精简版

    浏览网页、手机拍照上传朋友圈、用自动售卖机购买饮料,我们无时无刻地与周边的产品或服务发生着交互。使用过程中的每一个身心感受就是一次交互体验。随着信息科技的发展,各种新产品和交互方式层出不穷,人们也越…

    2015-11-22
  • [译]UX设计之商品详情页

    现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能利于用户的整个体验过程(我们也应该以利于用…

    2016-06-30
  • APP细节打磨绝招 “微交互动画”

    著名魔术师 Dariel Fitzkee 曾经说过:“魔术是表演和细节的艺术。”而交互设计同样是如此。设计师大多能够很好的控制设计的大方向,但是细节处理不当的话,会让优秀的设计方案功亏一篑,要不怎么说“细节当中藏有魔鬼”呢?也正是因此,那些精心设计的微交互会让用户体验显得精巧而到位。

    2016-09-08
  • 为了App更新,程序猿都变成段子手了

    头图来自:flickr 本文转自歪楼(easy1414),已获得其授权。 这年头混你们互联网创业圈真是太难了。 按着互联网思维,连修bug的程序猿小哥们都被逼得寂寞如雪。 有的自带牛逼气质: 有的在App更新日志里写起了诗: …

    2016-01-26