版式设计的网格系统

浅谈版式设计中网格系统的构建方法摘要：版式设计作为现代设计艺术的重要组成，可以对视觉传达效果的改善提供重要帮助。

而网格系统作为版式设计中最为重要的环节，具有自身的形式与特征。

文章从网格系统设计的创意规律、种类入手，重点的对网格系统的设计内容进行了论述。

关键词：版式设计；网格系统；比例网格可将版面的构成元素如点、线、面协调一致地编排在版面上。

网格系统在实际版式设计中具有比例感、统一感和准确感强烈等版面艺术特点，伴随着当今时代信息量大而快速传播的要求，网格系统在版式设计中已经越发引得人们的重视，因此有必要对其构建方法进行探讨。

1网格系统设计的创意规律1.1根据主题要求确定网格风格的设计由于网格的数量以及设计的主题与媒介的特点有着极为密切的关系，为此一般在娱乐性的主题上使用活跃的版面设计，例如复合网格系统设计；而在严肃的主题上使用理性的版面设计，例如对称式网格系统设计。

1.2根据版面的宽幅确定网格的数量关于通栏的大小以及变化在西方已经有较为严格的规定，例如在每栏中的字母不超过50个，日本是28个字，而中国至今还没有明确定规定，设计中一般依靠设计师的感觉决定[1]。

1.3在保持页面风格一致的前提下还要有灵活多变的特点网格系统的设计能够提供方便快捷地形成系列版面的基础，在保持页面风格一致的前提下还要有灵活多变的特点，以保证信息的传递更富有层次与条理。

2网格系统设计的种类（1）对称式网格系统设计。

这种设计一般采用左右两页、两栏或者三栏等，页面、页码的位置对称，左右两页可以互为镜像，从而表现出一种严谨、分明、理性的特点。

（2）不对称式网格系统设计。

这种设计一般用于较为轻松内容的表现，例如散文、诗歌、女性、体育等，这也就决定了不同版式的平衡性。

例如不对称中的留白处理就可以为人们留下一个想象的空间，与中国画的留白有异曲同工之妙。

[1]（3）模块网格系统设计。

这种设计最早使用于报社编辑，可以将多个模块快速的拼装在一起，从而提升了排版速度。

版式设计重要知识点版式设计是指在印刷、排版、平面设计等领域中，将文字、图片、图形等元素有机地组织在页面上，通过合理的排列、分布和空白的运用来达到美观、整洁和信息传递的目的。

良好的版式设计能够提升阅读体验，增强信息传达效果。

以下是版式设计中的几个重要知识点：一、页面尺寸与比例页面尺寸与比例是版式设计的基础。

不同尺寸的页面适用于不同的设计需求，需要根据设计目的和载体来选择合适的尺寸。

同时，页面的比例也需要进行合理的调整，以确保页面的整体平衡和美观。

二、网格系统网格系统是版式设计中常用的组织和布局工具。

通过将页面划分为均匀的网格，可以更好地安排文字、图片和图形等元素的位置和间距，保持页面整体的协调性和一致性。

三、字体选择与排版字体选择是版式设计中至关重要的一环。

合适的字体能够准确传达信息，塑造品牌形象。

在选择字体时，需要考虑其风格与设计主题的契合度，并注意字体的清晰度和易读性。

在进行排版时，要注意字间距、行间距和段落间距的调整，以增强文章的可读性。

四、色彩运用色彩是版式设计中的重要元素之一，能够引起读者的情感共鸣，并增强信息的表达效果。

在运用色彩时，需要考虑色调的搭配与协调，同时也要注意使用适量的色彩，以避免过于花哨或单调沉闷。

五、图片与图形处理图片与图形在版式设计中起到引导视线、增加吸引力和丰富页面的作用。

在使用图片和图形时，需要注意其分辨率和清晰度，以保证在不同媒介上的良好呈现。

同时，也要注意图片和图形的位置与大小的合理安排，以便与文字进行有机的组合。

六、空白的运用空白是版式设计中常被忽视但却十分重要的元素。

通过合理运用空白，可以增强版面的整洁感，突出重点信息，提升阅读体验。

在设计中要注意页面的边距、行距和字间距的安排，以及段落与段落之间的空白使用。

七、层次与重点突出版式设计要注重层次的建立和重点的突出。

通过合理的字体大小、颜色、粗细以及元素的排列和分布，能够使重要信息更加醒目，读者更容易获取所需信息。

作者简介：柳溪（1993.03-），女，汉族，硕士，四川大学，研究方向：视觉传达。

浅析网格系统在版式设计中的重要性柳溪（四川大学，四川成都610000）摘要：在信息传达日益浮躁的当代，如何能够更加快速更加准确的传达信息的重要性和准确性是版式设计的核心。

巧妙的版式设计能够更好的表现视觉效果，增强视觉冲击力。

网格系统对于版式设计来说，是版式设计的核心内容。

在网格系统的设计过程中，要将其与版式设计充分结合，凭借高效科学的网格单元和分栏法则来对版面的内容进行有效的设计，同时加强视觉效果，对于版式效果的呈现有着十分重要的意义。

关键词：网格系统；版式设计；构建方法中图分类号：J524文献标识码：A 文章编号：1671-1602（2018）07-0075-01网格系统作为版式设计的重要内容之一，起着合理规划版面，编排版面的作用，使版式设计以更加协调合理的方式呈现。

随着社会的发展，人们的审美需求不断提升，如何有效的提升版式设计以及如何合理的将网格系统合理运用于出版物，这是一个势在必行的探索。

1网格系统在版面设计中的意义（1）快速准确的传递和引导信息。

设计师对于网格系统的合理运用应用意味着使出版物版面编排更加逻辑化,清晰化,简单明了地剖析版面中各种元素它们内在的本质的关联,着重凸显出核心要点,主次分明。

逐渐做到客观性代替主观性,使编排设计过程更加科学合理化,使得编排物整体色彩、信息以及构图更加趋向于整体化，以获得跨越平面和三维空间体系结构上的支配力。

在编排过程当中采用网格系统合理规划各个视觉要素,使得编排中的内容有条不紊的将信息准确的而快速地传达给目标人群。

使得编排的内容浅显易懂，起到预期快速准确传递和引导信息的作用。

（2）促进整体布局的合理有效性。

设计师在编排过程中以网格系统的形式来调整和布局版式空间，可以恰当合理地布局编排图标、文字。

真个网格系统是依据一定的设计原则和风格设计而成的，网格系统类似于设计师内在的逻辑性工具，有了这种工具，可以帮助设计师完成一套完整的编排体系，使得整个版面排版更加清晰、准确、简洁。

网格系统版式设计中的网格大家在学习这个章节的时候，有些概念可能在前面章节的知识点中会提到，这个章节任然会再次做简要解释，原因是本章是一个较为独立的介绍网格系统的章节，其中涉及到行数的计算，仅仅通过视频较为难以理解，所以为了帮助理解，对于部分关键的概念，本章我会任然会花少量的文字强调。

本知识点我们主要是围绕：网格系统、单元网格、度量系统，这三个部分展开学习。

首先，何为网格系统？如图1所示，在版面设计中，网格是被当做一种秩序系统来进行使用的。

它是设计师的某种特定的精神和态度的表达，因为它展示出了设计师是以一种结构性、预见性的方式来进行构思和设计的。

图1那么使用网格系统会为我们的设计过程带来什么好处呢？约瑟夫•米勒在其《平面设计中的网格系统》一书中对网格设计进行了阐释，此举使其成为平面设计史上的先驱。

约瑟夫•米勒帮我们总结到，网格系统的使用可以帮助我们：1.更加系统化和清晰化的理清设计思路；2.集中精力看透设计中的关键问题所在；3.以客观取代主观；4.理性地去看待创造和制造产品的过程；5.学会将色彩、形式和材料进行结合；6.尝试从建筑的角度来驾驭内外空间；7.设计态度变得更加积极前瞻。

这是设计师一种职业信仰的体现，经由这个过程，设计师的作品才能变得更加易懂、客观、具有功能性且富有逻辑美感。

那么单元网格有什么呢？我们来看看示意图，如图中，阴影部分所示（图2），网格将二维平面的版面空间划分成为了这些更小的空间，这些划分后得到的小空间就叫做单元网格，这些单元网格的大小既可相同也可不同。

图2这里，有几个需要注意的基本规则。

1、如图3所示，单元网格的高度相当于这个单元网格内文本的整行数。

2、单元网格的宽度与文本栏的宽度相当。

3、通常，网格中的各个单元网格之间会留有一定的间隙，这样一方面可以让图片之间互相不受干扰，保证了文本的易读性；另一方面也为插图的注释预留出一定的空间。

这些间隙的纵向高度为正文的一行、两行或者更多行，横向的间隔则取决于正文字体的字号大小和插图的尺寸。

浅析书籍版式设计中网格系统的应用书籍版式设计中网格系统被广泛应用，它是一种以基础网格为基础的设计原则。

网格系统使得设计师可以快速而准确地排版内容，通过统一的格子宽度和高度构建页面上的所有元素，使得阅读和理解更加容易。

这篇文章将浅析书籍版式设计中网格系统的应用。

首先，网格系统有助于保持一致的间距和比例。

设计师可以将页面分为等宽和等高的网格，然后将元素放置在网格中，这样可以使得每个元素与其周边元素之间的间距相等，达到整体平衡的效果。

在进行排版时，使用相同的坐标和排布方式，可以保证相同元素之间的距离一致，从而达到视觉上的统一感。

其次，网格系统对于对齐和对称性非常重要。

使用网格系统可以确保所有元素之间的对齐和协调，并且保证相同的距离和比例关系。

当元素之间存在对称代替或关联时，网格系统能够轻松的实现这些效果。

它可以让设计师更快地将内容组织整齐，让读者可以快速地获得所需信息。

另外，网格系统也有助于页面的分层和分组。

通过将页面分成基于重要内容的分层和分组，可以确保每个分组的大小和位置非常一致。

除此之外，通过让分组彼此间相对独立，可以让读者在阅读时更容易跳转到相同类别的内容。

这样有助于使读者更加清晰地理解画面中的内容，并且在解读信息时能够更有条理性。

最后，网格系统在响应式设计中也非常重要。

随着移动设备的普及，相应的网格系统帮助我们建立一下易于响应的设计。

设计师可以通过网格系统来感知和预测移动设备的不同屏幕大小和方向，灵活地调整和改变设计布局。

这样读者可以在不同大小的屏幕上阅读同样一本书、同样一个用户界面在手机端和电脑端也不会感到困惑。

总之，网格系统在书籍版式设计中起着非常关键的作用，它能够让设计更规范、美观并且易于阅读与理解。

网格系统能够提供一种通用的布局，能够有效地帮助读者理解页面内容的结构，提高用户体验，值得设计师们深入学习和掌握。

6.7 ⽹网⻚页及⼿手机界⾯面中的⽹网格运⽤用这⼀一个知识点主要介绍⽹网格系统在⽹网⻚页和⼿手机界⾯面中的运⽤用⽅方法。

我们以在APP设计中运⽤用⽹网格系统为例例。

第1步:定义最⼩小单元格前⾯面我们介绍了了⽹网格系统是由⽔水平和垂直的线，将⻚页⾯面划分成⼀一个个细⼩小的正⽅方形格⼦子，那么这个正⽅方形的格⼦子，就是⽹网格系统⾥里里⾯面最基本的元素「单元格」，即图中⻩黄颜⾊色的区域。

最⼩小单元格的数值，⼤大多数 APP 会选择4-10这个范围内⼀一个偶数。

那么选⽤用哪个值最为合适呢？这需要从两⽅方⾯面考虑：⼀一⽅方⾯面是该数值是否能被⼤大多数⼿手机屏幕的宽度整除，即⼴广泛的适⽤用性；另⼀一⽅方⾯面是在具体使⽤用时是否具有⼀一定的灵活性。

在适⽤用性⽅方⾯面，4、6、8、10这四个数值都是基本可以满⾜足的，在灵活性⽅方⾯面，4px表现最佳，但是⻚页⾯面就会被分割的⾮非常细碎，在设计时⽐比较难于把控。

因此我们需要根据 APP 的实际情况选择合适的数值，4px或6px单元格⽐比较适合⻚页⾯面内容信息较多，布局排版⽐比较复杂的产品，例例如：淘宝、考拉等电商类APP；⽽而8px单元格对⼀一般的设计场景都可以很好的满⾜足，⽐比较适合⼤大多数的 APP产品，因此是⽐比较推荐使⽤用的。

第2步：确定组件间距的增量量关系既然确定了了最⼩小单元格的数值，那么⻚页⾯面⾥里里所有的间距（包括⽔水槽、外边距、横向间距等）、组件尺⼨寸等都需要是最⼩小单位的整数倍，以达到统⼀一视觉节奏的⽬目的。

例例如单元格选择为8px，那么所有⽤用到的间距尺⼨寸将会是8px、16px、24px、32px、40px……第3步：确定列列的数量量我们在设计 APP ⻚页⾯面时，⽤用到的最多的布局⽅方式就是等分布局，即⻚页⾯面内容区域被 N 等分，每⼀一份的宽度则根据屏幕宽度⾃自适应调整。

那么就从这个⻆角度出发，思考⼀一下⻚页⾯面的⽹网格应该设置为多少列列，才能最⼤大程度的满⾜足各种等分布局的需要。