简单五步搞定网格系统:前言

产品

在发表了《Design in Flight》之后,收到了很多读者的邮件,大多数是在询问我如何设计一个有效的网格系统。这是一项十分复杂的领域,不过我把那些非常实用的技巧通过提炼,写成了“简单五步搞定”,写了这么多之后我觉得有必要写点前言什么的,于是就有了这篇,你现在看到的是第一部分。

什么格式是网格

在我们开始之前我想有必要解释一下基础知识,比如什么是网格,为什么要使用网格,以及它们是从哪儿来的。

在平面设计中,**网格是一个用来约束元素,如文字和图像的工具。**网格诞生于构成主义艺术(Constructivist Art),然后在类似的艺术运动中逐渐成长壮大。同时也和苏黎世学院在 20 世纪 30 年代的混凝土几何艺术(Concrete-Geometrical Art)有一定的联系,在这项运动中,个中的几个著名艺术家,通过美术作品对排版也产生了巨大的影响。

也正是在这一时期,网格系统从艺术领域,逐步被应用到排版和商业设计中。

大多数情况下,它是数学

首先,当我们在讨论网格系统的时候,我们必须将形式和功能区分开。我们必须重新思考美学和比例。对于那些被教育成“当你感觉这是对的时候,它就是对的”人,这个方法可能会比较纠结。但就像我之前说的,感觉是对数学和结构的一种情感反馈。

在网格系统中,到处都是比例和方程。相对测量存在于多数系统中,从简单的宣传海报到复杂的报纸网格。想要设计一个有效的网格系统,你必须对与比例和平衡了如指掌。首先从人体开始,人体的一些整数比例比如:1/2、2/3、3/4,以及建筑领域的非整数比,比如黄金比例:1/1.618,或者 DIN【*德国工业标准(Deutsche Industrie Normen)】比例:​1/1.4146

在现代社会中,这些比例无处不在,从周遭的建筑物到自然界中。网格系统中的这些比例决定着这个设计是否是成功的。设计不仅仅要考虑功能,审美也是一个重要因素。

什么是网格系统

网格系统就是设计中的网格,它适用于不同的设计途径,而不需要改变自身。一个鲜明的例子就是书本,一本书有很多页面,但是只需要一个网格系统就可以,就可以统一安排这些页面上的很多元素,标题,小标题,正文等等。

在设计中,使用不同的设计方案是很危险并且复杂的,当你的设计变得复杂的时候,你就降低了可用性,而且网格会变的极为复杂以至于设计师根本没办法使用。当你在设计网格系统的时候,必须时刻提醒自己——保持简洁,保持全面。

为什么要设计网格系统

人们常说网格系统会限制创意空间,给设计师以约束。Karl Gerstner 是瑞士最杰出的平面设计师之一,这样的冲突会让设计师们接受网格系统。

排版网格是字体、表格、图片等元素的调节器。它在一开始就定义了那些尚未出现的元素。最困难的是平衡自由和束缚,也就是说,最大限度的融合变量和常量。

​在整个设计过程中,网格系统是一种先发制人的存在。它在一开始就规定了结构、分配、排序和内容。我并不是说一个好的网格系统就可以搞定你所有的问题,事实并非如此,网格系统创造了一个连贯一直的结构,一定程度上,也帮助我们在设计的背后建立起了一种美学价值。

简单五步

如果设计的好,你现在应该已经非常了解什么是网格系统,以及它们从何而来,以及具体能做什么。在接下来的五步中,我会通过一些元素来制作出一个有效的网格系统,以及通过这些元素的组合来创建一个简单和复杂的系统,用于多种媒体的输出。

第一季将会是“组合比例”

  1. 细分比例(Subdividing Ratios)
  2. 比例和复杂网格系统(Ratios and complex grid systems)
  3. 网页设计网格系统:第一步
  4. 网页设计网格系统:第二部,固定
  5. 网页设计网格系统:第三部,浮动

作者:Mark Boulton
翻译:Max Cheung
原文链接:Five simple steps to designing grid systems – Preface