網(wǎng)頁(yè)設(shè)計(jì)柵格系統(tǒng)設(shè)計(jì)：理性之美　摘 要：柵格系統(tǒng)是網(wǎng)頁(yè)設(shè)計(jì)中的一種編排方法，它既能夠滿足網(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í)代性的問題出現(xiàn)了，人們的眼睛無法在著龐大繁雜的信息面前聚焦。視覺信息處理任務(wù)中如何讓人們方便輕松的看到自己需要信息并能夠帶來美感變成了關(guān)鍵問題。滿足視覺信息的功能性是首要任務(wù)，而在單純滿足視覺信息功能性后，視覺信息的美感便會(huì)受到影響。僅僅停留在滿足功能性的話，所有的網(wǎng)頁(yè)都會(huì)變成單調(diào)無趣的報(bào)紙，給人廉價(jià)、乏味的感覺。而如何使其具有美感，成為了一個(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ū)域劃分的過程。比如，一個(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è)不像以往的書籍、報(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)，所以給人的感覺不如紙質(zhì)媒體舒服且會(huì)對(duì)眼睛造成一定的傷害。這就要求網(wǎng)頁(yè)頁(yè)面的內(nèi)容要清晰這樣才能夠使人輕而易舉的接受信息，為視覺減壓。多數(shù)網(wǎng)頁(yè)整體版面較長(zhǎng)，用戶瀏覽長(zhǎng)時(shí)間瀏覽會(huì)造成視覺疲勞，所以一定要注意整體頁(yè)面的節(jié)奏感。大量的信息會(huì)使信息變得繁雜而沒有主次，所以版面設(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ù)倍來進(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)適用于文字圖像信息龐大的大型的門戶網(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ù)常見的960*600比例的網(wǎng)頁(yè)的3x4單元格創(chuàng)作出了含有892種網(wǎng)格形式的柵格系統(tǒng)。由于系統(tǒng)原理與日本的榻榻米分割方法相似，所以又被稱為'榻榻米系統(tǒng)'。④

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

3 x 4網(wǎng)格是最為常見典型的單元格柵格系統(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ì)離不開數(shù)字，柵格系統(tǒng)更離不開數(shù)字。每一個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員第一次接觸到的網(wǎng)頁(yè)設(shè)計(jì)時(shí)首先要知道的是電子屏幕的尺度不是以現(xiàn)實(shí)中的刻度來衡量的，而是以像素（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ù)人的視覺規(guī)律提煉出來的審美規(guī)律，它符合人的視知覺并對(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ì)使畫面更具美感。

總結(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ā)著理性美感的光輝。

分享名稱：網(wǎng)頁(yè)設(shè)計(jì)柵格系統(tǒng)設(shè)計(jì)：理性之美
URL地址：http://www.rwnh.cn/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)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)