[摘要]網(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é)院,副教授。