瀑布流设计这么好用你知道嘛?

作者:小胖吴 | 创建时间: 2023-08-11
瀑布流设计这么好用你知道嘛?

瀑布流这种方式越来越多的出现在我们的视线当中,随着 Pinterest 在 2011 年开始走红,瀑布流模式被越来越多的 UGC 为主的相关网站进行承载使用,大家所知道的花瓣、小红书采用的就是瀑布流的布局。

为什么越来越多的网站开始采用瀑布流的方案

1、因为瀑布流有吸引力,瀑布流会在它的页面底部给你不断地加载新的暗示信息,滑动的时候会不停的出现新的东西,通过给出不完整的视觉图片去吸引你的好奇心,让你停不下来想要不断的向下探索。采用这种方案的产品,往往可以通过瀑布流加强用户的停留时间,提高用户的使用粘度。

2、用户一扫而过的快速阅读模式,短时间内可以看到大量的信息,瀑布流的懒加载模式,又避免点击的的翻页操作,在最小的操作成本下能够获得最多的内容体验,瀑布流的视觉方式,让人比较容易沉浸其中,不容易被打断。

3、另外瀑布流的主要特质就是:定宽而不定高,这样的页面设计区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动来缓解视觉的疲劳。

瀑布流可以引用到哪些场景?

瀑布流更适合那些随意浏览,不带目的性的使用场景,就像是在逛街一样,边走边看,同时被街边琳琅满目的商品吸引着,所以比较适合的图片、小说、资讯类的场景,以现有的成功案例来说,以 UGC 为主的相关网站很多在使用瀑布流进行承载。

例如小红书、花瓣

小红书:

小红书中利用瀑布流,滑动的过程中,一直向你提供新的信息,不停的吸引你的好奇心,在不知不觉中在网站停留了很长时间,提高了用户粘度,文章内容看的久了自然也就想要购买了,正好可以达到转化的目的。

花瓣:

花瓣是长期的聚焦于图片信息,目的就是做图片社交,利用瀑布流让用户被美好图片所感动,最大限度的节约了版面,减轻了构架。

如果你想要加入到产品中,我们已经给你准备好了组件~

如何将一个好的瀑布流方案一键引入到你的产品原型设计中呢?

首先,准备个原型工具:比如~原型图设计工具:xiaopiu.com

1、然后进入 xiaopiu 精选广场的组件库搜索「瀑布流 」,在搜索出的组件库右下角点击「引用为我的公用库」。

2、或直接进入「瀑布流」组件库,然后点击右上角的引用按钮~

3、引用成功后,在您的项目编辑页左侧【组件库】就可以看到我们的资源啦!拖拽组件到自己的页面上改一改就是你的了哟!

嘿嘿,是不是超级简单,呐,产品的页面布局,已经成为影响用户体验的一个关键点,现在是一个体验为王的时代,今天关于瀑布流的产品心得分享,就是希望大家都能尝试着去用一些小的细节,好的设计体验去打动用户,留住用户,有更好的使用体验,才能让用户更加热爱产品,才能让产品更加茁壮成长。

资源链接:

瀑布流组件库

xiaopiu工坊

作者:Ms.Piu

点击展开全文

更多推荐