都桂英

青海交通職業(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)性。

1 網(wǎng)頁(yè)界面設(shè)計(jì)中的視覺導(dǎo)向設(shè)計(jì)要素

1.1 頁(yè)面布局的合理與統(tǒ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)、公平。

1.2 界面元素的統(tǒng)一

網(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)意賅。

1.3 元素功能性的統(tǒng)一

在網(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è)。

2 網(wǎng)頁(yè)界面設(shè)計(jì)中的視覺導(dǎo)向設(shè)計(jì)方法

2.1 直接使用靜態(tài)文字、圖形、圖片等元素進(jìn)行導(dǎo)向

這是最簡(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)鏈接等處。

2.2 使用Dreamweaver的導(dǎo)航條來(lái)制作導(dǎo)向

網(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的下方。

2.3 使用“行為”來(lái)使不同的導(dǎo)航在點(diǎn)擊時(shí)出現(xiàn)不同的屬性

另一種稱為“行為”的機(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ì)象”、“屬性選擇”即可。

2.4 使用行為面板添加彈出式菜單導(dǎo)航

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