流是本身自然形成事件的时间线，是一种呈现的形式，比如我们的朋友圈、微博。

一、图片流（花瓣网）

1、作用

图片流是让用户快速对图片内容进行浏览、筛选，满足用户对图片快速浏览筛选的需求。为了让用户看图片，会弱化对文字的处理。

2、细节

图片流细节

（1）基础布局：主要包括背景 、 内分割线 、外分割线三种，还有一个点击态颜色；

（2）文字：正文案一般用30，副文案一般用24，主副文案之间相差要大于6.偶尔也会用28和20；

（3）图片规范：图片高度一般是不固定的，主要信息区域布局是固定的；

（4）用户图像：用背景简单的正面视角头像即可，颜色可以明亮一些；

（5）卡片模块：主文案是28px，副文案是20px，页边距是24px，头像的四个方向间隔均为20px。

图片流卡片模式尺寸

二、卡片流（支付宝）

1、作用

让用户了解更多细节信息的入口，把信息以固定的排版布局展示出来。所以要提炼卖点，在文案方面做很好的调整。卡片流就是为了让用户看到文字，形式很像列表。

2、细节

卡片流细节

三、Feed流

1、作用

让用户产生沉浸式阅读体验，引导视觉焦点。

2、细节

Feed流细节

（1）文字：三连图间距8px，文字与图片间距12px，页边距是30px；

（2）配图：四大尺寸分别 9:8（商家列表流）、9:6（Feed流）、1:1（头像）、16:9（全屏大图）

图片尺寸参考

（3）筛选器：选择变成加粗，地下颜色根据实际情况调整。

筛选器尺寸参考