网站优化

 找回密码
 立即注册
网站信息量大, 分页式设计还是瀑布流滚动设计如何选择?
查看: 10782|回复: 42

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

帝国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 | 显示全部楼层
楼主是网站优化界的高人
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|

GMT+8, 2024-12-22 20:07网络网站优化公司

网站优化公司© 2006-2024 wangzhanyouhua.net Search Engine Optimization By 网站搜索引擎优化公司

快速回复 返回顶部 返回列表