站长之家,中国草根站长新闻、建站经验、素材资源交流平台!
分类导航

站长新闻|网站运营|建站经验|网站优化|站长资源|站长源码|

服务器之家 - 站长之家 - 建站经验 - 分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

2021-10-21 22:29优设网 建站经验

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

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

来看看google的设计,它在一般搜寻时,采用pagination(页码)的方式,可是在图片搜寻时,却使用infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

△ google search

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

△ google image search

其实pagination和infinite scroll有各自的特性,适合在不同的情境。pagination把数据分成一页一页,下方有页数或是指示可以点击换页,让人有停顿的时间。而infinite scroll则是将内容都放在同一页,当滚轮滚到页面下方时,会自动加载新的内容,无需点击换页。

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

infinite scroll 优点

1. 流畅的体验,可以持续浏览内容:

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

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

2. 操作简易快速:

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

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

△ pinterest

infinite scroll 缺点

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

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

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

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

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

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

4. scroll bar的长短及位置,无法正确表达内容长短:

过去还没有infinite scroll时,无论是网页,或是desktop software,scroll bar长度具有暗示数据内容多寡的效用,我们也会看scroll bar的位置,去了解还剩下多少数据在下方未读。但infinite scroll因为页面长度会随着scroll行为不停增长,scroll bar长度和位置会不停变化,失去提示作用。

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

scroll bar往往会越变越小,位置也会一直更动

5. footer(页脚)变得很难使用,甚至无法使用:

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

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

△ dribbble

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

延伸 · 阅读

精彩推荐
  • 建站经验网站建设初期的SEO优化定位

    网站建设初期的SEO优化定位

    根据 网站建设 的性质我们可以分为两种:一种是产品的商城,一种是做服务的网站。每一个网站在建设之前都会考虑行业的竞争对手的手法还有自身行业...

    站长之家9952021-01-28
  • 建站经验关于站内搜索分析的重要性和方法

    关于站内搜索分析的重要性和方法

    SEO!PPC!内容规划!转化率啊!?当我们殚精竭力、勤勤恳恳劳作,加以虔诚的态度,拜请到各位访客,可90%的人都洒脱的挥一挥衣袖不带走一 片云彩,让咱们这...

    建站教程网9312021-06-09
  • 建站经验网站更换服务器有什么影响

    网站更换服务器有什么影响

    在我们日常维护 网站 的时候,可能会由于网站打开慢或者网站被攻击, 服务器 内部故障或者外部的原因都会导致我们的网站出现打不开的现象,有时我们...

    东德SEO4182020-12-04
  • 建站经验网店运营要学会两条腿走路:网店设计和营销

    网店运营要学会两条腿走路:网店设计和营销

    百度重新收录淘宝店,对于运营淘宝店的店主们应该是一个好消息...

    开店教程网3162020-08-21
  • 建站经验网站中了木马怎么办

    网站中了木马怎么办

    网站中了木马怎么办?网站被黑中了木马也不算是比较稀奇的事情,不过大多数人是遇不到的,一般出现这种情况的网站都是一些比较高端的企业网站,或者...

    站长之家4802021-09-24
  • 建站经验如何在百度知道发外链的技巧

    如何在百度知道发外链的技巧

    百度知道作为国内最大的互动问答平台,每天云集了数以千万计的访客,而且百度关键词搜索结果中,百度知道页面也有着不错的排名,这就让了不少站长...

    站长之家9192021-07-03
  • 建站经验腾讯高手都在学的「感知性模式设计」是什么?

    腾讯高手都在学的「感知性模式设计」是什么?

    如果沿用到互联网方面的设计,那么感知性模式的例子可能包括:文字信息、版式、配色、布局、插图、图标、形状纹理、间距、交互或者动画等等,这些...

    优设7802021-08-03
  • 建站经验个人站长怎样选择做网站

    个人站长怎样选择做网站

    做网站是为了赚钱,我相信没人会反对,网站有了流量,才能赚钱,本篇文章将为大家介绍做站方向的取舍,使流量来的快,竞争小。 ...

    建站教程网5232020-09-03