众所周知，文字和图片是版面中重要的视觉元素。文字的排列决定了观众的阅读效果，而图片更容易吸引观众的注意力。而且在大多数情况下，它们一起出现在布局中，所以在我们的设计过程中，它们之间的排列形式是非常重要的。那么这个看似简单的课题有哪些值得我们关注的问题和细节呢？让我们欣赏一些混合的图片和文字。

海报、DM、网页、长图、杂志、报纸等媒体，有大量图文混合应用。

图片和文本之间的距离

在图文混合的过程中，首先要注意的是图文之间的距离。如果把图片和文字放在一起，要么文字说明图片，要么图片表达文字的内容，即它们之间的内容是相关的。如果距离控制不好，会给读者带来阅读障碍。

我们来看一个小例子。如果版面只有一张图片和一组文字，两者之间的距离只要不是太近或者太远都可以接受，同时保证美观。

但是他们的距离很近，就像现在这样，当他们几乎粘在一起或者很远的时候，中间没有其他的符号来装饰，所以也不是那么没有吸引力。

一般情况下，如果我们以字符为参照，一行字符的高度为1X，则字符与图片的距离保持在一个字符的高度。

或者1.5X，包括两个字的高度，看起来很舒服，就是一张图一段文字的情况。

布局中有两组或多组图形组合。这时候我们不能简单的考虑一组图形组合之间的距离。

水平行忽略距离的效果会变成这样。

现在，如果版面中两组图文距离太近，也会造成版面混乱，信息传递不清晰，我们很难区分哪个文字解释哪个图形。当这两组图文之间的距离增加时，它们的关系就变得清晰了。版面设计的目的是为了美观、清晰、快速地传达信息，尽量不要给读者设置这样的障碍。

图片和文本的布局

了解完这一部分，我们来找出图片和文字的布局。在版面设计过程中，图片和文字的排版同样重要。我们不能只看着好看而忽略文字的可读性。

比如一般情况下，我们会根据版面的大小来设计这两种常规形式。但是，有些学生会发现这些形式太常见，想做一些改变。

做了改动之后再看这个布局，也很漂亮，但是文字和图片的联系很模糊，阅读顺序让人感觉没有规律，所以是一个形式上很漂亮但是功能性很弱的设计。

如果要这样设计，可以在图文结合处加一条线来缓解这个问题。

除了使用线进行分割之外，还有许多方法可以解决这个问题。比如用同一行，我们也可以利用行的连接功能，把文字和对应的图片连接起来，提醒观众这个文字是用来解释这个图片的。

此外，我们还可以使用序列号标签来加强提示文本和图片之间的联系。

包括位置关系的使用，布局中的图片和文字可以相互对应，也可以自然链接在一起。这些都是在不影响阅读体验的情况下，通过图文混合进行修改的小技巧。

看这种组合的形式，布局好像没什么问题，但是尽量不要用这种段落和文字中间插图的方式。因为图片在这个位置的出现会阻碍我们正常的视觉流动，干扰读者阅读这整条信息的节奏，造成不连贯感，所以这也是一个错误的案例。

更改为垂直文本也是如此。图片的布局应该在不妨碍我们眼睛流动的基础上进行安排。

图文合一

在图文混排中，也要注意这两个视觉元素的协调统一。前面的内容已经提到了统一的重要性，直接影响到整个版面的视觉效果。所以要想办法把图文不协调降到最低。

如果是文字量大的段落，那么文字宽度与图片宽度一致的方式属于最强统一。如果是左右结构，最好保证两者高度相同，这就是顺序。

这么简单做肯定不舒服。

如果文字量小，可以保证文字信息与图片对齐。左对齐，右对齐，中心对齐都很舒服。

如果把文字放在不左不右不居中的位置，会更难统一。

图片中文字的处理

在完整的图片中加入文字信息时，文字信息一般起到解释图片的作用。相对于文字来说，图片相对更重要，更主体。在这种情况下，我们在做类似的设计时，要注意文字不能抢走画面的风头，破坏画面的整体性。

文字与图片重叠。不要按图中的键位。最吸引人的位置被按下。结果，文字破坏了画面的美感，阻碍了图形向外传递信息的速度。

如果把文字放在这些地方，完全没有问题，文字说明图片。

在这张图片中，当文字排列在绿叶的位置时，不适合使用绿色，绿色太接近图片这个区域的颜色，文字识别变得很差。如果把文字改成白色，和图片分开，就不会出现这个问题。

当然，上面说的是用文字解释图形。如果以图形为背景，它们的主次关系颠倒，那就是另一回事了。

案例演示

这是我们为本课设计的案例。整个布局形式主要由图片和文字组成。其中对细节的控制也遵循了我们之前内容中提到的知识点，无论是整体美感还是传递信息的方式都非常舒服。

比如上面说的图片和文字的距离不远，刚刚好。这里增加两套图文之间的距离是为了不增加读者的负担。

当文本出现在图片内部时，批注文本不能在图片中按住键显示位置。

包括上面提到的其他注意事项，我们欣赏优秀作品的时候可以有意识的观察，看看其他人图文混排的时候有没有这样做。在关注和理解了这些知识点之后，我们把它们运用到自己的设计过程中，这也是学习和提升的过程。

总结

总结今天的内容，在图文混排的时候要注意控制图文距离，不要给读者设置障碍。图文的排版不要为了美观而破坏对文字的识别，要注意图文的统一。如果图片中有文字，文字不能破坏图片的完整性，需要对比颜色。

欢迎关注研习设的微信公众号：「Yanxishe2017」