文案信息较多时，该如何编排版面才会好看？

相信刚接触设计或者工作时不长设计师，多多少少都会遇到各各样编排问题。今天这篇文章是于位设计师提出问题，他说：「文案信息较多时要如何编排，版看上去才能美观些」。我相信大部分都遇到过类似情况，为此我收了不少相关设计作品，从也结出了些编排法分享大家。

过编方法分我放在了章的最后，因为在编前还有细节要注意，面我就带着大先从最基本的建立页面开始逐步过渡到编。

在我们订阅号之前的章中到过这样一个观点：版面是承载信息的一个载体。而一个版面承载信息的数量，全取决于版心的大小。想要放大量的信息，版心一定要大。但到要多大才合适呢？

除天头地脚、左右页边距外，剩的空间就是版心在的区域。就是说确定好天头地脚，左右页边距后版心就被确定好了。

设定页边距的方式有两种，第一种是：等距设置，就是天头地脚、左右页边距的大小都是相同的。第二种是：等距设置，天头有可大于地脚，左页边距可大于右页边距。而在这两种设置方法中，等距设置是最的。

管是在海报、书籍、页还是包中，等距设置都会版面看起来非稳定。在设定页边距时，边的大小最好是一致的，尤是左右页边距。因为，如果左右页边距设定的一样，版面很有可会现重心稳的情况。

当左页边距大于右页边距时，重心可会偏向右边。同，当右页边距大于左页边距时，重心就可会偏向左边。

过存在即合，虽然等距设置会使版面重心变得稳。但利这个特性故意将天头地脚、左右页边距设置得一样时，给版面带来感。

我们来看这组对，左边的两幅海报明显是等距设置，跟右边的等距设置相，左边的海报了方方的平稳感，却多了一些随意又轻松的跃感。

但是偏概全，因为即是等距设置的版面同样可做感，如现在我们看到的这些海报就是很好的例子。画面给人带来么样的印象，取决于版面的编方式，而等距设置只是众多方法中的一种而已。

在实际操作中设定等距的页边距时，可一个边的大小做参考，然后他边都与它呈一定的倍率系。假设我们天头作为参考，将它的边距设为 1，地脚可是天头的 2 倍，就是 2。左页边距可是天头的 2 倍。右页边距可是天头的 1 倍，就是等于天头的大小。

虽然边距的大可以由置，但是如果没有一个参考标准的话，一开始可能会无从下，所以下来会根据不同尺寸的版面、文字数量的多少，列举出一些标准的页边距数值，供大家参考使用。当然在实际操作中，如果发现有不适的地方，可以根据体的需求来做调整。

这是常用的纸张规格：A0-A4、B0-B4。有一点要跟大家说的是，不管是从 A0-A4 还是 B0-B4，它只是纸张大发生变化，而长宽比例是不变的。

因为一张完整的 A0 尺寸的纸张，只要从长边的中点对开一次就可以得张 A1，如果 A1 能够等比放大的话，还是一个 A0 的大。后面的变化以此类推，常用的 A4 就是由 A0 对开四次得的。

针对 A0、B0 尺寸的版面，息量多页边距可以定在 25~40mm 之间；息量少页边距可以定在 40mm 或 40mm 以上。

针对 A1-A3、B1-B3 尺寸的版面，信息多时页距可以设 7~12mm 之间；信息少时页距可以设 12mm 或 12mm 以。

针对 A4、B4 尺寸的版面，信息量时页边距以设定在 7~10mm 之间；信息量少时页边距以设定在 10mm或 10mm 以上。

当信息量少时，页边距的设定有两个选择：以大也以小。而当信息量时为编排考虑，页边距只能设定的小一，为版心腾出空间来。

我们以看上面两对比图，在同一个箱子里放置物时，左边的箱子非常凌乱而且明显装不下，而右边的箱子却非常整洁东西装进去，因为右边的箱子是整理的。是我想说的另一件，在确定版心想要在其内部编排大量信息的，首先要学整理信息。

群组化

不道大家在看我们之前的教程时，有没有注意到一个词叫「群组化」。我们在整理信息时，最简单又有效的手段就是「群组化」，将不同的信息按照类别来进行分组，样就以完成既容易理又不造成误的设计。而且对文案信息进行分组既能帮到设计师，也能帮到观看版面的受众群，为什么么说呢？下面我们来说一下「群组化」的优点有哪。

1. 使读者快速理版面信息

以两版面中，哪版面内部的信息易于理解呢？我相信很多人已判断了。左的版面比，右的版面元素分类明确，信息一目了然。

2. 减少读者观看版面的时间

减少读者的获取信息的时间这一点这非常意义。知道一张招贴海报，它被阅读的时间只几秒钟，如果我们设师还故意给读者制造阅读的障碍，这只会影响信息的传播效率。

还之那例子，通过对比家也可以看出，群组化后的版面阅读起轻松，读者也能短的时间内获取多的信息。因群组化后信息比较集中的，视线不用版面回跳跃，节省了这段时间，阅读版面的速度自然会得到提升。

3. 优化负空间使留白更完整

处好留白问题，版面就会显得凌乱，通过这个对图就看，右侧版面经过群组之后的信息更清晰易读，留白分更整。

版元素是彼此相关，也是构成页主。在编排时要刻意将存在关联信息放在起，这是群组化基本原则。而这个原则也有个名称叫做「亲密性原则」（即接近原则）。

亲密性原则

亲密原则是由式塔组织律中的邻近原则转变而来的。说的是相互接近的元素比相互远离的，更具有成组的倾向。用亲密原则，我们以做到让页面内的信息排疏密得当，元素与元素之间的联系即符合逻辑又满视认的要求，大大降低读者在浏览版面时的视负担。谓是版面编排设计的重中之重。

简单来说，亲密原则就是将存在关联的信息进行群组。但是要何判断信息与信息之间，是否存在关联呢？也是我接下来要讲的重点。我们就以一展览报中一定出现的文案信息来举例子。

我将信息拟人化，目的也是为让大家更的理，什么是亲密原则。首先是小明的爷爷，他对应着标题，小明的对应着的副标题，小明的叔叔对应着标题或副标题的英文翻译，小明的爸爸对应着时间，小明的妈妈对应着地点，而小明自己对应着主办方、协办方等说明信息。

我们以看到，标题和副标题以成为一组，因为小明的爷爷和是夫妻关系，英文和时间信息以成为一组，因为小明的叔叔和爸爸是兄弟关系，地点和主办协办信息以成为一组，因为小明和他的妈妈是母子关系。是最基的一个信息分组方式，关系也很明确。接下来看看在际的报中，分组的方式有哪变化。

首先看报，它的的分组方式是：将标题、副标题以及英文翻译归为一组，时间地点主办方等信息归为另外一组。我们通家族系表来看看，他么分组的依据在哪呢。

通家族系表我们现，他的分组逻辑是样的：小明的爷爷就是一组的，加上叔叔也很合理，因为他们之间是亲子关系。而时间地点和主办方成为一组，它们分别对应着小明和他的爸爸妈妈，同样也是亲子关系。

来看看报的分组方式是什么。设计师将标题和副标题组合在一，而英文翻译单独存在，接着就是时间地点主办协办方等信息。

通家族系表我们现，个分组方式和上一报的非常类似，唯一的区别在英文翻译独立存在。就引出分组时要注意的一个要点：

1. 存在关联的信息以成组也分离

接看这张海报的分组方式：标题独立存、副标题也独立存，英文翻译时间点信息一组，主办协办方信息。

之也过了，存关联的信息既可以组也可以分离。所以标题、副标题独立存任何问题，那英文翻译什么可以时间点组呢？因，小明的叔叔爸爸兄弟关系，小明的爸爸妈妈夫妻关系。但这里我们注意，即使互相存关联的信息也存强弱之分。这就分组时注意的第二点：

2. 互相存关联的信息也强弱之分

再一下海报，也可以发现这个点，即便是在同一个组内，英文翻译间地点之间还是有一定距离的。

再这张海报，它的组方式有点殊了，计将标题标题、间地点、主方等息成了一组，英文翻译独立存在。

之所以这组，依据在于的爷爷和奶奶本就是一组的，而的爸爸和之间是亲关系，的爸妈之间也是亲关系的。所以可以将标题标题、间地点、主协等息全部划在一个组内，但要注好关系之间的弱之。英文翻译独出现理由前面已经说过了就不再赘述。

最后再来这张海报，计将所有的息都整在了一起，这是什法呢？

因为都是一家人，彼此之间都存在关性，因此将所有的息组在一起也同是理的。

说完组的方法后，再来说说组数量的问题吧。在这一组的海报中，从左至右，文字组的数量逐步递增，随着组数量的增加版面的编排难度也在增加，组的数量越多版面的编排难度也就越高，所以大家在组千万不要贪多，那会给你的版面规划带来困扰。

通过距离能判断出，一个版面中底存在有多少个组，因为离得越近越有成组的倾向。

得一提的组合也小之分，一般组合中都会包含几小组合。因，所谓的组合就由这些小组合组的。

我们单独看面这张海报中的组合，发里面包含许多小组合，这些小组合之间也都存距离，这距离就「组间距」。

组间距

组间距的小由亲密性原则控制，关系越亲密组与组之间的距离也就越小。但这距离度的，离得近不表就挨一起，离得远也不表就彻底拉。

1. 组间距的大小由亲密性原则控制

了方便家理解组间距的设方式，我们看一下下面这例子。

这组合它的组间距怎么设的？随意摆弄的吗？肯不。设组间距方法的，比如关系较亲密的信息之间，间隔的距离可以参照小字文字的字高。

这组合中小字的文字三组，我用蓝色标出。

我挑选了这组文字作参考。因它的小中，用它能避免信息与信息之间发粘连。关系较疏远的信息之间，间隔的距离则可以参照字文字的字高。

这组合中的字就中文标题了，我选择用它作参照，那些间隔较的距离就这么设的。

仔细看家能发，我并分严丝合缝的去卡字高，因必这么，知道一致的距离就可以了。如果就严丝合缝的对齐也问题。

如果出因信息较多，导致图这样无法设置组间距时该怎么办呢？这时候我们可以使用「相似原则」或者「闭合原则」解决这问题。

相似原则

相似原则，即彼此相似的元素易被认知一整体，如：色彩相似、形状相似。

拿色相似来说，运用常简单是最基本换色。过文组换上不色来进区分。

色相似是换色，理形状相似是换体。各个体形都不样，文组换上不体，是可以起到区分作用。不过，这需要设计师体有较深入研究才能做好。

为不体混搭在起，稍有不慎会导致版看起来常凌乱，与仿佛在打架常不和谐。来说我更荐大家使用色相似，操作难度低容易出效。

闭合原则

闭合原则就是通框选的方式来进行分组的。被框在一的元素容易被认成一个整。

比报，就是通框选的方式进行分组的。

果不想进行个框选的，还以像样单纯使用条来进行分割，同样能到闭合的效果。

这是为什么呢？格塔原理大家都不陌生吧，我们在前文章有专讲过，用格塔原理封闭原则可以解释这现象。

我们看左边图形时第眼感受到，除了三条线段以有个圆形。为我们视觉系统，强烈倾于看到完物体，以至于大脑能将块空白区域解析成个图形。

上这张海报是个很好例子，去除掉文后我们能明显感受到，版被线段裁切成了 5 份，而份都是个独立封闭图形。

讲到这大还记得开篇处那位同的问题吗：「当案信息较多时要如何编，版面看上才美观一些」。实之前讲的有论分，都是给编分做铺垫的。因为只有当确定好版心及整信息后，我们才需考虑要编问题。另外我还附带了一个容，那就是图片数量对版式的影响。

为什要加这个内容呢？因为，在编排版面的候不光要排文字还要排图片，图片数量不同对应的编排方式也有所不同。下面就给大家介绍一下，针对息量较多图片数量不同的版面，都有哪些编排的方式。

图文穿插

排法一：图文穿插。息量多，图片数量在 4 张或是 4 张以上，可以使用图文穿插的法。

它的表现形式就是图片或是图形，文字息相互穿插排列。用这种相对活泼的方式可以用来缓解阅读大面积文字所产生的压力。

图文穿插可以分：规则型与不规则型两种。

1. 规则型

报纸都知道，它是用来承载大量息图片素材的一个载体，它就是一个好的规则型的例。

其中最值得借鉴的，就是早期报纸的编排方式。将不同的文字组安排在划好的域内，然后用框或是用线来文字组。这是属于有规则的图文穿插形式，讲究的是秩序美。

2. 不规则型

规则的图穿插，跟规则起来更为灵多变。过难点在于，需要设计师有较强的编功才驾驭。

图字叠压

法二：图字叠压。信息量多，图片数量时可使图字叠压的手法。因为是叫图字叠压，图既可叠在字上，字可叠在图上。

1. 图叠字

首先，我们来看看图叠表现形。手法常简单，是图片叠压在文上，而被叠压文大多都是标题或者标题英文翻译。在实操作时有要注意是，我们要确保被压住文能被识出来，也是说叠压幅度不能太大。

如遇到叠压幅度太大，导致文法被识出来时，大家可以试试在图片上，再叠压层描边后文；运用这个法能使被压住文恢复些识性。

2. 叠图

字叠图和图叠字一样，就是位置转换一下而已。图叠字要注意的是文字，而字叠图要注意的就是图；在运用字叠图时，要住文字不能挡住图最吸引眼球的地方。

比人物类图不能遮挡面部，因为我们的视习惯已经决定，一眼看的就是脸，除脸以外还有眼睛，也是不能被遮挡的。

果图没有特别吸引眼球的地方，就以不用考虑遮不遮挡的问题。像种常见的物类图；以随意叠压，因为类图并没有非常突出的地方。

还有当图充当底纹用的时，也以随意的进行叠压。

文字叠压

最一个排法：文字叠压。文字信息量且无图时，以使用文字叠压的手法，也就是文字与文字之间进行叠压。为什么没有图时要使用个手法呢？因为面对空无一图的版面时，受众的阅读欲望是非常低的。时版面中就需要有一个亮点来吸引受众的视，而字叠字就是用来创造亮点的手段。

在使用字叠字时也分两种形式：一、文字充当底纹；二、为证文字的识别而使用的正叠底。充当底纹大家懂，什么是正叠底呢？

当两组相互叠压的文字，填充对比或是互补时，为使双方的识别不受到影响，就使用图混合模式中的「正叠底」选项。正叠底文字被遮挡的部分就浮现出来，就是正叠底形。

案例演示

文案息包括：标题息、标题翻译息、作者译者息、点息、以及装饰息等 5 大部。下面为大家拆解一下这些息都有哪些理的组逻辑。

前三个部描述的是：书名、书名的翻译、以及这本书的作者和译者，它是可以成为一个组的。

下来点息部，它主要描述的就是这本书的概况，也是对书名的一个补充。总的来说所有点息都和标题有关系，但关系的弱之已经标出来了，从点 1 点 4。而在这四个点中标题关系最近的就是点 1，也就是说能和标题独成组的只有点 1，因为它最简洁有力就像广告语一。因此，如果其它三个点想要和标题成组的话，那也一定要带上点 1，而不能脱离点 1 标题独成组。

最后就是装饰息部，它就是作为装饰存在的属于「有用的无用息」，说它有用是因为它能解决一些版面中的负空间问题，比如说版面中有个地方显的空，需要有素来填补一下，这就可以用上它。而说它无用是因为这类息在版面中的字号大多偏，读者基本都会忽略它的存在。

案例一

图穿插规则

我将所有文信息分成了 9 组，这个分组数量是属于偏多，依据是「存在关联信息可以成组也可以分离」。

这是要用到图片素材，共有 6 个。

这本书籍开本接近于 a4 大小，信息量多时，页边距宽度可以设定在：7~12mm ，而我这设是 6mm，与参考值了 1mm。这也是前说过要根据实情况调，所谓标准数值是个参考。

定好版心后，首先沿着页边距处，也是 3mm 地个矩形出来，书脊处也要，这个矩形是用来合那 9 个组合用。

先将第个标题组合编排出来，位放在右上。为什么要放在这里呢？为文竖排时我们阅读序是：从上至下从右至左。标题组合内部组距大小我参考了英文翻译宽。

接着在标题文组左侧，两根辅助线宽度为 6mm，然后在处添加根与标题组合样高线条用于区分。

然后再根据标题组合高度，将组合 2、组合 3 以及组合 4 编排出来，它们隔也都是 6mm，样用线区分。到此上半部分编排完成了。

紧接着在上组合底部两根辅助线，宽度依然是 6mm，然后添加根线用于区分。后将组合 5 编排出来个跨版，它作用是分割上下空。

继续添加根线条用于区分，然后根据上半部分组合结构，将下半部分组合编排出来。编排完成后版留有块空白区域，这块空白区域作用，是为了再放组与标题组合做呼应信息。

这组信息我选择了复标题英文翻译以及作者英文名。为是和标题组合做呼应用，所以多少要和标题挂钩。时为了削弱复内容印象，我故意换了体，将前衬线体换成了衬线。组合呼应上后呢，色也要呼应上。挑选些要信息填充上与素材相色可以。

在下半部分组合添加好线条用于区分，与前样。最后将书脊编排出来第个案例也完成了。

案例二：图字叠压「字叠图」

第二案例的组合数比第一少了两组，其中后一组合，我几乎将所的卖点信息都汇聚了一起。这一块信息我会腰封处，后家会看到一疏密对比的版面。

图字叠压合图片少时使用，所以图片素我会用标蓝的这两。

页距一案例一样还 6mm，版下后接将网格绘制出，腰封我选择占横向的栏网格暂且用蓝色块替。

第一还先将标题编排出，然后对角处编排第二组合，组合 2 与标题对角呼应。组合 2 内部的组间距参考的英文翻译的行距。这也我之提到的，小字的况下可以试试用行距作参考。

右与左下角编排完后，接将左与右下角的信息给编排出。基本所的组合，都按照网格行布局的，包括图中标蓝的文字组，它对齐的隐藏网格。

这隐藏网格就横向第一栏的四分之三处，我用蓝线标出的置。

接把组合 3 编排版面方吸引眼球的方，因组合 3 一很重的卖点信息，我打算重强调一下。它的置关系卖点 3 作底部对齐的，到此整书封的方部分也就编排完了。

剩下的就将腰封处编排出，也就组合 7 整卖点部分。这组合内部的组间距设置，参考了卖点 2 信息的字高。文字信息编排的差不多了，接下我们将作底纹的图片素置入版面中。

看发文字的识别性点差，且整图片素因面积色彩的关系，显得非常跳跃很抢眼必须削弱它。

解决的方法就给背景填充一与图片色彩同属于同色系的颜色。

再把腰封标出，恢复腰封处文字的识别性。后版面的方挑选一些信息填充白色，与腰封的色彩一呼应，腰封处也挑选一些信息填充橙色，与书封整体的颜色作一呼应。后的后将书脊编排出第二案例也就完了。

案例三：文字叠压「正片叠底」

最后一个分组的方式跟之前那两个案例同，只分了组。

页边距及格依然第二个案例，唯一同的是我将腰封的位置往上了半格，因为腰封处我打算编更多的容。

第一步，先创视觉焦点，对标题与标题的翻译使正片叠的手法。将组合 3 就是信息编在标题组合的负空间处，右侧再添一个卖点信息于善标题组合，使标题组合更丰满一些。

接着将剩余的卖点 3 及作者译者等信息，分别编在标题组合的上方与方后，整个标题组合才算是刻画成了。

我们来看看整个标题组合的组间距是怎么设定的：卖点 3 与作者译者信息，跟标题之间的间隔距离为一个字的大小。

给腰封填充上橙红色，暖色成为色调。因为这是一本于肉类的书籍，在没有图片素材的情况，我想通过色彩来唤起读者对肉类的想象。

换色彩后，将腰封处的信息都给编来，而整个腰封组合的组间距，则参考了卖点 2 信息的字。

最后还是老套路，挑一些重要的信息换上色彩作呼应，再将书脊编来，最后一个案例就编成了。

上就是这篇程的有容了，希望大够熟练掌握，并灵。好了，那本期的程就到这里了，我们期再见，拜拜～

欢迎关注研习的公众号：「Yanxishe2017」