基于Dreamweaver的網(wǎng)頁界面視覺導向設計

都桂英

青海交通職業(yè)技術學院，青海西寧 810003

基于Dreamweaver的網(wǎng)頁界面視覺導向設計

都桂英

青海交通職業(yè)技術學院，青海西寧 810003

網(wǎng)頁界面的設計當中應該注重視覺導向設計，使瀏覽網(wǎng)頁的用戶在網(wǎng)站中的任何位置，都能順利通過頁面上的文字、圖形、符號、顏色、多媒體等元素所承載的信息準確、順利抵達目的地。

網(wǎng)頁界面；視覺導向；導向設計

用戶界面設計是網(wǎng)頁設計的重要組成部分。界面設計有以下幾個基本的準則：界面的一致性、友好性、互動性。

1 網(wǎng)頁界面設計中的視覺導向設計要素

1.1 頁面布局的合理與統(tǒng)一

網(wǎng)頁界面的布局設計沒有一定的絕對的方式，主要是從網(wǎng)站性質的開發(fā)需要、網(wǎng)站所表現(xiàn)的內(nèi)容以及想要傳達的信息考慮，考慮適合表現(xiàn)、傳播、開發(fā)等因素確定一種能夠體現(xiàn)網(wǎng)站內(nèi)容及主題的布局形式。

一般網(wǎng)站的網(wǎng)頁布局設計方法是上左右式布局。這種布局的特征是通常在網(wǎng)頁界面的上方設置為網(wǎng)站標志（LOGO）和主要的菜單導航條，中部左側為點擊出現(xiàn)的細分欄目導航條和較主要的欄目及小廣告等，中部右側為內(nèi)容區(qū)域，下方為網(wǎng)站相關版權信息。而電子商務、政府網(wǎng)站、教育機構比較喜歡的網(wǎng)頁布局一般是上左中右布局或稱為3分欄布局，同上左右布局不同的是中間部分為內(nèi)容區(qū)域，右側則是該網(wǎng)站較重要的內(nèi)容導航區(qū)域，或是登錄、搜索區(qū)域、小廣告等。

除頁面布局合理統(tǒng)一外，還要考慮頁面尺寸的大小對用戶瀏覽的影響。影響網(wǎng)頁頁面尺寸的因素有2個，一個是顯示器大小及分辨率，另一個是用戶使用的瀏覽器。目前常見的主流顯示器的尺寸基本上在1 024×768及1 440×900之間。通常情況下，頁面以一屏能顯示為好，左右最好不拖動，上下拖動一般不超過三屏，目前一般常用的尺寸是：分辨率在800×600的情況下，頁面寬度應保持在778以內(nèi)，高度視版面內(nèi)容決定，全屏在778×432；分辨率在1 024×768的情況下，頁面寬度應保持在1 002以內(nèi)，高度視版面內(nèi)容決定，全屏在1 002×600。

除此之外，還要考慮頁面的整體設計對用戶的心理影響。不同的形態(tài)會帶給人們不同的視覺感受、心理感受，如幾何形體具有規(guī)整、秩序、嚴肅、穩(wěn)定、單純等特征，有機形體有著勃勃生機、膨脹、優(yōu)美、彈性等特征，無規(guī)則形體則會有著具有人情味、溫暖感、情趣性等特征，矩形有有規(guī)則、穩(wěn)定的感覺，圓形代表著柔和、團結、溫暖、安全等，三角形代表著力量、權威、牢固、侵略等，菱形代表著平衡、協(xié)調(diào)、公平。

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

網(wǎng)頁界面中文字是較為主要的元素，各級界面的文字的字體、字號、顏色、行距、字間距、排列方式等要統(tǒng)一，如主要標題文字、二級標題文字、需要提醒的文字、具有超鏈接的文字、正文、標注文字、段落文字、公告文字等。其中必須重視的是文字必須是準確的，文字的導向要考慮文字在不同的狀態(tài)下出現(xiàn)的不同要求，如具有超鏈接的文字最起碼都具備正常、鼠標經(jīng)過、鼠標點擊的3個基本狀態(tài)；靜態(tài)的文字，字體可以相對復雜、顏色可以多變、字號可以相對較小等，動態(tài)的文字，如在動畫或在多媒體中出現(xiàn)或文字本身具有動態(tài)的效果，文字字體就要簡潔醒目，字號要偏大，文字內(nèi)容要言簡意賅。

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

在網(wǎng)頁界面設計中，各種元素所承載的這些功能都必須有相同的操作方法。通過對這些元素的功能性的統(tǒng)一，使用戶在熟練使用了一個網(wǎng)頁界面后，切換到另外一個網(wǎng)頁界面就能夠很輕松的推測出各種功能，讓瀏覽過程變得輕松自然，方便易用。

網(wǎng)頁中的元素主要是圖形和文字。在網(wǎng)頁界面的設計當中，我們往往不是做一兩個界面，而是有幾十個甚至上百個的不同層級的界面，我們就必須要把握住圖形功能性表達統(tǒng)一。同時要注意避免與已經(jīng)既有的、既定概念的圖形標志混淆使用。如已經(jīng)行業(yè)標準化、國家標準化、國際標準化的圖標符號，向公共信息圖形符號、交通標志、安全標志、包裝標志、環(huán)境保護標志、家用電器及辦公設備、危險品等級圖形標志、殘疾人用圖形符號。

網(wǎng)頁界面中另外一個承載功能較多的就是文字元素了。在界面設計中，必須要考慮讓同個詞語或同個字、同個句子所具備的功能是相同的。還有就是要把點擊過或正在瀏覽的超鏈接與未點擊過和未瀏覽過的超鏈接區(qū)分開來，如可用不同的字體、字號及顏色等；圖形鏈接可考慮采取不同的圖形或者變?yōu)椴豢捎脿顟B(tài)、添加相關的提示等，這樣才有助于瀏覽用戶理解整個網(wǎng)頁。

2 網(wǎng)頁界面設計中的視覺導向設計方法

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

這是最簡單的一種視覺導向設計方法。其方法是在網(wǎng)頁中需要的地方添加靜態(tài)文字、圖形、圖片等元素，并在該元素上添加頁面的鏈接地址，在用戶瀏覽時鼠標指針在添加了鏈接的元素上變?yōu)槭中?，單擊后即可進入需要的網(wǎng)頁。

這種導向設計方法簡單，適用范圍廣泛，常用于網(wǎng)頁當中的大量題目鏈接中，如新聞標題、圖片新聞、相關鏈接等處。

2.2 使用Dreamweaver的導航條來制作導向

網(wǎng)頁中的導航條也是很重要的一種導向元素，Dreamweaver提供了插入導航條的功能，利用該功能可以制作具有動感的導航條。

這種導航條通常具有4種狀態(tài)——狀態(tài)圖像、鼠標經(jīng)過時圖像、按下圖像和按下時鼠標經(jīng)過圖像，其中“狀態(tài)圖像”是網(wǎng)頁在被打開后的初始圖像，“鼠標經(jīng)過時圖像”是瀏覽者將鼠標移動到導航條上時所顯示的圖像，“按下圖像”是指鼠標按下時顯示的圖像，“按下時鼠標經(jīng)過圖像”是指鼠標點擊后當鼠標再次移動到這個部位上時顯示的圖像。用這種方法制作導航條時通常和圖形圖像的編輯制作軟件結合使用，常用的方法是用圖形圖像編輯軟件制作出大小相同、顏色不同的幾類不同的圖像（依據(jù)導航條的數(shù)目而定）。

一般地，每部位只設一到兩種狀態(tài)的圖像。因為圖像太多了，會影響網(wǎng)頁頁面的訪問、瀏覽的速度。通常，這種導航條橫向放置在網(wǎng)頁中LOGO的下方。

2.3 使用“行為”來使不同的導航在點擊時出現(xiàn)不同的屬性

另一種稱為“行為”的機制，可以幫助你構建頁面中的交互行為。行為，就是在網(wǎng)頁中進行一系列動作，通過這些動作實現(xiàn)用戶與頁面的交互。利用Dreamweaver的行為，你不需要書寫一行代碼，就可以實現(xiàn)豐富的動態(tài)頁面效果，達到用戶與頁面的交互。

Dreamweaver提供了一個“改變屬性”的行為，通過這個行為可以動態(tài)地改變對象屬性，比如圖像的大小、文字的背景色等。如一段文字在靜態(tài)時可以設計為一種背景色，當鼠標移動到這段文字是時改變其背景色。

具體操作方法是：在“代碼”窗口中，為對象添加“DIV”標簽，單擊行為面板中的加號按鈕，從彈出的菜單中選擇“改變屬性”命令，設置“改變屬性”對話框中的“對象類型”、“命名對象”、“屬性選擇”即可。

2.4 使用行為面板添加彈出式菜單導航

Dreamweaver提供了一個“顯示彈出式菜單”的行為，利用該行為可以添加彈出式的導航。

具體操作方法是：在“設計”窗口中，選擇需要添加彈出式子菜單對象，單擊行為面板中的加號按鈕，從彈出的菜單中選擇“顯示彈出式菜單”命令，單擊“顯示彈出式菜單”對話框中的“繼續(xù)”按鈕后進行相關的設置即可。

[1]曾廣雄.中文Dreamweaver網(wǎng)頁制作實例教程[M].北京：研 究出版社，2008：206.

[2]周奇.新編網(wǎng)頁設計與制作教程[M].北京：研究出版社， 2008：185.

[3]賈勤.網(wǎng)頁設計三合一能力教程[M].北京：中國鐵道出版 社，2006：54.

TP3

A

1674-6708（2010）24-0216-02