用超多案例，帮你掌握 7 种最常用的排版方法！

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

版式设计的应用范围，涉及到报纸、刊物、书籍（画册）、产品样本、挂历、展架、海报、易拉宝、招贴画、唱片封套和网页页面等各平面设计领域。

首先我们来了解一下什么叫版式设计？

版式设计是现代设计艺术的重要组成部分，是视觉传达的重要手段。表面上看，它是一种关于编排的学问。实际上，它不仅是一种技能，更实现了技术与艺术的高度统一，版式设计是现代设计者所必备的基本功之一。

版式设计是指设计人员根据设计主题和视觉需求，在预先设定的有限版面内，运用造型要素和形式原则，根据特定主题与内容的需要，将文字、图片（图形）及色彩等视觉传达信息要素，进行有组织、有目的的组合排列的设计行为与过程。

今天我们就着重介绍其中「图片（图形）」在版式设计中的多种设计技巧。

平铺图片

平铺图片：指的就是将图片铺满整个画面，充当版面设计中的整个背景，这样的设计方式多用于书面封面的设计。

1. 注意

• 使用平铺图片的版式设计，最好选择图片具有吸引力的，且突出主题的图，文字不宜太多，因为图片铺满整个画面已经很饱和，文字太多太杂的话会使整个画面太混乱，找不到重点。
• 如果图片是表达主题的，那么文字排版最好不要影响主图的视觉中心，选择主题空缺位置等不会影响主题阅读和识别性的位置排版即可。

2. 案例演示

3. 版式结构分析

对于这样的版式，图片的选择是主题中心图居于图片的中心位置，那么我们就要选择主题图周围空白的区域进行文字的编排，这样就不会影响图片的美观以及识别性。

图片居中排版

图片居中排版：指的就是将图片居中放在画面的中间位置，且让四周留白的对应位置的空间保持一致。

1. 注意

• 同样的，我们在做设计的时候要知道表达的主题是什么，并且我们要找到最能表达主题的设计方式，有的主题可能使用图片会更加能够表达主题的中心思想，但是有的可能是文字才能更好的渲染出主题的目的，所以我们要考虑设计中的目标。
• 文字排版我们最好还是能突出主题，并且做到大标题小文章的设计原则，能够一眼让用户看到我们的主题。
• 文字的选择我们最好也不要选择太多的文字样式，最好保持在 3 种文字以内。

2. 案例演示

3. 版式结构分析

这个版式我可以通过案例演示的设计稿一眼就能看出图片居中为主题中心，那么对于文字的排版我们可以选择在图片的周围空白区域随意排版，因为周围的留白已经足够编排文字，我们最好选择在留白区域排版文字，这样有助于整个版面设计不会缺失平衡。

根据设计需要，文字部分也可以和图片重叠。根据实际情况而定，不过大多数还是排在留白区域为佳。

图片平铺+色块+文字

图片平铺+色块+文字：指的就是将图片平铺在版面中，可以是和第一种一样的全铺，也可以是非全铺，再就是在图片上加一个有颜色的色块，再把文字叠加在色块上。

1. 注意

• 根据图片的颜色我们最好选择和图片颜色差距较大的色块作为分割的色块，这样才有利于区分图片和色块。
• 色块最好设置为透明的，这样既不会影响主题的突出，还能看到主题图片的完整性，透明度的调整最好不要太大也不要太小，根据图片实际情况而调整。
• 色块上的文字我们也是要选择和色块颜色差距较大的，这样才有利于文字的识别性和突出性。

2. 案例演示

3. 版式结构分析

虽然我们的视觉中心都是在版面的中心区域（也就是淡蓝色矩形区域）和第二张一样的视觉中心，但不同的是，我们这里底部是全铺图片，矩形是作为图片和文字的一个分割层，起到引导用户视线的效果，目的就在于让用户能够看到我们的主题文字，所以这里的文字部分才是主题目标。

图片任意排版

图片任意排版：指的就是将图片放在版面中的任意位置，不居中。

1. 注意

• 图片与主题要搭配，图片占据版面的大小和位置可以随意一些，不用那么拘束，能更好的展示设计感，图片图形可以是几何图形中的各种图形，不同场景可以搭配不一样的图形排版。
• 文字排版大小粗细区分，错落有致，看似无序实则有序，包括留白位置做到要具有呼吸感。
• 图片的选择最好是要有引导性的视觉指示，可以根据人物或者其它主题的视线/方向引导用户看下一个位置的内容信息。

2. 案例演示

3. 版式结构分析

这里我就只拿一种排版方式做版式结构分析，这种类型的版式设计，一般也是图片为用户的第一视线，图片和主题搭配，并且留白的位置相对较多，那么文案的排版我们最好还是不要影响图片的效果，合理的运用留白的位置，保证图片的美观和识别性，才能使整个版面达到美观的效果。

图片出血排版

图片出血排版：指的就是将图片放在版面中四周可以不留出血（出血指间隔）可以是出血1边、2边、3边。

1. 注意

• 图片的大小位置都是靠版面边缘的，可以是1边，2边，3边，根据需求选择合适的图形大小和形状以及出血的数量。
• 文字排版同样不能影响图片主题的阅读效果。

2. 案例演示

3. 版式结构分析

我们可以在图片上排版文案，但是我们需要根据图片的主题中心位置而定，需要保留图片主题，不影响图片主题的识别性和美观性，在图片的非重点区域排版一些相关联的文案，这样既不会影响图片还能达到引导用户浏览图片文字的效果。

图片分割排版

图片分割排版：指的就是将图片分割成几个图形组合，不影响图片识别的完整性。

1. 注意

• 图片分割图形的选择也是多种多样，根据需求可以随意变化，可以是规则的图形，也可以是不规则的图形，还可以是物体轮廓，文字样式。
• 文案排版同样不能影响图片的美观和识别性。

2. 案例演示

3. 版式结构分析

这里还是拿的第一个案例做版式结构分析，每一张图片都会有一个对应的位置是图片视觉的中心，那么我们如果需要在图片上做一些文案的排版，都要注意做到不影响图片主视觉的部分。

图片跨页排版

图片跨页排版：指的就是图片占据在版面的两个面，大小随意。

1. 注意

• 图片的选择最好是横构图的，并且图片的视觉中心最好不要在跨线边缘，不同排版方式的图片选择不一样的构图方式，视觉效果会更佳。
• 对于文案较多的，我们尽量做到有大标题和小标题，便于用户直接找到自己感兴趣的话题进行下一步浏览。

2. 案例演示

3. 版式结构分析

对于跨页的排版方式也是有很多种，可以出血几条边，也可以在版面中的各个位置，同样的也是要根据实际情况而排版，图片和文案交错排版会使整个版面更加美观和有呼吸感，最好不要一块全是图片的堆积，另一块全是文案的排版。

总结

其实对我个人而言，版式设计中，不管怎么排版，图片都是第一吸引用户视线的，所以图片的选择一定要紧扣主题，并且要选择有一定美观性和吸引力的图片。想要吸引用户的眼球，那么就一定要有一处优势，不管是图片还是文字排版等各种方式。

今天主要介绍的就是图片在我们设计中的 7 种不同的排版方式，需要注意的点有：

• 图片的选择要和主题呼应
• 图片要美观
• 图片识别性要强
• 图片和文案排版要合理
• 文案要做到大标题小文章
• 排版要合理运用版面空间
• 版面要有呼吸感

欢迎关注作者的微信公众号：「设计小余」