交互设计:分页还是加载 这是一个问题

  本文作者@子木yoyo 发布于其个人博客。无论是在web页面还是手机应用,信息往往无法在一个页面全部展示,这就需要用到一些可以扩展页面信息的交互模式:分页 (Pagination)和加载(Continuous Scrolling)。分页和加载都是非常常见的交互模式,我们每天都会遇到,也正是因为太常见,我们甚至感觉不到它们的存在,浏览到页面的底部时,看到分页就顺手点一下,自动加载了就继续阅读。

  但正是这小小的一点,也会带给用户很不同的微妙感受。本文就来聊聊这些小差异带来的大不同。

  分页

  分页可以将大篇幅的内容分成小块,显示在单独的连续页面上,便于用户理解和查找。可以让用户清楚的知道,自己所要浏览的内容到底有多少、已经浏览到哪个部分、还剩余多少。分页可以使用户对所浏览的内容有清楚的预期。

  篇幅较长的文章是一定会用到分页的。一是给用户内容多少的预期,二是可以给浏览者提供一个停顿。如果用户看一篇文章已经翻了十几屏,滚动条还是停留在浏览器中间靠上的位置,那该多绝望。


  再来看看搜索引擎和电商网站,也一定会看到分页控件。


  在搜索或是查看商品列表时,内容的多少根本无法预期,分页的第一个作用自然还是告诉用户要浏览信息的量。第二,分页可以让用户快速的跳过一些不想看的信息,或是快速跳转到首页或尾页,自主的选择想要浏览的内容。第三,分页非常便于定位和回找,也许在搜索一条裙子时,我已经翻到了第五页,突然想起第二页有条好像还不错,可以直接跳转快速找到它。

  分页控件实际上是给网站的内容创造了一个自然的停顿,这个停顿运用得好的话,可以让产品更有节奏感。但是当用户浏览完一页的内容时,就必须停下正在进行的阅读,通过点击进行跳转来获取更多内容。不可否认,这个停顿会在一定程度上打断用户的思路。在遇到分页时,用户很有可能会去思考,是继续浏览呢?还是离开网站呢?所以遇到分页时,往往会流失一部分用户。

  连续加载

  连续加载是一个与分页相反的交互模式,信息之间没有明显的界限或是停顿。当页面滚动到底部,新的信息就会被自动加载进来。

  各种社交网络就特别喜欢用这种控件,用户不会被打断,可以顺畅的一直浏览下去,沉浸其中。


  但是由于信息是自动加载的,页面看起来好像没有结束,很难预测页面的内容到底有多少。一味的加载会让用户产生迷失感:这一页的内容到底有多少呢?我已经浏览了多少内容?我什么时候才能读完这一页呢?对于这种没有停顿的页面,用户想要搜寻之前看到过的信息时,也有些困难。但对于这种以休闲娱乐为主社交型的产品来说,使用不打断用户信息流的加载方式,还是非常合适的。

  使用分页控件时,用户必须通过点击才能查看到更多的内容,所以说,信息获取是用户主动请求的。而使用连续加载时,新的信息是被自动加载进来,用户是被动的接受。

  折中的方式

  分页和加载各有利弊,如今的很多网站也会采取一些折中的方式:分页加载一起用。

  如Quora,会在自动加载4次后出现一个“More”按钮,在连续的信息流之后,给用户一个停顿,让他们去主动的获取更多信息。


  新浪微博也采取了这种折中方式,自动加载两次后出现分页。对于大多数用户,在闲暇时浏览微博,加载两次的内容已经能够满足他们,对于需要浏览更多信息的用户,也让他们知道自己到底浏览了多少。


  为了使用户可以快速看到更多图片,Google图片搜索也采用连续加载的方式,但在搜索图片时,用户也非常需要明确的自己的位置,也很有可能会回去找刚才看到过的图片,所以Google在同一页中也会标出页码,便于定位和查找。这也是另一种折中的方式。


  手机客户端

  在屏幕更小、使用场景更多变的手机端,滑动显然比精确点击更简单更不容易误操作。手机端产品信息架构相对简单,用户浏览时长相对较短,使用时注意力也相对分散。所以大多数app都会使用连续加载的方式。而且加载也比分页控件更省空间。


  但像搜索引擎这样的产品,还是保留了分页的设计。


  选择加载还是分页只是设计中一个很小的点,但出色的产品都是由无数个这样的小点组成的。根据产品的特点,选择最合适它的交互方式,就是交互设计师要做的事。

  原文链接:http://www.leeyue1007.com/index.php/2012/09/05/pagination/

时间: 2024-10-05 23:44:15

交互设计:分页还是加载 这是一个问题的相关文章

Android实现ListView分页自动加载数据的方法_Android

Android应用开发中,采用ListView组件来展示数据是很常用的功能,当一个应用要展现很多的数据时,一般情况下都不会把所有的数据一次就展示出来,而是通过分页的形式来展示数据,个人觉得这样会有更好的用户体验.因此,很多应用都是采用分批次加载的形式来获取用户所需的数据.例如:微博客户端可能会在用户滑动至列表底端时自动加载下一页数据,也可能在底部放置一个"查看更多"按钮,用户点击后,加载下一页数据. 下面通过一个Demo来展示ListView功能如何实现:该Demo通过在ListVie

ie兼容性-网页分页动态加载swf文件

问题描述 网页分页动态加载swf文件 现在从后台查出很多swf格式文件路径,要在网页上分页动态加载他们,要怎么实现?我之前用的是swfobject2.2,但是发现IE对其swfobject.embedswf方法支持不行,网页上显示不出来,所以请高人给点思路.

android-关于gridview将点击的item加载到另一个gridview里

问题描述 关于gridview将点击的item加载到另一个gridview里 就像这样. 底下那个是横向的gridview 里边获取到的我机器的所有APP. 我现在要实现的功能是: 点击获取到的APP他会自动加载到上边那个gridview里 而且那个"+"的按钮始终保持在最后. android菜鸟,这问题困扰了好久了. 求各位大神帮忙.感激不尽. 没币了.求各位大神解救额 解决方案 1 从点击的 ListView 中获取点击条目的索引和内容,这个很简单的 2 向一个 ListView

gridview-使用动画加载到另一个

问题描述 使用动画加载到另一个 列表加载动画"> 在一个gridview中每点击一个item,使用动画加载到另一个gridview的item中

SDL历程:课程设计之图片加载

紧接上一章我们说的显示文字,这一节我们在探讨下怎样在SDL_Surface上显示一张图片 废话就不多说了...直接切入正题..在这个步骤中我们要用到的基本函数有 SDL_Surface * SDLCALL IMG_Load(const char *file); 函数参数为图片文件名, 细心地人一定会问一个问题,怎么这个图片也是一个SDL_Sruface*呀,没错,就是一个SDL_Sruface* 我们在我们自己的屏幕上显示出来图片就是将这张图片贴在我们自己的屏幕上,其实到现在大家应该可以理解电影

WinForm程序虚拟分页(实时加载数据)

Windows应用程序中很少见有分页的程序 文件夹中有上万个文件的时候微软也没让用户来翻页查看列表 记事本中的文字,某个系统功能的列表也都没有分页.(Word文档是个例外) 知道web中的分页是怎么做出来的朋友一定知道winform做分页会更简单 winform程序一样也不允许用户一下子把数据库中上万条数据全部检索出来 那么怎么让winform程序即不用翻页,又能分部加载数据呢 代码如下: 一:窗体类 Code    public partial class Form1 : Form    { 

Android实现ListView分页自动加载数据的方法

Android应用开发中,采用ListView组件来展示数据是很常用的功能,当一个应用要展现很多的数据时,一般情况下都不会把所有的数据一次就展示出来,而是通过分页的形式来展示数据,个人觉得这样会有更好的用户体验.因此,很多应用都是采用分批次加载的形式来获取用户所需的数据.例如:微博客户端可能会在用户滑动至列表底端时自动加载下一页数据,也可能在底部放置一个"查看更多"按钮,用户点击后,加载下一页数据. 下面通过一个Demo来展示ListView功能如何实现:该Demo通过在ListVie

实时加载-如何做一个ASP.NET MVC 聊天室

问题描述 如何做一个ASP.NET MVC 聊天室 最近在做一个项目,做一个聊天室,却遇到了我无法解决的问题主要是不知道如何实时获取聊天数据,有大神帮下忙吗? 解决方案 用signalr,http://www.cnblogs.com/kklldog/p/3198461.html

CSS3 transition优化网页内容加载后高度变化

现在web技术不断发展,视图与数据渲染更多由前端呈现,后台更多与数据打交道.于是,我们会经常看到这样的交互场景.页面加载,看到一个框框里面有个菊花在转,然后内容呈现:或者点击个按钮,菊花在转,然后列表动态加载呈现.例如: 是不是没有任何问题?确实,功能上OK,有菊花,用户也愿意等.但是,大家有没有觉得所有交互,出现菊花→出现内容,都是"砰砰砰"很生硬的感觉,尤其当内容是动态,高度不确定的时候.我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉,整个交互流程都是很流畅的,