談談網(wǎng)頁藝術(shù)設計中的版式設計

[摘要]網(wǎng)頁藝術(shù)設計已越來越引起網(wǎng)站創(chuàng)編人員的重視。從網(wǎng)頁藝術(shù)設計的概念入手分析網(wǎng)頁藝術(shù)設計的特殊性，重點說明網(wǎng)頁藝術(shù)設計中的版式設計。列出幾種常見的版式布局，比較了它們的優(yōu)缺點并提出應用建議。

[關鍵詞]網(wǎng)頁藝術(shù)設計 版式設計 平面設計

中圖分類號：TP3文獻標識碼：A文章編號：1671－7597（2009）0310121－01

網(wǎng)頁設計是一門新興的技術(shù)，是介于平面設計、編程技術(shù)兩者之間的“邊緣學科”，不僅涉及到HTML、JAVASCRIPT、CSS、ASP、JSP等編語言技術(shù)方面的知識，還涉及到美學、版式構(gòu)成、色彩搭配等平面設計方面的知識。

由此我們可把網(wǎng)頁設計分為：網(wǎng)頁技術(shù)設計和網(wǎng)頁藝術(shù)設計。只有將兩種設計綜合運用，才能設計出視聽特效、動靜結(jié)合、人機交互的WEB頁面，才能全面展現(xiàn)萬維網(wǎng)這一新型媒體的獨特魅力和多維空間的超強功能。

一、網(wǎng)頁藝術(shù)設計與網(wǎng)頁版式設計的概念

網(wǎng)頁藝術(shù)設計是以美學為基礎的，以網(wǎng)頁技術(shù)設計作為技術(shù)參考的網(wǎng)頁版式設計和網(wǎng)頁視聽元素設計，是藝術(shù)與技術(shù)的高度統(tǒng)一。也就是說網(wǎng)頁藝術(shù)設計包括兩大部分，即網(wǎng)頁版式設計和網(wǎng)頁視聽元素設計。這里我們主要討論網(wǎng)頁版式設計。

網(wǎng)頁的版式設計同平面媒體（如報紙、雜志等）的版式設計有很多共同之處，是在有限的屏幕空間上將視聽多媒體元素進行有機的排列組合，將理性思維個性化的表現(xiàn)出來，是一種具有個人風格和藝術(shù)特色的視聽傳達方式。它在傳達信息的同時，也產(chǎn)生感官上的美感和精神上的享受。

二、網(wǎng)頁的版式設計與網(wǎng)頁空間尺寸的關系

網(wǎng)頁的版式設計與平面媒體的版式設計又有很多差異。平面媒體的版式設計都有固定的規(guī)格尺寸，網(wǎng)頁則不然，它的尺寸是相對的。不同的網(wǎng)頁瀏覽者使用的設備與習慣不同，這使網(wǎng)頁設計者不能精確控制頁面上每個元素的尺寸和位置。而且，網(wǎng)頁的組織結(jié)構(gòu)不像報紙、雜志那樣為線性組合，這給網(wǎng)頁的版式設計帶來了一定的難度。因此，在網(wǎng)頁的版式設計之前應先了解網(wǎng)頁空間與頁面尺寸。

在瀏覽網(wǎng)頁時，人們所能直接看到的頁面只是15英寸或17英寸顯示器屏幕的一部分。因瀏覽器的工具條要占部分屏幕空間，所以所顯示的網(wǎng)頁屏幕尺寸也不相同。目前，大多數(shù)人的顯示器分辨率設置為800×600或1024×768。其它分辨率設置（如640×480、1280×768）只是少數(shù)。所以我們在進行網(wǎng)頁設計時，多數(shù)以分辨率800×600為標準。為了讓訪問者舒適地瀏覽頁面，可在頁面的頁眉或頁腳處標注“建議分辨率為800×600”字樣。

（一）頁面的安全寬度

當顯示器分辨率設置為800×600時，即瀏覽器的屏幕最寬度為800像素，因垂直方向的滾動條占去20像素，所以網(wǎng)頁的安全寬度應為780像素。所以，頁面設計寬度只有限制在780像素以內(nèi)，在用分辨率的顯示器瀏覽時，水平方向才能夠全部在視屏范圍內(nèi)。頁面寬度超過780像素，則就會產(chǎn)生水平方向的滾動條。如果需要訪問者拖動水平滾動條才能瀏覽到網(wǎng)頁的全部內(nèi)容，那么這張網(wǎng)頁就不能算是很成功。

（二）頁面的最佳長度

當我們對頁面的寬度作了限制后，頁面長度的定義相對寬松多了，它可以是1-3屏不等。但是考慮到整個網(wǎng)頁的下載速度，訪問者的瀏覽的方便以及信息含量、網(wǎng)站的類型等因素，頁面的長度也不相同。一般說，中小型網(wǎng)站的主頁面的最佳長度應在1-2屏之間。大型網(wǎng)站為了在主頁面內(nèi)增加信息量，使內(nèi)容更能直觀地面對訪問者，可把主頁頁的尺寸設置為3屏幕左右或更長。

三、網(wǎng)頁中常見的幾種版式設計

網(wǎng)頁版式設計和平面版式設計有著很大相似之處。但因技術(shù)設計的限制，網(wǎng)頁版式設計遠不如平面版式設計那樣自由。我們這里把常見的版式設計分為以下幾種：左右結(jié)構(gòu)版式，“同”字型結(jié)構(gòu)版式、“回”字型結(jié)構(gòu)版式、“匡”字型結(jié)構(gòu)版式、自由式結(jié)構(gòu)版式等。

（一）左右結(jié)構(gòu)版式

這種版式將主頁分成左右兩部分，可以是左小右大，也可以左右相等。左半部分設置為欄目導航，右半部分列出多篇重要內(nèi)容的概要或一整篇頭條詳細內(nèi)容。這種版式有利于訪問者直接瀏覽網(wǎng)頁內(nèi)容。還可以采用動態(tài)鏈接技術(shù)或文字層交替顯示技術(shù)。點擊左邊的鏈接標題，右邊則即時顯示相關內(nèi)容。這類版式靈活、簡潔，內(nèi)容明了。但頁面的信息含量低，適合小型網(wǎng)站的版式設計。

（二）“同”字型結(jié)構(gòu)版式

這種版式一般以頂部為主導菜單，頁面的左右兩側(cè)分別列出二級欄目或綜合性熱區(qū)（如廣告條、搜索引擎、友情鏈接、登錄面板、注冊按鈕等）。這種版式是網(wǎng)上常用的版式，其優(yōu)點是直觀、均衡，富有條理。但這種版式有時也過于呆板、過于程式化。采用這種版式時要注意色彩的和諧搭配，可以通過色彩的處理調(diào)節(jié)頁面的整體韻律。

（三）“回”字型結(jié)構(gòu)版式

這種版式以“同”字型結(jié)構(gòu)版式為基礎，又在頁面底部增加了一條橫向菜單（本站點的一個超鏈接區(qū)或廣告條等）。這樣可以充分利用有限的頁面空間，增大主頁面的信息含量，縮短了和正文鏈接路徑。使訪問者直觀、快捷地瀏覽所需要信息。缺點是頁面由于封閉，因而較擁擠。

（四）“匡”字型結(jié)構(gòu)版式

“匡”字型結(jié)構(gòu)版式其實是“同”字型結(jié)構(gòu)版式的變形，將“同”字型結(jié)構(gòu)版式逆時針旋轉(zhuǎn)90度，就是這種版式?；蛘哒J為是“回”字型結(jié)構(gòu)版式的頁面上的右邊的欄目條刪除后所得到的一種版式。這種版式克服了“回”字型結(jié)構(gòu)版式過于封閉的缺陷。

（五）自由個性結(jié)構(gòu)版式

這種版式打破了“同”字型、“回”字型、“匡”字型版的菜單框架模式，大膽地發(fā)揮空間想象，把頁面設計成一張極具創(chuàng)意的作品。自由個性版式通常用精美圖片、網(wǎng)站標識性圖案（Logo）或變形的藝術(shù)化文字作為設計中心進行主體構(gòu)圖。菜單欄目條則當作次要元素處理，自由地安排在頁面上，起到點綴、修飾、均衡頁面的效果。這類版式一般用在時尚類站點上，如時裝、化妝品等以崇尚現(xiàn)代、美感為主題的站點。這種版式的優(yōu)點是靚麗、現(xiàn)代、輕松、節(jié)奏明快，很容易讓瀏覽者駐足欣賞。缺點是下載速度較慢，文字信息量少，瀏覽者不能直奔主題，需要費些周折才能找到所需要的信息。因此專業(yè)性的商務站點不宜采用此版式。

參考文獻：

[1]張曉清，網(wǎng)頁構(gòu)圖與設計，人民郵電出版，2001年4月.

[2]孫振業(yè)，網(wǎng)頁設計與制作，高等教育出版社，2007年5月.

作者簡介：

李英俊，男，遼寧建筑職業(yè)技術(shù)學院，副教授。