如何更好的设计App信息流的界面？

在当下社会的快餐文化中，人们的很多习惯都在发生改变，人们越来越不愿意将时间花费在长时间的阅读上，用户已经习惯了快节奏，运用碎片化的时间来阅读。自从前几天微信把订阅号消息改成信息流后，国内主流的高频使用的app都具有信息流的应用了。今天我们针对信息流的设计，为大家讲解一下如何更好的设计信息流，以及信息流的一些设计灵感。

什么是信息流？

信息流有广义和狭义两种。广义指在空间和时间上向同一方向运动过程中的一组信息，它们有共同的信息源和信息的接收者，即由一个信息源向另一个单位传递的全部信息的集合。狭义指信息的传递运动，这种传递运动是在现代信息技术研究、发展、应用的条件中，信息按照一定要求通过一定渠道进行的。

通俗易懂的解释就是系统主动推给你的信息，你是被动接受的一方，信息流一般会以纯文字、图文、图片、视频、链接、语音、广告的方式推送给你。

信息流的几种类型

现在的信息流一共包括二种交互，第一种是以Facebook为代表的信息流，我们把它称作为卡片式交互信息流。第二种是以Twitter为代表的信息流，我们把它称作为时间轴的交互信息流。

卡片式信息流可以放更多的内容，一行的文字可以展示的更多，单张图片区域更大，同时也可以展示多张图片，即使在没有点击放大的情况下，图片内容还是能够看的清楚，用户可以快速浏览图片信息，视觉焦点大多会集中在图片上，然后才去看文字，适用于图片社交类App、娱乐性陌生人社交类App。最为典型的App有Facebook、Instagram。

时间轴信息流突出文字内容，突出头像，由于左边会有1/5的留白，所以图片区域会小很多，整个流都会紧凑一些，目的是让用户更加聚焦于文字阅读。最为典型的App有微信朋友圈、Twitter。

信息流的基本内容

一个完整的信息流，从上到下依次分为三大块：1、个人信息区    2、内容展示区   3、用户操作区

个人信息区主要有头像、昵称、与个人荣誉相关的勋章、个人介绍、发帖时间。

内容展示区主要有语音、视频、图文、纯文字、图片、链接、广告、分享的卡片、地址信息。

用户操作区主要有评论、点赞、分享、收藏等，但不局限于这些操作。

信息流的设计

在开始设计信息流的时候，我们可以深入了解下产品，了解产品的定位、用户群体，需要弄明白属于什么信息流类型，针对不同的类型设计不一样的信息流交互。

结合以往设计经验，我总结出来如下几点：

如果你是第一种类型，你可以在头像、昵称、个人介绍处理上适当的偏小一点，图片加大处理，突出图片内容，减少不必要的干扰，操作区域图标突出表达，使得用户更好的互动。

如果你是第二种类型，你可以把头像、内容文字加大处理，图片适当的偏小一些，目的是主要的突出字体，让用户更加聚焦在文字上。

在这里需要特别强调的是图片展示逻辑，我建议大家在单张图片的情况下采用9：16的比例去设计图片区域。

图片展示最大范围可以根据设计要求来做，如遇到图片超过图片最大展示范围的情况，应该截取中间部分展示，如图片比图片最大展示范围要小，可以按照实际大小展示，如图片是长图的情况下，处理办法也是相同。

除了考虑图片展示的情况下，还要考虑语音与文字，文字与链接，链接与语音，视频与文字，视频与语音等多种组合的情况。

总结

1、信息流是一种信息展示方式，你是被动接受的一方，他会通过各种方式推送给你。

2、信息流分为卡片式交互信息流与时间轴交互式信息流

3、一个完整的信息流包括个人信息区、内容展示区、用户操作区

4、信息流的设计可以通过产品定位去选择是否用卡片式交互信息流或者时间轴交互式信息流

5、信息流的图片展示分为单张图与多张图，单张图可以按照9：16的比例去设计，多张图可以统一都为正方形

6、设计信息流还要考虑多种信息组合的情况，它有纯文字、图文、图片、视频、链接、语音、广告。

设计灵感

1,聊天对话式的信息流。

2，个性化小众设计感的信息流。

3，内容简洁，弱化图片，卡片增加背景颜色。

4，非常有意思的体育类信息流。

5，带类似时间轴的信息流。

6，小清新的信息流，突出图片，没有标题。

7，统一板式的信息流，左边文字，右边图片。

8，左右滑动的卡片式信息流。