淺談柵格系統在網頁界面版式中的應用

程璨

摘 ? 要：網絡世界已成為人們日常辦公生活的必要組成部分，因而涌現出各式各樣的網站，在網頁設計師設計千變萬化的網頁界面時探索發現，柵格系統作為網頁界面設計的工具發揮了重要的作用。本文通過分析柵格系統，了解到采用柵格系統可以解決傳統設計布局技巧、方法的低效、不規范及難以維護等問題。

關鍵詞：互聯網;柵格系統;網頁界面設計

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

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

一、柵格系統

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

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

（一）網頁柵格化的特殊性

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

（二）網頁柵格化的必要性

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

（三）響應式網頁柵格化設計

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

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

參考文獻：

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

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

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

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