瀑布流使用中遇到问题研究及解决

① 滚动加载的必要性
在Ajax技术成熟的今天,相信用任何JS框架甚至自己手写Javascript代码实现瀑布流的滚动加载数据据已不再是一件难事;
滚动加载,这个是使用瀑布流的充分必要条件。
其中非常需要注意的一点是:避免加载重复的数据
加载重复数据的两个原因以及解决办法:
1). 新数据的发布会造成加载数据的重复,通过对SQL加入时间戳,进行判断避免重复加载数据;
2).Javascript代码的重复执行,在某处设定一个阈值来避免重复执行ajax加载代码;

② 分页不分页?如何分页?
不是所有用户都是搞IT的,QQ+MSN+旺旺+卡巴+迅雷+N多强盗程序是很大一部分女性电脑使用者的内衣裤;
当客户端使用IE或者Safari这种吃内存的浏览器时,加载到50页以上后,你就能想想出为什么她们总是抱怨自己电脑慢了;
需不需要分页,答案是肯定的,不仅“需要”,还需要对分页功能进行优化和重布局;
大多数瀑布流布局型的网站,在数据加载到第4/第 5页的时候,会出现分页控制链接;
比较前卫的一种做法是,在网站整页的左右,加上长条型按钮,直接进入下一页/上一页,对于那些直接想进行跳跃式翻页阅览的用户无须在拖动那几次无谓的滚动条操作了;可谓简单实用,如图(迷尚网):

③.新窗口打开
新窗口打开,新窗口打开,新窗口打开……还是新窗口打开;
为什么?因为①+②

④.宽度几何?
先来看下列一组数据:

首先可以确定的是,瀑布流布局的网站,图片普遍的宽度范围在192px~200px之间(蘑菇街225px;逛210px);
而瀑布流容器的宽度在221px~231px之间;
图片以及容器的宽度,决定了页面能展示多少列的图片;
而在1024×768的分辨率下浏览器的显示页面宽度分别是(默认):
IE: 1003px;
FF:  1005px;
OP: 1001px;
所以,1000px为一个安全数值,当年960px布局(950px布局)也就是这么产生的(传送门请点击这里);
在老式显示器下1024×768分辨率下,这几种宽度格式,都没有问题;
然而老的问题解决了,新的问题却产生了;
当19′宽屏,甚至22′宽屏都进入了白菜价年代,浏览器的页面可视宽度也有了显著的提高:
1680×1050分辨率下:
IE9: 1664px;
FF: 1664px;
CH: 1664px;
OP: 1664px;
太完美了,惊人的相似1664px;
7列布局成为了大显示屏瀑布流的主流布局形式,充实饱满但有显得有些压抑,缺乏空间感,如图(花瓣):

而4列/5列的瀑布流布局,会让人觉得信息量缺乏视觉空洞,如图(堆糖):

6列的布局,无论从视觉效果,还是信息量,都表现的非常完美,左右两侧可以放心添置一些功能性按钮(回顶部/下一页/问题反馈等)也不会遮住图片而影响浏览体验,如图(美丽说):

⑤.图片的高度
如果你考虑对你的网站使用瀑布流布局,那么在建站之初,无论在数据库设计上,还是后台程序设计上,在用户上传图片脚本处,就应该记录图片的高度和宽度;
但是,很遗憾,很多网站在这之前并没有考虑到这点;
如果这样,解决方法只有一个,那就是牺牲前端的性能,用JS来判断图片的高度后,再执行瀑布流布局的排版。
这两片文章将会对你很有用《再谈javascript图片预加载技术》《大图片,请别把我的页面撑破了——不,一秒都不行
当然,为了长远考虑,数据库和后台程序的升级以记录图片的宽和高是必须的哟,这将大大改善浏览性能 :-D

(完)

文章写的很仓促,基本是本人在近期瀑布流项目开发中遇到一些问题后,思路想法和解决方案,希望能够抛砖引玉,交流和互动可以猛击这里

2012 年 5 月 2 日 吴技术, 吴观点

瀑布流该怎么用?

瀑布流这也好,那也好,于是乎各大网站的产品经理一夜间都好似着了魔似得,全部给上瀑布流;
那么瀑布流到底该不该用,该怎么用呢?

首先就要从用户的浏览行为开始说起;
当用户到达一个Web页面的时候,用户的浏览行为有两种最基本的可能,有目的性的检索和无目的性的浏览;

对于缺乏明确目的性的浏览行为,更适合使用瀑布流作为Web展现形式;
相反的,对于有明确目的性的浏览行为,就比较适合使用垂直线性的浏览模式了;

Pinterest“瀑布流”背后的心理学】这篇文章中提到:
人阅读文字是一种串行模式,必须一个词一个词按确定的顺序线性地读下来;
而人观赏图片是并行模式,他可以在众多图片中快速地扫视,然后选择其中自己感兴趣的部分,这种方式比线性模式找到感兴趣内容的效率要高得多。
因此瀑布流更适合使用在图片的展示网站中,而不适合用于文本信息的展示。
以上内容,肯定很多人会觉得我白说了,其实啦,是有点白说,用瀑布流的布局模式展现图片,已经被当下很多产品经理们视为一种默认的展现方式了,那么请稍安勿躁,继续往下看;

当用户把图片作为主要的浏览对象,文字在瀑布流的布局中就自然成为了辅助浏览的信息
少量的文字能非常好的起到辅助用户检索信息的作用,但是,过多的文字将会给用户检索信息造成负担(同样的,大用户头像和过多的操作按钮也会造成这种负面效果);
除了图片信息的展示,很多产品经理会考虑把基于图片而产生的评论等信息,也放置在瀑布流的布局中,
甚至还要在瀑布流页面内,提供更多的交互功能和按钮(诸如评论/喜欢/加好友/收藏/关注/转发….),这-_-! 我只能说,慎重,再慎重;

这里要赞一下“” ,以文字主题作为仅有的辅助阅读信息,交互按钮也只有一个,那就是“喜欢+1”,图:

但是我认为“逛”有一个浏览缺陷,那就是对于大屏幕的用户来说,没有做到自适应屏幕宽度;

两边的空白,会使用户发生多余的下拉滚动操作,同时,同屏幕展现的图片信息量也少了,不知这是考虑到客户端带宽问题还是为了减少用户检索复杂度而故意设置的,这是为什么呢?
瀑布流布局浅析 这篇文章中指出了三种瀑布流的实现方式,自适应宽度的瀑布流布局形式在技术层面上应该是没有难度 :-D

大多数瀑布流网站也都使用了自适应宽度的排列方式,总结了下开启自适应宽度和未开启自适应宽度的瀑布流网站如下:
启用自适应宽度的网站有:花瓣美丽说拼范迷尚网发现啦蛋花儿
未启用自适应宽度的网站有:堆糖蘑菇街贝壳网

未完待续……

2012 年 5 月 1 日 吴技术, 吴观点, 吴评论

如果说Ajax技术是迄今为止,对互联网数据体验做出最伟大贡献的前端技术;
那么瀑布流(Waterfall)布局就是迄今为止,对互联网视觉体验做出做伟大改变的前端技术;

如果你还不知道啥是瀑布流,请看这里 http://pinterest.com/ 这里 http://huaban.com/ 或者这里 http://www.duitang.com/ 还有下图:

为什么要用瀑布流?
前任支付宝首席用户体验规划师白鸦认为:一个是因为条件的成熟(带宽网速),还有一个就是消费者越来越懒。瀑布流让人们的互联网浏览模式由“搜索”转变为“发现”。

不知道大家有没有发觉,瀑布流的浏览方式有两种显而易见的优点。(在保证浏览器和网速不卡的前提条件下)
1.和传统的垂直线性浏览方式相比,瀑布流更容易让人主动的去看更后面的内容(特别是在和ajax技术结合使用后);
2.和传统的垂直线性浏览方式相比 ,瀑布流的浏览目的性降低了,这也在某种程度让数据按匹配度的排序就显得不这么重要了;

这两点优点很大程度上是由于瀑布流的交错型布局而产生的;
垂直线性型的布局模式 ,对用户的视觉影响往往是从上至下,从左往右;
而在瀑布流布局模式下,用户的视觉就变成了发散性扫描,图片的颜色、轮廓,整体美感让用户可以在更短的时间内找到自己想要的信息;
打个可能不太恰当的比方;
垂直线性的布局模式下,用户的视觉处理相当于高频率、单线程的CPU;
而瀑布流的布局模式下,用户的视觉处理更像是一个低频率、多线程的CPU;

未完待续……

2012 年 4 月 29 日 吴技术, 吴观点