布局模式 · 内容展示
信息流
Feed
也叫：动态流、Feed 流、推荐流、内容流、News Feed
一条接一条纵向排列的完整内容，每条带作者、正文、配图和点赞评论等互动，用户在流里直接阅读并不断下滑加载。
点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发用信息流（Feed）展示动态：单列、最大宽度 600px 居中；每条动态顶部是头像、昵称和相对时间（如「3 分钟前」），中间是正文（超过 6 行折叠）和最多 9 张图的宫格，底部是点赞、评论、转发按钮及计数；动态之间留 8px 间隔。滚动到底部自动加载更多，有新内容时顶部提示「有 N 条新动态」。
发给
01判断
你的内容是这样吗？
对照两列，确认信息流是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
长正文不折叠，一条动态就占满好几屏
下面的线框画的就是这种情况，红色虚线框是出问题的地方。右边的线框画的就是这种情况，红色虚线框是出问题的地方。
- 02
点赞后要等接口返回才变色，操作感觉很卡
- 03
把需要筛选和批量处理的后台数据做成信息流
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
单列纵向排列的内容区块，每块由作者信息行、正文与配图、互动按钮行三部分组成，块与块之间用间距隔开。
组成部分点一下，在上面的线框里标出来
识别特征
- 1单列排列、高度不一的内容块
- 2每块顶部有头像和昵称，底部有点赞、评论图标和数字
- 3正文下方常有宫格图片或视频封面
04解释
详细解释
信息流就是微博、朋友圈、知乎首页那种布局：内容从上到下一条条排开，每条是一个完整的「帖子」，顶部是头像、昵称和发布时间，中间是正文和图片，底部是点赞、评论、转发按钮。用户不用点进去，在流里就能读完并互动。
每条内容长短不一：有的只有一句话，有的带九宫格图片或视频，所以条目高度各不相同。数据通常按时间或推荐算法排序，配合无限滚动持续加载，顶部还会提示「有 5 条新动态」。
它和简单列表的区别是每条内容是完整的，而不只是一个入口；和瀑布流的区别是只有一列、按顺序阅读、文字比重更高；和时间线的区别是它强调每条内容本身，时间只是附属信息，而时间线强调同一件事的先后阶段。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
layout-feed- DOM 选择器
- 没有专门的选择器，靠下面的关键词、组件名和结构识别。
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
feednews-feedactivity-feedpost-feedstreamfeed-list
- 组件名
React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。
FeedNewsFeedActivityFeed
- 结构特征
根据元素的排列和样式算出来的特征，只用来加分，单独不判定。
重复子项
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30