网站页面采用瀑布流布局

网页效果中经常看到瀑布流形式布局,也有的按照分页布局点击下一页查看更多内容,先欣赏几个国内有瀑布流效果的网站。

1、花瓣网的发现页面

网站页面采用瀑布流布局

2、蘑菇街网,首页就是瀑布流形式。

网站页面采用瀑布流布局

瀑布流布局特别适合图片网站,或者主要呈现图片的内容块用瀑布流非常合适。首先我们谈瀑布流布局在设计交互上应该要注意的点:

1、吸顶导航

瀑布流无线填充内容会导致页面内容过多,头部导航有吸顶的话方便用户做页面切换。

2、占位加载

瀑布流形式用户会无限快速的下滑,此时应该占位加载,使其屏幕中的位置图片先加载出来,同时占位加载会保证内容不会上下跳动,让用户视觉感知顺畅。

3、元素的区分以及着重效果

瀑布流是不确定的高度内容块(一般宽度确定,高度随着内容自适应),此时鼠标hover效果和每个块的间隔区分要明显,视觉看起来就清晰舒畅,内容错落有致。

瀑布流网站在SEO优化上的一些考虑

瀑布流网页对于索引擎蜘蛛来说不是很友好,因为网页的跟多内容都是靠异步AJAX请求加载,蜘蛛无法采集到,所以我们在站点地图上把所有内容链接第一时间更新进去或者通过API提交,以便及时收录。

分享到: 新浪微博 微信 QQ好友 QQ空间 豆瓣

相关新闻

联系我们

155-0755-1234

在线咨询:点击这里给我发消息

邮件:b@xshd.net

工作时间:周一至周五,9:30-18:30,节假日休息