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

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

引言

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

一、 柵格系統(tǒng)

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

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

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

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

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

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

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

（一） 網(wǎng)頁中的信息展示

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

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

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

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

在網(wǎng)頁設(shè)計中依據(jù)常用寬度960px可以分解出960的26個整數(shù)倍來進行柵格設(shè)計。這26個整數(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)頁柵格系統(tǒng)。這種柵格系統(tǒng)適用于文字圖像信息龐大的大型的門戶網(wǎng)站。如雅虎、網(wǎng)易等。③

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

本文名稱：網(wǎng)頁設(shè)計柵格系統(tǒng)設(shè)計：理性之美
分享網(wǎng)址：http://m.newbst.com/news2/161952.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、軟件開發(fā)、小程序開發(fā)、網(wǎng)站制作、網(wǎng)站維護、外貿(mào)建站

廣告

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