新手科普!4个方面帮你快速熟悉UI组件中的瀑布流。

本文从组件介绍、使用场景、设计要点、样式拓展4个方面,帮你快速熟悉UI组件中的瀑布流设计。

一、组件介绍

瀑布流 (Waterfall Layout),又称瀑布流式布局,是信息流网格布局的一种视觉形式。顾名思义,这种布局形式既像瀑布一样无限向下倾泻,内容又如水一样没有固定样式。

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

所以我们可以总结出瀑布流的两个最核心的时间特征:

  1. 无限加载
  2. 内容等宽不等高

二、使用场景

瀑布流因其视觉特征,多用在以多种比例图片/视频为主体的内容流中,最典型的例子莫过于花瓣、Pinterest,这类图片采集网站使用瀑布流可以更有效地利用页面空间并充分展示图片内容而不裁切,同时让用户的浏览体验更加沉浸,错落的图片也相对更容易形成有效的视觉引导,引导用户不断向下浏览。

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

以及另外一类以小红书、淘宝为代表的强内容展示 APP,在布局内容时不约而同地使用瀑布流,其核心原因即在于其强视觉引导的特性。

三、设计要点

1. 列宽的制定逻辑

对于等宽的网格列表来说,我们只需要去关注它们之间的间距是多少,这样更方便不同宽度设备的适配,网格会自动扣除间距并适配网格宽度,而不必设计师一一去定义。

例如,我们只需定义两列网格的左右边距均为 20pt,间距 12pt。

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

那么不管是在 12/13/14 的 390 宽度中,还是在 ProMax 的 428 宽度中,布局都会固定住这三个数值,并自动适配列宽,列宽的数值具体是多少,并不需要我们关注。

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

这也正是两列网格通用的适配逻辑。

2. 内容的布局

瀑布流有三种内容布局形式。

① 图片等高

在图片等高的情况下,能造成网格高度错落的原因只有文案。文案的长短不一、是否有标签等因素,会造成每个网格中的文案部分出现高度差异,从而形成网格错落。但因为文案通常不会超过两行,这种高度的差值往往是固定且非常有限的,也就是说更容易在下方某些地方回归对齐。

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

所以这种布局更容易把控视觉秩序,但会因为强制图片等比例导致内容的不完整,除非限制用户上传图片的比例。

② 根据图片比例自由变化

这是一种完全不限制图片比例的形式,网格的高度不仅由图片影响,也由文案影响。几乎不可能做到在下方某处重新对齐,所以视觉上往往更加混乱,偶尔会出现极长或极短的网格,导致视觉权重出现非意图的倾向。

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

③ 根据有限图片比例变化

这种形式的意思是说,在用户上传图片时就限制图片在有限的几种比例之内,所以尽管网格高度同样由图片和文案共同影响,但却将高度差值限制在了相对有限的范围内。现在大多数电商 APP 采用的便是这种布局形式。

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

3. 内容的类型

瀑布流发展至今,对于内容类型也有许多 App 根据实际项目需求做出了自己的探索。相较于单一的内容类型,因为内容构成更复杂、需求更多元,更多大型 App 会偏向选用多类型内容混合的形式掺进瀑布流里,在达到功能需求的同时,减轻单一性内容对用户浏览时的信息疲劳。

具体来说,内容类型分成两个大类,主内容和运营内容。

主内容

主内容根据 App 类型的不同,包括但不限于图片、视频、动态、商品,主内容依然是瀑布流中占比最多的内容类型。在一个页面内可以使用一种主内容,也可以多种混合。

在多种主内容混合时,设计形式上通常并不会有太大的区别,只会在同一设计框架下,增改该内容类型特有的信息。

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

运营内容

针对 App 不断扩大的运营需要,更多 App 会在瀑布流中插入运营内容。

例如,淘宝会在瀑布流最开始的左上角放置一个小型的轮播组件,左上角则是主推的与拼多多抗衡的百亿补贴功能入口。

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

以及马蜂窝,在顶部放置一个两列宽的轮播推荐位。

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

这些都是很不错的根据自身需要改造瀑布流的实践。

三、样式拓展

1. 站酷

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

站酷的瀑布流会在中途插入一组视觉上差异较大、与主内容类型相干性也较低的推荐设计师用户,因为站酷瀑布流内容类型较为单一,这么做可以用来调节单一内容类型对浏览造成的视觉压力。

2. 马蜂窝

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

马蜂窝的瀑布流样式差异化做得相当大,不管是纵向对比(与同页面其他卡片)还是横向对比(与其他 App 瀑布流),设计都显得非常大胆前卫,所以马蜂窝的卡片样式有比较好的参考性。

3. 其他瀑布流样式

新手科普!4个方面帮你快速熟悉UI组件中的瀑布流

结尾

瀑布流的组件就介绍到这,后续所有有关组件的介绍都会同步更新。

作者:超人的电话亭

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/235340.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月2日 11:57
下一篇 2023年3月2日 11:57

相关推荐

  • 渐变色为何成为网页设计的新趋势

    渐变色不但是网页设计中一个新的流行趋势,它还能更好地引导视觉焦点、渲染网站氛围、传递网站情绪等。如何利用渐变色提升网站设计的美学水准呢?想要运用好渐变色,最重要是在色彩搭配和透明度上下功夫,让网站的气…

    2022年6月25日 建站资讯
    0151
  • 浅谈页面宽度百分比适配的方案

    这种方案在网页设计过程中使用了很长的时间,即使是如今,微信中京东购物的入口,仍然还是这种方式。主要表现在,在比基准的设备宽上,页面元素的横向宽度需要按照百分比的形式,去自适应。高度无需产生变化。所以…

    2022年6月25日
    0164
  • 2017年网页设计如何更好地实现简洁风?  

      弱化功能表列 扁平化风格的网页设计专案,会对功能表列进行合理的弱化,也就是尽量地让页面变得更轻。 简化层级 也就是让用户的操作层级变得更为便捷,从而提升交互体验。 强化可读性 以内容为导向进行网页…

    2022年6月25日
    0104
  • 网页设计过程中必须注意的几个问题

    网页设计流程,整个看上去规范而流程化的工作方式似乎按部就班就能够顺利拿到让双方都满意的结果,但其实在每一个步骤中都存在难度,某一个方面没有做好,可能就会影响到最终设计的质量。 因此在这里,Inspirr网页…

    2022年6月17日
    0112
  • 按钮形状无需花样多多

    当你在进行按钮外形设计前,要提升转化率需要视觉效果很重要,但考虑到全域,一般建议只需考虑以下的两种形状: 圆形:随着拟物化这种网页设计趋势的流行,圆形的按钮形状早已深入人心。对於提升按钮所见即所得的效…

    2022年6月25日
    0130
  • 网页设计教程:学习交互设计的步骤是怎样?

    近年来,交互设计在网页设计中起着非常重要的地位。什麽是交互设计?简单来说就是网页与人进行交流互动的设计,能帮助用户解决问题,满足他们的期望。 很多网页设计师在考虑交互设计时,要麽从书本上学到些皮毛,但…

    2022年6月25日 建站资讯
    0366
  • 母婴电商网站设计案例——Bliss & Bless

    随着互联网信息发展,年轻一代父母的育儿观念和消费观念都在逐渐改变,从以前的只求解决温饱,到现在升级到育儿产品及服务消费,未来新一代父母将会在育儿产品及服务方面上投入得越来越多。注重服务和体验的母婴电…

    2022年6月25日
    0241
  • 页面常用功能和重要数据如何更接近用户

    页面设计之前需切实的分析和确认大多数用户的意图,呈现他们想要的目标; 精心筛选出和跳转至用户需要的条目; 将用户常用的选项或者常精心查阅等的内容最为默认、置顶等; 要特别说的是电商类型的网站建设,一定要…

    2022年6月12日
    0142

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息