网站信息量大，分页式设计还是瀑布流滚动设计如何选择?

帝国E客 · 发表于 2016-9-30 13:56:50

当页面内容信息很多时，设计上应该使用分页，还是瀑布流无限滚动的方式呢？今天这篇好文详细分析了各大信息流网站（谷歌、Pinterest、淘宝）的做法，列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文，来收！

前阵子工作中，刚好有做到Log历史纪录的设计，窗体应该要采用哪种设计策略，也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等，只要是内容信息量大时，设计师总是会面对到同样的问题。

来看看Google的设计，它在一般搜寻时，采用Pagination（页码）的方式，可是在图片搜寻时，却使用Infinite scroll（无限滚动，瀑布流）。为什么会有如此的差异呢？其实pagination和Infinite scroll有各自的特性，适合在不同的情境。Pagination把数据分成一页一页，下方有页数或是指示可以点击换页，让人有停顿的时间。而 Infinite scroll则是将内容都放在同一页，当滚轮滚到页面下方时，会自动加载新的内容，无需点击换页。

简单分析一下Infinite scroll的优缺点

Infinite Scroll 优点

1. 流畅的体验，可以持续浏览内容：

在滚轮滚动的同时，背后也悄悄开始预载窗口下方的内容，用户可以无缝阅览，比较容易沉浸其中，不像pagination，点击完下一页之后，需等待页面载入。它其实适合运用在没有特定目的的活动上，无聊的时候，可以打发时间的随意浏览，例如Facebook News Feed。

Infinite Scroll架构也相对扁平，适合展示相同阶层架构的东西，而图片就是最好的内容物，因为视觉的信息比较文字更快被人所接收，我们总是能很扫射完图片，Pinterest就是利用Infinite Scroll的特点，不停给予各式图片，供设计师快速找寻灵感、给予源源不绝的刺激。

2. 操作简易快速：

不用过多瞄准点击的操作，只需滚动，就能有新的内容，操作效率较佳。而且在手机上，scroll浏览也比点击来得方便。Infinite Scroll 缺点

1. 难以回溯、确认数据位置：

在一个超长的页面中，如果要再往回找自己之前看过的东西，会很难寻找，不知道它的位置，不像pagination，可以记得内容是在第几页。

2. 找寻想要的特定信息时，较无效率：

无法略过不必要的内容，直接跳页看。自己在拍卖网站购买物品的经验是，下完关键词，选择价格排序后，往往最前面几笔和最后面几笔的数据，基本上都是和自己想买的对象不相关(有些卖家故意会用0元或99999999元，争取最佳排序位置)，这时候可以跳页就变得重要，当然多下一些过滤，也可以帮助找到数据。

3. 占用浏览器过多的资源：

单一个页面中，不停加载新的内容，容易导致浏览器负荷过高，网页效能降低。

4. Scroll bar的长短及位置，无法正确表达内容长短：

过去还没有infinite scroll时，无论是网页，或是desktop software，Scroll bar长度具有暗示数据内容多寡的效用，我们也会看scroll bar的位置，去了解还剩下多少数据在下方未读。但Infinite scroll因为页面长度会随着scroll行为不停增长，scroll bar长度和位置会不停变化，失去提示作用。5. Footer（页脚）变得很难使用，甚至无法使用：

当滚轮滚动时，页面会自动加载更多内容，把Footer再往下推，消失于窗口中。常常有这样的经验，原本想要阅读Footer的信息，结果看到一半，就被加载的信息推走，我又往下scroll，然后又再度被推走，整个无法控制。有兴趣的朋友，可以试着和Dribbble Designers页面，与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题，Load more按钮会是一个解法。当Scroll到底，网页加载一定数量的东西便不再自动加载，必须按Load more，才会又再一轮的载入。这可以解决无法在一定数量内，来回观看、占用过多浏览器资源、Footer无法使用等问题。

Pagination优点

1. 双向互动，让使用者有时间思索、决策：

阅览完一页后，因为还要点击下一页的关系，有机会停顿一下，使用者有个喘息的机会，去思考是否还要继续看下一页。不像infinite scroll，一直出现新的内容，不停被喂养信息。

2. 给予使用者较佳的控制感：

在找寻时，pagnation的分页，会让使用者知道已经找了几页。有研究指出到达页面底端时，有种任务达到一个段落的感觉，会让使用者有种愉悦的成就感和控制感。

3. 快速查找过往信息：

相信大家都有过找寻一些历史消息的经验，可能找了几页数据，我们就可能10页10页这样跳，大概会抓说可能10页就是几天的讯息，可能可以利用页数，大概抓到资料会在第几页哪个位置。但是infinite scroll就无法做到这件事了，如果要找比较远的数据，就必须一直scroll到底再等待加载，中间加载了许多我们不需要的信息，就为了看比较久远的数据，强迫我们必须经历那个过程。

另外，有时候我们查找一些数据，需要再跳回去看的时候，我们大概会依稀记得之前看到的数据，大概会是在第几页，除了帮助记忆外，可以让我们可以更快跳到想要的内容上。Infinite scroll因为scroll bar长度及位置的不停变动，无法像pagniation易于定位。

湮玲 · 发表于 2016-10-9 00:48:24

他们的营销型网站做的非常不错，服务也很好。第一推荐的哦。可以去盯下。

SEO外包 · 发表于 2016-10-9 01:45:28

现在在帝国网络做整合营销，员工服务态度很好，一有问题马上解决，技术也很牛，排名不错，效果我还是非常认同的！

淑榈 · 发表于 2016-10-9 03:00:08

很不错的公司，服务很全面，很细心，很多问题都处理的不错，朋友也介绍过来了，

黎晓兰 · 发表于 2016-10-9 03:04:43

刚和他们合作不久，服务态度非常好，seo、网络推广技术也很专业，选择了一家专业的整合营销公司，支持帝国网络，点个赞！

SEO优化 · 发表于 2016-10-31 19:38:00

不错不错，看好帝国网络

戚晓畅 · 发表于 2016-10-31 23:41:08

服务很不错的一个公司,从签约到服务期间服务一直很好，准备续签了，特别表扬一下给我做竞价服务的小张，她帮我优化以后，效果确实很明显，赞！

SEO服务 · 发表于 2016-10-31 23:49:25

很感谢帝国网络的刘总和他们团队、给我留下了很深刻的印象，希望我们接下来的合作一直愉快下去！

窦燕珺 · 发表于 2016-11-1 02:23:38

这个网站里面内容做的真好。下次我做网站也要做这样的。版面也很漂亮，跟其他人的网站看起来很独特。

蕴朗 · 发表于 2016-11-5 02:10:14

楼主是网站优化界的高人

		自动登录	找回密码
密码			立即注册

网站信息量大， 分页式设计还是瀑布流滚动设计如何选择?

网站信息量大，分页式设计还是瀑布流滚动设计如何选择?