談?wù)劸W(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中的版式設(shè)計(jì)

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

[關(guān)鍵詞]網(wǎng)頁(yè)藝術(shù)設(shè)計(jì) 版式設(shè)計(jì) 平面設(shè)計(jì)

中圖分類號(hào)：TP3文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1671－7597（2009）0310121－01

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

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

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

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

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

二、網(wǎng)頁(yè)的版式設(shè)計(jì)與網(wǎng)頁(yè)空間尺寸的關(guān)系

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

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

（一）頁(yè)面的安全寬度

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

（二）頁(yè)面的最佳長(zhǎng)度

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

三、網(wǎng)頁(yè)中常見的幾種版式設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

作者簡(jiǎn)介：

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