【干货】详解版式设计中的网格系统

时间：2023-09-02 04:42:02 | 来源：网站运营

时间：2023-09-02 04:42:02 来源：网站运营

【干货】详解版式设计中的网格系统：​最近很多同学问的最多的问题是什么是网格系统？它与版式设计有什么联系？基于这些问题，很有必要编写一篇文章让大家提前认识一下网格系统与版式设计。




网格系统与版式设计

版式设计亦称版面排版。所谓编排，即在有限的版面空间里，将版面构成要素——文字字体、图片图形、线条线框和颜色色块等诸因素，根据特定内容的需要进行组合排列，并运用造型要素及形式原理，把构思与计划以视觉形式表达出来。




版面设计是平面设计中重要的组成部分，也是一切视觉传达、艺术施展的大舞台，被广泛地应用于报纸广告、书刊、包装装潢、企业形象 (CI) 和网页等领域。




一、栅格的概念

在进行版式设计之前，我们需要先了解和认识一个新的概念——栅格。栅格设计 (Grid) 又叫标准尺寸系统、程序版面设计及瑞士版面设计，是一种运用固定的格子设计版面的方法，即 ：利用页面上预先确定好的网格，按照一定的视觉原则在网格内分配文字、图片、标题等元素。英 语 中“Grid” 一 词 源 自“Gridiron”的简写，意为格栅、网栅或网格。

栅格设计不是简单地将文字、图片等要素并置，而是遵循画面结构中的相互联系发展出来的一种形式法则。它的特征是重视比例、秩序、连续感和现代感。栅格设计成功的关键是，在仔细的计划内，纵横划分版面的关系和比例。当我们把技巧、感觉和栅格这三者融合在一起灵活而创造性地进行设计时，就会产生精美大方，令人印象深刻的版面，并在整体上给人一种清新感和连续感，具有与众不同的统一效果。同时，设计工作也因此更加方便，设计者不会再因图与图之间的距离，文字与图之间的关系等方面的原因而伤脑筋。

我们在版式设计中使用的所有元素都是按照这些格子的划分有序分布、组织的。在栅格系统中，对齐是一个基本的原则，包括竖向对齐——栏的划分、图片和文字与栏的竖向对齐，同时也包括横向对齐——对开页面中图文的左右横向对齐与协调。










二、栅格的制作

栅格的设置是版式设计中重点之一。所谓栅格，就是设计物料在视觉表现上的规矩、框架。所有的页面的版式设计都应在一定的规矩里完成，这样，在视觉外观上才会具有整体的统一感。当然不能是所有的都千篇一律，要有变化，但不管怎么变，都要沿着这条栅格主线，遵循一个原则，这样才既有统一又有变化。




横向栅格的制作

1. 根据页面的大小设定版心的位置，也可以参考已有的同类设计的风格，用尺子量出距离。如果是杂志订口的距离一定要注意根据杂志预计的总页数及装订方式来决定，如果很厚，订口距离要相对大一些。




2. 书籍或杂志里占最大比重的是内文，所以内文字体的设定给读者的阅读带来愉悦是最为重要的，那么在版心位置大概定出后就首先要设定内文的字体。




3. 选定好内文字体（字体、字距、字号、行距），要铺满整个页面，先暂定页面分为三栏，然后打印“原大”（按杂志原样尺寸大小打印）后，按裁切线裁去“出血位”以外的纸张，从而接近成品尺寸。根据经验，一定要打印原大，这个时候千万别因为省纸省墨或怕麻烦而按比例缩小。原大便于我们更好地比较字体、字距、字号、行距是否是我们最终想得到的，从而在以后的工作中省去很多修改。要知道，改一个元素就要改整本杂志里所有出现此元素的地方，那将是一项巨大的工程，而且会因为忘记修改某个篇章而造成我们犯很低级性的错误。




纵向栅格的制作

前面选择内文文字时，我们暂时将版心平均分为三栏，现在，我们要将它分为更多的栏，以适用于各种版式的设计。格子越多，参照也越多，选择更多，也更灵活。在这之前，我们早已定好了设计的风格，每个栏目的感觉也应该在我们脑海中形成一个初步想法，那么具体到页面，分几栏比较合适？




三、栅格应用到分栏的技巧

双栏

双栏是最常见的一种分栏方法，掌握起来也比较简单，易于上手。将页面纵向等分为两部分，图片和文字均整齐划一，整个页面看上去相当规矩、统一、稳健，这些都是双栏的显著特点。双栏可以相对完整、连续地展示文字和图片，在视觉上更容易使读者集中精力，达到很好的阅读效果。




三栏

三栏也是一种很常见的一种分栏方法。较之双栏，三栏显得更加灵活和富于变化。最主要的变化来自图片。三栏中，图片的表现方法比较灵活，通栏的大图可以与占一栏或两栏的小图并存。从三栏起，我们就要逐步建立一个“并栏”的概念。并栏就是在划分好栏数之后，将其中的若干栏并作一体，与其它栏一起表现出来，形成一个整体。




四栏

四栏可以看作是双栏的演变和扩展，其将页面以中心对称等分四栏，看起来比较自然、舒服，符合一般大众的视觉心理和喜好。需要注意的是，由于将页面四等分，栏的宽度变窄，在视觉上其实并不适合连续阅读。因此，四栏的排法常用于那些短小精悍的信息类栏目和文章，如产品介绍、最新动态、书评等。

当然，这也不是一成不变的。有些篇幅较长的文章由于图片量大，文字信息量也很大，亦可采用四栏的排法。




五栏在熟练理解和掌握了用两栏、三栏和四栏将页面等分之后，更多的分栏可通过适当演变，进入更加灵活的版式。五栏或更多栏的版式将更频繁地使用并栏的技巧。现今，很多报纸多采用了五栏的排法，但杂志版面一般不使用那么“明显”的五栏，而是将五栏的版面通过并栏手段，实现一种对页面“不均衡”的分配。这种排法，看似破坏了页面的平衡或稳定，但由于巧妙并栏，图片或文字的排法更加灵活多变，同时又不失一定的章法和原则，若掌握得好，也可以做出赏心悦目的页面。另外，将五个单栏排列组合，也可以形成左两栏加右三栏的格局，用数字表示的话就是“23 并栏”，同样，亦可形成左三栏加右两栏的变化，即“32 并栏”。




总之，灵活运用并栏的技巧，更多的分栏（六栏、七栏……）也可以创造出丰富多样、严谨有序的版面。可灵活运用上述方法，以此类推，如六栏亦可视为大三栏，八栏亦可视为大四栏或大两栏。




四、栅格设计是版式设计的基础

版式设计应该遵循建立在栅格基础上的实用原则，而不仅仅只注重创意。具有创意的版式设计，但仔细观察之下，却大多经不住推敲。有时候我们并不缺乏创意，相反，缺少的是严谨。

原因在于，大家对栅格系统还缺乏足够的重视，因此更谈不上熟练应用了。栅格设计系统是一种实用的工具和手段，是版式设计的前提和基础，只有在领会了它的精髓之后，我们才能在实际设计中创作出更加严谨、经得起推敲的作品。




五、最后

版式设计可以说是平面设计的基础，是设计师必须掌握的基本功之一。无论是平面设计、还是PPT、网页设计、广告设计，没有好的排版，信息传达就会受阻，更谈不上这是一件好的设计作品。




点击阅读全文可深入学习