分页器与瀑布流？UI设计师别再傻傻分不清啦！【UI设计小知识】

一. 分页器

网页分页的灵感来源是书本，书本上的分页主要原因是书本的大小限制了内容的承载。那电脑网页可以无限的向下放内容，为什么还需要进行分页呢？

1. 分页器的组成

1.1. 基础要素

无论是现实中还是电子屏幕上，分页首先应该具备的元素是页码（页码分页也是同书籍一样的分页方式）。

我们日常生活中阅读书籍有三种场景：

1）逐页阅读；

2）跳页阅读；

3）有时候也会去看一下这本书一共有多少页。

分页用于网络上也具备这些能力。

所以页码控件可以分为以下几个部分：

a.数字页码：方便快速定位，通常会列出首页、当前页与前后几页的页码数字。

b.逐页翻页：即上一页、下一页，避免用户思考，便于用户操作。

c.总页码数：告诉用户一共有多少页。

d.跳进翻页：是指可以跳到最后一页、首页、后十页、任意一页等。

e.设定条数：有些表格的页码可以设定当前展示条数。

迷你版本：对于翻页器还可有一些迷你版本，便于在网页宽度不允许的位置使用。

2.分页的特点和场景应用

2.1.让用户具有控制感

能获取到自己当前浏览的内容的相对位置，对接下来即将出现的内容量有预期。

分页将内容划分为单独的页面显示，通常用户在分页显示中知道内容数量是多少，总数量是多少，什么时候可以浏览完毕。分页操作的界面能够让用户做到胸有成竹，感受到控制感，所以我们在需要用户对数据进行操作管理的页面使用分页，因为这时用户往往对内容全局有很强的控制感，同时也兼有快速定位查找的需求，所以分页是更适的选择。

2.2.便于定位查找

分页能快速帮助用户到达首页末页或内容的任一位置。

分页显示可以方便用户去寻找特定的内容，用户再次打开页面，还是能快速找到对应的内容，能帮用户明确所在位置，因为往往用户能通过大概位置快速找到之前浏览的内容。并且能够对于整个阅读的进度，加载多少内容都会是在精确的控制范围内。这点可以参考搜索引擎的搜索结果页、购物网站产品筛选页等。

另外在搜索或是查看商品列表时，内容的多少根本无法预期，搜索引擎等使用分页也有让用户具有控制感的作用。

2.3.降低服务器负载

在检索数据量庞大时，分页可以降低服务器负载。

数据库就需要一定时间的处理，页面在展现的时候为避免用户等待期过长可以使用分页，数据库分页加载可以尽快的将一部分结果反馈给用户，避免用户焦虑。所以分页我们也常常应用于带有筛选的信息表格中，当信息量非常多的时候，使用分页是最佳选择。

2.4.可以暴露更多信息

当列表具有分页时，就意味着整个页面是有尽头的，无论是有其他重要的信息在界面中要展现，还是更多的暴露footer，都是可行的。

例如电商使用分页后可以在页面底部增加推荐商品或营销广告等，或音乐推荐等网站页脚部分也会暴露更多的内容给用户。

以下是我们可能会遇到的情况之一，展示包含用户操作和需要用户感知数据量的表格外，还有其他重要信息需要展示，我们就需要用分页的方式呈现，以暴露更多的信息。

二. 瀑布流

1. 瀑布流的概念

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

2. 瀑布流的分类

瀑布流分页分为三种，一种是自动瀑布流，一种是手动瀑布流，还有一种是自动与手动相结合。

2.1. 自动瀑布流

自动瀑布流是移动互联网爆发后兴起的交互方式。社交网络、碎片化时间的概念引入，很多网站将首页通过时间线的自动瀑布流呈现，例如：facebook、twitter等。

用户上网的目的不再是搜索有用资料，而是随便看看、消磨无聊时间。上网习惯的改变自然带来了瀑布式加载的流行。

2.2.手动瀑布流

手动瀑布流指被动获取数据，需要手动点击“加载更多”来获取更多内容。

优点：手动加载可以暴露页面底部更多信息。

缺点：不便于频繁查询较旧的信息；同时相比自动瀑布流的形式，需要额外的点击。

使用场景：当页面底部存在的内容过多时，需要手动触发“加载更多”获取更多内容。

2.3自动与手动相结合

自动与手动相结合指的是前几次采用的自动加载，之后需要点击“加载更多”来获取更多数据。

这是当底部内容过多时，采用的一种折中方案。前几次的自动加载已经足够展示最近信息，同时保证用户浏览的流畅；之后的采用点击加载更多的样式，保证底部内容不被用户忽略。

三. 分页与瀑布流的选择

分页控件实际上是给网站的内容创造了一个自然的停顿，若这个停顿运用得好，可以让产品更有节奏感。将大篇幅的内容分成小块，显示在单独的连续页面上，便于用户理解和查找。可以让用户清楚的知道，自己所要浏览的内容到底有多少、已经浏览到哪个部分、还剩余多少。分页可以使用户对所浏览的内容有清楚的预期。

但是也有一些问题，例如当用户浏览完一页的内容时，就必须停下正在进行的阅读，通过点击进行跳转来获取更多内容，而这个停顿会在一定程度上打断用户的思路。尤其是电商类的网站，在遇到分页时，用户很有可能会思考：是继续浏览呢？还是离开呢？这个时候往往会流失一部分用户。

而瀑布式的连续加载是一个与分页相反的交互模式，信息之间没有明显的界限或是停顿。当页面滚动到底部，新的信息就会被自动加载进来。各种社交网络常用瀑布式，用户不会被打断，可以顺畅的一直浏览下去，沉浸其中。

我们可以看到最大的差异点在于：对比瀑布流的无穷无尽，用户在分页显示中知道内容数量是多少，总数量是多少，什么时候可以浏览完毕。

其实两种没有哪种方案是绝对的「体验最好」，分页和瀑布式无限滚动浏览的选择均是视场景而定，且各有优劣势。

以下是简单的参考意见：

• 无限滚动更适合用于按时间线快速浏览内容和发现内容的场景，所以社交或内容型社区的信息流通常都选择无限滚动。
• 分页更适合于操作、管理大量条目，且更需要专注、严谨的场景，所以工具类、检索类、归档页面，管理后台更倾向于用分页。
• 移动端更适合于使用滚动手势进行浏览。