当前位置: 首页 > news >正文

什么是瀑布流布局?瀑布流式布局的优缺点

瀑布流又称瀑布流式布局,是一种多列等宽不等高的一种页面布局方式。

视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动,这种布局会不断加载数据并附加至当前的尾部。

是一种多列等宽不等高的一种页面布局方式,用于图片比较复杂,图片尺寸比较复杂时可以使用的一种展示方式,这种展示方式可以使页面比较美观,让人有种错落有致的感觉。

瀑布流是一种允许用户不断往下滑动,页面自动刷新呈现内容的交互形式。

瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。

沉浸式可以让用户更快、更好地进入视频情境之中,而忘记真实世界的情境,因为没有其它视频信息的干扰,能够让用户只专注于当前的视频。

设置成瀑布流样式且视频浏览模式开启沉浸式浏览后,视频播放模式会以类似“抖音上下滑"的沉浸式视频浏览方式展现。

如图所示,网页上呈现参差不齐的多栏布局,图片等宽不等高,根据图片原比例缩放直至宽度达到固定的要求,每行排满后,后面的元素依次添加到其后,视觉上显得错落有致不拘一格。

瀑布流的优点

优点如下:

  • 节省空间,外表美观,更有艺术性。

  • 对于触屏设备非常友好,通过向上滑动浏览

  • 用户浏览时的观赏和思维不容易被打断,留存更容易。

从体验的心理讲,女性是一种逛街数小时都不需要停歇的生物,一眼望不到头的瀑布流契合了这种心理。瀑布流的图片就像商品,就像逛街、就像扫货。女性只要不断往下拉伸页面,就像置身在一条没有尽头的购物街,没有层高限制的商场中一样 

瀑布流的缺点

缺点如下:

  • 用户无法了解内容总长度,对内容没有宏观掌控。

  • 用户无法了解现在所处的具体位置,不知道离终点还有多远。

  • 回溯时不容易定位到之前看到的内容。

  • 容易造成页面加载的负荷。

  • 容易造成用户浏览的疲劳,没有短暂的休息时间。

瀑布流的适用场景

  • 内容以图片为主的时候,瀑布流是更好的选择。图片占用空间比较大,并且大脑理解的速度相比理解文字要快,短时间内可以扫过的内容很多,所以如果用分页显示的话用户务必会频繁的翻页,影响沉浸式的体验,而瀑布流可以解决这个问题。

  • 信息与信息之间相对独立时,瀑布流是更好的选择。如果信息关联性强,用户务必会进行大量的回溯操作去查看之前或者之后的信息,相反,如果信息相对独立的话,可以使用瀑布流,让用户同时接受来自不同地方的信息。

  • 信息与搜索匹配比较模糊时,瀑布流是更好的选择。瀑布流给人的直观印象,就是同时显示的信息与用户搜索的匹配度大致一样,而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配。因此,当信息与搜索匹配度没有明显区分度时,可以采用瀑布流。

http://www.lryc.cn/news/59036.html

相关文章:

  • 给您的 MongoDB 定期做个体检:MongoDB 诊断
  • 【云原生进阶之容器】第五章容器运行时5.8--容器热迁移
  • react框架的简单认识
  • IDEA的基本使用
  • 【MySQL】实验八 触发器与存储过程
  • Mockito5.2.0学习
  • 用指针实现内存动态分配
  • DBSCAN聚类算法及Python实现
  • 风光及负荷多场景随机生成与缩减
  • lamda表达式
  • MobTech 秒验|极速验证,拉新无忧
  • 大模型混战,阿里百度华为谁将成就AI时代的“新地基”?
  • 干翻Hadoop系列之:Hadoop前瞻之分布式知识
  • MAE论文阅读《Masked Autoencoders Are Scalable Vision Learners》
  • 代码随想录算法训练营第三十四天-贪心算法3| 1005.K次取反后最大化的数组和 134. 加油站 135. 分发糖果
  • 比较系统的学习 pandas (2)
  • 怎么查看电脑主板最大支持多少内存?
  • 数据结构——线段树
  • 【C++进阶】实现C++线程池
  • Redis常用五种数据类型
  • C++ Primer第五版_第十一章习题答案(1~10)
  • GEE:使用LandTrendr进行森林变化检测详解
  • docker项目实施
  • springboot实现邮箱验证码功能
  • Java 进阶(5) Java IO流
  • “终于我从字节离职了...“一个年薪40W的测试工程师的自白...
  • 设计模式之策略模式(C++)
  • 从工厂普工到Python女程序员,聊聊这一路我是如何逆袭的?
  • 全国青少年信息素养大赛2023年python·选做题模拟二卷
  • 分布式事务Seata原理