前言：本站為你精心整理了網(wǎng)頁(yè)界面視覺(jué)設(shè)計(jì)范文，希望能為你的創(chuàng)作提供參考價(jià)值，我們的客服老師可以幫助你提供個(gè)性化的參考范文，歡迎咨詢。

摘要:界面設(shè)計(jì)是一個(gè)復(fù)雜的有不同學(xué)科參與的工程｡網(wǎng)頁(yè)界面的設(shè)計(jì)當(dāng)中應(yīng)該注重的視覺(jué)導(dǎo)向設(shè)計(jì),其中要使瀏覽該網(wǎng)頁(yè)的用戶在該網(wǎng)站中的任何位置,都能夠清楚的找到指引方向的標(biāo)識(shí)物,并通過(guò)頁(yè)面上的圖形､符號(hào)､顏色､多媒體､文字標(biāo)識(shí)物等元素所承載的信息,準(zhǔn)確､順利抵達(dá)目的地,并使各頁(yè)面之間的相互跳轉(zhuǎn)的通過(guò)導(dǎo)向系統(tǒng)變得合理有序｡

關(guān)鍵詞:網(wǎng)頁(yè)界面;視覺(jué)導(dǎo)向;界面設(shè)計(jì)

用戶界面設(shè)計(jì)是屏幕產(chǎn)品的重要組成部分｡界面設(shè)計(jì)是一個(gè)復(fù)雜的有不同學(xué)科參與的工程,認(rèn)知心理學(xué)､設(shè)計(jì)學(xué)､語(yǔ)言學(xué)等在此都扮演著重要的角色｡界面設(shè)計(jì)有以下幾個(gè)基本的準(zhǔn)則:保持界面的一致性､滿足不同目標(biāo)用戶的創(chuàng)意需求､用戶界面友好性､圖標(biāo)識(shí)別平衡性､圖標(biāo)功能的一致性､建立界面與用戶的互動(dòng)交流｡這些原則放在網(wǎng)頁(yè)界面設(shè)計(jì)中來(lái)看,其實(shí)是一個(gè)解決如何引導(dǎo)用戶如何去瀏覽網(wǎng)頁(yè)的問(wèn)題,它就是對(duì)于用戶的視覺(jué)導(dǎo)向的一種設(shè)計(jì)｡導(dǎo)向設(shè)計(jì)這個(gè)概念常見(jiàn)于環(huán)境藝術(shù)設(shè)計(jì)當(dāng)中,做為一種環(huán)境的指引和導(dǎo)向的設(shè)計(jì),如城市導(dǎo)向設(shè)計(jì)､放在軟件設(shè)計(jì)當(dāng)中常見(jiàn)名稱為目標(biāo)導(dǎo)向設(shè)計(jì)｡導(dǎo)向設(shè)計(jì)可從兩個(gè)領(lǐng)域來(lái)劃分:一是從視覺(jué)傳達(dá)角度來(lái)研究,關(guān)注的是如何有簡(jiǎn)潔而醒目的圖形符號(hào)來(lái)表達(dá)準(zhǔn)確的含義,這種視覺(jué)語(yǔ)言是不分國(guó)界的;二是從環(huán)境藝術(shù)設(shè)計(jì)角度來(lái)研究,主要包括材質(zhì)､外觀､位置､藝術(shù)表現(xiàn)等因素,而且使圖形符號(hào)融入整個(gè)環(huán)境的氛圍中去｡這里我們所說(shuō)到的是指在網(wǎng)頁(yè)界面的設(shè)計(jì)當(dāng)中應(yīng)該注重的視覺(jué)導(dǎo)向設(shè)計(jì),其中要使瀏覽該網(wǎng)頁(yè)的用戶在該網(wǎng)站中的任何位置,都能夠清楚的找到指引方向的標(biāo)識(shí)物,并通過(guò)頁(yè)面上的圖形､符號(hào)､顏色､多媒體､文字標(biāo)識(shí)物等元素所承載的信息,準(zhǔn)確､順利抵達(dá)目的地,并使各頁(yè)面之間的相互跳轉(zhuǎn)的通過(guò)導(dǎo)向系統(tǒng)變得合理有序｡在網(wǎng)頁(yè)當(dāng)中,視覺(jué)導(dǎo)向設(shè)計(jì)的目的在于準(zhǔn)確把握用戶的心理活動(dòng)及一般視覺(jué)轉(zhuǎn)向,一定要明確用戶“從那里來(lái),到那里去”｡對(duì)于網(wǎng)頁(yè)界面設(shè)計(jì)中的視覺(jué)導(dǎo)向設(shè)計(jì)出發(fā)點(diǎn)是基于用戶的需求導(dǎo)向出發(fā)的,怎么樣才算是從用戶的需求出發(fā)呢?在這里從以下幾點(diǎn)來(lái)看:

1頁(yè)面布局的合理與統(tǒng)一

需要考慮網(wǎng)頁(yè)布局的框架的合理與統(tǒng)一｡一般網(wǎng)頁(yè)的布局設(shè)計(jì)方法是一種上下框架結(jié)構(gòu)式,通常上方為導(dǎo)航條,或者動(dòng)態(tài)的公司企業(yè)形象､廣告區(qū)域｡下方為正文､內(nèi)容部分(也有在下方為導(dǎo)航,上方為內(nèi)容等)｡還有企業(yè)網(wǎng)站較喜歡采用的二分欄式布局,或叫作左右結(jié)構(gòu)式｡這是一種清晰的分列兩旁的框架結(jié)構(gòu),一般左側(cè)是導(dǎo)航條,有時(shí)最上方會(huì)有一個(gè)小的標(biāo)題或標(biāo)志,右側(cè)是正文､內(nèi)容部分或者公司企業(yè)形象展示｡而大中型企業(yè)比較喜歡的一般是上左右布局式的框架式樣｡這種類型框架特征是通常在網(wǎng)頁(yè)界面的上方設(shè)置為主要的菜單導(dǎo)航條,左側(cè)為點(diǎn)擊出現(xiàn)的細(xì)分欄目導(dǎo)航條,下方為較主要的欄目及小廣告等,右側(cè)為內(nèi)容區(qū)域｡對(duì)于較為大型的企業(yè)､電子商務(wù)､政府網(wǎng)站､教育機(jī)構(gòu)上左中右結(jié)構(gòu)式又稱為3分欄布局式,,也是較常見(jiàn)的結(jié)構(gòu)式｡同上左右框架式稍有區(qū)別的是中間部分為內(nèi)容區(qū)域,右側(cè)則是該網(wǎng)站較重要的內(nèi)容導(dǎo)航區(qū)域,或是登錄､搜索區(qū)域､小廣告等｡網(wǎng)頁(yè)界面的布局設(shè)計(jì)沒(méi)有一定的絕對(duì)的結(jié)構(gòu)框架形式,可以說(shuō)都是根據(jù)網(wǎng)站性質(zhì)的開(kāi)發(fā)需要､根據(jù)網(wǎng)站所表現(xiàn)的內(nèi)容以及想要傳達(dá)的信息考慮,然后選擇適合表現(xiàn)､適合傳播､適合開(kāi)發(fā)等這些因素條件的能夠體現(xiàn)網(wǎng)站內(nèi)容及主題的這樣一種布局形式,并在整個(gè)設(shè)計(jì)中主要是一個(gè)——從用戶出發(fā)､考慮界面與用戶交互角度出發(fā),引導(dǎo)用戶的視覺(jué)重要因素｡

要考慮到頁(yè)面尺寸的大小對(duì)用戶瀏覽的影響｡影響網(wǎng)頁(yè)頁(yè)面尺寸的因素有2個(gè),一個(gè)主要的是顯示器大小及分辨率,另一個(gè)是用戶使用的瀏覽器｡網(wǎng)頁(yè)是通過(guò)計(jì)算機(jī)的顯示器來(lái)實(shí)現(xiàn)最終顯示的,不同的人群又是使用著不同的顯示器的｡目前我們?cè)趯?duì)網(wǎng)頁(yè)界面進(jìn)行設(shè)計(jì)的時(shí)候的頁(yè)面尺寸基本上能夠適合1024×768及1440×900這兩個(gè)分辨率就可以了,另外,關(guān)注和研究顯示器的發(fā)展方向也必然是做好網(wǎng)頁(yè)界面的必修課之一｡

用戶使用的瀏覽器也是影響頁(yè)面尺寸的因素之-｡因?yàn)椴煌臑g覽器會(huì)有不同的界面設(shè)計(jì),而其中的工具條基本上都要占部分屏幕空間,有的瀏覽器占據(jù)的空間要大,有的要小,所剩余的空間才是網(wǎng)頁(yè)的展示面積｡目前一般常用的尺寸是:分辨率在800×600的情況下,頁(yè)面寬度應(yīng)保持在778以內(nèi),就不會(huì)出現(xiàn)水平滾動(dòng)條,高度視版面內(nèi)容決定,全屏在778×432｡分辨率在1024×768的情況下,頁(yè)面寬度應(yīng)保持在1002以內(nèi),就不會(huì)出現(xiàn)水平滾動(dòng)條,高度視版面內(nèi)容決定,全屏在1002×600｡由于以上尺寸是在常規(guī)使用的瀏覽器與工具欄的適合尺寸,考慮去掉滾動(dòng)條及瀏覽器的其他必須面板｡所以如大家在制作中最好恢復(fù)默認(rèn)的瀏覽器工具欄,這樣與網(wǎng)頁(yè)最終設(shè)計(jì)的作品的差別就不會(huì)太大｡

如上所述,頁(yè)面尺寸是不是就只能控制在一定的范圍之內(nèi)呢?不是,我們可以通過(guò)兩種增加頁(yè)面內(nèi)容和尺寸的辦法,一個(gè)是向下拖動(dòng)頁(yè)面,一個(gè)是左右拖動(dòng)頁(yè)面｡但是這種辦法有一定的限制性,從用戶使用的角度出發(fā)的話,在一般的情況之下,除非你的頁(yè)面內(nèi)容安排絕對(duì)能夠吸引用戶能夠引導(dǎo)用戶去瀏覽,否則請(qǐng)不要讓頁(yè)面的拖動(dòng)超過(guò)三屏(一屏為顯示器屏幕的顯示范圍)｡但是如果內(nèi)容實(shí)在是非常多,最好能夠在頁(yè)面上做一定的方便視覺(jué)導(dǎo)向的頁(yè)面內(nèi)部鏈接,充分考慮及把握用戶期望､需要以及動(dòng)機(jī),做到方便瀏覽｡

考慮頁(yè)面的整體設(shè)計(jì)對(duì)用戶的心理影響｡我們常說(shuō),對(duì)于事物的第一印象是非常重要的,網(wǎng)頁(yè)的界面整體造型是就是給予瀏覽者的第一印象｡在這里說(shuō)到的網(wǎng)頁(yè)的界面整體造型指的是界面上出現(xiàn)的視覺(jué)元素所組成的一個(gè)主體的單形形態(tài),如幾何形體､有機(jī)形體､無(wú)規(guī)則形體等｡不同的形態(tài)會(huì)帶給人們不同的視覺(jué)感受､心理感受,這也是我們?cè)跇?gòu)成學(xué)上常常提到形態(tài)本身具有的性格特征,如幾何形體具有規(guī)整､秩序､嚴(yán)肅､穩(wěn)定､單純等性格特征,有機(jī)形體有著勃勃生機(jī)､膨脹､優(yōu)美､彈性等性格特征,而無(wú)規(guī)則形體則會(huì)有著具有人情味､溫暖感､情趣性等性格特征｡在網(wǎng)頁(yè)的界面整體設(shè)計(jì)中,必然要考慮的不同視覺(jué)元素所組成的一個(gè)主題的單形形態(tài)所具備的性格特征｡在已有的網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐中統(tǒng)計(jì)我們可以看到,矩形給瀏覽者的感受是中規(guī)中矩,有規(guī)則,穩(wěn)定,所以絕大部分的政府網(wǎng)頁(yè)及教育機(jī)構(gòu)的整體造型都是矩形;圓形帶表著柔和,團(tuán)結(jié),溫暖,安全等,許多時(shí)尚站點(diǎn)喜歡以圓形為頁(yè)面整體造型;三角形代表著力量,權(quán)威,牢固,侵略等,許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形為頁(yè)面整體造型;一些交友類競(jìng)賽類站點(diǎn)常運(yùn)用菱形作為頁(yè)面整體造型,因?yàn)椴捎昧庑未碇胶?#65380;協(xié)調(diào)､公平,一些有機(jī)形往往常見(jiàn)于一些個(gè)人站點(diǎn)中,以彰表個(gè)性､突出自我｡

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

網(wǎng)頁(yè)界面中文字是較為主要的元素,各級(jí)界面的文字必須要對(duì)字體､字號(hào)､色彩､行距､字間距､排列方式､強(qiáng)調(diào)､狀態(tài)等的統(tǒng)一,如主要標(biāo)題文字､二級(jí)標(biāo)題文字､需要提醒的文字､具有超鏈接的文字､正文､標(biāo)注文字､段落文字､公告文字等｡其中必須重視的是文字必須是準(zhǔn)確的,千萬(wàn)不能出現(xiàn)錯(cuò)字別字,否則出現(xiàn)的引導(dǎo)錯(cuò)誤是可怕的,甚至導(dǎo)致不良的后續(xù)效果｡另外,考慮文字的導(dǎo)向還必須要考慮文字在不同的狀態(tài)下出現(xiàn)的不同要求,前面我們提到具有超鏈接的文字,這種類型的字最起碼都具備正常､鼠標(biāo)經(jīng)過(guò)､鼠標(biāo)點(diǎn)擊的3個(gè)基本狀態(tài),另外還要考慮到動(dòng)態(tài)的文字和靜態(tài)的文字要求絕對(duì)不同,如果文字是靜止不動(dòng)的,那么文字的字體就可以相對(duì)復(fù)雜､顏色可以多變､字號(hào)可以相對(duì)較小等;反之如果是動(dòng)態(tài)的文字,如在動(dòng)畫或在多媒體中出現(xiàn)或文字本身具有動(dòng)態(tài)的效果,那么文字字體必然不能夠太復(fù)雜要簡(jiǎn)潔醒目,文字必要要偏大,包括文字內(nèi)容都要盡可能言簡(jiǎn)意賅｡為此我們?cè)诰W(wǎng)頁(yè)的界面設(shè)計(jì)當(dāng)中必須要對(duì)承載導(dǎo)向的文字進(jìn)行良好的､謹(jǐn)慎的､多角度的設(shè)計(jì)｡轉(zhuǎn)各級(jí)頁(yè)面的色調(diào)統(tǒng)一,如背景色､主體色､文字色､圖片色､按鈕色等｡人的活動(dòng)受著思想､心理活動(dòng)的支配,網(wǎng)頁(yè)界面做好的視覺(jué)導(dǎo)向,色彩的絕對(duì)不容忽視｡例如考慮色彩的情感特征,色彩能夠給人們帶來(lái)各種想象､聯(lián)想､印象與會(huì)議,使人產(chǎn)生喜怒､哀､樂(lè)各種情緒､感情與心境｡從色調(diào)的功能上來(lái)看其有不同的感情效應(yīng),如黃色調(diào)光明､充滿希望;紅色調(diào),熱烈且刺激;藍(lán)色調(diào),冷靜,崇高與理智｡又如:春､夏､秋､冬季分別可以以嫩綠色､翠綠色､金黃色､灰褐色來(lái)象征｡另外有一些已經(jīng)成為職業(yè)或行業(yè)的標(biāo)志色,如:軍警的橄欖綠､醫(yī)療衛(wèi)生的白色､高科技的藍(lán)色等｡

另外還需統(tǒng)一的提示用詞､統(tǒng)一各級(jí)界面位置､按鈕也在窗口的相同的位置｡如你可以在一個(gè)列表的項(xiàng)目上雙擊后能夠彈出對(duì)話框,那么應(yīng)該在任何列表中雙擊都能彈出對(duì)話框｡還包括圖表的統(tǒng)一､素材的統(tǒng)一等｡

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

在網(wǎng)頁(yè)界面設(shè)計(jì)中,各種元素所承載的這些功能都必須有相同的操作方法｡通過(guò)對(duì)這些元素的功能性的統(tǒng)一,使用戶在瀏覽起網(wǎng)頁(yè)來(lái)能夠建立起一種的心智模型,讓他們?cè)谑褂檬炀毩艘粋€(gè)網(wǎng)頁(yè)界面后,切換到另外一個(gè)網(wǎng)頁(yè)界面就能夠很輕松的推測(cè)出各種功能,語(yǔ)句理解也不需要費(fèi)神理解｡這樣可以給瀏覽用戶統(tǒng)一感覺(jué),不覺(jué)得混亂,讓整個(gè)的瀏覽過(guò)程變得輕松自然,方便易用｡我們主要可以從圖標(biāo)､文字兩個(gè)元素來(lái)看｡圖形大致可分為具象圖形和抽象圖形兩種類型,具象圖形通過(guò)具體的形象來(lái)表達(dá)和傳達(dá)事物信息,它的特點(diǎn)是直接與明了,在網(wǎng)頁(yè)界面中常見(jiàn)用于傳達(dá)特定與既定的事物｡而抽象圖形則用概括的手法升華圖形,這類圖形具有視覺(jué)沖擊效果強(qiáng)､容易識(shí)別的特點(diǎn),常見(jiàn)用于表達(dá)注意､警告等含義時(shí),通常是把強(qiáng)烈的色彩和簡(jiǎn)潔易懂的抽象圖形結(jié)合起來(lái)達(dá)到最佳傳達(dá)效果｡在網(wǎng)頁(yè)界面的設(shè)計(jì)當(dāng)中,我們往往不是做一個(gè)兩個(gè)的界面,而是有幾十個(gè)甚至上百個(gè)的不同層級(jí)的界面,在這里我們就必須要把握住圖形功能性表達(dá)統(tǒng)一｡但在圖形標(biāo)志的功能性定義中,也要特別注意避免與已經(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è)承載功能較多的就是文字元素了｡文字除了本身具有的絕對(duì)的說(shuō)明功能表達(dá)功能之外,它還常常在網(wǎng)頁(yè)中承載著其他的功能,在界面設(shè)計(jì)中,必須要考慮讓同個(gè)詞語(yǔ)或同個(gè)字､同個(gè)句子所具備的功能是相同的｡另外還有比較重要的一點(diǎn)的是必須要把點(diǎn)擊過(guò)或正在瀏覽的超鏈接具有與未點(diǎn)擊過(guò)和未瀏覽過(guò)的超鏈接區(qū)分開(kāi)來(lái),如是文字鏈接,可考慮不同的字體､字號(hào)及顏色等;圖形鏈接可考慮采取不同的圖形或者變?yōu)椴豢捎脿顟B(tài)､添加相關(guān)的提示等,這樣才有助于瀏覽用戶理解整個(gè)的網(wǎng)頁(yè)｡

最后,設(shè)計(jì)一個(gè)易于識(shí)別的網(wǎng)站導(dǎo)航也是做好視覺(jué)導(dǎo)向的一個(gè)重點(diǎn)｡到底怎么樣的網(wǎng)頁(yè)界面設(shè)計(jì)可以稱為具有良好的視覺(jué)導(dǎo)向設(shè)計(jì)呢?優(yōu)秀的網(wǎng)頁(yè)界面設(shè)計(jì)除能夠傳達(dá)既定的信息外､美化網(wǎng)頁(yè)頁(yè)面外,如何讓瀏覽用戶的瀏覽變的更加的便利,如何讓用戶產(chǎn)生信任感,如何讓用戶覺(jué)得完全可以控制,如何讓網(wǎng)頁(yè)界面中的各種元素能夠恰當(dāng)?shù)嘏c瀏覽用戶產(chǎn)生互動(dòng),使他們能順利地獲取自己需要的部分,那么,我們就可以說(shuō)這就是優(yōu)秀的網(wǎng)頁(yè)界面的視覺(jué)導(dǎo)向設(shè)計(jì)了｡