各大网站瀑布流简析与建议
很难说这东西是什么时候山寨到国内,反正现状就是一涌而上,到处是瀑布流。瀑布流的鼻祖是Pinterest,图片网。图片网令我想起了各种相册,如最著名的Flickr。但区区Pinterest一小站,能够独行特立,引领潮流,可见创新的力量。
瀑布流有两大元素,图片与无限拖。图片要力求鲜丽夺目,毕竟它的每一张图片就是一个广告。因为瀑布流就是一个广告墙,琳琅满目的广告,铺天盖地的广告。我们也不管这些广告是否互相干扰,反正它的本意就是给人一种逛街的感觉,因此这些网站的站名起得也很贴切,什么“蘑菇街”,“美丽说”,“发现啦”,或干脆叫“逛”!这些网站基本上是导购网站,面向的是女性用户,吸引眼球是非常重要的。为了保证图片质量,仅靠图片色度的分析算法是不行,人网推荐势在必行,我不相信,仅靠用户上传,“花瓣网”首页的图片质量能高成这样。
无限拖让我想起twitter,通过滚动不断加载新内容。不停的是改成“砖头”——瀑布流里面一块块的东西,以图片为中心。相应的技术也早已成熟,就叫scrollLoad,或叫lazyload。由于图片高度不一,砖头也高度不一,添加砖头还是需要一点技巧的。现在流行栏栅布局(相对CSS框架而言),因此瀑布流其实是分为几列的,每次添加砖头时,都往最短的那一列添加,以保证某一列不会太长,而另一列只有几块砖头。有关瀑布的注意问题,我在后面会说,现在大家先欣赏一下美图吧。
淘宝网
http://www.fengche.com/
三列,不过每块砖头含有多个图片。发出两次请求就必须通过点击才能加载更多砖头,这难道是出于节省流量的考量吗?脑残!失去了无限拖的爽快感了。
迷尚
http://www.mishang.com/
四列。发出三次请求出现分页栏,点击后回到顶端。没有注册或登陆,拖着拖着会出现弹出层提示注册或登陆,这有点像无良发廊,在理发时不停地问你办会员卡,你理得好自然会办!总之,这种行径就是恶心!我倒不知那PM是不是吃屎长大,连这么简单的道理也不知!
发现啦
http://faxianla.com/
自适应布局。经典的无限拖。会出现很长的图片。拖着拖着,还会在右下角出现一个标签云作推荐。没有注册或登陆,拖着拖着会出现弹出层提示注册或登陆,因此这PM也是吃屎长大的!类库采用KISSY与seajs,其他有jQuery的垃圾网有技术含量。注意灯箱效果时,后面的瀑布流还能缓缓流动。
知美
http://www.zhimei.com/
无限拖。能根据屏幕大小调整列数。个人感觉太密,与圈乐一样。它的loading,与发现啦,堆糖都是很有意思。
堆糖
http://www.duitang.com/
四列。发出十次请求后出现分页栏。砖头有很质感。
花瓣
http://huaban.com/
五列。并且将一个标签云作为瀑布流的第一块砖头放在左上角,有效利用空间。会出现很长的图片。无限拖。图片质量超高。里面包含的资讯比像其他瀑布流丰富多了!找不到明显的缺点,是我们学习的榜样。
拼范
http://www.pinfun.com/
最多六列,最小四列,视屏幕而定。如果图片还没有加载到时,会出现一段文字,让用户先看赏析。基本上没有什么缺点,就有六列时有点密,在我的1440*900下。
美丽说
http://www.meilishuo.com/
五列。没有注册或登陆,拖着拖着会出现弹出层提示注册或登陆,恶心。发出三次请求后出现分页栏。
萌胡同
http://www.menghutong.com/
五列。没有注册或登陆,拖着拖着会出现弹出层提示注册或登陆,恶心。没有发出请求。砖头都是PHP拼好放在页面上。通过点击分页栏呈现另一个瀑布。
蘑菇街
http://www.mogujie.com/
四列。没有注册或登陆,和上面的一个毛病,抄人家的,缺点也照搬了,与TX新闻客户端一个德性。发出8次请求后出现分页栏。
贝壳网
http://www.buykee.com/
四列。数据有限,总是让人看到页尾,非常不爽。
开心品集
http://jipin.kaixin001.com/
五列。无限拖。在自适应上处理得非常好。
推他
http://www.tuita.com/
为什么不叫“推她”?!四列,无限拖。个人很喜欢它那个top banner。一开始没有指定图片高宽,有严重的reflow。是传说中的“轻微博”……
爱采图
http://jipin.kaixin001.com/
六列。砖头非常简洁。
91美图网
http://www.91meitu.net/
尽是美女的瀑布流,中国最有前途的瀑布流! 内容为王,其他都是虚的!
蛋花儿
http://danhuaer.com/
扇贝
http://www.shanbei.com/
新版百度空间
http://hi.baidu.com/new/ncpjyw
优化建议:
- 瀑布流就是广告流,无尽的广告,图片的质量必须高。为了绿叶衬红花,网页的背景正如各位看客所见,基本上使用奶白色,搭什么也好看。当然你也可以像那样使用一个地板图片做背景,很有人文气质哦!
- 出于自适应布局的需要,页眉与页尾不如出现复杂的UI,比如弄个图片轮播。图片轮播的目的就是做广告,瀑布流也是一堆广告,有见过为广告做广告的吗?!而且这也不好实现自适应。
- 自适应无异乎是监听resize事件,但不能一resize就调整瀑布流,应该存在一个阀值。
- 使用绝对定位方式搬砖头太复杂了,对瀑布流的自适应尤为不利。应该用几个DIV作为列的容器,通过浮动方式构建瀑布。
- 虽然我们可以通过complete知道图片是否加载成功,并据此进行下一次砖头的插入操作,但还要考虑浏览器的reflow问题。实践中,遇到mac safari这样的SB浏览器,性能严重不济,因此还是叫高工资的后端人员多做一些活,提早把图片的高宽传给你吧。
- 瀑布流拖着拖着见底的问题,需要插入几块砖头后,人工干扰scrollTop的位置。
- 砖头是广告的载体,不应该把太多功能,至少不能让人一下子看到这么多东西,以免哗宾夺主。如果人们就是无限拖,没有停下来欣赏图片的话,说明这些广告做得太失败了!从技术层面来说,砖头的DOM结构要尽量简单,毕竟是无限拖,能显示越多的砖头就越好,不能拖一下就卡死了。
- 图片应该大,换言之,重视广告的效果。这也意味着,用户的注意力不会一下子被过小的广告图打散。
- 列不能过密。本来就是玩密集效应,踩钢琴线的。
- 严重反感拖着拖着出现注册界面!
- 严重反感拖着拖着出现分页栏,这种“微创新”一无是处,打断用户持续的体验过程。有时我在想,分页栏的出现是不是让人们看一下底部那个备案内容啊……
各大网站瀑布流简析与建议相关推荐
- 大数据时代下房地产市场变革,微构房产大数据信息化应用简析
导读 大数据是看待市场的全新角度,将极大的改变土地.工程.营销.售后.物业等房地产企业经营运作的所有流程.本文从房企市场.数据类型.数据价值.应用场景等方面简要分析大数据时代下的房企应用. 随着房地产 ...
- CNZZ网站流量统计原理简析
这是我的域名www.iyizhan.com,暂无内容,其中只有一个页面index.html, 在index.html上放置了如下的 js 脚本: <script src="http: ...
- react-native-waterfall-flow 高性能瀑布流组件
react-native-waterfall-flow React Native 高性能瀑布流组件 特性 性能方面表现突出,渲染速度快,滚动体验良好 无需手动设置item高度,一切计算工作由组件内部完 ...
- wpf 客户端【JDAgent桌面助手】开发详解(三) 瀑布流效果实现与UI虚拟化优化大数据显示...
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...
- 网站建设中最实用的扁平化2.0设计布局简析(干货)
近年来网站建设迎来了扁平化2.0新时代,这周研究一些扁平化2.0设计师的移动端设计布局形式,整理分析了一些常用的布局形态,有兴趣的朋友们就来了解下吧 常用的移动端设计布局形式:不规则弧线布局.层叠式布 ...
- 浅谈跨网站脚本攻击(XSS)的手段与防范(简析新浪微博XSS攻击事件)
本文主要涉及内容: 什么是XSS XSS攻击手段和目的 XSS的防范 新浪微博攻击事件 什么是XSS 跨网站脚本(Cross-sitescripting,通常简称为XSS或跨站脚本或跨站脚本攻击)是一 ...
- 说说瀑布流式网站里那些可人的小细节
瀑布流式布局,想必设计师们已不再陌生,随着pinterest自2011年开始走红,瀑布流式的布局被越来越多的网站所使用.花瓣网.堆糖网.布兜.发现啦,美丽说,蘑菇街,人人逛街,凡客达人等,复制Pint ...
- NDPIC极简昼夜瀑布流图片WordPress主题
介绍: NDPIC极简昼夜瀑布流图片主题是暖岛站长(阿叶)开发的一款极简免费wordpress瀑布流图片主题,这款主题可以说是为图片站长量身定做,瀑布流设计,界面优美大气,久看不腻. NDPIC主题在 ...
- 瀑布流网站数据如何采集解决思路方法
瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局. 视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 用户一眼扫过的快速阅读模式可以在短时间内获 ...
最新文章
- 【刘文彬】RPC的基础:调研EOS插件http_plugin
- Python 日期时间相关
- 5gh掌上云计算认证不通过_【众志成城战疫情】法官助理告诉你“移动微法院”、“掌上法庭”有多便捷、有多硬核~!...
- JS高级 - 面向对象3(面向过程改写面向对象)
- python selenium list index out of range
- warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8): No such file or directory
- C++之includeiostream与includeiostream.h
- dis的前缀单词有哪些_学好单词得靠词根词缀来帮忙
- 华为笔记本键盘说明图_电脑键盘的这些功能键的真正用法,你全都了解吗?
- tcp流式传输_收听互联网广播以及下载和流式传输免费音乐的最佳网站
- UG模具设计工程师需要哪些条件?潇洒UG模具设计
- java工厂模式应用场景_详解Java设计模式之《简单工厂模式》
- 诺基亚5320XM 上的最好的手机浏览器,UCWEB 6
- 鸿蒙系统与苹果系统,华为的鸿蒙系统和苹果的操作系统,有什么区别?
- 基于Atmel128A单片机的MP31.0设计
- vue2实现京东商城
- js正则验证身份证号码是否真实有效
- 智能云解析DNS健康监测是如何实现的?-中科三方
- 动作捕捉在动物神经与运动研究领域的应用
- SQLite DBRecovery 恢复引擎实现微信等一些手机聊天工具删除记录的快速恢复
热门文章
- 重大计算机学院院标,计算机学院召开2021年国家自然科学基金申报动员会
- 医学图像配准之形变场可视化(绘制形变场)
- lvds 共模电感_一文了解共模电感/共模信号/差分信号
- android+浏览器+主页,android 更改浏览器默认主页
- PHP类实例教程(二十):PHP类接口的实现接口
- 搭建centos虚拟机
- OpenCV分水岭watershed的应用注意
- 肉鸡的俘虏!一个菜鸟木马黑客的自白
- 模拟google电吉他2.1GA发布,可录音支持键盘。强势更新!!!
- macbook 备份系统