网页瀑布流设计 第1篇
爱奇艺:手机屏幕为两列结构,根据不同屏幕宽度自适应。平板屏幕宽度五列,瀑布流为错落式展示,更高效的利用屏幕空间。瀑布流卡片不支持自动播放剧集片段。
优酷:手机屏幕为两列结构,根据不同屏幕宽度自适应。大卡片穿插其中,支持自动播放。平板屏幕宽度,采用四列和1+2的展现形式,在有序中又有变化,既提升了屏效,又兼顾了可视性。
腾讯视频:根据不同屏幕宽度适配,当宽度为手机屏幕宽度时,为沉浸式瀑布流,屏效较低。每个卡片支持自动播放,并播放完后自动切换下一个。平板屏幕宽度,瀑布流最多三列,每个卡片右上方有预览按钮。
优酷:横版封面为主,穿插视频画面截图,更符合视频播放的比例,且屏效比更高,一屏可展示的内容更多。每一屏穿插大卡片,支持视频预览。每个卡片展示的内容更多,影视剧名称,推荐理由,同类型集合入口,评论等。
腾讯视频:结合了前两个的优势,既有视频或剧照截图,也有影视宣传海报,并且还带视频预览功能,可预览当前页面视频内容。所展示的内容信息较少影视剧名称,主演及推荐理由。
虽然爱优腾都采用了瀑布流设计,但它们在视觉展现和细节处理上有着各自的特点。不能简单地说哪一家的做法更好,因为它们都有各自的优势。在设计过程中,更需要考虑产品的独特性和定位。但无论选择何种方式,都应该以解决问题和提升用户体验为目标。
网页瀑布流设计 第2篇
除了网页设计中常见的应用外,瀑布流布局还可以在各种产品应用中发挥作用,例如:
对于侧重点不同的产品,可以灵活选择合适的瀑布流展现形式,单列沉浸式瀑布流注重用户的观感体验,适合长视频消费场景。
而双瀑布流或者多列瀑布流,则提供给用户更多的选择权,通过增加内容曝光提升分发效率。
所以,在做产品或者设计的时候,应该全盘考虑产品特点和用户使用场景,选择最适合的而不是最完美的解决方案。
来源公众号:捡蘑菇的人
题图来自Unsplash,基于CC0协议
网页瀑布流设计 第3篇
column-count : 定义列数 column-gap :列与列之间的间隔
顺序只能是 从上到下, 再左到右
由于排列顺序是先 从上到下, 再左到右,只能用于数据固定, 无法动态的加载追加,对于滚动到底部加载新数据则无法实现。
有时候页面会出现在前几列的最后一个元素的内容被自动断开,一部分在当前列尾,一部分在下一列的列头。这时候子元素可以用 break-inside设置为不被截断 avoid来控制
break-inside: avoid; // 不被截断 默认值是auto,会被截断
泳道的概念:通俗的说是类似泳道一样,先设置泳道列数,一列一列的,然后往里加东西,就自动往下面走了。
以下是一些代码说明 1、 coloumHight [0,0] 为两列,coloumHight [0,0,0] 为三列 2、 getMinColoumHeight方法: 找到最小列