談談網頁藝術設計中的版式設計

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

[關鍵詞]網頁藝術設計 版式設計 平面設計

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

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

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

一、網頁藝術設計與網頁版式設計的概念

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

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

二、網頁的版式設計與網頁空間尺寸的關系

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

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

（一）頁面的安全寬度

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

（二）頁面的最佳長度

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

三、網頁中常見的幾種版式設計

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

（一）左右結構版式

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

（二）“同”字型結構版式

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

（三）“回”字型結構版式

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

（四）“匡”字型結構版式

“匡”字型結構版式其實是“同”字型結構版式的變形，將“同”字型結構版式逆時針旋轉90度，就是這種版式。或者認為是“回”字型結構版式的頁面上的右邊的欄目條刪除后所得到的一種版式。這種版式克服了“回”字型結構版式過于封閉的缺陷。

（五）自由個性結構版式

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

參考文獻：

[1]張曉清，網頁構圖與設計，人民郵電出版，2001年4月.

[2]孫振業，網頁設計與制作，高等教育出版社，2007年5月.

作者簡介：

李英俊，男，遼寧建筑職業技術學院，副教授。