感谢「海盐社」的小伙伴：@小溜Epik @菠萝盖儿 对于这篇分享整理总结给予的帮助，希望对大家会有一些帮助。感谢你们。

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

图文组合的布局大致可归纳为三类，即上下排列、左右排列、以及图文混排。由于各个产品中业务的诉求不同，所以用户所关注的内容也不同，这就决定了信息的优先级排布也不尽相同。所以没有通用的布局，只有适合的布局。下面我们就三种布局方式与大家简单分析一下。

目录

1、上下排列

2、左右排列

3、图文混排

上下排列就是指图片和文字在垂直方向上排列，其中比较常见的有上图下文(大图)、上图下文(多图)以及上文下图。

1、上图下文(大图)

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

而爱彼迎的房源我们可以把它当作是“住宿”商品，图片对于用户来说可是商品最直观的印象。

另外，因为这种布局方式下文字信息是与图片同宽的，有足够的展示区域，所以也不用担心文字信息的完整度受到影响。倒是版面效率是值得注意的地方，大图展示势必带来信息条数的减少，因此，图片的高度不宜太高，宽高比控制在4:3至2:1之间较为合理。上面两个例子中，站酷的图片比例是4:3，爱彼迎的图片比例是3:2，在750*1334的屏幕下可以看到第二条信息的大部分图片。如果对一屏信息展示率有严格要求的产品，不建议采用这种布局方式，可以考虑我们接下来讲的多图模式。

2、上图下文(多图)

多图模式是指一行展示2-3张图片，常见于视频、电商类的产品。在分析过大图模式之后，多图模式与之的区别也就显而易见了。随着图片的变小严重影响了文字信息的完整度，我们之前说过，文字信息一般与图片宽度(也就是内容模块宽度)相等，在单行字数较少的情况下，过多的行数是不利于阅读的，因此所能展示的文字信息也就变少了。为了能够传达足够的信息，就需要一目了然的图片，或者在图片中加上文字信息，无论哪种都对图片质量有很高的要求(注意：这儿的图片质量要求，不仅仅是指精美程度，还包括定制化的程度)。最后，也是最重要的一点区别就是多图模式下，版面效率至少提高了一倍。如下图：

可以看到在手淘的瀑布流布局下，文字信息缺失的较多，不得不通过在图片中放置更多的文字信息来弥补；而网易严选则是用一目了然的商品图来传达信息。这种布局方式下，可以展示更多的信息条数，版面效率相比于大图模式提高了不少。电商类产品需要通过更多的对比来让用户挑选自己需要的商品，所以这种布局方式非常适用。

3、上文下图

上文下图相比于之前的两种布局方式，则是提高了文字信息的重要程度。当然，由于图片的视觉冲击力依然存在，所以只能说是图文同样重要。上文下图常见于资讯、个人动态的页面中，图片多是采用文中配图或是用户上传，所以图片的质量也就无法保证。而文字信息完整度则由于这种布局方式下文字的重要度决定了它的完整度几乎不可能缺失。在版面效率上，资讯类页面依然由图片的宽高比所决定，个人动态类页面则由文字内容的长短和图片的高度共同决定。如下图：

无论是微信的订阅号消息还是微博，图文同时存在的时候，文字的重要程度都不会低于图片。

左右排列是指图片和文字在水平方向上排列，其中有左图右文和左文右图两种布局方式。

1、左图右文

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

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

2、左文右图

左文右图与前者最大的差别就是提高了文字信息的重要程度。相应的，由于图片重要度的降低，图片质量要求和图片大小也会有所降低，所以版面效率也会大大提高。这类布局常见于资讯类产品。如下图，UC头条，首页都是一些新闻，文字所传达出来的信息重要度远高于图片。

同时，因为图片的重要度不高，所以缩小了图片的尺寸，从而提高了版面效率。

左图右文和左文右图也是平时大家争论的比较多的点。简单来说，如果描述的是一样东西，那么图片重于文字，采用左图右文；如果描述的是一件事，那么文字重于图片，采用左文右图。

图文混排是指文字在Z轴方向覆盖于图片之上。为了适应多变的图片，我们会在图片与文字之间加上一个图层以提高文字的辨识度，或者对图片做一些优化以使文字突出。常见的有半透明遮罩、无遮罩和渐变蒙层三种方式。

1、半透明遮罩

半透明遮罩由于全部覆盖住图片，所以文字的重要度显然是大于图片的。同样因为全部覆盖，所以图片的质量要求也就没有那么高了。如下图，好奇心日报中的几个专题，专题名称及专题描述的重要度远高于图片。

2、无遮罩

无遮罩就是对图片做一些优化使图片与文字相互独立开来，且常使用文字左上-图片右下的对角线布局，由此可见文字信息与图片同样重要。但这就要求图片必须是定制的，否则图文可能会互相干扰。此外，由于图片部分没有遮罩，对图片的精美度要求相比于半透明遮罩也更高了。如下图：美团的专题模块就采用了这种图文混排无遮罩的形式，美食旅游类产品相比于资讯话题类产品，更需要图片来传达信息。

3、渐变蒙层

渐变蒙层则只是遮盖住图片部分，由此可见图片的重要度相比半透明遮罩是有所提高的。同样，因为非全部覆盖，所以对图片的质量有一定的要求。如下图：

爱奇艺的首页推荐banner中，都是一些热播剧。一个剧集相对来说海报的重要度肯定是高于文字的，所以采用这种部分遮盖的内阴影形式，并且将渐变蒙层和文字置于图片底部，进一步突出图片的重要性。当然，如果文字也相对比较重要的话，可以将渐变蒙层和文字置于图片顶部，就与上图下文和上文下图的区别一样。如下图：

最新版的微信订阅号消息列表，由于是资讯类信息，所以将同样重要的文字置于图片顶部。

那么无论是半透明遮罩、无遮罩还是渐变蒙层，都是将文字置于图片内部，其目的都是为了节省空间，提高版面效率。而过多的文字信息也会干扰图片信息的传达，所以文字信息完整度也会有所欠缺。

通过上面的分析，我们可以总结出这几种布局方式在四个维度上的差别：图文重要倾向、图片质量要求、文字信息完整度、版面效率。(注意：图片质量要求包括精美程度以及定制化程度)

因此，我们可以根据以上四个维度来选择合适的布局方式。

参考

新手科普！APP 的图文布局和按钮总结

https://www.uisdc.com/apps-graphic-layout-button-summary

本文由 @海舟Ocean 原创发布于公众号「海盐社」，未经许可，禁止转载哦。