现代设计中的栅格系统
[摘要]栅格系统是一种对版面进行有效布局的系统,是一种对页面风格进行计划的方式,在平面设计中扮演着举足轻重的角色,对今世平面设计的发展起着重要的增进作用。本文回溯了栅格系统的历史及现状,并尝试探讨其对中国今世平面设计的推动作用。
[关键词]栅格系统 版式设计 功能
现今平面设计的世界流派众多,风格各异,令人目不暇接。在这场新世纪的视觉盛宴中,争辩之声从未停止,其中以栅格系统为基础的“传统”设计和以“叛逆”为特征的自由设计最为引人注目。栅格系统在平面设计中的地位不曾动摇,它的稳固来自于它产生的背景、慢慢发展和完善的理论和无与伦比的功能都符合了人们的顽固阅读习惯和转变审美潮流。
一、栅格系统的概念
栅格系统的英文为“Grid Systems”,又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格。栅格系统以规则的网格阵列来指导和规范版面布局和信息散布,是一种平面设计的方式与风格。栅格系统的利用不仅可让信息的呈现加倍美观易读,而且为前期计划和后续设计带来更多的灵活与规范,至今仍是出版设计的主流风格。毫不夸张地说,没有栅格系统就没有现代平面设计。
生活中“栅格系统”无处不在:城市布局、杂志、网页、报纸和大厦的框架结构等等。美国设计师哈里?斯顿伯格说:“在建筑中,结构横梁支撑着墙、地板、管道和线路和建筑物的正面。在平面设计中,布局是支撑其他相关要素的基础结构。”和决定现代建筑的高度、风格、外观的钢筋混凝土框架相类似,栅格系统就是一种用来搭建、组合用以对版面进行有效布局和探索风格的系统,是对页面版式的计划。“版面网格可帮忙设计师做出明智的设计决策,排除设计元素被随意编排的可能,也可使各类元素整合在统一的设计中。”
二、栅格的发展及现状
按照维基百科 的描述,1692年,法国国王路易十四因不满那时的印刷水平,下令由数学家尼古拉斯领导成立管理印刷的皇家特别委员会,旨在设计科学合理而且实用的新字体。他们以罗马体为基础,每一个字体分为64个以方格为单元的大体单位,每一个单位再分成36个小格,形成有2304个小格的网格。他们在这个严谨的几何网格中设计字体和版面编排,这是栅格系统的开端。
1919年德国著名建筑家沃尔特•格罗佩斯在魏玛成立国立包豪斯学院,成为继荷兰“风格派”运动、俄国“组成主义”运动之外的现代主义设计运动中心。在它们的交互影响下,平面设计带有明显的栅格系统的特点,即:高度理性、简约主义、功能化和几何形式化的风格。
1959年,在包豪斯的理性设计为基础发展起来的、以瑞士出版的《新平面设计》杂志为标志的“瑞士平面设计”或“国际主义平面设计”因简练洗练,转达清楚准确而日渐流行。该流派“主张段落分明,功能明确,强调将逻辑排列视为观察外界事物的起点”,利用近乎标准化的比例公式制作栅格系统,以便精准而优美地配置图片和文字,是二战后影响最大、最具时期精神的设计风格。
20世纪60年代,“瑞士平面设计风格”在美国的快速推行和普遍运用,大量应用栅格系统进行设计,追求平面设计的标准化和清楚良好的视觉转达功能,使美国平面设计的水平迅速提高,对美国出版业产生了庞大的、踊跃的增进作用,可视为欧洲在二战后对各方面都处于强势地位的美国的一次强力的文化输出。依托美国的壮大经济实力,“瑞士风”的影响进一步扩展到全世界。
随着中国经济的发展和文化等领域的日渐开放,栅格系统开始进入中国设计领域。但因为各类原因,栅格系统的并非被真正重视,只在某些领域如报纸、杂志期刊等领域因为栅格系统的高效率被普遍应用,但对其比例、美感和风格的追求始终差强人意。很多设计虽然设计精美,秩序井然,明显有栅格系统的影响,但更多是设计师积累连年经验以后无心识的利用,对栅格系统仍然不甚了了。最近几年来虽然许多设计家如书籍装帧大家余秉楠等大力推行栅格系统,但栅格系统在中国仍在起步阶段,需要一个接受和消化的进程。 三、栅格系统的功能
现代设计中的栅格系统



