网页界面设计的网格系统由什么组成（版式设计中的网格系统）

本文目录

• 版式设计中的网格系统
• 设计基础教程：什么是设计网格怎么提升设计网格
• app栅格系统如何建立app栅格系统布局
• 什么是栅格系统
• 栅格系统的简介
• 网格系统不就是设计师精神和态度的表达吗
• 网格系统解析（上）

版式设计中的网格系统

版式设计作为平面设计的重要组成，可以对视觉传达效果的改善提供重要帮助。而网格系统作为版式设计中最为重要的环节，网格可将版面的构成元素如点、线、面协调一致地编排在版面上。网格系统在实际版式设计中具有比例感、统一感和准确感强烈等特点，伴随着当今时代信息量大而快速传播的要求，网格系统在版式设计中已经越发引得人们的重视。

一、栅格的概念

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

二、满足不同类型的版式风格

依照不同的逻辑关系，我们可以编排出多种形式的网格，每一种编排形式都会带来不同的感受，它可以是理性的、也可以是带有节奏和韵律的。根据不同的需要设置网格的形式，满足不同的需求。

三、组织关联信息

在版式设计中，主要针对两个内容，一是合理划分空间关系、二是清晰有逻辑的组织编排视觉信息、元素。网格恰好适应了这两种需求。版面内视觉元素复杂繁多，通过网格系统可以很好的将有关联的内容编排到一起，增加他们的关联性。

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

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

网格系统设计作为一项艺术性很强的工作，也有其自身的规律性，为此在设计中要结合平面设计的具体特点，科学合理的运用分栏方法以及网格单元将文字、图形、装饰等视觉形象进行合理的设计。同时要结合相应的视觉经验，以及审美规律，如此，才能使网格成为版式设计中的强大助力。

（以上观点部分有所借鉴，仅供参考）。

设计基础教程：什么是设计网格怎么提升设计网格

将内容与设计相结合，内容有多种形式，并不相同，但通过网格系统，我们可以将这些隐蔽性的内容联系起来，网格是设计的重要组成部分。关于设计网格，对于很多的设计门外汉来说，网格可能就是一个个小个子组成的！但是其实在设计行业里面，到底这个设计网格是什么呢？我们的设计又怎么能够提升设计网格？种种疑惑，接下来的这篇文章就全面为你解析~

一、网格是什么？

网格是一种由横向和纵向线构成的对齐工具，主要用于图形、文字、图片的对齐，主要建立这些内容的秩序和规则，最终保证设计一致性的基本框架。这样的线条也只有设计师能看到，其实网格的应用在生活中很普遍。一种

许多东西是由网格组成的，例如这个架子，每种格子放不同的切刀。

图书阅览室，是由若干格组成，通过有序的格子排列成不同的内容

城建，都是建筑师用网格化布局整个城市的规划

wrod表格，通过按顺序排列内容，网格实际上无处不在

常用的数码产品宣传页，还有优衣库的衣服货架等等，可以说网格在我们周围到处都是，我们需要了解网格。

二、网格发展历史

文艺复兴时期，绘画对格子的发展起到了很大的影响，艺术家们创作出一幅完美的几何图形，从而形成这种对称的画布布局，可以代表画家当时运用网格来画画。

其中包括当时的书籍，从印刷开始，大概是在15世纪，每一页书中间都有一个对齐的位置，保证了每一页内容的完整。

然后随着工业时代带来的各种报纸海报，杂志，广告版面的兴起，使得印刷品的需求越来越大，设计师必须解决不同人群阅读内容的自然视觉变化，需要让读者很好地阅读报纸杂志内容。

在一战期间，保持中立的瑞士成为欧洲各地艺术家聚会的场所，因为印刷出版必须满足多国语言的要求，设计师需要一套网格系统来统一实现这一目标，网格系统也是一种客观排版设计(ObjectiveTypographyandDesign)运动的一部分。这本书出版后一直畅销到现在，确实是情理之中。

任何研究网格的人都会发现，在网格系统的帮助下，能够更快地解决设计中的问题，使设计更具功能性、逻辑性和视觉美感。

三、网格基本要素

之前提到过网格的基础以及它的发展历史，那么有什么基本元素呢？网格主要由单元条、条间距(也称为水槽)、边距组成。

1、主要用于填充设计内容的单元格

2、条间距，主要用于划分内容和内容的设计中

四、几种网格类型

1.文稿网格

稿件型网格：也是最简单的网格类型，经常用于书本上，其本质上是一个大的矩形框，占据大部分空间。

适用场景：传统的杂志书刊、手稿格子适合设计全文字，但也不限于文字，图片也可以做内容，在互联网设计上，新闻类产品，偏内容阅读比较适合手稿型。

2.多列网格子

多列网格：正如名称所示，多列网格有几个列，创建的列越多，网格越灵活，多列网格对许多复杂的、不同的内容布局很有用，并且使多列网格，可以为不同内容创建趋势。

应用场景：绝大数产品，网页，平面设计，这一多列网格也是目前应用较广的，很多产品都使用。

3.组合式网格

组合式网格：是将网格垂直和纵向拆分成多个模块的网格，形成井字形模块，每个小模块组成单元格，当我们需要面对比较复杂的布局时，模块化网格为页面提供灵活的内容格

应用场景：报纸、是杂志、电商设计、表格等场景。

4.基线网格

基线网格：是垂直排列在设计上的基础，主要用来保证页面的水平排列层次。

应用场景：文字对齐时，图片显示与网站相似。

五、使用网格的好处

人们使用的设备越来越多，从智能手表到手机、iPad到PC，手机的屏幕也越来越多，设计师们必须创建一套网格系统来组织内容，使网格细节适合不同的场景和分辨率。

更加清晰的一致性：网格是设计的基础，如页面节奏、空格等，都说影响设计非常重要的因素，网格系统能保证这些元素的一致性，有效的网格可以引导我们的眼睛去阅读，让我们更容易扫描屏幕上的内容，同时一致性也可以帮助我们在了解内容之后采取下一个步骤。

提高读物能力：人的大脑在一秒内判断、设计不合理、排版混乱的商品看上去就没那么值得买，好的排版增强了视觉层次。

小组合作：网格系统本身可以保证团队设计对齐的一致性，良好的网格系统可以解决网页骨架统一性，减少设计间距、留白的不一致。

app栅格系统如何建立app栅格系统布局

系统科学地打造APP界面

什么是网格系统？

网格系统利用一系列垂直和水平的参考线将页面划分为若干规则的列或网格，然后基于这些网格控制页面元素之间的对齐和比例关系，从而构建高度有序的页面框架。比如Google的材质设计，把整个页面看成一个网格，所有页面元素都和网格线对齐，这个规则贯穿了整个产品的设计。

为什么要研究网格系统？

1/提高团队协作设计的效率。

当几个设计师一起设计一个APP的时候，网格系统就变得尤为重要。每个设计师都有自己的设计方法和习惯。如果没有一个统一的框架来约束，就有可能在设计类似的组件或者页面时给出不同的设计方法和大小，这样整个APP中的页面就会比较混乱。比如下图，设计师A和B各自按照一套尺寸规格来构建页面，但设计结果给人的感觉却完全不同。

因此，拥有一个统一的网格系统，可以保证设计师的输出具有高度的一致性和规律性，合作更加高效。

2/设计更理性。

UI设计在数理逻辑上需要理性、客观、美观。熟练使用网格系统可以让你的设计更加有序有节奏感，更加清晰的展现页面信息，提高阅读效率，为用户提供舒适的体验。

3/减少做决定的时间。

很多设计师，在处理页面细节的时候，往往会为了更好的视觉效果而反复推敲(他们说的好像是我)，甚至会担心一个图标到底应该用20px还是24px，大大影响了设计效率。即使几个页面的设计都达到了各自满意的视觉效果，但很可能因为使用了不同的大小规则，设计缺乏统一性。

一个完善的网格系统可以让设计师在页面布局和细节处理上更清晰、更自信、更高效。所有的设计行为都是有理有据的，减少一些细节造成的不必要的时间成本，拒绝为设计拍脑袋。

网格系统的基本要素

1/单元格

网格中最基本的元素“单元格”

2/外部边距

在APP页面中，所有内容都会显示在中间的内容区域，所以内容区域与屏幕左右两端之间的空空间称为外边距。

从外面看数值越大，页面显得越松散，数值越小，显得越“满”，具体数值你需要根据自己的实际情况来确定。比如Airbnb的产品调性是简约大气，整体布局比较松散，所以外缘的数值是48px。比如网易云音乐，专注于专辑封面、歌单等。在页面中，注重图片的视觉冲击。所以页面内容区域的比例会比较大，外边距的值是32px。

3/列和接收器

页面的内容区域由N列和(N-1)个接收器组成。在网页设计中，n的取值一般为12、16、24，但在手机设计中，列数不宜过多，因为手机屏幕宽度有限，列数越多，页面分割会越“碎”，在页面设计中会更难控制。通常使用6个网格。

下沉宽度值对页面的影响类似于外边距，即值越大，页面越松散，反之亦然。比如Airbnb选择了24px，网易云音乐选择了16px。

4/横向间距

在杂志的设计和排版中，经常使用基线系统，即在水平方向上分布等间距的参考线，以调节文字和图片在水平方向上的节奏关系。然而，图形布局的大小是相对固定的，移动终端上的屏幕宽度和元素组件的高度是不确定的。所以这个基线系统不能直接照搬，需要根据情况来使用。

在一个文本段落中，可以使用基线系统进行水平间距，以规范文字在水平方向上的节奏关系，这种情况经常出现在阅读产品的文本页面中。基线的距离值取决于自身产品的实际情况。比如下图中基线间距设置为4px，那么字体大小和行距都是4px的整数倍，所以每一行字都会准确地压在基线上，保证视觉节奏的一致性。

但组件之间的水平间距与垂直间距的使用规则是一致的，即选择单元格整数倍最小的一系列值来调节组件在水平方向上的节奏关系。例如，如果下图中的最小单元格设置为8px，则水平间距的值将为8px、16px、24px、32px等。(焦点)

APP设计中如何使用网格系统？

1/定义最小的单元格。

最小的单元格值，大多数app会选择4-10范围内的偶数。那么哪个值最合适呢？

这需要从两个方面来考虑。一方面是这个数值是否能被大部分手机屏幕的宽度整除，即其适用性广，另一方面是在具体使用中是否有一定的灵活性。适用性方面，4、6、8、10四个数值基本令人满意。从灵活性上来说，4px是最好的，但是页面会非常碎片化，在设计上很难控制。

因此，我们需要根据app的实际情况选择一个合适的值，

4px或6px单元格更适合页面内容信息较多、布局复杂的产品，如淘宝、考拉等电商APP；

8pxcell可以很好的满足一般的设计场景，更适合大部分APP产品，推荐使用。

2/确定组件间距的增量关系。

由于确定了最小单元格的值，所有间距(包括下沉、外缘、横向间距等。)以及页面中的组件大小需要是最小单位的整数倍，才能达到统一视觉节奏的目的。

例如，如果单元格是8px，那么所有使用的间距大小将是8px、16px、24px、32px、40px??(知识点)

3/确定列数

在设计APP页面时，最常用的布局方式是等分布局，即将页面的内容区域分成N等份，根据屏幕宽度自适应调整各部分的宽度。所以从这个角度来说，想想页面的网格应该设置多少列，才能最大程度的满足各种均等布局的需要。

列举了以下典型情况(4列、10列、16列等。，有兴趣的可以自己试试，这里就不一一列举了)。我们发现12列和24列可以满足除5以外的所有其他情况，6列相对稍差，即结果为:12列=24列》；第6列》:8列。但是24列显然把有限的手机屏幕分成了太多块，所以在实际使用中，以12列和6列为主。

4/草图布局设置

Sketch自带布局设置功能，可以快速构建网格系统的参考布局。平时设计过程中可以经常用到L快捷键切换版面显示(知识点:1。总宽度=屏幕总宽度-外部边距x2；2.偏移=外边缘距离；3.不要勾选“装订线在外面”。)

5/实际应用

主页设计前期，还没有使用完整的网格系统进行标准化，组件之间的间距规则基本都是10px，20px，30px。版面模块之间没有内在联系，视觉节奏不流畅，风格不统一。接下来的两页，大部分元素都没有贴上网格，布局不规则，没有客观的参照物。

现在，我们开始统一使用8px和12列网格系统来优化首页的布局。在下面的三张图中，我们可以看到顶部图标、入口图标、竖盖和横盖都被网格系统串联成一个整体。他们不再是杂乱无章、独立自主的个体，因此阅读起来更加顺畅。水平间距也开始使用8px的整数倍，带给用户更有节奏感的浏览体验。

网格系统的使用需要注意哪些问题？

1/网格体系不能生搬硬套。

并非每个元素都必须与网格对齐。这要看你的实际需求。如果强行放入网格，页面看起来会很怪异。图中左侧页面的三个tab标题想和网格上的封面对齐，但是标题之间的距离太大，看起来不舒服。这里，三个选项卡标题之间的间距是一个固定值，不需要根据屏幕宽度进行调整。所以应该把三个tab标题看成一个整体，也就是一个tab组件，组件的左端可以贴在网格上。

2/网格不能被分割怎么办？

做设计稿时，最常用的画布尺寸可能是iPhone6/7/8的750*1334px。我们会发现，如果8px是这个尺寸中最小的单元格，那么画布就不可能是可分的，也就是在750px宽度上去掉所有的外边距和汇点后，每个红柱的宽度实际上是42.5px。那么就会有疑问:在这种情况下，网格系统是否意味着不能使用？

其实这是很正常的现象，因为不存在任何屏幕分辨率下都可以完美分割的网格系统。而且是同样的8px电池，在750px手机上不能整除，但是在720px手机上就没有问题了。

例如，在下面显示的尺寸中，代表外边缘和下沉的蓝色值是我们需要为开发提供的固定值，而红色值是根据屏幕的实际宽度计算的。因此，我们只需要确保提供给开发的值遵循网格系统规则。至于页面中的计算值，0.5px的偏差肉眼是察觉不到的。

摘要

网格系统是视觉设计师强有力的辅助工具。可以指导我们用更科学的方式搭建APP界面，让页面布局规范有序，节奏统一，设计师的效率翻倍。但正如本文所说，网格参数有很多种，需要根据自己的需求，构建适合自己，符合产品调性的网格体系。

原文链接网易UEDC

xd软件中怎么做布局网格？

将鼠标到中间粉色区域鼠标变为双箭头拖动即可调整。

sketchup软件中“在网格中创建”命令在哪里能找到啊？

你是说地形么，草图大师8-绘图-沙盒-从网格，输入网格间距，三次点击-完成。其他问题，窗口-参数设置-扩展栏，勾选沙盒工具。

IQOO手机怎么调方格桌面？

可以通过OriginOS提供的“变形器”功能，一键回到华容网格界面，非常的方便。

华容网格是OriginOS新系统的第一个功能，设计灵感来自儿时玩具华容道，官方命名为“华容网格”。重新设计最底层网格的间距、重新排列桌面元素顺序，带来更整洁，更高效的使用体验。它在桌面上搭建起新的结构，用户可根据自己的使用习惯和喜好，来调整桌面上边的元素，比如图标小程序等，像图标的大小、间距都可以自己调整。OriginOS给予用户很大的自由度，不再受限于传统的桌面框架，可以根据自己的个性，组合出多种多样的桌面元素。

cad栅格怎么设置面积？

cad软件中调整栅格的大小的具体步骤如下：

1、首先打开需要的CAD图纸，进入到页面中。

2、然后点击打开底下的栅格图标按钮。

id网格怎么设置？

答：打开InDesign，创建一个新的项目。

在顶部菜单栏找到“视图”，点击“网格和参考线”。

“基线网格”和“文档网格”都可以添加。

还可以在场景内单击鼠标右键进行选择。

ID为专业的图文排版软件，在进行书籍画册排版时，一般只设置竖向的分栏。在新建文件时，选择“边距和分栏”。

?

在对话框中分别设置边距、栏间距和栏数即可：

?

?

?

然后执行【版面】—【创建参考线】，

分别设置行数、栏数、栏间距：

?

设置好的网格如下：

（按W键可以隐藏或显示网格）

?

设计时设置网格是为了帮助你让页面中元素布局更加规范且统一，易于用户理解，灵活运用网格不仅不会限制编排形式，还会使版面变得更加清晰、生动、统一、有条理。

什么是栅格系统

1、栅格系统（grid systems），也叫“网格系统”。栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。

2、栅格系统运用固定的格子设计版面布局，风格工整简洁。

1、概念：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

2、优点：使用栅格设计，可以使网页的信息呈现更加美观易读，更具可用性。

3、原理：通过设置不同的n、i、A值划分网页的区块，实现标准化的灵活设计。

4、局限性：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到遵循栅格了。

1、苹果下浏览器的默认宽度为960px。在 1024 x 768 的分辨率下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，为 960 x 650。可见设计师们都不约而同选择960px的页面宽度。

2、目前大部分大型门户网站的首页宽度为950px/960px。绝大多数显示器都支持 1024 x 768 及其以上分辨率，为了有效的利用屏幕宽度同时保证栅格的灵活度，960就成为网页栅格系统中的最佳宽度（可以实现较多组合）了。当然，随着分辨率的提高，以后可能会流行更高px的页面宽度。
——部分内容整理自网络——

栅格系统的简介

1692年，新登基的法国国王路易十四感到法国的印刷水平不尽人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。
不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。
网页设计中的栅格系统
我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。
栅格系统的设计原理及应用
那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：
在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) – i = W

网格系统不就是设计师精神和态度的表达吗

在版式设计中，将网格视为一种秩序系统来进行使用，是设计师某种特定的精神和态度的表达，因为它体现了设计师是以一种结构性、预见性的方式进行构思和设计的。

设计师的作品应该是易懂的、客观的、功能性的和具有教学美感的。

一个合适的网格使得视觉设计变得更容易：

网格系统通常被应用在平面设计、UI设计、甚至于空间设计中。下面我们就平面设计和UI设计，展开对网格系统的探讨。

版心是页面中主要内容所在的区域。在确定版心之前，设计师必须明确设计的性质和目的，即在页面中有多少的文本和图片需要设计。

经典的版心设计

基于黄金分割比例的页面

在开始设计之前，版面的分栏数是需要进行考虑的要点之一。

一般分为两栏、三栏、四栏，四栏还可以进一步分成八栏、十六栏甚至更多。

确定版心；将版心分栏。

将栏分成单元格；划分单元格。

8格网格系统的版面经常用于广告宣传单和画册的设计。在很多情况下，只需通过对8种不同尺寸的图片进行组合，就可以解决许多简单的问题。

在8格网格系统中，可以组合成8种不同尺寸的图片，版面足以容易各种大小的插图。

利用20格网格系统来编排，可以产生20种尺寸参与排版的可能性。在设计前期更多的尝试，将会发现网格的创造力是无穷的。

总之，我们可以说，善于利用网格系统来进行版面设计的设计师们，总是可以非常专业的设计出丰富多样且令人满意的作品。

相对与20网格来说，32网格系统可以为设计师提供更多的可能性，甚至可以说是无限的可能性。

32格网格系统提供了非常多的编排方案，几乎涵盖了所有类型的版面设计，尤其对于那些涉及到大量图片的设计作品。

有些设计师对于网格系统有点陌生，但是在互联网设计领域，提到栅格系统，想必都是有所耳闻的。

栅格系统就是利用均分的垂直和水平线，将页面分割成若干有秩序的格子，按照这些分割好的格子去安排页面的设计元素，控制元素之间的节奏关系。

在谷歌的Material Design和苹果的Ios设计规范中，都有对栅格作出一定的建议，设备系统中的原生软件也都是严格按照规范去实施设计的。

而在Web端的设计中，各互联网大厂也有制作相应的设计规范来统一自家产品的设计。

下面我们将通过四个基本概念，分别对PC端和移动端的栅格设计展开探讨：

对于PC端来讲，栏目和水槽交替形成栏栅格系统，栏目主要放置内容，水槽则控制页面元素的间距。

栏目和水槽的宽度则是以栅格的最小单位为基准，所以在页面栅格化之前先定义好栅格的最小单位。

如何定义栅格系统最小单位？参考已有的设计规范和前辈的，加上目前市场上主流的屏幕分辨率，以8像素作为一个步进单位的变化，在视觉上能感受到较为明显的差异，因此选取8做为栅格系统的原子单位。

确定好了栅格系统的最小单位，接下来就可以确定栏目（8n）和水槽（8m）的宽度，并以此形成初步的栅格。

目前主流的等分方式有12等分和24等分。

而在多数业务情况下，我们需要在设计区域解决大量信息收纳的问题，24等分可以更多样性的布局排版，适合更加复杂的场景。

在经过等分之后，划分出的信息区块我们称之为“盒子”，盒子便是页面承载内容的容器，而每一个盒子的宽度，则是根据具体的业务内容去分配的。

建议横行排列的盒子数量最多四个，最少一个。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。

在设计移动端产品的时候，我们会考虑到色彩、文本、图形、结构等要素，往往忽略来网格系统的构建。

网格系统可以说是整个产品的骨架，所有的页面都按照网格系统有理、有序的搭建，产品的整体性也会有很大的提高。

和PC端类似，移动端的网格系统也是由一个个的最小单位构成。

根据移动端物理设备的特性，我们建议以4或者8像素作为步进单位，但是4像素会把页面分割过度，所以整体上还是以8像素做为网格最小单位，只有在某些特殊的场景使用4像素。

我们在PC端的时候没有提到安全边距，因为web设计基本不设置安全边距，或者直接在中间960像素布局内容。

而在移动设备的特殊性，一般存在8px-48px的安全边距。

确定好了安全边距和最小单位，就可以根据产品的风格去设置栏目和水槽的宽度。

建议在实际使用中以12列栏目或者6列栏目为主，水槽以8像素或者16像素为主。

网格的作用就是去控制盒子的布局，而移动端屏幕小，可设置的更加紧凑。横行分割1-6等分都是合适的。

如果在设置网格系统或者说是栅格系统的时候，出现了小数点，不用担心，直接取整就好。一套完美的网格系统也不可能在所有的分辨率下完美适应，1像素以内的尺寸都是肉眼不可分辨的。

在平面设计版式构成中，我们提到版式设计的原则都是仅供参考的，我们只有在充分理解原则的情况下，去做突破，才能让页面规范有序、具有节奏感，同时不失灵动。

设计师的私人日记（公众号）

作者：整夜

网格系统解析（上）

网格系统是一种用于对齐的工具。由一些平行排布的 纵向 和 横向交错 的线组成，常用于对齐图形、文字和图像，并建立这些内容之间的 秩序和规则 ，是设计保持一致性的基本骨架。

这些线只有设计师/印刷排版人员本人看得见。

在网格的历史中，早在文艺复兴时期的20世纪，艺术家们就探索了700年前的比例和谐原则，从而产生对称的画布布局。

包括书籍，报纸印刷，都使用了对齐原则，保证每个内容的完整性和独立性。

而后随着工业革命的到来，各种海报、广告、杂志的兴起，变得对印刷的需求量很大，设计师必须解决，不同人群阅读内容的视觉动线不同，从而使读者能更舒适的阅读报纸杂志等。

在瑞士设计的影响下，第一次世界大战期间，保持中立的瑞士成为欧洲各地艺术家聚会的地方，由于印刷出版必须满足多国家的语言，设计师需要一套网格系统来统一实现这个目标。
网格系统也是发端于瑞士的客观排版设计(Objective Typography and Design)运动的一部分，这就是《平面设计中的网格系统》。

后台 回复 “网格系统”，可领取电子书《平面设计中的网格系统》。

在网格系统的帮助下，设计师能更快的解决设计中的问题，并且让设计在兼顾功能性和逻辑性的基础上，还能具有视觉美感。

网格主要由单元栏、栏间距（也叫水槽）、边距组成。

常见的网格类型有手稿型网格、栏式网格，分层型网格、模块式网格，不同网格的使用场景也不一样。

手稿型网格

手稿型网格常用于 传统书籍，和印刷品种。通常四周有较大留白。这种网格设计的只有一个边距。

如图：

栏式网格

栏式网格常用于UI界面设计、杂志报纸， 相比手稿型网格增加了水槽。

模块式网格

模块式网格和栏式网格的区别就是，增加了横向间距。使得页面整体清晰有规律，富有节奏感。 适用于报纸海报，PC端数据，表单类的客户端的场合。

分层型网格

分层型网格适用于图像类的网站。它没有边距，单元栏和水槽之类的模块，而是直接展示产品。