数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类 全部分类技术牛文全部分类教程最新 网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava 新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销 开发数据库服务器系统虚拟化云计算 嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

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

日期:2016/9/28 14:41:00 来源:本网整理
s">

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

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

tf201608067

△ Dribbble

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

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

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

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

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

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

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

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

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

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

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文 s">

分页式设计还是瀑布流滚动设计?信息量大的网站取舍指导

作者:佚名 字体:[增加 减小] 来源:优设网 时间:08-08 11:16:17 我要评论

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站 ">

如果你的网站信息量巨大,你会选择分页式设计还是瀑布流滚动设计?下面就这两种设计方式的优缺点比较,给大家分析一下到底哪种适合你的网站。今天这篇好文详细分析了各大信息流网站(谷歌、Pinterest、淘宝)的做法,列举了这两种方式的优缺点和适用场景。一篇精悍简练的干货文,来收!

前阵子工作中,刚好有做到Log历史纪录的设计,窗体应该要采用哪种设计策略,也引起一阵讨论。无论是电子商务网站、搜寻结果、图片浏览、历史纪录等等,只要是内容信息量大时,设计师总是会面对到同样的问题。

来看看Google的设计,它在一般搜寻时,采用Pagination(页码)的方式,可是在图片搜寻时,却使用Infinite scroll(无限滚动,瀑布流)。为什么会有如此的差异呢?

tf201608064

△ Google Search

tf201608068

△ 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浏览也比点击来得方便。

tf201608065

△ 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长度和位置会不停变化,失去提示作用。

tf201608063

Scroll bar往往会越变越小,位置也会一直更动

5. Footer(页脚)变得很难使用,甚至无法使用:

当滚轮滚动时,页面会自动加载更多内容,把Footer再往下推,消失于窗口中。常常有这样的经验,原本想要阅读Footer的信息,结果看到一半,就被加载的信息推走,我又往下scroll,然后又再度被推走,整个无法控制。有兴趣的朋友,可以试着和Dribbble Designers页面,与Footer玩追逐战。

tf201608067

△ Dribbble

不过其实为了解决上述问题,Load more按钮会是一个解法。当Scroll到底,网页加载一定数量的东西后,便不再自动加载,必须按Load more,才会又再一轮的载入。这可以解决无法在一定数量内,来回观看、占用过多浏览器资源、Footer无法使用等问题。 上一页12 下一页 阅读全文

  • 本文相关:
  • 盘点下那些为O2O运营带来方便的插件
  • 中小企业为什么要做网站?做网站的几大作用
  • 微信公众号怎么做推广? 微信公众号快速曝光的教程
  • 网红经济风起云涌 传统老站长该如何转变自己的思路
  • 为什么选择OpenStack?OpenStack云计算搭建方案解析
  • 什么样的文案才是好的文案?
  • 互联网大时代数据究竟是什么?有什么用?
  • 为什么80%的运营注定了只能打杂?做好运营需要具备哪些?
  • 企业如何做好网络营销方案?七招学会制作网络营销方案
  • 汽车之家开发团队使用代码发布系统的经验总结
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved