论“动态”的网格设计

姚光明（淮南师范学院美术系，安徽淮南 232038）

论“动态”的网格设计

姚光明
（淮南师范学院美术系，安徽淮南 232038）

从网格是什么出发，论述“动态”网格设计作为改变规格再创造的方法赋予空间的意义——于“无形”中产生“形”的现代视觉设计语法。“动态”的网格它不是简单的空间问题，还是不停地产生运动的时间问题。

动态；网格；现代视觉设计；形

一、网格是什么

（一）网格

网即纵横交错而成的组织或系统，格即格子。《辞典》中给“网格”下的定义：安排均匀的水平线和垂直线的网状物。其定义是基于X轴、Y轴的平面概念。网格本质上是控制，它建立一个在页面、屏幕或建构环境的空间中安排内容的体系。网格的划分形成隐形的垂直和水平辅助线，将设计师从事工作的二维平面或三维空间划分为若干相等或不相等的区域，用这些区域作为组织设计元素的框架，版面中的各个元素都要接受它的引导，从而在合乎数理逻辑的关系中建立版面的整体秩序，给设计一种内在凝聚力。

网格作为一种用于循规蹈矩的整理资讯的方法，已被广泛使用了几个世纪，人们在不同的文化背景下分别用网格设计了许多装饰屏风和织物，它已成为衍缝设计、建筑和导航技术方面的基础。在20世纪之前，网格一直是文本的框架，而网格在视觉设计中的应用则是近一个世纪的事。网格设计的形成和西方工业化时代对于标准化、模块化的要求是分不开的，它也是迎合当时西方商业化印刷市场发展的需要而产生的。

用网格进行版面设计既不像有些人认为得那样复杂，也不像有些人想象得那么简单，正如解释网格这个名词一样，从表面上看好像很简单，但实际上并不是一件简单的事情。网格所具有的限制性是需要精心设计的。网格确定了一页上栏的数量和位置，网格设计以“栏”为基本要素来承载信息，栏是版面变化的规则；栏的作用是使版面条理化和规范化，引导和帮助读者了解内容的顺序，提高阅读的速度和舒适度，减少阅读的疲劳和错误；栏的设定是以节省时间，适合眼睛一次扫描为原则。建立网格首先要在版面上确定版心尺寸及栏目的宽窄、多少、空白的大小、横竖栏的数目、尺寸；要考虑原稿所包含的元素，研究文本有多长，独立的小文本又有多少；图片有多少，图片的幅面大小大致如何分配；最小的图片限定模块，模块可以重复用在一个多行的结构中；必须事先确定各种规格，使插图和文字可以放进去，才能形成网格。

（二）网格系统赋予空间以意义

网格是最先体现构想的标准化系统。作为一种潜在的规则或叫做意象的比例尺，在最终效果中，是被其它图形主题所覆盖或隐形的。网格作为规范物理性空间，它可以为三角、四角和圆形等任意形，其比例尺的大小不同，网格的面积或角度也是不同的，这都要根据空间分布的意义进行分割。根据要传达的空间意义，只要构建一个分割空间，规定其相关关系的组织，在选定网格的瞬间，规范这个空间的各种性格便显现出来。

世间万事万物都有网格，它可以无限放大、无限缩小，这是与宇宙的安排吻合的网格。“没有规矩不成方圆”，一个国家要有法律、道德、规章制度、乡规民俗等这样的“网格”来规范行为。再小的东西也有其内在的网格或尺度，而再大的、看似静止的东西，也有其内在的流动性和变形。即使它被浓缩成一粒种子，或反之放大到宇宙之巨。作为有形之物普遍尺度的秩序，是存在于万物万类之中的。例如印度的占星术表示的是时间性、空间性的网格。占星术会告诉你所处的方位，往某个方向行进是凶是吉，某个时间是好是坏。

在所有视觉设计的背后都潜藏着深刻的理解。印度传统的神的形象都是基于这种网格制作的，传统的神的形象根据网格的阶层分配形象，表明其相对的重要性。正如印度一书《造型艺术奥义》所说，最受欢迎的是由十六个部分组成的格子，中央的四部分领域是最重要的空间，称为“梵天福田”，是主尊显现的位置，左下是最低级阶层的位置。与此相关的是，根据存在的重要性，以不同规格加以表示的想法，亦即将主要神祇造的比较大。所有的存在本来都有各自不变的规格，这不是物理性规格，而是基于其在阶层中存在的重要性的尺度，当这种网格与规格系统结合，便形成存在的重要性与尺度的相关图。有了这种网格策略，就使现代视觉设计中每一因素都“各就各位”，全部要素各得其所，它们就像彼此不可分割的“原子”微粒那样，造就的形象具有内在意义联系和整体感，整个视觉设计就充满力量。现代视觉设计建立于网格系统之上，它所起的作用类似于建筑结构中的脚手架，提供了支撑的手段，并引导设计师在各部分准确地排放设计要素。

二、动态的格子

网格是产生现代视觉形象的根基，网格设计是产生规则性秩序的手段。它强调在视觉设计预想时，分析物件、分类整理所要传达的意思的属性，在此基础上用于图形、文字或视听元素等的布局。理想的网格可以满足各种变形，动态的格子是为了进行某种创造所设定的结构上的规则，也包括为了产生各种变化的规则。

我们把一个正方形分割为尺寸相等的若干小正方形可以创造出一种基本的结构韵律，这种格子本身没有动感，是完全消极的，它所提供给设计者的空间是有限的。从另一个方面讲，分割出大小不一的格子便会随之产生不同节奏的结构体系，诸如点对称和镜像对称结构、有四个对称轴的对称结构、有一条对角线对称轴的感知非对称或是条件对称结构和非对称结构，或把若干尺寸相等的小正方形中的某一些再进行次划分，这些不同的格子都各自具备自己独特的表达方式和符号语言。

为了避免较差的比例和单调的布局，可以以纵的或横的方向为重点进行灵活的格子设计。例如，在保持统一的垂直线时，使水平线有所变化，或保持统一的水平线，使垂直线有所变化。网格为文字和图形元素提供展示空间，网格的选择往往优先于对形式等一系列基本问题的决定。网格将页面分割为中间有狭窄间隔的若干方形或矩形，格子越小，对于图片尺寸与比例限制也就越严格，复杂的图形构想最好选用功能性强的网格。通过格子的数量变化，网格系统不仅决定着图片的尺寸，而且还决定着它们的比例。划分精细的网格或者两个以上的网格系统的重合，能够形成更多放置元素的空间，增加设计的复杂性和自由度，使尺寸、比例不一的图片在页面上得到合理的安排。如4×格子可以提供比例为1：1和1：2的4个不同图片的尺寸，然而9×格子可以提供比例为1：1、1：2、1：3和2：3的9个不同图片的尺寸，将其中两个网格系统重合至少可以获得7个不同比例的25个不同图片尺寸。16×格子可以容纳16个不同尺寸的图片，比例分别为1：1、1：2、1：3、1：4、2：3和3：4。如果把9×和16×格子重叠结合，可提供不同图片尺寸的数量就是64，比例的数量恐怕就不计其数了。对于读者来说，真正重要的是设计是否合理，可读性是否充分。网格系统越是复杂，在设计成品中它越是不易被读者察觉，然而格子的变化越多，统一控制整个体系内众多元素的难度就越大。网格可以根据不同的目的设计成不同的形式，一般以文字为主的版面用简单的网格形式，可以是一栏多列或一列多栏，也可以是将版面等分；而对于插图较多有着复杂层级的则用复杂的多栏多列灵活结构了。如果原稿是由很多独立的片段组成，那么网格就要划分成许多小单元；如果原稿是以冗长的文字为主的话，一个复杂的网格体系就纯属多余。网格的复杂性在于要帮助设计师回答这样一个问题，“应该要多大，我把它放在哪儿”，过分复杂的网格好像到处都是网格，然而却毫无用处。网格划分越细，单元越小，元素摆放位置的选择就越多，条理秩序就越难统一，读者就很难看清它的条理。所以构造独特的网格，必须与设计的版面上的元素数量和大小相对应，换句话说，有时简单的网格才是最好的选择。960网格系统是为了简化常用的尺寸，宽度为960像素基于Web设计工作流程。它有两个变量：12和16列，可用于单独或串联。当搭建页面结构复杂的门户型网站时，设计师们不约而同地都选择将页面宽度定为950px/960px。Alexa全球排名前100的站点，它们的首页页面宽度都是将近960px，比如Yahoo是950 px，网易是960 px，淘宝是950 px，优酷是960 px。

获得视觉或感觉上的和谐感对现代视觉设计来说很重要，有时候为了打破版面过于平静的格局，可以使用局部突破网格规矩的方法，制作一些兴奋点，给版面注入活力和灵性。这就是说，你有时候必须用少量图文的跨骨骼线处理来打破大小差不多的方块网格的限定，个别图片脱离格的约束，向外移动半格；骨骼线只对图产生影响，而文字则自由不受限制；也可不按格的比例放大缩小，使版面出现变化，显现出灵活丰富的视觉效果。网格的设计还可以根据图文的大小需要拆开网格线，连成占有多个网格单元的一个大格，这样网格就形成不同大小比例的扁形或长形，会产生统一中有变化的设计风格。例如：设计者也许不会永远用一张六栏的网格去设计六栏版式，但是，他能用这些栏目成双成对地设计成三栏版式，还可以以三栏为一组设计成二栏版式，或栏目宽度成倍不同的版式。

总之，动态的格子也是需要预先设计的，可以做得很简单，也可以做得很复杂，可以规范严格，也可以较为松散，根据需要来定。当网格设置得过于严格公式化的时候的确会限制设计师的自由，束缚并扼杀设计的创造性。但这并不表示它的结果就一定是僵硬无趣的，就像其它的系统方法一样，如果能够发挥想象力，把它运用得当的话，也会有很活泼的效果出现。当然，从另一个方面来说，复杂的网格也允许大量变化的存在，也能包容更多、更灵活自由的理念。设计者可以参考众多框架，总结出自己的一套框架，“让框架工作”，用实际框架来形成秩序提高效率。世界上著名的实践家们富有创造性的解决办法的幅度，更证明了网格设计的纯正的手法和易认的传达，可以使设计师达到永恒的完美造型。美学比例原则性和灵活性相结合，创造性地应用网格，就能产生优秀的版面，版面内的比例感、版面间的连续感便不难产生，秩序感和现代感则不难形成。

三、“动态”的网格设计

余秉楠认为：西方设计是一部沿着学科实验、富于数理逻辑推理的轨迹发展的历史，是建立在抽象数理分析的基础上发展起来的一门艺术。德国乌尔姆造型学院在应用网格设计时主要追求的是普遍性设计和共同语言，它试图追求绝对、唯一的答案，而“动态”的网格设计强调的格子是普遍性设计仍反映个别性，致力于个性化、多样化设计，强调每一个人都是不同的存在，有不同的想法。也就是要告诉你有成千上万的毗湿奴神，每个设计师都可以制作自己的毗湿奴神像。

当下，日新月异的数码媒体，以划时代的方式改变了一切。二次元空间加入了时间、动态、变化的维度，对现代视觉设计产生了重大的影响。“动态”的网格设计不只是在纸媒介上描绘形象的二维概念，而且是空间意义的，是欲捕捉数码视听空间，以及加入时间形成四度空间的动态概念。“动态”的网格设计模式作为现代视觉设计的一种思路和方法，是颇具可行性。与我们生产生活密切相关的电脑就是基于计算机网格，如果没有这个三度空间网格，计算机既无法制图，也不能储存资讯。基于网格与现代视觉设计语法的关系，将始终变化的视频形象投影到“动态”格子，这对于我们现代视觉设计师来说是新的挑战。以网站设计为例，由于新生事物层出不穷，网站是空间性和时间性的、不断更新变化、不固定的；文字在网页上随处出现，又随时消失，文字在跳舞，资讯在跳舞；可以在放大或缩小之间自由游走、跳跃。所以在网页设计中首先要思考孰轻孰重；应该要多大，我把它放在哪儿；应该从哪里开始，表现什么意思等因素，再设计视听画面语言序列。网站视觉设计应该不仅着眼于平面，还要编排空间与时间的意义：从网页画面上退出某个物件的时候，从什么位置退出最好；瞬间对内容放大、缩小浏览的及时性；某个视听元素进入网页画面的时候，进场位置不同，它的视听冲击力也完全不同。“动态”的网格不仅仅是简单的空间问题，还是不停地产生运动的时间问题，还可以从投影几何学上，以各种造型让整个空间结构发生扭曲，也可以导入黎曼几何学的概念（黎曼流形上不同点的切向量也可以用平行移动的方法加以比较），所以在这个意义上，“动态”的网格设计是一个伸缩余地很大的现代视觉设计方法空间。

艺术与设计一般被视为直觉感受和个人灵感的表现，但勒·柯布西耶把辅助线看作“灵感的决定性因素之一”。我们从勒·柯布西耶、约瑟夫·米勒-布罗克曼、马克斯·比尔等人创作作品过程中可以明白，他们考虑了对视觉设计过程基本的和基础的网格构成和规划方法，他们对动态的格子构成方法的使用和理性解释存在显著的相似性，同时也证明了在设计中的直觉是很少存在的，更多的是深思熟虑地应用知识经验的结果。对“动态”的网格设计构成原理的理解将给创新的视觉设计作品引入构成凝聚感，由此视觉版面的每一个元素都有一种视觉归属感。设置“动态”格子的前提条件是为了避免设计中太多主观感性因素干扰的出现，网格动感的非对称格子形式可以把视觉设计变成一种鲜活的生命体。

很多人一听说网格就认为是非常没劲的设计标准，抱怨网格体系限制性太强，冷酷、正式、教条，它主要依据公式，因此，没有太多自由创作的空间。如果只考虑网格结构，把网格看成一个简单的规则，一味的恪守网格，过于固执地遵循网格进行设计，而忽略了灵活应用和创造性的话，网格确实会成为一种布局枯燥和格式死板的约束物，其作品就会变成不断的重复、烦琐的东西。“动态”网格设计中的格子是用于辅助设计的，是可塑的，不是一成不变的，它作为产生变化的工具，其实可以产生更多的可能性、更丰富的变化，它不应该像紧身衣一样被套在设计师身上，它有随时变化的余地。一个好的“动态”的网格并非一个刻板的公式，而应该是骨架与所传达信息的肌质相适应。例如：印度的细密画并不是用规则的矩形绘制的，其垂直线、水平线都有些倾斜，建筑或窗扇等是扭曲的，但一方面却又精致、有节奏，很养眼，是因为设计师是根据他心中独到的、内在的并非直线的动态格子来构筑空间形态的。对这一点最好理解的是印度的古典音乐——拉格。

结语

总之，网格给人以规矩和约束，这是它的优点，同时也是它的缺点。“动态”的网格设计既没有固定的公式，也并非生来相同。但“动态”的网格作为一个灵活、有弹性的结构，作为一条要领简明、操作有据、规范明确、效果突出的可行途径，为现代视觉设计提供了一个有矩可循而又具备极大延展可能性的方法。按照“动态”的网格来设计视觉版面，要保持自己的自由权不受限制，真正的困难在于如何在最大限度的公式化和最大限度的自由化之间寻找平衡，换句话说，就是在大量的不变因素与可变因素之间寻找平衡。在设计具体化时，会碰到许多意想不到的问题，网格平衡点定位的寻找还需要设计师在设计实践中深刻体会、理解，才能熟练驾驭。

[1][日]杉浦康平.亚洲之书·文字·设计——杉浦康平与亚洲同人的对话[M].杨晶，李建华译.台北：网路与书股份有限公司台湾分公司，2006

[2]郑微.版面设计网格构成[M].北京：中国青年出版社，2005

[3][美]金伯利·伊拉姆.栅格系统与版式设计[M].王昊译.上海：上海人民美术出版社，2006

[4]余璐.余秉楠[M].郑州：河南美术出版社，2004

[5][法]勒·柯布西埃.走向新建筑[M].陈志华译.西安：陕西师范大学出版社，2004

[6][美]梅格斯.二十世纪视觉传达设计史[M].柴常佩译.武汉：湖北美术出版社，1989

[7][美]金伯利·伊拉姆.设计几何学[M].李乐山译.北京：中国水利水电出版社，2003

[8]王俊.版面设计[M].北京：中国建筑工业出版社，2005

On“dynamic”grids design

YAO Guang-ming

This article from the grid is what，based on“dynamic”grid design as a specification of the method to create change again to the meaning of space——in“intangible”produce“form”modern visual design grammar，and puts forward the“dynamic”the grid，it is not a simple problem，still keep space produce movement a question of time.

dynamic；grids；modern visual design；shape

J529

A

1009-9530（2012）03-0073-04

2011-06-26

淮南师范学院青年课题资助项目（2009QN02）

[作者简介]姚光明（1975-），男，淮南师范学院美术系讲师,文学硕士，研究方向：设计艺术学。