排版实战｜多图排版的潜规则

华旗公司 2017-01-16

展开全文

当我们谈论“多图片如何排版？”的时候，实际上我们谈论的是“一个版面如何布局”，而当我们谈论一个版面如何布局的时候，我们最终要达到目标之一就是选择一个最优的图文表现方式向读者、用户传达信息。

布局一个版面，方式方法非常非常多，随手都能列举出几个江湖传说的全屏型、左右对半开型、三等分型、3/4屏型......无论这些排版方式能掰出多少种不一样的名字，实际上都能回归到一个最基本的原理上：排版无非就是设定网格和玩转网格。

从传统意义上的网格

再到网页设计的网格

网格，或者叫做网格（栅格）系统，千万先不要被这个名字吓得点退出本文。先简单科普一下，网格系统最早来源于印刷媒体，通过将一个固定宽高版面（例如A4大小的纸）划分出多个相同大小的格子以及格子之间的固定间隙，从而使的内容排列工整有致。

印刷媒体的网格

而对于现代网页设计来说，网格系统则是将一个页面，从纵向划分出多个相等的网格以及间隙。网页设计中对网格的高度并没有过多的限制，因为多数时候页面的内容是可以不断向下延展，不像印刷媒体对内容的高度有一定的限制。

网页设计的网格

带你看穿貌似随意的版式布局

背后严谨的网格系统

我们不时会看到一些看似摆放很随性，然而实际再仔细看还是能看出当中排列规律的版式。这些版式当中的元素，会通过一些位置偏移、旋转倾斜等、大小对比、重叠等各式各样的手法，从而营造出各种独特的排列风格。

示例分析

不难看出这是一个三等分的网格结构；

编者利用图片的高度差，调整图片在网格中的前后距离，形成不同落差的对比;

示例分析

这个版式，看上去就像一篇手写日记，但是用网格分析下来，还是能看出这是规整的3栏版式：图片部分占了2/3，文字部分占了1/3的这样的比例；

大图下的小图看似摆放随意，但也并没有超出2/3的图片区域之外；

图片的不规则波浪边缘，可以用制图软件来实现；

示例分析

这个版式图片部分占2/5，文字占3/5，也是呈S型交替着；

正文部分虽然是倾斜状态，但未超出3/5的区域；

第二行的模块略微和第一行整个模块重叠，使得内容看起来更加紧凑，并未影响整个纵向区域的划分；

示例分析

在电商中也会经常看到这种一张单列大图下面会有一些多列的内容与之重叠，多列内容有时候是纯文字，有时候是纯图片，而这个例子是图文混搭；

在这个多列版式当中，文字占了2/4，两边的图片各占1/4；

如何活用秀米的布局模板

排出独特的版式风格

前文提及到，排版无非就是设定网格，然后玩转网格，因此我们先从设定网格说起。

潜规则1

布局的宽度是百分比值，而布局的间距是一个绝对值。

熟悉平面设计的小伙伴应该会知道，在设计软件中的网格，网格和间隙的宽度都是一个不变的绝对值；秀米的布局模板，可以看作是网格一样使用，然而布局宽度都不是绝对值，这是因为在实际应用中，手机端的屏幕分辨率有宽有窄，不同厂商有不同的参数。所以秀米布局宽度实际上体现的是布局大小在一个屏幕中占的百分比：

一方面布局的宽度是一个百分比值，而另一方，布局的间距则是一个绝对数值：

实战示例1

在了解了布局的基本属性之后，我们尝试用布局排出这个案例的效果

第1步：选择布局

虽然说，这个示例的网格布局是本质个三等分的版式，但是在选择秀米布局时，不是选择直接选择三列布局，因为图片实际上只有两列。所以正确做法是选择一个二列布局，把一边的宽度调为33%，另一边调为66%：

第2步：设置布局的间距

潜规则2

两列以上的多列布局设置间距时，最左边的布局可以只设置右边的边距，最右边的布局只设置左边的边距，以保证整体布局模块两边与其它内容模块保持对齐；

第3步：排列内容

将图片放入各个布局当中:

然后选中图片，可以调整图片的前后定位或者是宽度。调整图片位置时，可以关掉布局模式来调整：

当你学会了用布局设定网格区域后，那么接下来我们就来看看如何玩转网格，玩转秀米的布局。所谓玩转，其实就是通过调整定位数值，或者调整旋转角度，打破既定布局区域的框框限制。

实战示例2

在一张大图之后，加一个与之重叠的多列布局；

第1步：选择布局

一般来说，添加单张图片是就不需要再添加一个单列布局框住图片了，所以我们在图片之后添加一个三列布局，中间布局的宽度我们设置为50％，两边的布局均为25%：

第2步：调整布局边距

由于想让文字部分内容最大化，本次我们就不设置中间布局的间距了，只设置最左和最右布局的单边边距：

第3步：重叠内容

这一步，我们省略掉文字、图片放入到布局中这一步骤。让三列模块与上方大图重合有两个做法，其一是将这个三列布局的段前距调为负数，然后增加文字部分的段前距使之不与大图重合：

另一种做法则是不上调布局的距离，而是调整两边布局内图片的段前距：

不知你是否已发现最左边布局的图片，是一张背景透明的PNG。在微信公众平台上使用PNG有一条很重要很重要的潜规则：

潜规则3

微信公众平台上PNG图片不能超过40k，超过40k后透明像素都会变成白色；

最后我们再来说一说移动端排版使用图片时，还有哪些注意事项：

潜规则4

微信公众平台上的动图不能超过2M，否则无法正确复制或者同步。

潜规则5

移动端的图片分辨率越大并不等于是越高清！图片横向分辨率为640px已经足够；

关于动图的潜规则都是硬性规定，没有特要解惑的。我们主要讨论图片在移动端排版中，分辨率多大为适中。图片如果太大，会加长加载的时间，而公众平台也会压缩大图的质量。微信公众平台对图片的宽、高限制是4000px，大小不超过5M。如果4000px的概念大约是一个21-23寸屏幕的横向分辨率，那么请拿手机屏幕，跟这个大屏屏幕比比看，然后再想想，真的需要超过640px的图片吗？

看完小结

就快去做练习巩固记忆吧

本篇的内容讲的比较多，但是只有一个概念：排版无非就是设定网格然后玩转网格。关于图片排版，我们总结出了五条潜规则：

潜规则1

布局的宽度是百分比值，而布局的间距是一个绝对值。

潜规则2

潜规则3

微信公众平台上PNG图片不能超过40k，超过40k后透明像素都会变成白色；

潜规则4

微信公众平台上的动图不能超过2M，否则无法正确复制或者同步。

潜规则5

移动端的图片分辨率越大并不等于是越高清！图片横向分辨率为640px已经足够；