瀑布流
Masonry Grid
两列错落排图:高的高矮的矮,像小红书和 Pinterest 那样越逛越上头。
全平台通用内容组织内容区组件
大白话说明
瀑布流按内容原始比例排布,消灭裁切和留白,让图片自己决定高度。它牺牲阅读顺序换取浏览密度和新鲜感,是内容发现型产品的发动机。
什么时候用
图片为主、鼓励漫无目的浏览的产品:灵感、穿搭、菜谱、设计图。
什么时候不用
内容需要顺序(教程步骤)、或每条都要仔细读(新闻列表)时别用,错落会打乱理解。
细节与变体
- 列宽固定、只让高度变,混进视频卡时先定封面比例再插入
- 加载更多时新内容只往列尾追加,不能重排已有内容(用户会丢失位置)
- 标题区高度不齐是常态,别为了对齐把标题区做成等高裁切
配套效果见下方「可用效果」。
配套提示词(点开填空、复制)
可用效果
参考实现(开源)
- Gestalt(Pinterest) ↗ Apache-2.0 · 免费(Apache-2.0)
Pinterest 的设计系统:瀑布流 Masonry 的出处,图片型产品的排布参照。