手机移动网站瀑布流式布局

萌萌哒的小狐狸欢迎你的观看嘻嘻!

瀑布流是目前比较流行的一种网站页面布局,虽然在电脑端也有应用,但总体来说在移动端网页或者APP上会应用得更加广泛,比如说淘宝搜索商品页面,页面向下滚动,网页就会不断加载数据块并附加至当前页面尾部。最早采用此布局的网站是Pinterest,后来很多网站都开始采用这种形式。瀑布流的风格操作简单,无需鼠标翻页,同时图片布局错落有致,环节视觉疲劳,显得不拘一格。

一、瀑布流网站特点

蘑菇街在加入瀑布流元素之后PV暴涨。瀑布流的好处大致有:提高发现好图的效率以及图片列表页极强的视觉感染力。

更符合女性消费者,对她们来说,瀑布流的图片就像商品,就像逛街、就像扫货。女性只要不断往下拉伸页面,就像置身在一条没有尽头的购物街,没有层高限制的商场中体验,更不用提pinterest有更好的体验。

它的前置性条件:

· 浏览行为缺乏特别明确的目的性,以“逛逛”“扫街”的心态为主

· 对复杂的信息索引无依赖性

· 用户以图片为首要检索对象,瀑布流页面的配文只是相当次要的辅助信息

· 竖图比例较高

· 图片平均质量较高

· 图片的风格气质趋于相似(也是Pinterest始终采取邀请制的原因)

二、瀑布流网站的应用

瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳,同时给人以不拘一格的感觉,切中年轻一族的个性化心理。

国内类Pinterest网站也如雨后春笋般出现,已知网站超40家,类Pinterest网站有四种,一是电商导购,如想去网、蘑菇街和美丽说、好享说、依托于淘宝平台;二是兴趣图谱分享,如知美、花瓣等;三是在细分垂直领域,如针对吃货的零食控、针对家居行业的他部落等。四是服装款式设计资讯平台如看潮网等等。

1、布局优点

有效的降低了界面复杂度,节省了空间:我们不再需要臃肿复杂的页码导航链接或按钮了。

对触屏设备来说,交互方式更符合直觉:在移动应用的交互环境当中,通过向上滑动进行滚屏的操作已经成为最基本的用户习惯,而且所需要的操作精准程度远远低于点击链接或按钮。

更高的参与度:以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上,从而让他们更乐于沉浸在探索与浏览当中。

2、布局缺点

有限的应用

无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。例如,在电商网站当中,用户时常需要在商品列表与详情页面之间切换,这种情况下,传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。

 额外的复杂度

那些用来打造无限滚动的JS库虽然都自称很容易使用,但你总会需要在自己的产品中进行不同程度的定制化处理,以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐,你必须做好充分的测试与调整工作。

找不到页脚的抓狂

如果使用了比较典型的无限滚动加载模式,这就意味着你可以和页脚说拜拜了。

最好考虑一下页脚对于你的网站,特别是用户的重要性;如果其中确实有比较重要的内容或链接,那么最好换一种更传统和稳妥的方式。

千万不要耍弄你的用户,当他们一次次的浏览到页面底部,看到页脚,却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时,他们会变的越发愤怒。

SEO

集中在一页当中动态加载数据,与一页一页的输出相比,究竟那种方式更利于SEO,这是你必须考虑的问题。对于某些以类型网站来说,在这方面进行冒险是很不划算的。

关于页面数量的印象

其实站在用户的角度来看,这一点并非负面;不过,如果对于你的网站来说,通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略,那么单页无限滚动的方式对你并不适用。

三、常见瀑布流网站

鼻祖:Pinterest

通用类:豆瓣市集,花瓣网,我喜欢,读图知天下

美女图片:图丽网

时尚资讯类:看潮网

时尚购物类:蘑菇街,美丽说,人人逛街,卡当网

品牌推广类:凡客达人

家居o2o类:新巢网小猫家

微博社交类: 都爱看

搞笑图片类:道趣儿

四、实现方式

1、传统多列浮动。代表网站蘑菇街和哇哦。

2、用CSS3实现。

3、绝对定位。代表网站Pinterest。

或者用图片延迟加载。

知识共享是最大的快乐,转载请备注来源"小狐狸SEO"成都seo|成都网络推广|百度竞价|新媒体运营—小狐狸seo的文章!
下一篇:没有了