网格设计的历史（下）

八月底翻译了《网格设计的历史（上）》。今天继续翻译来自Alex Bigman编写的网格设计的历史（下）。一旦设定了网格设计的规则，设计师就会立即开始破坏它们。这一点，以及网页设计中网格的现代化，将成为“网格历史，第2部分”的主题。

------------

在“设计网格的历史 ”中，我们涵盖了文艺复兴时期的起源和20世纪设计网格的发展，探索了700年前的比例和谐原则如何继续引导印刷设计。在这篇文章的最后，我们也会在网上看到它们。

现在，让我们来看看设计网格最近的历史：它在20世纪艺术和设计领域的重点，以及最终在当代网站设计中的微妙和看似不可动摇的存在。请继续阅读，了解我们现在所处的位置，并找到一些资源，充分利用网格！

20世纪的艺术与设计

虽然瑞士印刷师正在印刷设计中确立网格的中心地位，但在美术界却发生了类似的运动。

荷兰 De Stijl 运动可能最为明显，该运动成立于1917年，由艺术家Theo van Doesburg和Piet Mondrian领导。他们相信模块化设计和绝对简洁的民主和乌托邦潜力，他们将画布限制为相交的垂直和水平线条和原色。

De Stijl 出版物（左）和Piet Mondrian（右）的画作，其中网格清晰可见

德国的包豪斯学校于1919年开业2年后，其形式和功能之间的直接关系被宣布为其指导原则，没有任何“不必要的”或装饰性组件。当然，这种理念使他们走向极其实用的网格，正如着名的包豪斯国际象棋组中所见，其棋子都是方形和矩形，紧密贴合在一起以便紧凑存放。

包豪斯（Bauhaus）的出版物（左）与着名的包豪斯国际象棋（Bauhaus）国际象棋组合，它有方形件，可以拼凑成一个紧凑的网格进行存储（右）

同时，网格在平面设计中变得越来越根深蒂固。看着Josef Muller Brockmann，Richard P. Lohse，Armin Hofmann和Alberto Longhi 撰写的这些着名海报，很明显它们都符合严格的网格（有时它是倾斜的，但这是唯一的限制）。

瑞士设计师Josef Brockman（左）和Richard Lohse（右）的海报都符合严格的标准

阿明·霍夫曼和Alberto隆吉

Massimo Vignelli 将1972年纽约市地铁地图的重新设计扭曲了地理比例，创造了一个更容易理解的地图：一个网格。

Massimo Vignelli 1972年的纽约地铁地图扭曲了铁路线，使其适合更清洁的网格

然而，在20世纪60年代的流行艺术中，网格可能达到了最大的存在。像安迪·沃霍尔，罗伊·利希滕斯坦，查克·克里特和格哈德·里希特这样的艺术家将机械复制的“低俗”语言提升到了高级艺术的水平，网格出现在前面和中间。

安迪沃霍尔的坎贝尔汤罐排列成网格。照片由profzucker拍摄

Chuck Close的肖像使用了一个单元网格（左边是rocor的照片），Gerhard Richter使用了一个颜色网格（右边）

很快，人们厌倦了它，在20世纪70年代和80年代，许多设计师试图淡化甚至免除设计网格，而不是庆祝它。然而，网络即将改变一切。

今天的网页设计

有一段时间，数字技术被视为超越设计网格的一种实验方式。但这并没有持续多久。设计人员现在通常发现网格是组织网站并使其响应不同设备的理想方式。

网格干净，为网站提供了良好的结构，用户易于导航并为设计人员节省了大量的麻烦，因为1个网格可以反复使用。因为网站开辟了印刷中没有的新美学尺寸 - 比如使用新的多样性的可行颜色，纹理和字体 - 同样的网格可以用来产生完全不同的外观。

传统上，在线网格已经停留在9列，12列或16列，但正如您在下面的设计中所看到的，现代网页设计师有时会使用少至3个。如果您只需要3个，则不再使用。

Khoi Vinh创建了一个着名的网站（这里重新标题为“Yeeaahh！”）符合14列网格; 他描述了本文中的过程

纽约时报网站是另一个着名的网格，由薄轨和5列组成

在Smashing Magazine的这篇文章中，Chris Brauckmuller描述了他对FloridaFlourish.com的3列网格如何证明是足够的

浏览网页时，非常规网格转发网站的数量也在增长。查看其中一些非常棒的示例，其中一些使用垂直列网格，另一些使用更模块化的方法。

Pixelot.de真正拥抱网格，使水平和垂直线条清晰可见

42Angels.com基于5列网格，但也使用精细的马赛克背景来补充外观

TDHCreative.com，保持简洁

AraWines.com使用更复杂的模块化网格

------ end -----

回顾

▼

原文地址：https://en.99designs.jp/blog/tips/history-of-the-grid-part-2/

原文作者：Alex Bigman
中文翻译：hifont

作品归原作者所有
@字体设计 整理编辑发布

 Thanks for watching !