网格的历史

版权申明：本文出自“Lawrence_Z”原创，感谢“Lawrence_Z”的原创教程分享！

大家好我还是Lawrence，以后Lawrence_Z这个号就要主讲"系列"文章了。

第一个系列我打算先写网格，国内也很缺乏这块的知识，现在能找到的关于网格的文献，大多数都是从国外网站直接翻译过来的，对此我感到很遗憾。正因如此，我才想把这块的知识分享出来供大家学习。另外网格系统的框架也是非常的庞大，从网格的历史，规则、解构网格等，都是需要去学习的知识， 也请大家认真学习吧。

另外这篇文章参考了众多文献，参考最多的是只印了一版的《网格模板实用攻略》，编著是RotoVision出版社。也已经绝版了。这本书翻译的很糟糕，里面很多句子都不太通顺，不过它传达的思想是值得我们学习的。

目录

1、什么是网格

2、把控好网格

3、网格的价值

4、网格与栅格

5、网格的历史

6、风格派与包豪斯

7、网格与瑞士风格

8、网格与数学

9、可视网格

1.什么是网格

网格系统是由页边距、栏、栏距、字体、图片、元素间距组成的，它们之间的比例关系与布局划分，构成了一个基本的网格系统。基本的网格尺寸必须满足易读性的要求，要让观众可以阅读并容易阅读。网格中所有元素的尺寸和位置都是由心理学以及美学所决定的，字体的大小是由不同层级的标题和正文决定的。

通常一列的宽度的不

会超过9个英文单词（具体需求具体分析），虽然说将这些词组归纳成组块太过规整，但为了确保单词的可读性，就有必要这么做了。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

2.把控好网格

对于设计师来说，网格系统十分复杂且很难把控，尽管如此大多数设计师还是很偏爱它的。设计是个偏灵感且随意性强的工作，设计师们使用它时很容易被限制住，并使设计作品太过规整从而失去设计感，因此设计师对网格系统也是爱恨交加。

设计师要把控好网格系统，提炼出要素的灵动性，保持要素的规整性。要做到乱中有序并简中求精。

3.网格的价值

不管对于平面设计师、网页设计师、还是UI用户界面设计师，网格系统都有它存在的价值的。而网格系统的核心价值就是在"混沌中建立规则"，在空间中约束元素和要素，使他们具有关联性。

如果不去制定网格系统，整个空间会变得杂乱无章，混沌不堪，元素和要素之间无法产生关联，失去了统一性并影响美感与视觉感官的判断。

4.网格与栅格

网格与栅格的本质其实是相同的，都以英文单词"Grid"来表示。但我理解的，它们之间的差别在于"规格"上的不同。一般我在平面设计中把它称为"网格"。在网页端或移动端中称它为"栅格"。网格与栅格从汉字上来理解就是"网"和"删"的差别，大家也可以用联想式记忆法来记一下。

我们先理解一下平面设计和网页或App的差别。平面设计一般用到的纸张规格（尺寸），不管是英国、美国、日本或ISO采用的德国DIN纸张规格标准，只要是纸张全部都是固定的尺寸，宽度和高度都是固定的，也就是绝对的。而网页或App的设备尺寸不是固定的，宽度是根据设备的宽度决定的，高度则是随着内容的多少来决定的，也就是相对的。