在「设计网格的历史」中,我们概括了文艺复兴起源及20世纪设计网格的发展,探索有700年历史的和谐比例原则是如何继续指导印刷设计的。在这篇文章最后,我们也会看到它们对网页的影响。
现在,让我们考察近代设计网格,并完善主题:20世纪艺术与设计对网格的公开提倡、随后而来的短暂抵制、以及现代最终在网页设计上微妙而不可动摇的地位。请阅读并思考我们立足于何处,寻找资源发挥网格的最大潜能。
20世纪的艺术与设计
当瑞士排版师在建立印刷设计中网格的中心地位时,世界纯艺术领域也发起了类似运动。
网格在荷兰风格派运动中最为明显,这个运动由艺术家凡·杜斯堡(Theo van Doesburg)和蒙德里安(Piet Mondrian)于1917年发起。基于对模块设计广泛理想化的潜力和对绝对简洁的信仰,他们在画布上只使用纵横交错的线条和未经调和的颜色。

2年后,在1919年,德国的包豪斯成立,他们崇尚形式追随功能,舍弃一切「不必要」及装饰的成分。这个哲学引导他们使用网格,正如著名的包豪斯国际象棋。这副棋的棋子均为圆和方,能紧密放置保证便携保存。

同时,网格在平面设计中的地位越来越牢固。翻看Josef Muller Brockmann, Richard P. Lohse, Armin Hofmann 和Alberto Longhi等大师的著名招贴作品,你能看到它们都严格遵循网格(有时网格是倾斜的,这被唯一许可)

1972年,Massimo Vignelli重设计的纽约地铁地图改变了站点的地理位置,基于网格制作了一张更易读的地图。

而到1960年代的波普艺术时代,网格地位大致到达顶峰。Andy Warhol、 Roy Lichtenstein、Chuck Close 和Gerhard Richter等艺术家把这个机械大生产的「粗俗」语言提升到艺术高度,网格成为核心。


很快人们厌倦了网格,在1970到80年代左右,许多设计师尝试减少甚至完全放弃使用设计网格。但网页时代改变了这一切。
当代网页设计
数字技术曾有一个时期被认为能超越设计网格,但这没有持续很久。设计师逐渐发现网格是组织网页结构、在多设备间实现响应式的理想工具。
由于一格能重复使用,清晰的网格能组织良好的网页结构,易于浏览也为设计师规避麻烦。由于网页打开了印刷不能实现的新美学领域——比如可视颜色、材质和字体的多样性——相同的网格可以做出完全不同的视觉风格。
一般来说,互联网网格使用9、12或16栏,但正如下面的案例,当代设计师有时也会只用3栏。如果3栏足够,就无需多用。



浏览网页,使用特例网格的网站也越来越多。查看这些精妙例子,你会发现有些网页使用了垂直网格,也有一些使用了更模块化的方案。




一些能帮你着手使用的资源:
Ultimate Guide To Grid-Based Web Design: Techniques and Tools
Grid-Based Web Design, Simplified
网友评论