網頁設計柵格系統設計

 

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

　　一、 柵格系統

　　(一) 柵格系統的意義

　　柵格系統(Grid systems)是一種版式編排方法，運用固定的格子設計版面布局，其風格工整簡潔，易於反復，嚴謹又不失美感。①因為這種編排方式是有一定的數理依據，而且在版式中有著以不變應萬變的能力，所以人們稱它為系統。

　　1919年的德國包豪斯設計學院成立後，掀起了理性化、簡單化、功能化的設計風潮，柵格系統的應用得以發展。第二次世界大戰後柵格系統在德國和瑞士得以完善並逐漸影響到了世界各國，成為了至今依然主流的一種編排設計方法。②

　　網頁出現之前，柵格設計主要應用於紙質媒體。網絡時代使信息傳達更具時效性和普遍性。但是，面臨網頁需要承載的龐大信息量。柵格系統在網頁設計中的應用不只是為了簡約與功能化的設計，網頁設計又賦予了柵格系統新的意義。

　　(二) 柵格系統制作原理

　　柵格系統的設計是將網頁的版面進行區域劃分的過程。比如，一個960px X 600px的網頁柵格系統的設計，首先要從網頁的寬度著手，進行單元格劃分。寬度為960px的網頁被我們以寬度160px的單元格劃分為6個柵格單元。然後再根據網頁所需內容調整每個單元格的寬度與間距。這樣一個柵格系統就設計完成了。在現實中的柵格系統設計卻並非如此簡單，而柵格設計的形式也並非只有縱向劃分一種。

　　二、 網頁設計中的柵格系統

　　(一) 網頁中的信息展示

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

　　一個網頁的寬度必然要適合網頁載體——電腦屏幕和浏覽器的限制。網頁的寬度是不能大於浏覽器的內容顯示區域的。另外，還要在保證適合設計靈活性的前提下尋找一個合適的寬度。對柵格系統的研究和網頁制作的經驗下，網頁設計人員總結出了一個最合適的網頁寬度，即“960px”。

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

　　(二)縱向網頁柵格系統

　　在網頁設計中依據常用寬度960px可以分解出960的26個整數倍來進行柵格設計。這26個整數倍分別為“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”，這就是縱向的網頁柵格系統。這種柵格系統適用於文字圖像信息龐大的大型的門戶網站。如雅虎、網易等。③

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

　　網頁設計永遠都是跟隨著硬件的變化為發展的，隨著近年寬屏浏覽器的普及960px也即將退出主流。而設計人員一定還會在柵格系統的研究與網頁制作中尋找出更完美的適應新的主流屏幕的柵格系統。

　　(三) 單元格柵格系統

　　在2006年Drenttel和Helfand根據常見的960*600比例的網頁的3x4單元格創作出了含有892種網格形式的柵格系統。由於系統原理與日本的榻榻米分割方法相似，所以又被稱為“榻榻米系統”。④

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

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

　　三、 柵格系統中的審美

　　(一)網頁設計中柵格系統的嚴謹性

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

　　理性對於柵格系統的功能性是必不可少的條件。在柵格系統中形式必然要依附於功能。所以柵格系統設計的審美屬性也是理性的創造。

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

　　對於美的創造並非是感性使然，理性趨勢下的美感會更加純粹。柵格系統設計需要的就是理性的美感。

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

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

　　總結

　　柵格系統的出現與運用是建立在功能性和審美性的基礎之上，更脫離不了對數字的計算。雖然嚴謹但是設計人員也可以在柵格系統中大膽的發揮個性，創造出美的享受。

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