“我应该选择“无限滚动”还是“分页”的形式来展示我的内容呢?”这是不少设计师存在的困扰。其实,两种方法展现形式都有各自的优点和缺点,在本专题内容中我们将概述这两种方法并决定我们的项目应该使用哪一种。
无限滚动
无限滚动是一种允许用户通过滚动浏览大量内容而不刷到页面最底层的技术。当你向下滚动页面时,这种技术将会持续地刷新页面。这虽然听起来很诱人,这种技术并不是一种适用于各种网站和app的万能解决方式。
无限滚动方案优点:
1.用户参与和内容发现
当你使用滚动作为探索数据的主要方法时,它极有可能会让用户在你的网页上停留更长时间,从而增加参与度。随着社交媒体的普及,大量的数据正在被消费。而无限滚动提供了一种有效的方式来让用户浏览信息的海洋,而无需等待页面的预加载。
无限滚动几乎是所有探索界面的必备功能。当用户没有定向搜索某一特定的内容时,他们就需要通过查看大量的条目才能够找到他们感兴趣的东西。
Pinterest内容的海洋以Facebook新闻feed流为例,你可以以此来衡量无限滚动的益处。通过非口头协议,用户意识到他们无法查看Feed流上的所有内容,因为内容更新地过于频繁。而Facebook正在尽最大努力通过无限滚动向用户展示尽可能多的信息,并确保他们正在查阅和消费这些信息流。
用户通过滚动Facebook新闻feed流获得更多内容更新2.“滚动”比“单击”效果更佳
用户能够通过滚动获得比“单击”或“点击”更好的体验。鼠标滚轮或触摸屏的形式使滚动速度比点击来的更简单、快捷。对于连续且冗长的内容,比如说教程,滚动提供的可用性,比将文本分割成几个单独的屏幕或页面的体验更棒。
对于单击或点击:每个内容更新都需要额外的点击操作和等待页面加载时长。滚动:单一操作滚动时,使内容更新。3.“滚动”对移动设备更友好
屏幕越小,滚动时间越长。移动端浏览的普及是另一种持续性滚动的重要因素。移动端的手势控件使滚动直观且易于使用。因此,用户无论使用哪种设备,都可以享受到真正的快速响应体验。
缺点:
1.页面性能和设备资源
页面加载速度是影响用户体验的重要因素。多项研究表明,缓慢的加载时间会导致人们离开你的网站或删除你的应用程序,致使形成低转化率。对于那些习惯使用无限滚动的用户来说,这无疑是个坏消息。因为用户向下滚动页面越多,页面上承载的内容就越多,最终会导致页面性能越来越慢。
另一个问题是用户设备的资源有限。在许多无限滚动网站上,尤其是那些有大量图片的网站中,资源有限的设备(如iPad)可能由于其已加载的内容信息过多而开始降速。
2.项目搜索和位置
无限滚动的另一个缺点是,当用户浏览到某个节点时,他们无法标记该位置,也就意味着用户无法在离开后回到该位置。如果他们离开了该网站,他们将丢失所有的加载数据,并且只能通过再次向下滚动才能返回相同的位置。滚动的形式使位置无法确定,这不仅会给用户带来烦恼和困惑,而且还会不利于整体用户体验。
在2012年,Etsy花了很多时间来实现一个无限的滚动界面,却发现新的界面表现并不如分页的表现形式出色。尽管购买量大致保持不变,但用户参与度却大大下降——现在人们不再那么频繁地使用搜索了。
Etsy的无限滚动搜索界面(当前版本有分页)正如Dmitry Fadeyev所指出的那样:“人们会希望回到搜索结果列表中,查看他们刚才看到的项目,并将其与他们在列表中其他位置发现的其它项目进行比较。
无限滚动不仅会打破这种动态,还会使列表上下移动变得十分困难,特别是当你又一次返回页面时,发现自己回到顶部,然后被迫再次向下滚动列表并等待加载结果。通过这种方式,无限滚动界面实际上比分页界面更低效。
3.滚动条无法展示真实数据量
另一个让人恼火的事情是滚动条无法展示真实数据量。当你逐渐接近滚动条底部时,你会兴奋地继续向下滚动,结果是在刷新后,发现滚动条又增加了一倍。对于用户来说,这无疑是一种非常糟糕的体验。
滚动条应该反映真实页面的长度4.页脚缺失
页脚存在的原因是:它们包含用户有时需要的内容—如果用户找不到某些内容或他们需要的其它信息,他们通常会去页脚寻找。但是,由于Feed流无限滚动的特性,一旦用户到达底部,就会加载更多的数据,每次都将页脚再次推出视图之外。
当LinkedIn在2012年推出无限滚动功能时,用户会设法抓取加载新内容之前的屏幕信息那些使用无限滚动的网站,其实应该使页脚更具用户粘性,又或者将链接放在顶部或侧边栏来使页脚更易于访问。
Facebook将页脚中的所有链接(例如'Legal','Careers')移至右侧栏。另一种解决方案是根据用户需求使用“ 加载更多”的按钮加载内容。即新内容不会自动加载,直到用户点击“更多”的按钮。这时候用户就可以轻松到达页脚,而无需去追踪它。
Instagram使用“加载更多”按钮,使用户达到访问页脚的目的。本期讲解了“无限滚动”设计的优、缺点,下期将给大家继续概述“分页”设计。
敬请期待,下期见~
网友评论