網(wǎng)頁(yè)設(shè)計(jì)柵格系統(tǒng)設(shè)計(jì)：理性之美

網(wǎng)頁(yè)設(shè)計(jì)柵格系統(tǒng)設(shè)計(jì)：理性之美　摘 要：柵格系統(tǒng)是網(wǎng)頁(yè)設(shè)計(jì)中的一種編排方法，它既能夠滿(mǎn)足網(wǎng)頁(yè)設(shè)計(jì)所需要的功能性，同時(shí)還能夠突破功能性對(duì)審美的局限。使形勢(shì)與功能好的結(jié)合在一起。柵格系統(tǒng)設(shè)計(jì)需要依據(jù)數(shù)理的分析進(jìn)行創(chuàng)造，其形式美的應(yīng)用也是如此。所以，柵格系統(tǒng)具有一種理性的美感。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；柵格系統(tǒng)；形式美法則

引言

這是一個(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)題。滿(mǎn)足視覺(jué)信息的功能性是首要任務(wù)，而在單純滿(mǎn)足視覺(jué)信息功能性后，視覺(jué)信息的美感便會(huì)受到影響。僅僅停留在滿(mǎn)足功能性的話(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è)中的信息在滿(mǎn)足了易于識(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)變的能力，所以人們稱(chēng)它為系統(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)形式呈現(xiàn)，所以給人的感覺(jué)不如紙質(zhì)媒體舒服且會(huì)對(duì)眼睛造成一定的傷害。這就要求網(wǎng)頁(yè)頁(yè)面的內(nèi)容要清晰這樣才能夠使人輕而易舉的接受信息，為視覺(jué)減壓。多數(shù)網(wǎng)頁(yè)整體版面較長(zhǎng)，用戶(hù)瀏覽長(zhǎng)時(shí)間瀏覽會(huì)造成視覺(jué)疲勞，所以一定要注意整體頁(yè)面的節(jié)奏感。大量的信息會(huì)使信息變得繁雜而沒(méi)有主次，所以版面設(shè)計(jì)要有意識(shí)地去突出重要內(nèi)容使頁(yè)面富有層次感，這樣用戶(hù)在瀏覽頁(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)戶(hù)網(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)原理與日本的榻榻米分割方法相似，所以又被稱(chēng)為'榻榻米系統(tǒng)'。④

這種柵格系統(tǒng)是通過(guò)3 x 4的柵格進(jìn)行部分跨欄的方法，利用這種方法我們可以得到3164種柵格方式。然而這其中包括水平對(duì)稱(chēng)或者斜角對(duì)稱(chēng)等類(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ì)稱(chēng)與均衡的應(yīng)用可以是頁(yè)面勻稱(chēng)。柵格系統(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ā)著理性美感的光輝。

分享名稱(chēng)：網(wǎng)頁(yè)設(shè)計(jì)柵格系統(tǒng)設(shè)計(jì)：理性之美
URL地址：http://bm7419.com/news/161952.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、關(guān)鍵詞優(yōu)化、Google、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)