程璨

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

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

中圖分類號：TP393 ? ? ? 文獻標識碼：A ? ? ? ?文章編號：1005-5312（2016）26-0285-01

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

一、柵格系統(tǒng)

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

二、柵格系統(tǒng)在網(wǎng)頁設計中的應用

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

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

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

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

（三）響應式網(wǎng)頁柵格化設計

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

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

參考文獻：

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

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

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

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