都桂英
青海交通職業(yè)技術(shù)學(xué)院,青海西寧 810003
基于Dreamweaver的網(wǎng)頁(yè)界面視覺導(dǎo)向設(shè)計(jì)
都桂英
青海交通職業(yè)技術(shù)學(xué)院,青海西寧 810003
網(wǎng)頁(yè)界面的設(shè)計(jì)當(dāng)中應(yīng)該注重視覺導(dǎo)向設(shè)計(jì),使瀏覽網(wǎng)頁(yè)的用戶在網(wǎng)站中的任何位置,都能順利通過(guò)頁(yè)面上的文字、圖形、符號(hào)、顏色、多媒體等元素所承載的信息準(zhǔn)確、順利抵達(dá)目的地。
網(wǎng)頁(yè)界面;視覺導(dǎo)向;導(dǎo)向設(shè)計(jì)
用戶界面設(shè)計(jì)是網(wǎng)頁(yè)設(shè)計(jì)的重要組成部分。界面設(shè)計(jì)有以下幾個(gè)基本的準(zhǔn)則:界面的一致性、友好性、互動(dòng)性。
網(wǎng)頁(yè)界面的布局設(shè)計(jì)沒有一定的絕對(duì)的方式,主要是從網(wǎng)站性質(zhì)的開發(fā)需要、網(wǎng)站所表現(xiàn)的內(nèi)容以及想要傳達(dá)的信息考慮,考慮適合表現(xiàn)、傳播、開發(fā)等因素確定一種能夠體現(xiàn)網(wǎng)站內(nèi)容及主題的布局形式。
一般網(wǎng)站的網(wǎng)頁(yè)布局設(shè)計(jì)方法是上左右式布局。這種布局的特征是通常在網(wǎng)頁(yè)界面的上方設(shè)置為網(wǎng)站標(biāo)志(LOGO)和主要的菜單導(dǎo)航條,中部左側(cè)為點(diǎn)擊出現(xiàn)的細(xì)分欄目導(dǎo)航條和較主要的欄目及小廣告等,中部右側(cè)為內(nèi)容區(qū)域,下方為網(wǎng)站相關(guān)版權(quán)信息。而電子商務(wù)、政府網(wǎng)站、教育機(jī)構(gòu)比較喜歡的網(wǎng)頁(yè)布局一般是上左中右布局或稱為3分欄布局,同上左右布局不同的是中間部分為內(nèi)容區(qū)域,右側(cè)則是該網(wǎng)站較重要的內(nèi)容導(dǎo)航區(qū)域,或是登錄、搜索區(qū)域、小廣告等。
除頁(yè)面布局合理統(tǒng)一外,還要考慮頁(yè)面尺寸的大小對(duì)用戶瀏覽的影響。影響網(wǎng)頁(yè)頁(yè)面尺寸的因素有2個(gè),一個(gè)是顯示器大小及分辨率,另一個(gè)是用戶使用的瀏覽器。目前常見的主流顯示器的尺寸基本上在1 024×768及1 440×900之間。通常情況下,頁(yè)面以一屏能顯示為好,左右最好不拖動(dòng),上下拖動(dòng)一般不超過(guò)三屏,目前一般常用的尺寸是:分辨率在800×600的情況下,頁(yè)面寬度應(yīng)保持在778以內(nèi),高度視版面內(nèi)容決定,全屏在778×432;分辨率在1 024×768的情況下,頁(yè)面寬度應(yīng)保持在1 002以內(nèi),高度視版面內(nèi)容決定,全屏在1 002×600。
除此之外,還要考慮頁(yè)面的整體設(shè)計(jì)對(duì)用戶的心理影響。不同的形態(tài)會(huì)帶給人們不同的視覺感受、心理感受,如幾何形體具有規(guī)整、秩序、嚴(yán)肅、穩(wěn)定、單純等特征,有機(jī)形體有著勃勃生機(jī)、膨脹、優(yōu)美、彈性等特征,無(wú)規(guī)則形體則會(huì)有著具有人情味、溫暖感、情趣性等特征,矩形有有規(guī)則、穩(wěn)定的感覺,圓形代表著柔和、團(tuán)結(jié)、溫暖、安全等,三角形代表著力量、權(quán)威、牢固、侵略等,菱形代表著平衡、協(xié)調(diào)、公平。
網(wǎng)頁(yè)界面中文字是較為主要的元素,各級(jí)界面的文字的字體、字號(hào)、顏色、行距、字間距、排列方式等要統(tǒng)一,如主要標(biāo)題文字、二級(jí)標(biāo)題文字、需要提醒的文字、具有超鏈接的文字、正文、標(biāo)注文字、段落文字、公告文字等。其中必須重視的是文字必須是準(zhǔn)確的,文字的導(dǎo)向要考慮文字在不同的狀態(tài)下出現(xiàn)的不同要求,如具有超鏈接的文字最起碼都具備正常、鼠標(biāo)經(jīng)過(guò)、鼠標(biāo)點(diǎn)擊的3個(gè)基本狀態(tài);靜態(tài)的文字,字體可以相對(duì)復(fù)雜、顏色可以多變、字號(hào)可以相對(duì)較小等,動(dòng)態(tài)的文字,如在動(dòng)畫或在多媒體中出現(xiàn)或文字本身具有動(dòng)態(tài)的效果,文字字體就要簡(jiǎn)潔醒目,字號(hào)要偏大,文字內(nèi)容要言簡(jiǎn)意賅。
在網(wǎng)頁(yè)界面設(shè)計(jì)中,各種元素所承載的這些功能都必須有相同的操作方法。通過(guò)對(duì)這些元素的功能性的統(tǒng)一,使用戶在熟練使用了一個(gè)網(wǎng)頁(yè)界面后,切換到另外一個(gè)網(wǎng)頁(yè)界面就能夠很輕松的推測(cè)出各種功能,讓瀏覽過(guò)程變得輕松自然,方便易用。
網(wǎng)頁(yè)中的元素主要是圖形和文字。在網(wǎng)頁(yè)界面的設(shè)計(jì)當(dāng)中,我們往往不是做一兩個(gè)界面,而是有幾十個(gè)甚至上百個(gè)的不同層級(jí)的界面,我們就必須要把握住圖形功能性表達(dá)統(tǒng)一。同時(shí)要注意避免與已經(jīng)既有的、既定概念的圖形標(biāo)志混淆使用。如已經(jīng)行業(yè)標(biāo)準(zhǔn)化、國(guó)家標(biāo)準(zhǔn)化、國(guó)際標(biāo)準(zhǔn)化的圖標(biāo)符號(hào),向公共信息圖形符號(hào)、交通標(biāo)志、安全標(biāo)志、包裝標(biāo)志、環(huán)境保護(hù)標(biāo)志、家用電器及辦公設(shè)備、危險(xiǎn)品等級(jí)圖形標(biāo)志、殘疾人用圖形符號(hào)。
網(wǎng)頁(yè)界面中另外一個(gè)承載功能較多的就是文字元素了。在界面設(shè)計(jì)中,必須要考慮讓同個(gè)詞語(yǔ)或同個(gè)字、同個(gè)句子所具備的功能是相同的。還有就是要把點(diǎn)擊過(guò)或正在瀏覽的超鏈接與未點(diǎn)擊過(guò)和未瀏覽過(guò)的超鏈接區(qū)分開來(lái),如可用不同的字體、字號(hào)及顏色等;圖形鏈接可考慮采取不同的圖形或者變?yōu)椴豢捎脿顟B(tài)、添加相關(guān)的提示等,這樣才有助于瀏覽用戶理解整個(gè)網(wǎng)頁(yè)。
這是最簡(jiǎn)單的一種視覺導(dǎo)向設(shè)計(jì)方法。其方法是在網(wǎng)頁(yè)中需要的地方添加靜態(tài)文字、圖形、圖片等元素,并在該元素上添加頁(yè)面的鏈接地址,在用戶瀏覽時(shí)鼠標(biāo)指針在添加了鏈接的元素上變?yōu)槭中?,單擊后即可進(jìn)入需要的網(wǎng)頁(yè)。
這種導(dǎo)向設(shè)計(jì)方法簡(jiǎn)單,適用范圍廣泛,常用于網(wǎng)頁(yè)當(dāng)中的大量題目鏈接中,如新聞標(biāo)題、圖片新聞、相關(guān)鏈接等處。
網(wǎng)頁(yè)中的導(dǎo)航條也是很重要的一種導(dǎo)向元素,Dreamweaver提供了插入導(dǎo)航條的功能,利用該功能可以制作具有動(dòng)感的導(dǎo)航條。
這種導(dǎo)航條通常具有4種狀態(tài)——狀態(tài)圖像、鼠標(biāo)經(jīng)過(guò)時(shí)圖像、按下圖像和按下時(shí)鼠標(biāo)經(jīng)過(guò)圖像,其中“狀態(tài)圖像”是網(wǎng)頁(yè)在被打開后的初始圖像,“鼠標(biāo)經(jīng)過(guò)時(shí)圖像”是瀏覽者將鼠標(biāo)移動(dòng)到導(dǎo)航條上時(shí)所顯示的圖像,“按下圖像”是指鼠標(biāo)按下時(shí)顯示的圖像,“按下時(shí)鼠標(biāo)經(jīng)過(guò)圖像”是指鼠標(biāo)點(diǎn)擊后當(dāng)鼠標(biāo)再次移動(dòng)到這個(gè)部位上時(shí)顯示的圖像。用這種方法制作導(dǎo)航條時(shí)通常和圖形圖像的編輯制作軟件結(jié)合使用,常用的方法是用圖形圖像編輯軟件制作出大小相同、顏色不同的幾類不同的圖像(依據(jù)導(dǎo)航條的數(shù)目而定)。
一般地,每部位只設(shè)一到兩種狀態(tài)的圖像。因?yàn)閳D像太多了,會(huì)影響網(wǎng)頁(yè)頁(yè)面的訪問(wèn)、瀏覽的速度。通常,這種導(dǎo)航條橫向放置在網(wǎng)頁(yè)中LOGO的下方。
另一種稱為“行為”的機(jī)制,可以幫助你構(gòu)建頁(yè)面中的交互行為。行為,就是在網(wǎng)頁(yè)中進(jìn)行一系列動(dòng)作,通過(guò)這些動(dòng)作實(shí)現(xiàn)用戶與頁(yè)面的交互。利用Dreamweaver的行為,你不需要書寫一行代碼,就可以實(shí)現(xiàn)豐富的動(dòng)態(tài)頁(yè)面效果,達(dá)到用戶與頁(yè)面的交互。
Dreamweaver提供了一個(gè)“改變屬性”的行為,通過(guò)這個(gè)行為可以動(dòng)態(tài)地改變對(duì)象屬性,比如圖像的大小、文字的背景色等。如一段文字在靜態(tài)時(shí)可以設(shè)計(jì)為一種背景色,當(dāng)鼠標(biāo)移動(dòng)到這段文字是時(shí)改變其背景色。
具體操作方法是:在“代碼”窗口中,為對(duì)象添加“DIV”標(biāo)簽,單擊行為面板中的加號(hào)按鈕,從彈出的菜單中選擇“改變屬性”命令,設(shè)置“改變屬性”對(duì)話框中的“對(duì)象類型”、“命名對(duì)象”、“屬性選擇”即可。
Dreamweaver提供了一個(gè)“顯示彈出式菜單”的行為,利用該行為可以添加彈出式的導(dǎo)航。
具體操作方法是:在“設(shè)計(jì)”窗口中,選擇需要添加彈出式子菜單對(duì)象,單擊行為面板中的加號(hào)按鈕,從彈出的菜單中選擇“顯示彈出式菜單”命令,單擊“顯示彈出式菜單”對(duì)話框中的“繼續(xù)”按鈕后進(jìn)行相關(guān)的設(shè)置即可。
[1]曾廣雄.中文Dreamweaver網(wǎng)頁(yè)制作實(shí)例教程[M].北京:研 究出版社,2008:206.
[2]周奇.新編網(wǎng)頁(yè)設(shè)計(jì)與制作教程[M].北京:研究出版社, 2008:185.
[3]賈勤.網(wǎng)頁(yè)設(shè)計(jì)三合一能力教程[M].北京:中國(guó)鐵道出版 社,2006:54.
TP3
A
1674-6708(2010)24-0216-02