分页还是加载,这是一个问题

标签: 设计 交互设计 分页 | 发表时间:2012-09-12 22:36 | 作者:
出处:http://blog.jobbole.com

无论是在web页面还是手机应用,信息往往无法在一个页面全部展示,这就需要用到一些可以扩展页面信息的交互模式:分页(Pagination)和加载(Continuous Scrolling)。分页和加载都是非常常见的交互模式,我们每天都会遇到,也正是因为太常见,我们甚至感觉不到它们的存在,浏览到页面的底部时,看到分页就顺手点一下,自动加载了就继续阅读。但正是这小小的一点,也会带给用户很不同的微妙感受。下面就来聊聊这些小差异带来的大不同。

 

分页

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

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

分页还是加载,这是一个问题

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

分页还是加载,这是一个问题

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

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

 

连续加载

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

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

分页还是加载,这是一个问题

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

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

 

折中的方式

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

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

分页还是加载,这是一个问题

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

分页还是加载,这是一个问题

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

分页还是加载,这是一个问题

 

手机客户端

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

分页还是加载,这是一个问题

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

分页还是加载,这是一个问题

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

 

来源: @子木yoyo

 

相关文章

相关 [分页 加载 问题] 推荐:

分页还是加载,这是一个问题

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

Android 动态加载技术三个关键问题详解

- - 移动开发 - ITeye博客
关注微信号:javalearns   随时随地学Java. 动态加载技术(也叫插件化技术)在技术驱动型的公司中扮演着相当重要的角色,当项目越来越庞大的时候,需要通过插件化来减轻应用的内存和CPU占用,还可以实现热插拔,即在不发布新版本的情况下更新某些模块. 动态加载是一项很复杂的技术,这里主要介绍动态加载技术中的三个基础性问题,至于完整的动态加载技术的实现请参考笔者发起的开源插件化框架DL:.

搞定网页打印自动分页问题

- - Web前端 - ITeye博客
设计过程出现一个困难问题,一个php生成的HTML页面有多个表格,要求必须自动分开打印到几张A4纸张上面.经过询问资深人士,结果统一回答,HTML页面无法做打印时自动分页面打印.于是乎正准备放弃这个分页面打印念头,郁闷着被笑话着被困扰着. 一个表格被分开打印到两张A4上,多难看啊. 无意中翻阅CSS,发现里面有两语句:page-break-beforepage-break-after.

Android有效解决加载大图片时内存溢出的问题

- - CSDN博客推荐文章
         尽量不要使用setImageBitmap或setImageResource或BitmapFactory.decodeResource来设置一张大图,. 因为这些函数在完成decode后,最终都是通过java层的createBitmap来完成的,需要消耗更多内存.          因此,改用先通过BitmapFactory.decodeStream方法,创建出一个bitmap,再将其设为ImageView的 source,.

Android之批量加载图片OOM问题解决方案 - 杰瑞教育

- - 博客园_首页
一、OOM问题出现的场景和原因.   一个好的app总少不了精美的图片,所以Android开发中图片的加载总是避免不了的,而在加载图片过程中,如果处理不当则会出现OOM的问题.   首先我们来总结一下,在加载图片过程中 出现的OOM的场景无非就这么几种:. 2、  一次加载的图片过多.   那么为什么在以上场景下会出现OOM问题呢.

关于请求被挂起页面加载缓慢问题的追查

- - FEX 百度 Web 前端研发部
本文前戏较多,务实的同学可以直接跳到文末的结论. 由「 钢的琴」网友脑洞大开延伸出了吉的他二的胡琵的琶,以及后来许嵩的「 苏格拉没有底」,是否可以再拓展一下,得到哥本不爱吃哈根,哈根爱达斯等剧情乱入的关系. 上面跟本文要讨论的主题有什么关系. 有用户反馈内部MIS系统慢,页面加载耗时长. 前端同学们开组会提及此事,如何解决慢的问题.

jquery实现页面滚动到最下方自动按分页的形式加载内容效果

- - ITeye博客
//此处的 scroll_body 是滚动的元素,就是在这个区域滚动会触发事件来加载新的内容. //这个是目标应该添加到的窗口是哪个,此处为 div的ID为scroll_items的div,新加的内容会追加到此元素内部的最后面. //此处为需要调用的内容,可以为api接口,直接调用,然后那个页面可以分别用分页的方式显示数据.

提高首屏页面加载速度,解决vue-cli打包后单个文件过大的问题 - 请叫我宋某某 - 博客园

- -
本教程是针对vue-cli3以上的版本,其实原理都大同小异,这个demo为vue-cli直接创建的项目,并在main.js中引入了. 首先看demo打包后生成的文件大小,这个demo里面什么业务都没写、仅仅引入了几个包,chunk-vendors.js就达到了1.6M之多,如果是写入了庞大的业务后没做任何优化处理,那么这个文件可能会达到10M之多,这发生在我真实的项目经历中.

稿费问题

- Ruixing F - 创造社新任社长宋石男
据说现在全中国靠给平媒自由撰稿为生的,超不过1000人,而且不少处于相当窘迫的境况,就算想买根绳子来上吊,都买不起质量好的,结果绳子老断. 作为自由撰稿人的一员,我对此深有体会. 1999年国家版权局出台的基本稿酬标准,每千字30元-100元,至今仍为全国发行的报刊的“行业指导价”. 业内估计,全国报刊的稿费中位数大约也就在100元.

lvs 问题

- - 操作系统 - ITeye博客
1: LVS连接的持久时间. 1)同一个ip发来请求到同一台RS的持久超时时间. ipvsadm -A -t 192.168.169.100:80 -s rr -p 120     #该客户的请求120秒内被分配给同一台web.  2)一个链接创建后空闲时的超时时间(分别是:tcp的空闲超时时间、lvs收到客户端tcp fin的超时时间、udp的超时时间).