图文信息流概念

图文信息流是一种可以滚动浏览的，图文配合展示的内容流。会按规律排列显示。它可以是用户发布或编辑精选的信息、产品列表、服务列表等，最常于APP列表页。它是用户使用APP时接触最长时间的地方之一。根据产品需求选用合适的图文信息流样式是增加信息展示效率、提升用户体验较快的方式。

在解析前，先了解以下两个概念：

1、信息形式不同对视觉吸引力的大小不同，其顺序为：视频>图片>文字，视觉处理文字信息需要经过大脑翻译，而视频和图片是不需要翻译的，这也就是人们喜欢看视频，看图片，不太希望阅读大量文字的原因。 

2、在内容展现图文混排，呈现规律且不是太复杂的时，视觉浏览线路会以“z”模式，这种浏览方式注定用户在左上角和右下角的视觉最重，通常将右上角和左下角称为视觉盲点。

设计样式解析

下面我将对常用的7种图文信息流的展示样式从其优点、适用场景和注意事项三方面解析，使设计更好的赋能产品业务，促进用户增长。

1、左图右文

流模块图片在左，标题、介绍等信息在右。例如：

优点：图片和文字信息与它们对应的吸引力大小节奏统一。重点信息位于右下与视觉重点结合，符合“z”模式视觉流的流向。有助于用户检索信息。

适用场景：浏览目的性强，图片相关性强的内容。

注意事项：在图片需经过审核或处理，与内容紧密相关。注意流模块右上角为视觉盲点。流模块落脚点位置可紧挨着图片（如图三中价格信息的位置），可缩短用户的视觉浏览路线。

2、左文右图

标题在左，图片在右的流模块设计样式。例如：

优点：对图片要求最低，更重视标题本身。

适用场景：新闻资讯类、UGC等不能保证图片质量的内容。

注意事项：流模块标题的显著且与其它信息易区分，甚至可以对标题文案有要求。图二的信息量更大，适合于UGC或PGC内容。作者信息外露是鼓励用户发帖的一种方式，可根据平台对作者的重视程度或影响力选择合适的位置放置

3、上文下图-三图式

标题在上，图片在标题下方，且3张图片并列显示。例如： 

优点：浏览顺序更明确，图片外露更多，点击欲更强。

适用场景：适合标题较长，有丰富的图片内容，且浏览者目的性不强的场景。

也在资讯类APP穿插使用，打破左文右图的疲倦。由于不需要目的性不强，且不需检索，所以打破原规律，也起到了信息灯塔的指引效果。

注意事项：流模块高度控制。通栏式标题过长不利于阅读，建议标题中加入标点符合加以缓解浏览压力。

4、上文下图-n图式

标题在上，图片在下，但图片数量不确定的展示形式。例如：

优点：图片展示更个性，更贴合内容。

适用场景：社交类app，根据发布图片多少以不同的方式排列组合。排列方式也越来越多样化。九宫格式展示信息更规律更有效率，自由排版更活泼、年轻时尚。可以根据产品自身内容属性做选择不同展示方式。

注意事项：展示分享信息时，以用户为中心，用户头像、昵称信息在第一重要信息。微信朋友圈的排版，不惜舍掉左侧头像之下的空间，留白区分信息，凸显发布者位置。

5、上图下文-大图式

图片在上，以一张大图形式放置，标题在下，例如：

优点：对单张图片曝光最高，图片要求最严格。

适用场景：需展示内容总量不多，图片质量可控甚至能定制的场景。

注意事项：图片几乎决定了用户会不会看该信息。有时需发布者或平台处理图片后才能发布。大图使单屏信息展示更少，设计时要考虑将对于该内容的操作外露，以保证用户对信息操作效率。

6、瀑布流

图片在上，标题在下，呈两列排放。流模块高度不同会呈现两列错落有致的样式效果。例如：

优点：错落有致的感觉，排练不呆板。

适用场景：“逛”感更多的场景，在旅游、家装、购物类app中经常使用，现在也有很多视频信息流中用到这类排版方式。

注意事项：封面图与内容一直性要高，若产品图片不能控制时，不推荐使用。

7、文字图片并行

图片直接上下排列，标题等信息以遮罩图片某部分的方式清晰的显示在图片上，例如：

优点：精心设计的高级感。模块感强。

适用场景：内容总量不多，浏览者目的性弱的场景中使用。

注意事项：要保证图片够清晰，文字在图片上阅读性不受影响，在浮层下展示时图片美观度不受影响。由于文字直接在图片上显示，造成了其可读性相对较差，在浏览目的性强的信息流展示中，不推荐使用。

8、其他类

更个性化，会和产品本身气质相符合，设计感和细节感更强。例如：

优点：提升app品质，增强品牌感。

适用场景：内容总量不多，承载的落地页可以延续设计样式。

注意事项：其他类的风格可以算是考验设计师灵活应用并凸显设计细节的地方，这类页面可以结合产品品牌、风格气质设计。一定注意将想要表达的信息体现明确，不能过度设计。

总结

要根据目标用户及使用场景，并结合产品想让用户获得的信息，去选择或重新定义一种信息流。在流模块偏高时，要考虑将流内容的操作栏前置。

当图片质量不能保证时要尽量少的使用大图或多图从而尽量弥补自身产品不足。

结合自身产品目的、优缺点，将信息有效排列，保证用户的阅读体验。在条件允许的情况下可以采用眼动测试、A/B测试等方式加以验证，使设计更有效的赋能产品业务，促进用户增长。