网页设计栅格怎么定（从印刷术到现代网页设计）

网格的历史，你了解多少？

本文转自公众号：terechen 追波范儿微信ID：dribbbledesign编辑：捌条

网格为设计师提供了一种直观的组织方法。从摄影中指导构图的 “三分法则”，到像亚马逊这样的电子商务网站上的产品排版，网格提供了一种视觉逻辑，可以帮助我们快速、轻松地理解我们所看到的东西。让我们一起来看看网格的历史，从最早的网格化身到现代网络上的应用。

一些摄影作品中也蕴含了网格

01 网格是秩序的基石

我们不需要多看一眼我们的日常环境，就能看到网格带来的美丽和平衡。从办公室的文件柜到杂货店的过道，网格让我们的世界变得更加轻松。

网格具有一种几何学的魔力，可以引导视觉元素依附于垂直和水平线。设计师就是挥舞着它们的魔法师，为混乱的世界带来秩序和组织。对齐、间距和比例都是创造和谐视觉感的重要因素。

网格作为一个隐藏的框架，指导着设计，从古代历史上的水墨和纸莎草书卷到今天日益数字化的像素世界。

早期平面设计师的手是以神性观念为指导的。

就像许多早期的文化作品一样，最早（保存下来的）出版的作品往往是宗教作品。绘制、写作和装订这些书是很费时间的，为什么要把这些努力浪费在上面的东西上呢？历史上的言情书籍和自助书籍要等上百年，那时的出版门槛会低得多。

制作这些文本的原始图形设计师并没有受过正规的培训，但他们的作品显示出他们对视觉和谐的关注，以及对视觉传达给文盲观众的力量的深刻认识。

在下面的《凯尔斯书》的例子中，我们看到了对称和平衡。格子书是直观的信息布局，这些早期的宗教学者们有先天的感觉，按照这些无形的指引的恩典来安排这些圣典（书籍）。

我们可以再往前追溯一下。古埃及人遵循着我们所说的比例法则。他们的雕刻和绘画中所描绘的人物都遵循了这一网格规则。古埃及人把他们的比例法则作为一个人的拳头，从地面到站立的人物的额头上，有18个拳头大小。他们的象形文字也表现出明显的格子布局。试想一下，这些早期的创作者们在石器上工作的时候，用CSS网格和flexbox能做什么？

02 从手工到机械化

1568年的古腾堡印刷机

活字印刷术大约在公元前1040年左右在中国开始发展，用瓷器制作字体。在西方，金属活字大约在1450年左右出现，1455年左右《古腾堡圣经》的问世是出版业的第一个重大里程碑。

金属类型的工作性质使得网格工作成为一种必然。

朝鲜移动式印刷机的复制品，始于1447年。位于韩国首尔仁川国际机场。

印刷机的出现使书籍的批量生产成为可能，而且与之前的手工制作的宗教典籍不同，他们使用的金属版材使其具有统一性。《古腾堡圣经》以简单的双栏式排版方式呈现其文字。

在古腾堡圣经是第一大规模的书曾经被释放印上使用金属活字机之一。

与手工制作相比，印刷机的精细化和（相对）廉价，导致非宗教题材的书籍被印刷出来，报纸也随之诞生。随着印刷技术的进步，网格也发生了变化，使得复杂的排版、大小不一的列、行、文字和照片都成为可能。

03

网格的艺术性：Piet Mondrian和De Stijil运动的影响

De Stijil于1917年在荷兰兴起，一直持续到1931年，是一场根植于极简主义和抽象主义的现代艺术运动。简约主义取代了现实主义的错综复杂，以线性的方式触及艺术和建筑。在装饰艺术以过剩为标志的地方，De Stijil则是将实用性的骨子里剥离出来。

尼亚加拉莫霍克（Niagara Mohawk）建筑的装饰柱触及天空，这是装饰艺术不受束缚的装饰的一个例子。

第一次世界大战打破了稳定的假象，德斯蒂吉尔提出了新的希望，希望能够恢复秩序。

这些由约瑟夫·以色列·斯普林（JozefIsraëlsplein）设计的公寓体现了德斯蒂吉尔运动（De Stijil Movement）的功利精神。

皮特·蒙德里安（Piet Mondrian）与西奥·范·杜斯堡（Theo van Didburg）共同创立了这一运动。蒙德里安的绘画以其直线和方块状的色彩网格而著称，这些色彩简单而又神秘地吸引人。

遵循这种对简约性的坚持，他的画作采用了基本的颜色，用黄、蓝、红、灰、黑、白三色。这种三原色加三原色的等式，使他的作品具有内敛而又不失实验上的复杂性。

蒙德里安的色彩堆叠的色块很容易让人从远处就能辨认出来，而他的影响在现代网页设计中也同样明显。通过CSS网格等工具，创建自己的网站布局是一个简单的过程。

Webflow中的“ Piet Mongrid ”向将网格提升到新的创作水平的艺术家表示了敬意。

04 商业与网格：20世纪40年代的市场营销

随着第二次世界大战的结束，一个可怕的恶魔被打败，乐观主义取代了恐惧，出现了新的消费主义。随着经济的快速扩张，广告公司抓住了这种狂热的情绪，并以迅雷不及掩耳盗铃之势迅速发展起来。

保罗·兰德（Paul Rand）被许多人认为是现代营销的鼻祖之一，他实施的营销策略和品牌意识是以前没有使用过的。而网格在这种新的广告方式中发挥了不可替代的重要作用。

网格塑造了肥皂盒、杂志广告和电视广告的面孔。它们甚至被用来在新兴的郊区创造出整齐的房子排成一排。网格无处不在，为这种新的消费主义带来了秩序和效率。

05 网格和现代主义

20世纪40年代和50年代，”瑞士运动”（Swiss Movement）产生了，它塑造了许多平面和网页设计。瑞士运动摆脱了僵化的指导思想，但格子是浮在其不对称布局之下的东西。

它强调设计中更多的情感成分。它特别关注字体设计如何塑造意义，舍弃了衬线字体的字体装饰，以使字体不受样式影响。从这一功利主义哲学出发，产生了普遍使用的、有时被人鄙视的Helvetica字体家族。

从瑞士设计运动中走出了一个最有力的倡导者。Emil Ruder，他的著作《字体设计手册》（Typographie: 他的《设计手册》（Typographie: A Manual of Design）一书中，以三栏式的布局，每一栏都有不同的文字翻译，支持网格的好处。

Jan Tschichold的这张海报中的胶版印刷版面是瑞士运动的象征。

约瑟夫·穆勒·布罗克曼（JosephMüller-Brockmann）是瑞士运动的另一位重要成员，他把格网格画带到了瑞士运动的前沿。他的海报作品以及书籍设计都是以网格为核心，其视觉美学灵感来自于包豪斯艺术运动，也是De Stijil的直接后裔。

06 用计算机的力量摆脱网格的束缚

穆里尔·库珀（Muriel Cooper）在麻省理工学院出版社（MIT Publications）从事传统图形设计和计算机工作。

从1983年开始的夏季工作坊宣传片充分利用了这项新技术的力量。资料来源：Alliance Graphique International。

在电脑之前，平面设计师的绘图桌上有X-acto刀、橡皮泥和镊子。摆放字体和视觉效果的过程是一种物理体验。错误不是通过电脑键盘上的指令就能改变的。

黛博拉·苏斯曼（Deborah Sussman）为1984年奥运会设计的这张海报具有视觉上的复杂性，计算机辅助设计使其更易于执行。资料来源：AIGA设计观察。

计算机的出现，为设计带来了全新的设计方法。字体可以被替换，边框可以被缩小或放大，版面元素可以被拖到不同的空间–这一切都在瞬间完成。随着这种便利，人们对实验的需求也随之而来。摆脱了物理媒体的束缚，新事物的出现让我们有了更多的机会。

1975年加州平面设计运动的兴起，计算机的引入导致了加州平面设计运动的兴起。这场运动带来了只有在计算机的帮助下才有可能实现的超凡艺术感。计算机帮助设计师们用更少的时间来塑造他们的创意愿景。今天，你很难想象没有他们的数字协助的世界。

07 现代网页设计中的网格

网格几乎指导着一切。虽然它们作为垂直和水平线的框架的本质没有改变，但它们可以被用于多种方式。

基线网格：网格是关于传递一致性，而基线网格为文字等元素的垂直对齐方式带来了统一性。想一想，就像一个排版的日子计划书的页面一样。每一行都是一个更大的基线网格的一部分，它让你可以有条理地记下事情，而不是散乱的、无条理的书写。

在网页设计中，这些基线不一定非得是实线，但通常是透明的指引，用于对齐元素。

稿件网格：这只是一个单一的大列，包含了所有的文字以及图片。你现在正在阅读的这篇文章就是采用的稿件网格。

多列网格：这类网格在网页设计中很常见。这在网页设计中很常见。多列网格将内容组织成垂直的块。从标准的双列标题布局到设计作品集中的特色项目，这些网格无处不在。

捷克创业公司You Shine主页，对这一重要内容使用了三列网格。

模块化网格：模块化网格的特点是将水平块有条理的划分，用指导原则垂直划分。我们之前提到过瑞士学派，使用模块化网格来对齐海报上的视觉效果是他们常用的做法。

CSS网格给了网页设计者以几乎任何可以想象的方式将元素固定在纵轴和横轴上的能力。

内置于Webflow中的日式网格使用CSS网格在水平和垂直方向上组织这些视觉效果。

不规则网格：这种风格颠覆了常规网格的严格线条。叠加元素，将项目歪斜到不规则的位置和独特的形状，可以打破这些网格的单调性，而不至于让一个布局变成自由形式的灾难。

CSS 网格也是一个很好的工具，可以为布局带来一些变化，让不规则的网格变得更容易。

下面这个在Webflow中制作的Momentum Conference的例子，既有重叠的视觉元素，也有文字，它们仍然遵循着合理的组织方式，但没有被传统的网格所束缚。

08 网格永远不会过时

从史前到21世纪，网格在设计中起到了很大的指导作用。它们是一种线性的方法，可以将元素轻松地排列成一个视觉上令人愉悦的组织。无论你是遵循传统的布局，还是颠覆传统的布局，以适应你自己的艺术感受，它们都能让设计变得简单易懂，简单易行。

最后力推这个视频（Jen Simmons）：

https://www.youtube.com/watch?v=t0b3uBoDkBs

,