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

　　左右排列

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

　　1、左图右文

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

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

　　2、左文右图

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

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

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

　　图文混排

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

　　1、半透明遮罩

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