UI设计样式的几种“流派”

今天给大家讲讲一种设计样式的几种“流派”：图片流、卡片流和feed流

相信你们或多或少都听过。但是它是如何应用的，它们各自的功能目的又是什么呢？

下面我将对每一种流进行它的作用、设计要点、案例分析的方式进行介绍。

那么流是什么？

想想我们生活中什么是流：水流，水流是很多的小水滴组成的一个流体。

所以就可以通过这个角度来理解这三大流。

流是呈现的形式，流本身自然地形事件的时间线。

1.图片流

a.作用

快速对图片内容进行浏览和筛选。图片流满足了用户对图片进行快速浏览筛选的需求。

b.设计要点

通过版块分割的背景和分割线来区分；

图片高度不固定；

不需要加入标签，即使有图标也是弱化。（因为会干扰用户对图片的筛选）

c.案例

从截图中可以看出，不管是左边花瓣，还是右边Pinterest，它们都是图片流的形式。

同时也满足前面所讲的，图片是主要信息，一下子抓住视觉，让用户不停的往下浏览和筛选喜欢的或者感兴趣的。

所以图中的图标和一些其他辅助东西也都是弱化，尽量不干扰图片。

2.卡片流

a.作用

卡片是用户了解更多信息细节的入口。把信息以固定的的排版布局模式展示出来。

b.设计要点

卡片高度固定统一，组成部分（如头像、标题、内容区域、按钮等）也固定统一；

我们并不希望用户在这部分快往下拉，我们希望用户快速看到我们卡片中提取出来的文字信息和买点（常见于金融理财类）让用户快速找到需要的内容。

c.案例

微信的服务通知、支付宝的服务提醒都是卡片流的形式。

一般是服务通知或者金融理财的项目等会采用这种样式，意在通过文字信息向用户展示入口。

设计任何UI样式都是以结果为导向，向用户展示最关注的。

同样分析一个产品或者功能模块，也是通过它的细节组成，功能目的来分析。

这里还有一种卡片流的样式，那就是卡包里面的卡：

这种类型就更加直观了，将其设计成现实中卡片的形状，所谓设计源于生活。

3.feed流

什么是feed，翻译过来就是侍养、喂养的意思。那在我们UI样式中的意思就是通过不断的供给信息，来喂养用户，就像用户是产品养的宠物一样。最典型的就是现在很火的抖音，相信玩过抖音的都被它这种特殊的feed流“养”的不肯退出，时间一下子刷刷就过去了。那今天我们不讲抖音，讲讲常规的feed流。

a.作用

快速对页面中的资讯进行浏览筛选。

b.设计要点

图片一般的尺寸：

9:6 （ feed流 ）

9:8 （ 商家列表流 ）

1:1 （ 头像 ）

16:9（ 全屏大图、视频预览图 )

间距问题的把控：当三连图，图间距10px。

图文间距10px+6px（一个层级），每提升一个层级增加6px。

辅助按钮：左右视觉平衡，天平原理。又因为这只是辅助功能按钮，所以要尽量弱化。

(以上尺寸为市面上产品大多数的处理，作为设计参考。）

c.案例

左图今日头条的feed流中，三连图之间的间隔，红色区域为10px。因为标题和图片又区分一个层级，所以蓝色部分为红色部分的10px再加上一个层级间隔6px，因此蓝色部分为16px。

底下有个“青云计划”，如果没有右边的关闭按钮，视觉就向左倾斜了，特别是在没有辅助文字的时候，这样视觉就不平衡，因此加上右边的关闭按钮使得左右平衡，又很有节奏感的展现在用户面前。

右图UC头条，以及底下的简书、网易新闻也是一样的设计规范。可以看出，在新闻资讯类的，比较多采用这种Feed流样式。

像微信的看一看、朋友圈、微博都属于Feed流的形式。

简书                                                                                           网易新闻

微信                                                                                             微博

像图片流和feed流我们希望用户更多的往下看信息，不知道大家有没有注意过，在这种类型的样式中，我们时常看到有时候附带了广告，或者APP下载。更有甚者，广告的内容很吸引用户，就像里面的常规资讯新闻一样。

这样就达到了产品的商业目的，毕竟做任何产品，最终目的还是要盈利的嘛。

总结

1.图片流的作用是凸显图片信息，满足用户对图片进行快速浏览筛选的需求。

2.卡片流的作用是提炼文字信息，让用户快速找到需要的信息入口。

3.feed流的作用是帮助用户对页面中的资讯进行浏览筛选。

原文作者：ux_jackson   希望这篇文章对你有所帮助。