简明版面设计之：网格的细节【设计元素】

什么是网格呢？

我们先来做两个海报

第一个海报，元素之间相互对齐，页面井然有序，给人的感觉非常严谨理性，但是也比较呆板

第二个海报，元素之间随意排列，给人的感觉比较混乱，但是也比较自由活泼

第一个海报是基于网格设计的，页面上有很多条看不见的线，元素都和这些线的边缘对齐，页面被分成了很多规整的区块。

网格系统是利用一系列垂直和水平的参考线，

将页面分割成若干个有规律的列或格子，

通过这些隐形的区块，可以控制页面元素之间的对齐和比例关系。

网格的本质，就是一个建立秩序和对齐关系的工具。

为什么需要网格？

对于平面设计，网页设计，UI设计，

网格系统的价值就是“在混沌中建立规则”，在空间中约束元素和要素，使他们具有关联性。

在使用等比例的网格时会让画面有重复和对称的美感

网格可以使设计元素对齐，

而对齐的元素具有亲密性，在视觉上更有联系。

网格可以让页面更有理性，可以建立元素之间的比例关系。

有时候可以使用不对称的网格，

比如1比1.618的黄金比例，可以让画面产生数学的美感

什么时候该使用网格？

有大量文字和图片的页面，也就是偏向于实用性的页面，使用网格可以更好的组织信息

在网页和UI中，网格也称为栅格，

栅格的宽度可以随着设备发生变化，有大量信息和内容的页面一般都会使用网格来排版。

如果页面上内容很多，但想保持一些随意和活泼的风格，

可以只在一部分内容上使用网格，或者不严格遵守网格。

这个页面有些图片和文字突破了网格

一般来说，

越是对齐到网格，页面就越理性规整，但是也越呆板，

打破网格可以获得自由，但是也会显得混乱，

可以根据页面的设计风格来确定网格的拘束程度

网格的类型有哪些？

网格可以分为，分栏网格、模块网格、复合网格、基线网格

分栏网格

下面是一个版面，如果把它竖向划分为三栏，它就是一个3栏的分栏网格，

我们用这个网格做一个简单的图文页面。

分栏网格比较常用，对于图文排版的页面，使用分栏可以让页面井井有条，

文本分栏以后，行宽不会过长，更适宜阅读。

模块网格

如果在分栏网格的基础上，横向做一些划分，页面上就会形成很多方格，这就是模块网格，

模块网格网格对页面的约束更强一些，可以建立横向的对齐关系。

这是使用模块网格的海报页面

复合网格

再回到之前的分栏网格，如果在3栏的分栏网格基础上再叠加一个2栏的网格，就会产生一个复合网格，

在复合网格中，可以产生两种不同的大小关系，页面的自由度会更高一些。

这个页面使用了复合网格，有些元素对齐到两栏网格，有些元素对齐到三栏网格。

基线网格

基线网格就是在页面上添加很多均等的横线，相当于横线本的作用，是为了防止行与行之间不对齐。

网格的形式有很多种，比如也可以斜向的划分，让页面元素倾斜对齐。

也可以在一个页面上使用多个网格。

网格的宽度也可以是不均等的。

可以根据需要设置或者按照特定的比例划分。

网格的栏间距可以根据需要自由设置，甚至也可以取消栏间距。

网格的本质就是建立秩序和对齐的工具，可以非常灵活的使用。