這是一個(gè)信息爆炸的時(shí)代，每天人們利用網(wǎng)絡(luò)、手機(jī)等接收數(shù)以千萬(wàn)計(jì)的信息。伴隨著信息量膨脹的現(xiàn)象一個(gè)時(shí)代性的問(wèn)題出現(xiàn)了，人們的眼睛無(wú)法在著龐大繁雜的信息面前聚焦。視覺(jué)信息處理任務(wù)中如何讓人們方便輕松的看到自己需要信息并能夠帶來(lái)美感變成了關(guān)鍵問(wèn)題。滿足視覺(jué)信息的功能性是首要任務(wù)，而在單純滿足視覺(jué)信息功能性后，視覺(jué)信息的美感便會(huì)受到影響。僅僅停留在滿足功能性的話，所有的網(wǎng)頁(yè)都會(huì)變成單調(diào)無(wú)趣的報(bào)紙，給人廉價(jià)、乏味的感覺(jué)。而如何使其具有美感，成為了一個(gè)難題。直到柵格系統(tǒng)在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用并得到了改良。柵格設(shè)計(jì)使網(wǎng)頁(yè)中的信息在滿足了易于識(shí)別、層次分明等功能之外還使網(wǎng)頁(yè)更具形式美感。

　　一、 柵格系統(tǒng)

　　(一) 柵格系統(tǒng)的意義

　　柵格系統(tǒng)(Grid systems)是一種版式編排方法，運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔，易于反復(fù)，嚴(yán)謹(jǐn)又不失美感。①因?yàn)檫@種編排方式是有一定的數(shù)理依據(jù)，而且在版式中有著以不變應(yīng)萬(wàn)變的能力，所以人們稱它為系統(tǒng)。

　　1919年的德國(guó)包豪斯設(shè)計(jì)學(xué)院成立后，掀起了理性化、簡(jiǎn)單化、功能化的設(shè)計(jì)風(fēng)潮，柵格系統(tǒng)的應(yīng)用得以發(fā)展。第二次世界大戰(zhàn)后柵格系統(tǒng)在德國(guó)和瑞士得以完善并逐漸影響到了世界各國(guó)，成為了至今依然主流的一種編排設(shè)計(jì)方法。②

　　網(wǎng)頁(yè)出現(xiàn)之前，柵格設(shè)計(jì)主要應(yīng)用于紙質(zhì)媒體。網(wǎng)絡(luò)時(shí)代使信息傳達(dá)更具時(shí)效性和普遍性。但是，面臨網(wǎng)頁(yè)需要承載的龐大信息量。柵格系統(tǒng)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用不只是為了簡(jiǎn)約與功能化的設(shè)計(jì)，網(wǎng)頁(yè)設(shè)計(jì)又賦予了柵格系統(tǒng)新的意義。

　　(二) 柵格系統(tǒng)制作原理

　　柵格系統(tǒng)的設(shè)計(jì)是將網(wǎng)頁(yè)的版面進(jìn)行區(qū)域劃分的過(guò)程。比如，一個(gè)960px X 600px的網(wǎng)頁(yè)柵格系統(tǒng)的設(shè)計(jì)，首先要從網(wǎng)頁(yè)的寬度著手，進(jìn)行單元格劃分。寬度為960px的網(wǎng)頁(yè)被我們以寬度160px的單元格劃分為6個(gè)柵格單元。然后再根據(jù)網(wǎng)頁(yè)所需內(nèi)容調(diào)整每個(gè)單元格的寬度與間距。這樣一個(gè)柵格系統(tǒng)就設(shè)計(jì)完成了。在現(xiàn)實(shí)中的柵格系統(tǒng)設(shè)計(jì)卻并非如此簡(jiǎn)單，而柵格設(shè)計(jì)的形式也并非只有縱向劃分一種。

　　二、 網(wǎng)頁(yè)設(shè)計(jì)中的柵格系統(tǒng)

　　(一) 網(wǎng)頁(yè)中的信息展示

　　網(wǎng)頁(yè)中的信息主要以文字和圖像為主，而網(wǎng)頁(yè)不像以往的書(shū)籍、報(bào)刊。一個(gè)頁(yè)面中所擁有的信息量遠(yuǎn)遠(yuǎn)大于一張紙所能容納的信息。電子信息的呈現(xiàn)形式一直都帶有局限性。

　　一個(gè)網(wǎng)頁(yè)的寬度必然要適合網(wǎng)頁(yè)載體——電腦屏幕和瀏覽器的限制。網(wǎng)頁(yè)的寬度是不能大于瀏覽器的內(nèi)容顯示區(qū)域的。另外，還要在保證適合設(shè)計(jì)靈活性的前提下尋找一個(gè)合適的寬度。對(duì)柵格系統(tǒng)的研究和網(wǎng)頁(yè)制作的經(jīng)驗(yàn)下，網(wǎng)頁(yè)設(shè)計(jì)人員總結(jié)出了一個(gè)最合適的網(wǎng)頁(yè)寬度，即“960px”。

　　電腦的顯像技術(shù)色彩圖像是以光線形式呈現(xiàn)，所以給人的感覺(jué)不如紙質(zhì)媒體舒服且會(huì)對(duì)眼睛造成一定的傷害。這就要求網(wǎng)頁(yè)頁(yè)面的內(nèi)容要清晰這樣才能夠使人輕而易舉的接受信息，為視覺(jué)減壓。多數(shù)網(wǎng)頁(yè)整體版面較長(zhǎng)，用戶瀏覽長(zhǎng)時(shí)間瀏覽會(huì)造成視覺(jué)疲勞，所以一定要注意整體頁(yè)面的節(jié)奏感。大量的信息會(huì)使信息變得繁雜而沒(méi)有主次，所以版面設(shè)計(jì)要有意識(shí)地去突出重要內(nèi)容使頁(yè)面富有層次感，這樣用戶在瀏覽頁(yè)面時(shí)思路也會(huì)清晰。

　　(二)縱向網(wǎng)頁(yè)柵格系統(tǒng)

　　在網(wǎng)頁(yè)設(shè)計(jì)中依據(jù)常用寬度960px可以分解出960的26個(gè)整數(shù)倍來(lái)進(jìn)行柵格設(shè)計(jì)。這26個(gè)整數(shù)倍分別為“2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480”，這就是縱向的網(wǎng)頁(yè)柵格系統(tǒng)。這種柵格系統(tǒng)適用于文字圖像信息龐大的大型的門(mén)戶網(wǎng)站。如雅虎、網(wǎng)易等。③

　　縱向的柵格系統(tǒng)看似是把整個(gè)網(wǎng)頁(yè)的區(qū)域等分限制住了，但是在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)師經(jīng)常等分區(qū)域進(jìn)行合并使用。這樣在網(wǎng)頁(yè)設(shè)計(jì)中就不會(huì)失去其個(gè)性。更不會(huì)失去其美觀性和適用性。在進(jìn)行劃分的同時(shí)我們要平衡網(wǎng)頁(yè)中力的平衡、秩序美等形式美法則。

　　網(wǎng)頁(yè)設(shè)計(jì)永遠(yuǎn)都是跟隨著硬件的變化為發(fā)展的，隨著近年寬屏瀏覽器的普及960px也即將退出主流。而設(shè)計(jì)人員一定還會(huì)在柵格系統(tǒng)的研究與網(wǎng)頁(yè)制作中尋找出更完美的適應(yīng)新的主流屏幕的柵格系統(tǒng)。

　　(三) 單元格柵格系統(tǒng)

　　在2006年Drenttel和Helfand根據(jù)常見(jiàn)的960*600比例的網(wǎng)頁(yè)的3x4單元格創(chuàng)作出了含有892種網(wǎng)格形式的柵格系統(tǒng)。由于系統(tǒng)原理與日本的榻榻米分割方法相似，所以又被稱為“榻榻米系統(tǒng)”。④

　　這種柵格系統(tǒng)是通過(guò)3 x 4的柵格進(jìn)行部分跨欄的方法，利用這種方法我們可以得到3164種柵格方式。然而這其中包括水平對(duì)稱或者斜角對(duì)稱等類(lèi)似的柵格方式。海報(bào)中的892種方式是經(jīng)過(guò)篩選得到的。

　　3 x 4網(wǎng)格是最為常見(jiàn)典型的單元格柵格系統(tǒng)，而這種分割方式適用于任何一種柵格形式。這種分割形式也要在不脫離美觀性的前提下進(jìn)行。單元格柵格系統(tǒng)有長(zhǎng)度限制，其容納的信息量較小，所以它更適合于小型網(wǎng)站。

　　三、 柵格系統(tǒng)中的審美

　　(一)網(wǎng)頁(yè)設(shè)計(jì)中柵格系統(tǒng)的嚴(yán)謹(jǐn)性

　　網(wǎng)頁(yè)設(shè)計(jì)離不開(kāi)數(shù)字，柵格系統(tǒng)更離不開(kāi)數(shù)字。每一個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員第一次接觸到的網(wǎng)頁(yè)設(shè)計(jì)時(shí)首先要知道的是電子屏幕的尺度不是以現(xiàn)實(shí)中的刻度來(lái)衡量的，而是以像素(px)為尺寸。而像素的最小單位1px是可視的，所以在網(wǎng)頁(yè)設(shè)計(jì)或者制作柵格時(shí)嚴(yán)謹(jǐn)是必不可少的。而正是數(shù)字的嚴(yán)謹(jǐn)性讓柵格系統(tǒng)具有了理性的光輝。

　　理性對(duì)于柵格系統(tǒng)的功能性是必不可少的條件。在柵格系統(tǒng)中形式必然要依附于功能。所以柵格系統(tǒng)設(shè)計(jì)的審美屬性也是理性的創(chuàng)造。

　　(二) 柵格系統(tǒng)中的形式美

　　對(duì)于美的創(chuàng)造并非是感性使然，理性趨勢(shì)下的美感會(huì)更加純粹。柵格系統(tǒng)設(shè)計(jì)需要的就是理性的美感。

　　形式美法則是根據(jù)人的視覺(jué)規(guī)律提煉出來(lái)的審美規(guī)律，它符合人的視知覺(jué)并對(duì)人的產(chǎn)生影響。這種美正是一種理性的美感，他需要設(shè)計(jì)者去分析形成美的因素，例如大小、位置、比例等等。

　　柵格系統(tǒng)就像是網(wǎng)頁(yè)設(shè)計(jì)中的骨骼，控制著這個(gè)個(gè)頁(yè)面的節(jié)奏韻律。柵格系統(tǒng)的設(shè)計(jì)需要設(shè)計(jì)師以形式美法則為依據(jù)進(jìn)行創(chuàng)作。例如，形式美法則中的對(duì)稱與均衡的應(yīng)用可以是頁(yè)面勻稱。柵格系統(tǒng)的設(shè)計(jì)中每個(gè)單元格的比例如果運(yùn)用黃金分割比、斐波那契數(shù)列等形式美比例會(huì)使畫(huà)面更具美感。

　　總結(jié)

　　柵格系統(tǒng)的出現(xiàn)與運(yùn)用是建立在功能性和審美性的基礎(chǔ)之上，更脫離不了對(duì)數(shù)字的計(jì)算。雖然嚴(yán)謹(jǐn)?shù)窃O(shè)計(jì)人員也可以在柵格系統(tǒng)中大膽的發(fā)揮個(gè)性，創(chuàng)造出美的享受。

　　網(wǎng)頁(yè)本身隨著科技發(fā)展，其載體也在擴(kuò)展超出了電腦屏幕。躍然于手機(jī)、平板電腦等新的電子媒介之上。還有電腦屏幕的改革。這些都影響了網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)。標(biāo)準(zhǔn)在改變的同時(shí)，柵格設(shè)計(jì)的方法是不會(huì)變的。只要是還需要運(yùn)用理性的形式美，柵格設(shè)計(jì)便永遠(yuǎn)都會(huì)散發(fā)著理性美感的光輝。