网站信息量大，该采用分页式设计还是瀑布流滚动设计？

庖丁开发：专注于互联网项目开发。

前面丁丁讲怎么去设计一个优秀的官网时，有丁友后台留言问在信息布局方面，如果信息量很大（特别像电商网站），应该怎么取舍？那丁丁今天就介绍常用的两种设计方式：分页式设计与瀑布流滚动设计。

一、分页式与瀑布流滚动设计

分页式设计，顾名思义就是把信息分页展示，如下图谷歌搜索：

谷歌搜索分页式设计

瀑布流滚动设计就省去了点击的动作，当用户浏览完当前页面信息只需继续滚动上拉便能自行加载，在信息内容 app 端很常见，下图是谷歌搜索图片时的瀑布流滚动设计：

谷歌图片瀑布流滚动式设计

有没有发现，同样是谷歌搜索，为什么在搜索信息跟搜索图片时却采用了不同的设计？要解决这个问题，丁丁先来分析下这两种设计的优缺点。

---

二、优劣势对比

分页式把数据分成一页一页，下方有页数或是指示可以点击换页，让人有停顿的时间。而滚动式则是将内容都放在同一页，当滚轮滚到页面下方时，会自动加载新的内容，无需点击换页。

| Pagination（分页式）优点

1）有停顿，让使用者有较佳的控制感
阅读完这一页，需要点击下一页继续阅读，这里有了停顿，让用户决定是否需要继续阅读下一页内容。
而在找寻时，用户可以清晰知道自己当前所处位置，已经找了多少页了，给用户一种控制感；当用户到达最后一页时，甚至用户会有一种任务完成的成就感。

2）快速查找过往信息
因为丁丁写文章经常要查找资料，有时候要查找过往信息，所以我会选择性去跳页根据页面信息判断我要找的资料的大概位置。
这种场景下滚动式设计就做不到，只能一直加载，中间加载了很多不需要的信息，也增加了用户的等待时间，体验很不好。

比如丁丁记得几天前发过什么文章有一张不错的图，那我就可以根据凭记忆去猜测其大概在哪一页了。

---

| 滚动式设计优点

1）操作简易快速：
操作上来说，用户已经习惯上拉加载的交互方式，不用过多瞄准点击的操作，只需滚动，就能有新的内容，操作效率较佳。而且在手机上，滚动浏览也比点击来得方便。
2）流畅的体验，可以持续浏览内容
在滚动的同时，网站其实也在悄悄开始预加载窗口下方的内容，用户可以无缝浏览，创造沉浸式体验，特别是在这个信息泛滥的时代，这也是目前绝大多数内容类 app 使用的设计方式。
另外滚动式设计架构也相对扁平，适合展示相同阶层架构的东西，而图片就是最好的内容物，因为视觉的信息比较文字更快被人所接收，我们总是能很扫射完图片，Pinterest 就是最好的例子。

Pinterest

三、总结
看完两者各自优点，两者缺点也是相对的。这就很好解释丁丁在介绍两者的时候举的谷歌处理信息跟图片时采用不同的设计方式了。

分页式是 PC 端比较常见的设计，因为需要点击才有下页内容，让人有停顿的时间，适合用在目标导向、一些需要思考决策、有目的性的活动，例如搜寻商品，或是找寻数据。

而滚动式则适合快速且随意浏览的情境，也因为结构较为扁平，适合放同性质的内容。由使用者产生的内容以及图片内容都相当适合瀑布流滚动式设计，特别是在移动端。