論“動態(tài)”的網(wǎng)格設(shè)計

姚光明（淮南師范學(xué)院美術(shù)系，安徽淮南 232038）

論“動態(tài)”的網(wǎng)格設(shè)計

姚光明
（淮南師范學(xué)院美術(shù)系，安徽淮南 232038）

從網(wǎng)格是什么出發(fā)，論述“動態(tài)”網(wǎng)格設(shè)計作為改變規(guī)格再創(chuàng)造的方法賦予空間的意義——于“無形”中產(chǎn)生“形”的現(xiàn)代視覺設(shè)計語法?！皠討B(tài)”的網(wǎng)格它不是簡單的空間問題，還是不停地產(chǎn)生運動的時間問題。

動態(tài)；網(wǎng)格；現(xiàn)代視覺設(shè)計；形

一、網(wǎng)格是什么

（一）網(wǎng)格

網(wǎng)即縱橫交錯而成的組織或系統(tǒng)，格即格子。《辭典》中給“網(wǎng)格”下的定義：安排均勻的水平線和垂直線的網(wǎng)狀物。其定義是基于X軸、Y軸的平面概念。網(wǎng)格本質(zhì)上是控制，它建立一個在頁面、屏幕或建構(gòu)環(huán)境的空間中安排內(nèi)容的體系。網(wǎng)格的劃分形成隱形的垂直和水平輔助線，將設(shè)計師從事工作的二維平面或三維空間劃分為若干相等或不相等的區(qū)域，用這些區(qū)域作為組織設(shè)計元素的框架，版面中的各個元素都要接受它的引導(dǎo)，從而在合乎數(shù)理邏輯的關(guān)系中建立版面的整體秩序，給設(shè)計一種內(nèi)在凝聚力。

網(wǎng)格作為一種用于循規(guī)蹈矩的整理資訊的方法，已被廣泛使用了幾個世紀(jì)，人們在不同的文化背景下分別用網(wǎng)格設(shè)計了許多裝飾屏風(fēng)和織物，它已成為衍縫設(shè)計、建筑和導(dǎo)航技術(shù)方面的基礎(chǔ)。在20世紀(jì)之前，網(wǎng)格一直是文本的框架，而網(wǎng)格在視覺設(shè)計中的應(yīng)用則是近一個世紀(jì)的事。網(wǎng)格設(shè)計的形成和西方工業(yè)化時代對于標(biāo)準(zhǔn)化、模塊化的要求是分不開的，它也是迎合當(dāng)時西方商業(yè)化印刷市場發(fā)展的需要而產(chǎn)生的。

用網(wǎng)格進(jìn)行版面設(shè)計既不像有些人認(rèn)為得那樣復(fù)雜，也不像有些人想象得那么簡單，正如解釋網(wǎng)格這個名詞一樣，從表面上看好像很簡單，但實際上并不是一件簡單的事情。網(wǎng)格所具有的限制性是需要精心設(shè)計的。網(wǎng)格確定了一頁上欄的數(shù)量和位置，網(wǎng)格設(shè)計以“欄”為基本要素來承載信息，欄是版面變化的規(guī)則；欄的作用是使版面條理化和規(guī)范化，引導(dǎo)和幫助讀者了解內(nèi)容的順序，提高閱讀的速度和舒適度，減少閱讀的疲勞和錯誤；欄的設(shè)定是以節(jié)省時間，適合眼睛一次掃描為原則。建立網(wǎng)格首先要在版面上確定版心尺寸及欄目的寬窄、多少、空白的大小、橫豎欄的數(shù)目、尺寸；要考慮原稿所包含的元素，研究文本有多長，獨立的小文本又有多少；圖片有多少，圖片的幅面大小大致如何分配；最小的圖片限定模塊，模塊可以重復(fù)用在一個多行的結(jié)構(gòu)中；必須事先確定各種規(guī)格，使插圖和文字可以放進(jìn)去，才能形成網(wǎng)格。

（二）網(wǎng)格系統(tǒng)賦予空間以意義

網(wǎng)格是最先體現(xiàn)構(gòu)想的標(biāo)準(zhǔn)化系統(tǒng)。作為一種潛在的規(guī)則或叫做意象的比例尺，在最終效果中，是被其它圖形主題所覆蓋或隱形的。網(wǎng)格作為規(guī)范物理性空間，它可以為三角、四角和圓形等任意形，其比例尺的大小不同，網(wǎng)格的面積或角度也是不同的，這都要根據(jù)空間分布的意義進(jìn)行分割。根據(jù)要傳達(dá)的空間意義，只要構(gòu)建一個分割空間，規(guī)定其相關(guān)關(guān)系的組織，在選定網(wǎng)格的瞬間，規(guī)范這個空間的各種性格便顯現(xiàn)出來。

世間萬事萬物都有網(wǎng)格，它可以無限放大、無限縮小，這是與宇宙的安排吻合的網(wǎng)格?！皼]有規(guī)矩不成方圓”，一個國家要有法律、道德、規(guī)章制度、鄉(xiāng)規(guī)民俗等這樣的“網(wǎng)格”來規(guī)范行為。再小的東西也有其內(nèi)在的網(wǎng)格或尺度，而再大的、看似靜止的東西，也有其內(nèi)在的流動性和變形。即使它被濃縮成一粒種子，或反之放大到宇宙之巨。作為有形之物普遍尺度的秩序，是存在于萬物萬類之中的。例如印度的占星術(shù)表示的是時間性、空間性的網(wǎng)格。占星術(shù)會告訴你所處的方位，往某個方向行進(jìn)是兇是吉，某個時間是好是壞。

在所有視覺設(shè)計的背后都潛藏著深刻的理解。印度傳統(tǒng)的神的形象都是基于這種網(wǎng)格制作的，傳統(tǒng)的神的形象根據(jù)網(wǎng)格的階層分配形象，表明其相對的重要性。正如印度一書《造型藝術(shù)奧義》所說，最受歡迎的是由十六個部分組成的格子，中央的四部分領(lǐng)域是最重要的空間，稱為“梵天福田”，是主尊顯現(xiàn)的位置，左下是最低級階層的位置。與此相關(guān)的是，根據(jù)存在的重要性，以不同規(guī)格加以表示的想法，亦即將主要神祇造的比較大。所有的存在本來都有各自不變的規(guī)格，這不是物理性規(guī)格，而是基于其在階層中存在的重要性的尺度，當(dāng)這種網(wǎng)格與規(guī)格系統(tǒng)結(jié)合，便形成存在的重要性與尺度的相關(guān)圖。有了這種網(wǎng)格策略，就使現(xiàn)代視覺設(shè)計中每一因素都“各就各位”，全部要素各得其所，它們就像彼此不可分割的“原子”微粒那樣，造就的形象具有內(nèi)在意義聯(lián)系和整體感，整個視覺設(shè)計就充滿力量?，F(xiàn)代視覺設(shè)計建立于網(wǎng)格系統(tǒng)之上，它所起的作用類似于建筑結(jié)構(gòu)中的腳手架，提供了支撐的手段，并引導(dǎo)設(shè)計師在各部分準(zhǔn)確地排放設(shè)計要素。

二、動態(tài)的格子

網(wǎng)格是產(chǎn)生現(xiàn)代視覺形象的根基，網(wǎng)格設(shè)計是產(chǎn)生規(guī)則性秩序的手段。它強調(diào)在視覺設(shè)計預(yù)想時，分析物件、分類整理所要傳達(dá)的意思的屬性，在此基礎(chǔ)上用于圖形、文字或視聽元素等的布局。理想的網(wǎng)格可以滿足各種變形，動態(tài)的格子是為了進(jìn)行某種創(chuàng)造所設(shè)定的結(jié)構(gòu)上的規(guī)則，也包括為了產(chǎn)生各種變化的規(guī)則。

我們把一個正方形分割為尺寸相等的若干小正方形可以創(chuàng)造出一種基本的結(jié)構(gòu)韻律，這種格子本身沒有動感，是完全消極的，它所提供給設(shè)計者的空間是有限的。從另一個方面講，分割出大小不一的格子便會隨之產(chǎn)生不同節(jié)奏的結(jié)構(gòu)體系，諸如點對稱和鏡像對稱結(jié)構(gòu)、有四個對稱軸的對稱結(jié)構(gòu)、有一條對角線對稱軸的感知非對稱或是條件對稱結(jié)構(gòu)和非對稱結(jié)構(gòu)，或把若干尺寸相等的小正方形中的某一些再進(jìn)行次劃分，這些不同的格子都各自具備自己獨特的表達(dá)方式和符號語言。

為了避免較差的比例和單調(diào)的布局，可以以縱的或橫的方向為重點進(jìn)行靈活的格子設(shè)計。例如，在保持統(tǒng)一的垂直線時，使水平線有所變化，或保持統(tǒng)一的水平線，使垂直線有所變化。網(wǎng)格為文字和圖形元素提供展示空間，網(wǎng)格的選擇往往優(yōu)先于對形式等一系列基本問題的決定。網(wǎng)格將頁面分割為中間有狹窄間隔的若干方形或矩形，格子越小，對于圖片尺寸與比例限制也就越嚴(yán)格，復(fù)雜的圖形構(gòu)想最好選用功能性強的網(wǎng)格。通過格子的數(shù)量變化，網(wǎng)格系統(tǒng)不僅決定著圖片的尺寸，而且還決定著它們的比例。劃分精細(xì)的網(wǎng)格或者兩個以上的網(wǎng)格系統(tǒng)的重合，能夠形成更多放置元素的空間，增加設(shè)計的復(fù)雜性和自由度，使尺寸、比例不一的圖片在頁面上得到合理的安排。如4×格子可以提供比例為1：1和1：2的4個不同圖片的尺寸，然而9×格子可以提供比例為1：1、1：2、1：3和2：3的9個不同圖片的尺寸，將其中兩個網(wǎng)格系統(tǒng)重合至少可以獲得7個不同比例的25個不同圖片尺寸。16×格子可以容納16個不同尺寸的圖片，比例分別為1：1、1：2、1：3、1：4、2：3和3：4。如果把9×和16×格子重疊結(jié)合，可提供不同圖片尺寸的數(shù)量就是64，比例的數(shù)量恐怕就不計其數(shù)了。對于讀者來說，真正重要的是設(shè)計是否合理，可讀性是否充分。網(wǎng)格系統(tǒng)越是復(fù)雜，在設(shè)計成品中它越是不易被讀者察覺，然而格子的變化越多，統(tǒng)一控制整個體系內(nèi)眾多元素的難度就越大。網(wǎng)格可以根據(jù)不同的目的設(shè)計成不同的形式，一般以文字為主的版面用簡單的網(wǎng)格形式，可以是一欄多列或一列多欄，也可以是將版面等分；而對于插圖較多有著復(fù)雜層級的則用復(fù)雜的多欄多列靈活結(jié)構(gòu)了。如果原稿是由很多獨立的片段組成，那么網(wǎng)格就要劃分成許多小單元；如果原稿是以冗長的文字為主的話，一個復(fù)雜的網(wǎng)格體系就純屬多余。網(wǎng)格的復(fù)雜性在于要幫助設(shè)計師回答這樣一個問題，“應(yīng)該要多大，我把它放在哪兒”，過分復(fù)雜的網(wǎng)格好像到處都是網(wǎng)格，然而卻毫無用處。網(wǎng)格劃分越細(xì)，單元越小，元素擺放位置的選擇就越多，條理秩序就越難統(tǒng)一，讀者就很難看清它的條理。所以構(gòu)造獨特的網(wǎng)格，必須與設(shè)計的版面上的元素數(shù)量和大小相對應(yīng)，換句話說，有時簡單的網(wǎng)格才是最好的選擇。960網(wǎng)格系統(tǒng)是為了簡化常用的尺寸，寬度為960像素基于Web設(shè)計工作流程。它有兩個變量：12和16列，可用于單獨或串聯(lián)。當(dāng)搭建頁面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時，設(shè)計師們不約而同地都選擇將頁面寬度定為950px/960px。Alexa全球排名前100的站點，它們的首頁頁面寬度都是將近960px，比如Yahoo是950 px，網(wǎng)易是960 px，淘寶是950 px，優(yōu)酷是960 px。

獲得視覺或感覺上的和諧感對現(xiàn)代視覺設(shè)計來說很重要，有時候為了打破版面過于平靜的格局，可以使用局部突破網(wǎng)格規(guī)矩的方法，制作一些興奮點，給版面注入活力和靈性。這就是說，你有時候必須用少量圖文的跨骨骼線處理來打破大小差不多的方塊網(wǎng)格的限定，個別圖片脫離格的約束，向外移動半格；骨骼線只對圖產(chǎn)生影響，而文字則自由不受限制；也可不按格的比例放大縮小，使版面出現(xiàn)變化，顯現(xiàn)出靈活豐富的視覺效果。網(wǎng)格的設(shè)計還可以根據(jù)圖文的大小需要拆開網(wǎng)格線，連成占有多個網(wǎng)格單元的一個大格，這樣網(wǎng)格就形成不同大小比例的扁形或長形，會產(chǎn)生統(tǒng)一中有變化的設(shè)計風(fēng)格。例如：設(shè)計者也許不會永遠(yuǎn)用一張六欄的網(wǎng)格去設(shè)計六欄版式，但是，他能用這些欄目成雙成對地設(shè)計成三欄版式，還可以以三欄為一組設(shè)計成二欄版式，或欄目寬度成倍不同的版式。

總之，動態(tài)的格子也是需要預(yù)先設(shè)計的，可以做得很簡單，也可以做得很復(fù)雜，可以規(guī)范嚴(yán)格，也可以較為松散，根據(jù)需要來定。當(dāng)網(wǎng)格設(shè)置得過于嚴(yán)格公式化的時候的確會限制設(shè)計師的自由，束縛并扼殺設(shè)計的創(chuàng)造性。但這并不表示它的結(jié)果就一定是僵硬無趣的，就像其它的系統(tǒng)方法一樣，如果能夠發(fā)揮想象力，把它運用得當(dāng)?shù)脑?，也會有很活潑的效果出現(xiàn)。當(dāng)然，從另一個方面來說，復(fù)雜的網(wǎng)格也允許大量變化的存在，也能包容更多、更靈活自由的理念。設(shè)計者可以參考眾多框架，總結(jié)出自己的一套框架，“讓框架工作”，用實際框架來形成秩序提高效率。世界上著名的實踐家們富有創(chuàng)造性的解決辦法的幅度，更證明了網(wǎng)格設(shè)計的純正的手法和易認(rèn)的傳達(dá)，可以使設(shè)計師達(dá)到永恒的完美造型。美學(xué)比例原則性和靈活性相結(jié)合，創(chuàng)造性地應(yīng)用網(wǎng)格，就能產(chǎn)生優(yōu)秀的版面，版面內(nèi)的比例感、版面間的連續(xù)感便不難產(chǎn)生，秩序感和現(xiàn)代感則不難形成。

三、“動態(tài)”的網(wǎng)格設(shè)計

余秉楠認(rèn)為：西方設(shè)計是一部沿著學(xué)科實驗、富于數(shù)理邏輯推理的軌跡發(fā)展的歷史，是建立在抽象數(shù)理分析的基礎(chǔ)上發(fā)展起來的一門藝術(shù)。德國烏爾姆造型學(xué)院在應(yīng)用網(wǎng)格設(shè)計時主要追求的是普遍性設(shè)計和共同語言，它試圖追求絕對、唯一的答案，而“動態(tài)”的網(wǎng)格設(shè)計強調(diào)的格子是普遍性設(shè)計仍反映個別性，致力于個性化、多樣化設(shè)計，強調(diào)每一個人都是不同的存在，有不同的想法。也就是要告訴你有成千上萬的毗濕奴神，每個設(shè)計師都可以制作自己的毗濕奴神像。

當(dāng)下，日新月異的數(shù)碼媒體，以劃時代的方式改變了一切。二次元空間加入了時間、動態(tài)、變化的維度，對現(xiàn)代視覺設(shè)計產(chǎn)生了重大的影響。“動態(tài)”的網(wǎng)格設(shè)計不只是在紙媒介上描繪形象的二維概念，而且是空間意義的，是欲捕捉數(shù)碼視聽空間，以及加入時間形成四度空間的動態(tài)概念?！皠討B(tài)”的網(wǎng)格設(shè)計模式作為現(xiàn)代視覺設(shè)計的一種思路和方法，是頗具可行性。與我們生產(chǎn)生活密切相關(guān)的電腦就是基于計算機網(wǎng)格，如果沒有這個三度空間網(wǎng)格，計算機既無法制圖，也不能儲存資訊?；诰W(wǎng)格與現(xiàn)代視覺設(shè)計語法的關(guān)系，將始終變化的視頻形象投影到“動態(tài)”格子，這對于我們現(xiàn)代視覺設(shè)計師來說是新的挑戰(zhàn)。以網(wǎng)站設(shè)計為例，由于新生事物層出不窮，網(wǎng)站是空間性和時間性的、不斷更新變化、不固定的；文字在網(wǎng)頁上隨處出現(xiàn)，又隨時消失，文字在跳舞，資訊在跳舞；可以在放大或縮小之間自由游走、跳躍。所以在網(wǎng)頁設(shè)計中首先要思考孰輕孰重；應(yīng)該要多大，我把它放在哪兒；應(yīng)該從哪里開始，表現(xiàn)什么意思等因素，再設(shè)計視聽畫面語言序列。網(wǎng)站視覺設(shè)計應(yīng)該不僅著眼于平面，還要編排空間與時間的意義：從網(wǎng)頁畫面上退出某個物件的時候，從什么位置退出最好；瞬間對內(nèi)容放大、縮小瀏覽的及時性；某個視聽元素進(jìn)入網(wǎng)頁畫面的時候，進(jìn)場位置不同，它的視聽沖擊力也完全不同?！皠討B(tài)”的網(wǎng)格不僅僅是簡單的空間問題，還是不停地產(chǎn)生運動的時間問題，還可以從投影幾何學(xué)上，以各種造型讓整個空間結(jié)構(gòu)發(fā)生扭曲，也可以導(dǎo)入黎曼幾何學(xué)的概念（黎曼流形上不同點的切向量也可以用平行移動的方法加以比較），所以在這個意義上，“動態(tài)”的網(wǎng)格設(shè)計是一個伸縮余地很大的現(xiàn)代視覺設(shè)計方法空間。

藝術(shù)與設(shè)計一般被視為直覺感受和個人靈感的表現(xiàn)，但勒·柯布西耶把輔助線看作“靈感的決定性因素之一”。我們從勒·柯布西耶、約瑟夫·米勒-布羅克曼、馬克斯·比爾等人創(chuàng)作作品過程中可以明白，他們考慮了對視覺設(shè)計過程基本的和基礎(chǔ)的網(wǎng)格構(gòu)成和規(guī)劃方法，他們對動態(tài)的格子構(gòu)成方法的使用和理性解釋存在顯著的相似性，同時也證明了在設(shè)計中的直覺是很少存在的，更多的是深思熟慮地應(yīng)用知識經(jīng)驗的結(jié)果。對“動態(tài)”的網(wǎng)格設(shè)計構(gòu)成原理的理解將給創(chuàng)新的視覺設(shè)計作品引入構(gòu)成凝聚感，由此視覺版面的每一個元素都有一種視覺歸屬感。設(shè)置“動態(tài)”格子的前提條件是為了避免設(shè)計中太多主觀感性因素干擾的出現(xiàn)，網(wǎng)格動感的非對稱格子形式可以把視覺設(shè)計變成一種鮮活的生命體。

很多人一聽說網(wǎng)格就認(rèn)為是非常沒勁的設(shè)計標(biāo)準(zhǔn)，抱怨網(wǎng)格體系限制性太強，冷酷、正式、教條，它主要依據(jù)公式，因此，沒有太多自由創(chuàng)作的空間。如果只考慮網(wǎng)格結(jié)構(gòu)，把網(wǎng)格看成一個簡單的規(guī)則，一味的恪守網(wǎng)格，過于固執(zhí)地遵循網(wǎng)格進(jìn)行設(shè)計，而忽略了靈活應(yīng)用和創(chuàng)造性的話，網(wǎng)格確實會成為一種布局枯燥和格式死板的約束物，其作品就會變成不斷的重復(fù)、煩瑣的東西?！皠討B(tài)”網(wǎng)格設(shè)計中的格子是用于輔助設(shè)計的，是可塑的，不是一成不變的，它作為產(chǎn)生變化的工具，其實可以產(chǎn)生更多的可能性、更豐富的變化，它不應(yīng)該像緊身衣一樣被套在設(shè)計師身上，它有隨時變化的余地。一個好的“動態(tài)”的網(wǎng)格并非一個刻板的公式，而應(yīng)該是骨架與所傳達(dá)信息的肌質(zhì)相適應(yīng)。例如：印度的細(xì)密畫并不是用規(guī)則的矩形繪制的，其垂直線、水平線都有些傾斜，建筑或窗扇等是扭曲的，但一方面卻又精致、有節(jié)奏，很養(yǎng)眼，是因為設(shè)計師是根據(jù)他心中獨到的、內(nèi)在的并非直線的動態(tài)格子來構(gòu)筑空間形態(tài)的。對這一點最好理解的是印度的古典音樂——拉格。

結(jié)語

總之，網(wǎng)格給人以規(guī)矩和約束，這是它的優(yōu)點，同時也是它的缺點。“動態(tài)”的網(wǎng)格設(shè)計既沒有固定的公式，也并非生來相同。但“動態(tài)”的網(wǎng)格作為一個靈活、有彈性的結(jié)構(gòu)，作為一條要領(lǐng)簡明、操作有據(jù)、規(guī)范明確、效果突出的可行途徑，為現(xiàn)代視覺設(shè)計提供了一個有矩可循而又具備極大延展可能性的方法。按照“動態(tài)”的網(wǎng)格來設(shè)計視覺版面，要保持自己的自由權(quán)不受限制，真正的困難在于如何在最大限度的公式化和最大限度的自由化之間尋找平衡，換句話說，就是在大量的不變因素與可變因素之間尋找平衡。在設(shè)計具體化時，會碰到許多意想不到的問題，網(wǎng)格平衡點定位的尋找還需要設(shè)計師在設(shè)計實踐中深刻體會、理解，才能熟練駕馭。

[1][日]杉浦康平.亞洲之書·文字·設(shè)計——杉浦康平與亞洲同人的對話[M].楊晶，李建華譯.臺北：網(wǎng)路與書股份有限公司臺灣分公司，2006

[2]鄭微.版面設(shè)計網(wǎng)格構(gòu)成[M].北京：中國青年出版社，2005

[3][美]金伯利·伊拉姆.柵格系統(tǒng)與版式設(shè)計[M].王昊譯.上海：上海人民美術(shù)出版社，2006

[4]余璐.余秉楠[M].鄭州：河南美術(shù)出版社，2004

[5][法]勒·柯布西埃.走向新建筑[M].陳志華譯.西安：陜西師范大學(xué)出版社，2004

[6][美]梅格斯.二十世紀(jì)視覺傳達(dá)設(shè)計史[M].柴常佩譯.武漢：湖北美術(shù)出版社，1989

[7][美]金伯利·伊拉姆.設(shè)計幾何學(xué)[M].李樂山譯.北京：中國水利水電出版社，2003

[8]王俊.版面設(shè)計[M].北京：中國建筑工業(yè)出版社，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

淮南師范學(xué)院青年課題資助項目（2009QN02）

[作者簡介]姚光明（1975-），男，淮南師范學(xué)院美術(shù)系講師,文學(xué)碩士，研究方向：設(shè)計藝術(shù)學(xué)。