设计赋能-图文展示类信息流设计样式解析

信息流是一种可以滚动浏览的内容流。这些内容会出现在外观相似、一个挨一个显示的模块中。例如，信息流可以是编辑精选的信息流（如文章或新闻列表）或产品详情（如产品列表、服务列表等）。信息流可以出现在页面上的任何位置。信息流是用户与app接触时间最长的地方之一，根据产品需求选用合适的信息流样式是提升信息展示效率，提升用户体验较快的方式。本文将对图文展示类目前常用的几种设计样式解析其优缺点和适用场景，使设计更好的赋能于产品业务。

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

1⃣️ 在不同形式的信息对于人吸引力的大小顺序为：视频>图片>文字，视频和图片在大脑中是不需要进行反编译的，这也就是人们喜欢看视频，看图片，不太希望阅读大量文字的原因。

2⃣️ 在内容展现图文混排，并且不是太复杂的时候，视觉浏览线路会以“z”模式浏览，这种浏览方式注定用户在左上角和右下角的视觉最重，相反在右上角和左下角的视觉最轻，因此也把此处称为视觉盲点。

下面我们结合产品示例分析一下不同信息流样式适用场景

1、左图右文

一般左图右文在图片为经过审核或处理的图片，并且能表达自身信息的部分意义。以图片开头，吸引用户注意力，配合视觉“z”字走势，呈现信息标题及介绍。也“z”模式浏览的特点，将价格信息放在右下的位置，将信息重要性和视觉重点结合，在突出相应信息的同时还符合视觉流的流动特点，一箭双雕。这种排版方式比较适合带目的阅读，通常统一的视觉流也可帮助检索信息。

2、左文右图

一般新闻类APP比较适用的一种形式，新闻图片会因为拍摄环境质量参差不齐，甚至有些是UGC内容，图片质量可控性更低。相比较之下，文章标题的位置就更为重要，此类形式排版中要注意将标题与其他信息分开的明确一些，以确保用户视觉捕捉重要信息准确无误。

图二是一个信息量更为复杂的左图右文排版形式，在内容为UGC或PGC时，这类版式更为适合。它的标题字数变数很大，对于文字很少的标题，就需要用简介来介绍一下文章内容。同时外漏作者也是鼓励用户发帖的一种方式，此类也会根据平台对于原创者的重视程度及影响力把作者信息放置在信息流的不同位置。

3、上文下图-三图式

上文下图类图片相比左图右文会更吸引人，也更有品质，设计样式一般会和视频混排出现，保证用户在浏览时保持标题+内容的浏览顺序。上文下图也经常存在于新闻类APP，穿插在左文右图的展示样式中，会打破一下视觉左文右图的疲惫视觉，在新闻类app的沉浸式浏览中，用户目的性更弱，不需要持续的按某个浏览规律检索信息，所以不定时的出现在信息的海洋中打破视觉流，同时也起到了信息灯塔的指引效果。

4、上图下文-大图式

这类对于图片的要求已经迈到了最高级，在这种样式中，图片几乎决定了用户会不会看该信息。也正是因为图片如此的重要性，此类版式的图片都是发布者或平台精心处理才会发布。这种版式由于大图的存在会使单屏信息展示更少，因此设计时要考虑将对于该内容的操作外露，以保证用户对信息操作效率。

5、上文下图-n图式

n图式主要存在于社交类app，发布者会发布1-9张图不等图片，根据社交媒体的属性不同，对图片的处理方式也不一样。最普通的处理方式像微信，1张图会根据图片自身的宽高比给出最大宽高让图片自适应，2-9张图即按9宫格中图的大小裁切后排列，注意4张图仍是方形排列即可。而“即刻”和“苏打”会根据用户发布的无论几张图都按平台各自方式排列成方形，样式多样。两种方式中，前者展示信息更规律更有效率，后者更活泼、年轻时尚。可以根据平台自身内容属性做不同取舍展示信息。

社交类用户分享的信息中，会以用户为中心，所以在单个模块的信息可以看出，用户头像、昵称信息在第一显示，并且昵称相比发布的信息标题显眼重要。微信朋友圈的排版，不惜舍掉左侧头像之下的空间，留白区分信息，凸显发布者位置。

6、瀑布流

瀑布流形式在电商展示产品时用的比较多，信息会因为图片、标题的长度不同而呈现模块高度不同，从而出现错落有致的感觉。在旅游、家装、购物类app中经常使用，现在也有很多视频信息流中用到这类排版方式，此类方式对图片的说明性依赖很大，在本身产品图片不能设计者控制时，不推荐使用。

7、文字图片并行

这种形式在图片优质的情况下，会给人精心设计的高级感。使用时要保证图片够清晰，文字在图片上阅读性不受影响，图片在黑色浮层下展示时显示仍可以很优质。由于文字直接在图片上显示，造成了其可读性相对较差，在浏览目的性强的信息流展示中，不推荐使用。

根据自身产品的目标用户及使用场景，并且一定要结合自身产品的对信息流中想让用户获得的信息，去选择或重新定义一种信息流。在流模块偏高时，就要将流内容的操作栏前置。当图片质量不能保证时要尽量少的使用大图或多图从而尽量弥补自身平台不足。结合自身产品目的、优缺点，将信息有效排列，保证用户的阅读体验。在条件允许的情况下可以采用眼动测试、A/B测试等方式加以验证，使设计更有效的赋能产品业务。