淺談柵格系統(tǒng)在網(wǎng)頁(yè)界面版式中的應(yīng)用

程璨

摘 ? 要：網(wǎng)絡(luò)世界已成為人們?nèi)粘＾k公生活的必要組成部分，因而涌現(xiàn)出各式各樣的網(wǎng)站，在網(wǎng)頁(yè)設(shè)計(jì)師設(shè)計(jì)千變?nèi)f化的網(wǎng)頁(yè)界面時(shí)探索發(fā)現(xiàn)，柵格系統(tǒng)作為網(wǎng)頁(yè)界面設(shè)計(jì)的工具發(fā)揮了重要的作用。本文通過分析柵格系統(tǒng)，了解到采用柵格系統(tǒng)可以解決傳統(tǒng)設(shè)計(jì)布局技巧、方法的低效、不規(guī)范及難以維護(hù)等問題。

關(guān)鍵詞：互聯(lián)網(wǎng);柵格系統(tǒng);網(wǎng)頁(yè)界面設(shè)計(jì)

中圖分類號(hào)：TP393 ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A ? ? ? ?文章編號(hào)：1005-5312（2016）26-0285-01

在互聯(lián)網(wǎng)大環(huán)境下，越來越多的人通過瀏覽網(wǎng)頁(yè)完成自己的工作、學(xué)習(xí)、生活，網(wǎng)頁(yè)本質(zhì)是一種信息的載體，相比于報(bào)紙、雜志、海報(bào)、宣傳單頁(yè)等傳統(tǒng)媒介來說，其構(gòu)成元素更加復(fù)雜，將圖片、動(dòng)畫、音樂、文字以及色彩等融為一體，在眾多元素的搭建中，如何將網(wǎng)頁(yè)界面版式更加立體生動(dòng)的展現(xiàn)在用戶面前，是網(wǎng)頁(yè)設(shè)計(jì)師們一直在探尋的問題。柵格系統(tǒng)的應(yīng)用，不僅可以使用戶一目了然的閱讀網(wǎng)頁(yè)信息，而且對(duì)網(wǎng)頁(yè)設(shè)計(jì)師來說，在各種視覺元素的運(yùn)用組合排列中，突出視覺效果、提高工作效率、滿足大眾需求等，使網(wǎng)頁(yè)界面設(shè)計(jì)更加規(guī)范和美觀。

一、柵格系統(tǒng)

柵格系統(tǒng)（grid system）也稱之為骨格編排系統(tǒng)、網(wǎng)格系統(tǒng)，在藝術(shù)設(shè)計(jì)的各個(gè)領(lǐng)域起到重要規(guī)范作用。20世紀(jì)50年代，瑞士“國(guó)際版面風(fēng)格”沿用德國(guó)包豪斯學(xué)派的的設(shè)計(jì)觀念，以達(dá)到設(shè)計(jì)上的統(tǒng)一性、實(shí)用性、美觀性因而注重使用簡(jiǎn)單的網(wǎng)格和極盡標(biāo)準(zhǔn)的版面公式。瑞士知名設(shè)計(jì)師約瑟夫·米勒·布魯克曼曾對(duì)柵格系統(tǒng)設(shè)計(jì)評(píng)價(jià)道：“網(wǎng)格使得所有的設(shè)計(jì)因素——字體、圖片、美術(shù)之間的協(xié)調(diào)一致成為可能。網(wǎng)格設(shè)計(jì)就是把秩序引入設(shè)計(jì)中去的一種方法。”網(wǎng)頁(yè)設(shè)計(jì)師們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)界面時(shí)，將文字圖片等內(nèi)容通過柵格系統(tǒng)的精確計(jì)算，按“欄”為單位進(jìn)行區(qū)域劃分，使版面更具規(guī)范性、嚴(yán)謹(jǐn)性，文字與圖片的完美融合也使版面更具節(jié)奏的變化、更加活潑生動(dòng)，用戶在閱覽時(shí)更加輕松愉悅。例如版式中的圖片位置和文字編排，一級(jí)標(biāo)題、二級(jí)標(biāo)題的大小比例，頁(yè)碼以及角標(biāo)的位置編排，都按照一定設(shè)計(jì)標(biāo)準(zhǔn)進(jìn)行整體規(guī)劃，使整個(gè)作品保持統(tǒng)一性、連貫性。與以往傳統(tǒng)排版不同，它更加重視版式編排的比例、思路、連續(xù)、秩序、時(shí)代、嚴(yán)謹(jǐn)?shù)忍厣?/p>

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

（一）網(wǎng)頁(yè)柵格化的特殊性

互聯(lián)網(wǎng)消息的傳播發(fā)展速度之快是傳統(tǒng)印刷媒介所不能比的，對(duì)于海報(bào)、雜志、宣傳單頁(yè)等傳統(tǒng)印刷媒介，設(shè)計(jì)師們可以花費(fèi)一周或者時(shí)間更長(zhǎng)的時(shí)間進(jìn)行設(shè)計(jì)，平面設(shè)計(jì)師可以以個(gè)體為單位獨(dú)立完成前期創(chuàng)作，主導(dǎo)整個(gè)產(chǎn)品最終呈現(xiàn)在用戶面前的視覺效果。但在網(wǎng)頁(yè)中，設(shè)計(jì)師要考慮不同的操作平臺(tái)、不同的瀏覽器、不同的屏幕大小都會(huì)影響同一網(wǎng)站、同一界面在用戶面前呈現(xiàn)的形式可能互不相同，用戶會(huì)根據(jù)自己的喜好調(diào)整字體的大小、網(wǎng)頁(yè)的外觀等，并且互聯(lián)網(wǎng)消息更新速度之快也是設(shè)計(jì)師個(gè)人所無法控制的。這時(shí)就需要后臺(tái)與前臺(tái)的相互配合，通過響應(yīng)式設(shè)計(jì)手法，設(shè)計(jì)可以適應(yīng)這些變換的柵格系統(tǒng)。

（二）網(wǎng)頁(yè)柵格化的必要性

使用柵格化系統(tǒng)來進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)是十分必要的，它可以提高網(wǎng)頁(yè)的規(guī)范性。對(duì)于常規(guī)網(wǎng)站的開發(fā)及維護(hù)來說，所含內(nèi)容在一個(gè)版本中不會(huì)出現(xiàn)太大的版式變化，所有編排元素的大小尺寸都是有律可循的，前端設(shè)計(jì)人員根據(jù)規(guī)定尺寸進(jìn)行設(shè)計(jì)，無需因?yàn)橐粋€(gè)板塊的更新而使整個(gè)網(wǎng)頁(yè)在進(jìn)行重新規(guī)劃，后端開發(fā)人員在維護(hù)網(wǎng)站時(shí)也可以省時(shí)省心，從根本上降低網(wǎng)站運(yùn)營(yíng)成本。運(yùn)用柵格系統(tǒng)已成為大型網(wǎng)站設(shè)計(jì)運(yùn)作的一種趨勢(shì)，使之網(wǎng)站運(yùn)營(yíng)更具規(guī)范化，對(duì)于某些中小型網(wǎng)站，更加需要設(shè)計(jì)師們利用柵格化系統(tǒng)使原本雜亂無章的網(wǎng)頁(yè)看起來更加清晰，使整個(gè)網(wǎng)站的各個(gè)界面在整體布局上保持一致，又增加了各個(gè)界面之間的相互聯(lián)系，提升用戶對(duì)網(wǎng)站體驗(yàn)感。

（三）響應(yīng)式網(wǎng)頁(yè)柵格化設(shè)計(jì)

隨著技術(shù)水品的不斷進(jìn)步，用戶的瀏覽要求也在隨之變化，根據(jù)不同年齡、不同性別、不同職業(yè)的用戶越來越關(guān)注個(gè)性化的設(shè)計(jì)，它們是否可以根據(jù)自己所實(shí)用的電子設(shè)備對(duì)所訪問網(wǎng)站進(jìn)行字體調(diào)整變化，瀏覽器窗口的大小、不同的瀏覽器以及電子設(shè)備的分辨率大小，都可能導(dǎo)致網(wǎng)頁(yè)的排版模式發(fā)生變化，設(shè)計(jì)師根據(jù)這些特點(diǎn)，利用柵格化系統(tǒng)的優(yōu)勢(shì)，將各個(gè)欄目區(qū)分固定，最終根據(jù)比例來控制整個(gè)頁(yè)面的變化，從而保證用戶在個(gè)性自定義后網(wǎng)頁(yè)編排依舊秩序嚴(yán)謹(jǐn)。

“柵格系統(tǒng)”或是“網(wǎng)格系統(tǒng)”給人以嚴(yán)肅呆板的感覺，但通過設(shè)計(jì)師們的合理使用，在保證內(nèi)容顯示最全的情況下，使用戶獲取信息更加輕松，令其在網(wǎng)頁(yè)排版中發(fā)揮重要作用，是網(wǎng)頁(yè)排版中的骨骼。合理的運(yùn)用柵格系統(tǒng)，能使整體頁(yè)面顯得更加規(guī)范、美觀、完整，制作網(wǎng)頁(yè)的效率得以提高，有利于網(wǎng)頁(yè)形象的塑造和推廣，像bat等國(guó)內(nèi)主流網(wǎng)站的網(wǎng)頁(yè)編排，均遵循柵格系統(tǒng)，這就是柵格系統(tǒng)最具商業(yè)的價(jià)值所在。

參考文獻(xiàn)：

[1]徐慧.基于移動(dòng)終端的網(wǎng)格探索與研究[D].北京：中央美術(shù)學(xué)院，2013.

[2]威廉·斯莫克（美）.周明瑞.包豪斯理想[M].濟(jì)南：山東畫報(bào)出版社，2012.

[3]鄭鼎，陳晨.網(wǎng)格系統(tǒng)在數(shù)字平面設(shè)計(jì)出版物中的運(yùn)用[J].美術(shù)教育研究，2012（02）.

[4]周峰，彭沛.淺析網(wǎng)格系統(tǒng)在網(wǎng)頁(yè)設(shè)計(jì)中的重要性[J].科技信息，2009（03）.