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

1、    淺談柵格系統(tǒng)在網頁界面版式中的應用    程璨摘   要：網絡世界已成為人們日常辦公生活的必要組成部分，因而涌現出各式各樣的網站，在網頁設計師設計千變萬化的網頁界面時探索發(fā)現，柵格系統(tǒng)作為網頁界面設計的工具發(fā)揮了重要的作用。本文通過分析柵格系統(tǒng)，了解到采用柵格系統(tǒng)可以解決傳統(tǒng)設計布局技巧、方法的低效、不規(guī)范及難以維護等問題。關鍵詞：互聯網;柵格系統(tǒng);網頁界面設計：tp393       ：a        ：1005-5312（2016）26-0285-01在互聯網大

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

3、世紀50年代，瑞士“國際版面風格”沿用德國包豪斯學派的的設計觀念，以達到設計上的統(tǒng)一性、實用性、美觀性因而注重使用簡單的網格和極盡標準的版面公式。瑞士知名設計師約瑟夫·米勒·布魯克曼曾對柵格系統(tǒng)設計評價道：“網格使得所有的設計因素字體、圖片、美術之間的協(xié)調一致成為可能。網格設計就是把秩序引入設計中去的一種方法。”網頁設計師們在設計網頁界面時，將文字圖片等內容通過柵格系統(tǒng)的精確計算，按“欄”為單位進行區(qū)域劃分，使版面更具規(guī)范性、嚴謹性，文字與圖片的完美融合也使版面更具節(jié)奏的變化、更加活潑生動，用戶在閱覽時更加輕松愉悅。例如版式中的圖片位置和文字編排，一級標題、二級標題的大小比

4、例，頁碼以及角標的位置編排，都按照一定設計標準進行整體規(guī)劃，使整個作品保持統(tǒng)一性、連貫性。與以往傳統(tǒng)排版不同，它更加重視版式編排的比例、思路、連續(xù)、秩序、時代、嚴謹等特色。二、柵格系統(tǒng)在網頁設計中的應用（一）網頁柵格化的特殊性互聯網消息的傳播發(fā)展速度之快是傳統(tǒng)印刷媒介所不能比的，對于海報、雜志、宣傳單頁等傳統(tǒng)印刷媒介，設計師們可以花費一周或者時間更長的時間進行設計，平面設計師可以以個體為單位獨立完成前期創(chuàng)作，主導整個產品最終呈現在用戶面前的視覺效果。但在網頁中，設計師要考慮不同的操作平臺、不同的瀏覽器、不同的屏幕大小都會影響同一網站、同一界面在用戶面前呈現的形式可能互不相同，用戶會根據自己的喜

5、好調整字體的大小、網頁的外觀等，并且互聯網消息更新速度之快也是設計師個人所無法控制的。這時就需要后臺與前臺的相互配合，通過響應式設計手法，設計可以適應這些變換的柵格系統(tǒng)。（二）網頁柵格化的必要性使用柵格化系統(tǒng)來進行網頁設計是十分必要的，它可以提高網頁的規(guī)范性。對于常規(guī)網站的開發(fā)及維護來說，所含內容在一個版本中不會出現太大的版式變化，所有編排元素的大小尺寸都是有律可循的，前端設計人員根據規(guī)定尺寸進行設計，無需因為一個板塊的更新而使整個網頁在進行重新規(guī)劃，后端開發(fā)人員在維護網站時也可以省時省心，從根本上降低網站運營成本。運用柵格系統(tǒng)已成為大型網站設計運作的一種趨勢，使之網站運營更具規(guī)范化，對于某些

6、中小型網站，更加需要設計師們利用柵格化系統(tǒng)使原本雜亂無章的網頁看起來更加清晰，使整個網站的各個界面在整體布局上保持一致，又增加了各個界面之間的相互聯系，提升用戶對網站體驗感。（三）響應式網頁柵格化設計隨著技術水品的不斷進步，用戶的瀏覽要求也在隨之變化，根據不同年齡、不同性別、不同職業(yè)的用戶越來越關注個性化的設計，它們是否可以根據自己所實用的電子設備對所訪問網站進行字體調整變化，瀏覽器窗口的大小、不同的瀏覽器以及電子設備的分辨率大小，都可能導致網頁的排版模式發(fā)生變化，設計師根據這些特點，利用柵格化系統(tǒng)的優(yōu)勢，將各個欄目區(qū)分固定，最終根據比例來控制整個頁面的變化，從而保證用戶在個性自定義后網頁編排依舊秩序嚴謹?！皷鸥裣到y(tǒng)”或是“網格系統(tǒng)”給人以嚴肅呆板的感覺，但通過設計師們的合理使用，在保證內容顯示最全的情況下，使用戶獲取信息更加輕松，令其在網頁排版中發(fā)揮重要作用，是網頁排版中的骨骼。合理的運用柵格系統(tǒng)，能使整體頁面顯得更加規(guī)范、美觀、完整，制作網頁的效率得以提高，有利于網頁形象的塑造和推廣，像bat等國內主流網站的網頁編排，均遵循柵格系統(tǒng)，這就是柵格系統(tǒng)最具商業(yè)的價值所在。參考文獻：1徐慧.基于移動終端的網格探索與研究d.北京：中央美術學院，2013.2威廉·斯莫克（美）.周明瑞.包豪斯理想m.濟南：