阅前叨逼叨：网格原来是这么用的？如何根据内容安排网格类型数量

阅前叨逼叨：网格原来是这么用的？

网格布局是一种非常高效的排版手段，能够协助创作者将内容组织得井然有序，同时，只要合理运用，就不会产生人们普遍担忧的那种呆板僵硬的现象。不少人认为网格布局十分复杂，面对某些排版实例里那些密密麻麻的格线时，常常感到困惑不解。在此略陈管见。

一、

划分网格时不可随意进行，需依据内容特性、信息量、构成要素及版面尺寸来决定网格的种类与数量。若信息及其类别繁多，或图片数量较多、版面留白充足，则适合采用更多网格。相对而言，网格数量则应适当减少。

这张图片展示了某教育机构宣传手册中关于学科设置的篇章，客户指定单页仅呈现一个学科，该宣传册规格为210毫米宽、285毫米高。

从视觉上能够发现，这两个版面所呈现的内容主要涉及行业概况、负责人履历、教育设施等比较标准化的信息，资料篇幅相当可观，但信息的类别并不繁杂，大约有五到六个类别（包含视觉元素）。据此推测，整体版面的布局风格应当偏向于简洁、规整，目的是为了增强阅读体验。因此，没有必要设计过于复杂的版式框架。

初始阶段，需要考虑版式设计。因为页面尺寸为A4，容纳的文字数量较多，若减少页边空白，版心区域就会显得狭窄，因此正文文字字号选择7到8号较为适宜。接下来，决定页面如何分栏，两栏或三栏更为合理，以免影响阅读体验。我们暂且采用双栏布局。

进行下一步工作，需要建立网格结构，将字体大小调整为7.5，接着选用书写工具，绘制一个和版块宽度相等的文字区域，此时该区域会被系统预设的占位符文字填充，挑选一个恰当的行与行之间的距离，就能获得类似这样的展示（我个人选用的行间距数值是13）。

此刻版心里的文字有53行又半，有两种办法，第一种是让版心往下缩一缩，让它的底边和第53行文字的底边对齐，这样版心就能横向分成6个格，每个格里能排8行文字，两个格中间要留出一行文字的空隙。

调整版心高度，使其底部与第55行文字底部对齐，此时版心横向可划分成八个区域，每个区域容纳六行文字，相邻区域间隔一行文字的空白。

我们介绍一个用于计算格子数量的方法，对这方面感兴趣的人可以研究一下，如果觉得复杂不想研究也没关系，我们设版面中的文字行数为A，可以横向划分的格子数为B，每个格子能够容纳的文字行数为C，每两个格子之间的空格占用一行，由此可以得出以下公式：A=BxC+(B-1)，进一步变换得到A+1=B（C+1）。通过代入这些数值，我们可以发现：56等于B乘以C加1的结果，这样就能很快解出，B可能是8而C是6，也可能是B是7而C也是7，或者B是4而C是13，又或者是B是14而C是3等等情况。必须留意的是，A加1这个数一定要能够整除，你可以根据具体要求挑选一个恰当的分配方案。

此处决定采纳前述第二种布局方式，将版面主体区域横向划分成八个单元，每个单元内设置六行文本，相邻单元间保留一行文本的空白间隔。由于版面主体区域面积适中，单元数量不多不少，与该篇内容的排版需求较为契合。

第三步，要将版面中的所有元素按照预设的网格布局进行安排。务必确保版心区域顶部和底部的信息，与网格的边缘线完全吻合，具体效果请参照附图所示。

二、

版面设计时，需要考虑跨栏布局，比如第1Ｐ的表格和第2Ｐ下方的图片可以采用跨栏处理方式，此外跨格子设计也十分常见，在后续排版工作中，还可以探索更多打破网格的排版手法。

三、

标题和副标题会显著左右整体布局的视觉效果和审美感受，因此需要投入更多精力，确保它们与文章主体内容有清晰的界限。可以广泛搜集范例，汇集各式各样的标题和副标题的布局方案。经常采用的方法包括：放大文字尺寸并调整色彩、更换字体样式、中英文混排、使标题居中显示、用图形色块围绕小标题、为小标题编号或添加图标、加上下划线标记、在文字上方绘制线条等等。

我在标题中嵌入了英文，将英文作为背景纹样与中文内容层叠显示，这样做能够增强画面的层次感，并且采用居中排列的方式，比较容易实现视觉平衡，英文部分的颜色当然需要和正文有所区别，这个环节我们稍后再处理。

副标题篇幅都极为简短，因此选用英文标题加以点缀，同时添设序号，以便读者辨识和领会，又在文字上方置入一道粗线，兼具强调标题与均衡版式之效，而且同等级别的标题宜采用一致的排印格式，如此方能提升辨识度。

四、

需要审视版面文字，找出可抽离部分，另作布局调整，借助多样设计手法凸显内容层级差异。倘若整体排版风格单一，或近似元素重复堆砌，版面将显得乏味。

可以运用色块、线框、几何图案来布局，相关的布局方法可以搜寻资料，日常也要注意积累、归纳。

这个案例里，“专业负责人”这部分内容跟其他信息不太一样，首先客户提交了一张负责人的肖像，因此在照片和文字的布局上可以下点功夫，而且需要去掉背景图，可以考虑给照片加上花纹或色块；其次负责人的姓名可以单独设置一个层级；另外，关于负责人的说明文字都是一个个头衔或成就，可以考虑每项占一行来排列。所以关于负责人这一块信息我做了如下两个方案：

另需关注第二部分里，关于专业说明的文字，其中涉及核心课程的部分，可以考虑分列出来，以便呈现得更分明，也方便查看，我为此构思了两种设计思路，

五、

布局网格时，整体结构需与网格线吻合，内部细节可略作调整，不宜所有元素都精确贴合网格或使用单一排列手法，否则容易显得单调乏味。

六、

色彩方案需结合机构形象与信息传达的氛围，同时兼顾机构固有标识色。此机构为高等学府，风格取向应偏向沉稳，色彩不宜过于繁杂。该校徽主色调为海蓝，因此选用该色系作为基调，再选用一抹草绿或碧绿作为点缀，可增添视觉层次感，其他色彩则选用素灰与纯白。

为了使左右两个P之间产生显著差异，我在色彩搭配上，将第2P的底色选用了蓝色，以此区别于第1P的白色背景。

假如用户反馈反响很好，照片的色调应该尽量保持一致，否则视觉感受会显得杂乱无章。

最后需要微调一些地方，比如标题和正文之间的距离偏近，某些板块间隔不够，可以借助参考线进行修正，我还将第2页的图片尺寸放大并设置了出血，这样做一方面是为了完整呈现图像，另一方面也是为了有意识地偏离常规布局。

七、

版式设计原理才是关键因素，包括可辨识度、一致性、均衡感、差异性以及风格协调性等要素，这些才是决定作品质量的核心要素，而网格系统仅作为辅助手段，对最终效果起辅助作用。

经过先前的研究，我又构思了另一种设计，在该设计中，版面被划分为三个竖排，呈现的样貌同第一种设计相去甚远，不过实施的技术手段依然如出一辙。

两个方案的样机展示：

网格的布局方法，以及借助网格进行排版的技巧，其实存在多种多样，笔者仅呈现了一种较为常规且规范的做法，网格体系是一项功能强大且结构精密的设施，葱爷对此尚在研习阶段，存在诸多有待完善之处，因此这篇文章不妨视作一次思想碰撞与启发性建议。

继续浏览有关 网格系统排版设计 的文章