详解网页图文组合的三种布局方式

今年6月份的那次微信大改版相信大家都还记得，订阅号的消息可以直接通过消息列表来进行浏览，而不再需要进入订阅号里面了，如下图(左)。那次改版让好多做公众号的可是叫苦连天，一不小心自己的文章就被别的公号顶了，流量受到了很大的影响。可能是收到了公众号用户的反馈，微信又在9月的一次改版中“偷偷摸摸”的把订阅号列表的样式改了，如下图(右)。虽然没有改回以前的样式(因为直达阅读对于读者来讲太方便了)，但可以看出通过对图文组合的布局优化，一屏可以多显示一条消息了，公号内容也就多了一次被阅读的机会。那今天我们暂且不讨论微信的第一次改版是否合理，我们就第二次改版的图文布局优化来讲一讲，不同的图文布局方式各有什么优劣，该如何选择。

图文组合的布局大致可归纳为三类，即上下排列、左右排列、以及图文混排。由于各个产品中业务的诉求不同，所以用户所关注的内容也不同，这就决定了信息的优先级排布也不尽相同。所以没有通用的布局，只有适合的布局。下面我们就三种布局方式与大家简单分析一下。
目录
一. 上下排列
二. 左右排列
三. 图文混排
上下排列
上下排列就是指图片和文字在垂直方向上排列，其中比较常见的有上图下文(大图)、上图下文(多图)以及上文下图。

1、上图下文（大图）
大图模式下的上图下文更强调了图片的重要性。首先大面积图片本身的视觉冲击力就大于文字信息，再者根据从上至下的浏览习惯图片也是先于文字展现在用户眼前。正因为如此，这对于图片质量的要求也就更高了，如果无法保证图片的质量，会大大影响整个页面的美观，从而影响到用户对产品的定位。如下图，站酷的首页推荐，作为一个设计平台的作品展示页面，图片的重要程度自然不言而喻。而这些作品的封面都有站酷小编参与把控，所以也不需要担心图片质量无法保证。

而爱彼迎的房源我们可以把它当作是“住宿”商品，图片对于用户来说可是商品最直观的印象。
另外，因为这种布局方式下文字信息是与图片同宽的，有足够的展示区域，所以也不用担心文字信息的完整度受到影响。倒是版面效率是值得注意的地方，大图展示势必带来信息条数的减少，因此，图片的高度不宜太高，宽高比控制在4:3至2:1之间较为合理。上面两个例子中，站酷的图片比例是4:3，爱彼迎的图片比例是3:2，在750*1334的屏幕下可以看到第二条信息的大部分图片。如果对一屏信息展示率有严格要求的产品，不建议采用这种布局方式，可以考虑我们接下来讲的多图模式。
2、上图下文（多图）
多图模式是指一行展示2-3张图片，常见于视频、电商类的产品。在分析过大图模式之后，多图模式与之的区别也就显而易见了。随着图片的变小严重影响了文字信息的完整度，我们之前说过，文字信息一般与图片宽度(也就是内容模块宽度)相等，在单行字数较少的情况下，过多的行数是不利于阅读的，因此所能展示的文字信息也就变少了。为了能够传达足够的信息，就需要一目了然的图片，或者在图片中加上文字信息，无论哪种都对图片质量有很高的要求(注意：这儿的图片质量要求，不仅仅是指精美程度，还包括定制化的程度)。最后，也是最重要的一点区别就是多图模式下，版面效率至少提高了一倍。如下图：

可以看到在手淘的瀑布流布局下，文字信息缺失的较多，不得不通过在图片中放置更多的文字信息来弥补；而网易严选则是用一目了然的商品图来传达信息。这种布局方式下，可以展示更多的信息条数，版面效率相比于大图模式提高了不少。电商类产品需要通过更多的对比来让用户挑选自己需要的商品，所以这种布局方式非常适用。
3、上文下图
上文下图相比于之前的两种布局方式，则是提高了文字信息的重要程度。当然，由于图片的视觉冲击力依然存在，所以只能说是图文同样重要。上文下图常见于资讯、个人动态的页面中，图片多是采用文中配图或是用户上传，所以图片的质量也就无法保证。而文字信息完整度则由于这种布局方式下文字的重要度决定了它的完整度几乎不可能缺失。在版面效率上，资讯类页面依然由图片的宽高比所决定，个人动态类页面则由文字内容的长短和图片的高度共同决定。如下图：

无论是微信的订阅号消息还是微博，图文同时存在的时候，文字的重要程度都不会低于图片。
左右排列
左右排列是指图片和文字在水平方向上排列，其中有左图右文和左文右图两种布局方式。

1、左图右文
左图右文同样因为图片的视觉冲击力和从左至右的浏览习惯，强调了图片的重要性。但相比于大图模式的上图下文，由于图片的变小，版面效率有所提高。而相比于多图模式的上图下文，同样因为图片的变小变窄使得文字信息有了更多的展示空间，能够更有效的传达信息，也因此对图片的质量要求没有那么高了。如下图：

同样是手机淘宝的商品列表，左图右文可以展示更多的商品描述信息。此外，我们还可以发现，在图片大小差不多的情况下，左右排列没有多图模式的上下排列展示的信息条目数多。也就是说，如果不缩小图片，左右排列的版面效率并不算很高。