一、“流”的概念

如果你每天都在刷抖音、小红书、微博、知乎，那你其实每天都生活在“流”的世界里。你在不断滑动的屏幕里看到一个又一个内容块，它们像水流一样往下流淌。但这三种流：瀑布流、信息流、Feed流，其实是三种不同的“内容流动逻辑”。它们看起来相似，却分别解决了不同层面的设计问题，如下表所示

换句话说，瀑布流关心“样子”，信息流关心“顺序”，Feed流则关心“推荐”。理解它们的区别，是设计师能否做出“有逻辑的内容界面”的第一步。

二、瀑布流

1. 什么是瀑布流？

瀑布流（Waterfall Layout）是一种内容排版方式，它最早出现在图片类网站，比如 Pinterest。当内容的尺寸不统一时（比如图片高低不一、文字多少不同），普通列表就会留下大量空白。瀑布流解决的，就是这种空间浪费问题。它通过多列分布，把卡片一列接一列地“自然下落”，让页面像瀑布一样密集、饱满。

关键词： 高度不一、多列排列、错落分布。

2. 举个例子你就懂了

想象你在整理书架，书有大有小，如果你强行一行排齐，就会浪费空间。瀑布流就像你在用“见缝插针”的方式摆放，高的书放这儿，矮的插那儿，空隙都利用起来。结果：

• 空间利用率更高；
• 整体节奏更自然；
• 视觉体验更丰富。

这正是 Pinterest、小红书、站酷、花瓣网 等平台采用它的原因。

3. 瀑布流的设计要点

以下是瀑布流的设计要点：

4. 瀑布流的局限性

瀑布流虽然美观，但不适合所有内容。因为它打乱了阅读节奏。用户无法一眼看清哪些内容更相关，信息层次感较弱。因此， 适合视觉展示（图片、作品、商品）； 不适合逻辑内容（新闻、问答、评论）。

三、信息流

1. 什么是信息流？

信息流（Information Stream）是一种内容组织方式。它的目标不是让页面更漂亮，而是让用户持续阅读、自然流动。在信息流中，所有内容单元（卡片）结构一致，并且按某种逻辑（时间、权重、主题）连续排列。用户往下滑时，新的内容不断出现——就像一条河流，从上游源源不断流向下游。

关键词： 连续、统一、可滚动。

2. 举个例子

想象你在读一本“永远读不完的杂志”。第一页是今天的新闻，翻下去是昨天的热点，再翻下去是推荐话题。每一页都不同，但都排在一个逻辑线上。这本“永远在往下延伸”的杂志，就是信息流。

3. 常见的信息流场景

4. 信息流的设计重点

• 结构一致性：每个内容块格式统一，方便快速扫读
• 节奏控制：图文比例、留白节奏决定“流畅度”
• 交互反馈：滑动手感、加载提示影响阅读节奏
• 信息分层：标题、摘要、来源要有层级感

5. 信息流与瀑布流的区别

• 瀑布流讲究“空间填充”，信息流讲究“阅读连贯”。
• 前者是视觉优化，后者是认知优化。
• 如果说瀑布流是“图片展墙”，信息流就是“文章时间线”。

也就是说信息流解决的是“排得顺”，不是“摆得满”。

四、Feed流

1. 什么是Feed流？

Feed这个词在英文里是“喂养”。在互联网里，Feed流指的是一种内容分发机制。它不关心内容怎么排，而关心“要把什么内容喂给谁看？”它是信息流背后的“大脑”，负责决定“流的源头”。

2. 举个例子

你打开抖音，看到一个你感兴趣的视频。你点赞、停留、评论。系统就学习到你的偏好，下次再推更类似的内容。同一时间，另一位用户打开抖音，看到的完全不同。这就是典型的 Feed流：个性化推荐机制。

3. Feed流的核心逻辑

4. Feed流 ≠ 信息流

Feed流是“后端逻辑”，信息流是“前端呈现”。Feed可以驱动信息流，也可以驱动瀑布流。比如：

• 抖音首页：Feed逻辑（算法）+ 信息流（单列视频）
• 小红书首页：Feed逻辑 + 信息流结构 + 瀑布流布局

Feed流解决的是“推得准”，不是“排得好”。

五、三者关系

我们可以这样想象：

Feed流（决定谁看到什么）

└── 信息流（决定内容如何排列）

   └── 瀑布流（决定视觉如何呈现）

• Feed流 是内容推荐引擎，控制内容来源和顺序；
• 信息流 是内容组织结构，让阅读更自然；
• 瀑布流 是最终视觉布局，让界面更美观。

这三者像流水线一样，从后台逻辑到前端界面层层衔接。

六、产品实例

我们通过产品实例加以说明，如下列表格所示

你会发现，Feed流 控制“逻辑”；信息流 决定“节奏”；而瀑布流 呈现“样子”。

七、实践判断法

理论上你已经知道三种“流”的区别，但作为设计师，真正的难点是，在一个实际项目里，我怎么判断该用哪种流？判断方法不复杂，但要有思考逻辑。你可以像医生问诊一样，依次问自己三件事。

① 我的内容是什么？

先从“内容本身的形态”出发。设计是为内容服务的，不同内容决定了最合适的展示方式。

举个例子：

• 如果你在做一个灵感图库（如站酷、小红书），重点是“视觉展示”，内容尺寸各异，那就用瀑布流。
• 如果你在做一个知识社区（如知乎、简书），信息以逻辑和主题为主，那就用信息流。
• 如果你在做一个算法推荐类内容App（如抖音、今日头条），内容来源复杂、用户偏好不同，那必须用Feed流。

设计原则：先看内容属性，再决定“呈现方式”，而不是反过来。

很多初级设计师喜欢“抄界面”，看到别人有瀑布流，也想加；但如果你的内容逻辑是时间线，那瀑布流反而会让用户阅读混乱。

② 内容从哪来？

接着你要思考，这些内容是固定的还是动态生成的？

• 如果内容是静态的，比如人工编辑、手动上传的图片或策展页面，那你只需要设计结构（信息流）或布局（瀑布流）即可。 例：品牌灵感页、作品精选页、专题活动页。 这些页面内容不会每天变动太大，关键在视觉呈现。
• 如果内容是动态的，比如算法推荐、用户生成内容（UGC），那你必须设计Feed机制。 Feed机制决定了： 用户每次打开都看到不同内容； 内容会随着兴趣与行为而变化； 系统要支持无限加载、实时更新、个性化分发。

简言之： 静态来源使用信息流或瀑布流； 动态推荐 使用 Feed流。比如：

• 淘宝首页 = Feed驱动 + 瀑布流布局；
• 知乎热榜 = Feed驱动 + 信息流结构；
• Pinterest专题页 = 静态信息流 + 瀑布布局。

设计提醒：Feed流会影响的不只是UI，还会影响整个交互逻辑：加载策略、刷新机制、内容状态、算法反馈、用户停留。所以在设计Feed类页面时，一定要和产品、算法同学配合。

③ 用户要怎么消费？

最后一步，是理解用户“看内容的方式”。想象用户面对你的界面，他们是想“扫一眼选中意的”，还是“静下心来逐条看完”？

举例说明

• 瀑布流场景： 用户像逛街，快速扫视，随手点开喜欢的。 所以设计时要突出封面视觉冲击力、点赞收藏按钮、加载平滑度。
• 信息流场景： 用户像看报纸，有逻辑、有节奏地往下阅读。 所以设计时要关注信息层次、标题字号、内容摘要长度。
• Feed流场景： 用户像被算法“带着走”，不知道下一条是什么，但总想再滑一条。 所以设计时要优化推荐节奏、滚动反馈、停留提示、个性化插卡。

设计原则：不同的消费方式，对信息密度和界面节奏的要求完全不同。 “刷”的顺滑程度，比内容本身更决定体验质量。

八、知识总结

设计中的“流”是现代内容产品的血管。瀑布流让视觉饱满，信息流让内容通畅，Feed流让体验智能。三者不是互斥，而是协同：一个让你“看得舒服”，一个让你“读得顺畅”，一个让你“看得合适”。

总之，瀑布流让界面更美， 信息流让逻辑更顺， Feed流让推荐更懂你。