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

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

 

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

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

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

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

 

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

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

 

例如小红书、花瓣

小红书：

 

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

 

花瓣：

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

 

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

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

首先，准备个原型工具：比如～原型图设计工具：xiaopiu.com

 

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

 

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

 

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

 

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

 

瀑布流组件库

 

原文地址：xiaopiu工坊

作者：Ms.Piu