版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
1、<p> 網(wǎng)頁界面的視覺導(dǎo)向設(shè)計(jì)</p><p> 摘 要:界面設(shè)計(jì)是一個(gè)復(fù)雜的有不同學(xué)科參與的工程。網(wǎng)頁界面的設(shè)計(jì)當(dāng)中應(yīng)該注重的視覺導(dǎo)向設(shè)計(jì),其中要使瀏覽該網(wǎng)頁的用戶在該網(wǎng)站中的任何位置,都能夠清楚的找到指引方向的標(biāo)識物,并通過頁面上的圖形、符號、顏色、多媒體、文字標(biāo)識物等元素所承載的信息
2、,準(zhǔn)確、順利抵達(dá)目的地,并使各頁面之間的相互跳轉(zhuǎn)的通過導(dǎo)向系統(tǒng)變得合理有序。 </p><p> 關(guān)鍵詞:網(wǎng)頁界面;視覺導(dǎo)向;界面設(shè)計(jì) </p><p> 用戶界面設(shè)計(jì)是屏幕產(chǎn)品的重要組成部分。界面設(shè)計(jì)是一個(gè)復(fù)雜的有不同學(xué)科參與的工程,認(rèn)知心理學(xué)、設(shè)計(jì)學(xué)、語言學(xué)等在此都扮演著
3、重要的角色。界面設(shè)計(jì)有以下幾個(gè)基本的準(zhǔn)則:保持界面的一致性、滿足不同目標(biāo)用戶的創(chuàng)意需求、用戶界面友好性、圖標(biāo)識別平衡性、圖標(biāo)功能的一致性、建立界面與用戶的互動交流。這些原則放在網(wǎng)頁界面設(shè)計(jì)中來看,其實(shí)是一個(gè)解決如何引導(dǎo)用戶如何去瀏覽網(wǎng)頁的問題,它就是對于用戶的視覺導(dǎo)向的一種設(shè)計(jì)&
4、;#65377; 導(dǎo)向設(shè)計(jì)這個(gè)概念常見于環(huán)境藝術(shù)設(shè)計(jì)當(dāng)中,做為一種環(huán)境的指引和導(dǎo)向的設(shè)計(jì),如城市導(dǎo)向設(shè)計(jì)、放在軟件設(shè)計(jì)當(dāng)中常見名稱為目標(biāo)導(dǎo)向設(shè)計(jì)。導(dǎo)向設(shè)計(jì)可從兩個(gè)領(lǐng)域來劃分:一是從視覺傳達(dá)角度來研究,關(guān)注的是如何有簡潔而醒目的圖形符號來表達(dá)準(zhǔn)確的含義,這種視覺語言是不分國界的;二是從環(huán)境藝術(shù)設(shè)計(jì)角度來研究,主要包括材質(zhì)、外觀、位置ᦊ
5、0;藝術(shù)表現(xiàn)等因素,而且使圖形符號融入整個(gè)環(huán)境的氛圍中去</p><p> 1 頁面布局的合理與統(tǒng)一 </p><p> 需要考慮網(wǎng)頁布局的框架的合理與統(tǒng)一。一般網(wǎng)頁的布局設(shè)計(jì)方法是一種上下框架結(jié)構(gòu)式,通常上方為導(dǎo)航條,或者動態(tài)的公司企業(yè)形象、廣告區(qū)域。下方為正文、內(nèi)容部分(也有在下
6、方為導(dǎo)航,上方為內(nèi)容等)。還有企業(yè)網(wǎng)站較喜歡采用的二分欄式布局,或叫作左右結(jié)構(gòu)式。這是一種清晰的分列兩旁的框架結(jié)構(gòu),一般左側(cè)是導(dǎo)航條,有時(shí)最上方會有一個(gè)小的標(biāo)題或標(biāo)志,右側(cè)是正文、內(nèi)容部分或者公司企業(yè)形象展示。而大中型企業(yè)比較喜歡的一般是上左右布局式的框架式樣。這種類型框架特征是通常在網(wǎng)頁界面的上方設(shè)置為主要的菜單導(dǎo)航條,左側(cè)為
7、點(diǎn)擊出現(xiàn)的細(xì)分欄目導(dǎo)航條,下方為較主要的欄目及小廣告等,右側(cè)為內(nèi)容區(qū)域。對于較為大型的企業(yè)、電子商務(wù)、政府網(wǎng)站、教育機(jī)構(gòu)上左中右結(jié)構(gòu)式又稱為3分欄布局式,,也是較常見的結(jié)構(gòu)式。同上左右框架式稍有區(qū)別的是中間部分為內(nèi)容區(qū)域,右側(cè)則是該網(wǎng)站較重要的內(nèi)容導(dǎo)航區(qū)域,或是登錄、搜索區(qū)域、小廣告&
8、lt;/p><p> 要考慮到頁面尺寸的大小對用戶瀏覽的影響。影響網(wǎng)頁頁面尺寸的因素有2個(gè),一個(gè)主要的是顯示器大小及分辨率,另一個(gè)是用戶使用的瀏覽器。網(wǎng)頁是通過計(jì)算機(jī)的顯示器來實(shí)現(xiàn)最終顯示的,不同的人群又是使用著不同的顯示器的。目前我們在對網(wǎng)頁界面進(jìn)行設(shè)計(jì)的時(shí)候的頁面尺寸基本上能夠適合1024×768及1440×900這兩個(gè)分辨率
9、就可以了,另外,關(guān)注和研究顯示器的發(fā)展方向也必然是做好網(wǎng)頁界面的必修課之一。 </p><p> 用戶使用的瀏覽器也是影響頁面尺寸的因素之-。因?yàn)椴煌臑g覽器會有不同的界面設(shè)計(jì),而其中的工具條基本上都要占部分屏幕空間,有的瀏覽器占據(jù)的空間要大,有的要小,所剩余的空間才是網(wǎng)頁的展示面積。目前一般常用的尺寸是:分辨率在800×600的情況
10、下,頁面寬度應(yīng)保持在778以內(nèi),就不會出現(xiàn)水平滾動條,高度視版面內(nèi)容決定,全屏在778×432。分辨率在1024×768的情況下,頁面寬度應(yīng)保持在1002以內(nèi),就不會出現(xiàn)水平滾動條,高度視版面內(nèi)容決定,全屏在1002×600。由于以上尺寸是在常規(guī)使用的瀏覽器與工具欄的適合尺寸,考慮去掉滾動條及瀏覽器的其他必須面板。所以如大家在制作中最好恢復(fù)默
11、認(rèn)的瀏覽器工具欄,這樣與網(wǎng)頁最終設(shè)計(jì)的作品的差別就不會太大。 </p><p> 如上所述,頁面尺寸是不是就只能控制在一定的范圍之內(nèi)呢?不是,我們可以通過兩種增加頁面內(nèi)容和尺寸的辦法,一個(gè)是向下拖動頁面,一個(gè)是左右拖動頁面。但是這種辦法有一定的限制性,從用戶使用的角度出發(fā)的話,在一般的情況之下,除非你的頁面內(nèi)容安排絕對能夠吸引用戶能夠引導(dǎo)用戶去瀏覽,否則請不要讓頁面
12、的拖動超過三屏(一屏為顯示器屏幕的顯示范圍)。但是如果內(nèi)容實(shí)在是非常多,最好能夠在頁面上做一定的方便視覺導(dǎo)向的頁面內(nèi)部鏈接,充分考慮及把握用戶期望、需要以及動機(jī),做到方便瀏覽。 </p><p> 考慮頁面的整體設(shè)計(jì)對用戶的心理影響。我們常說,對于事物的第一印象是非常重要的,網(wǎng)頁的界面整體造型是就是給予瀏覽者的第一印象&a
13、mp;#65377;在這里說到的網(wǎng)頁的界面整體造型指的是界面上出現(xiàn)的視覺元素所組成的一個(gè)主體的單形形態(tài),如幾何形體、有機(jī)形體、無規(guī)則形體等。不同的形態(tài)會帶給人們不同的視覺感受、心理感受,這也是我們在構(gòu)成學(xué)上常常提到形態(tài)本身具有的性格特征,如幾何形體具有規(guī)整、秩序、嚴(yán)肅、穩(wěn)定&#
14、65380;單純等性格特征,有機(jī)形體有著勃勃生機(jī)、膨脹、優(yōu)美、彈性等性格特征,而無規(guī)則形體則會有著具有人情味、溫暖感、情趣性等性格特征。在網(wǎng)頁的界面整體設(shè)計(jì)中,必然要考慮的不同視覺元素所組成的一個(gè)主題的單形形態(tài)所具備的性格特征。在已有的網(wǎng)頁設(shè)計(jì)實(shí)踐中統(tǒng)計(jì)我們可以看到,矩形給瀏覽者的感受
15、是中規(guī)中矩,有規(guī)則,穩(wěn)定,所以絕大部分的政府網(wǎng)頁及教育機(jī)構(gòu)的整體造型都是矩形;圓形帶表著柔和,團(tuán)結(jié),溫暖,安</p><p> 2 界面元素的統(tǒng)一 </p><p> 網(wǎng)頁界面中文字是較為主要的元素,各級界面的文字必須要對字體、字號、色彩、行距、字間距、排列方式
16、5380;強(qiáng)調(diào)、狀態(tài)等的統(tǒng)一,如主要標(biāo)題文字、二級標(biāo)題文字、需要提醒的文字、具有超鏈接的文字、正文、標(biāo)注文字、段落文字、公告文字等。其中必須重視的是文字必須是準(zhǔn)確的,千萬不能出現(xiàn)錯(cuò)字別字,否則出現(xiàn)的引導(dǎo)錯(cuò)誤是可怕的,甚至導(dǎo)致不良的后續(xù)效果&a
17、mp;#65377;另外,考慮文字的導(dǎo)向還必須要考慮文字在不同的狀態(tài)下出現(xiàn)的不同要求,前面我們提到具有超鏈接的文字,這種類型的字最起碼都具備正常、鼠標(biāo)經(jīng)過、鼠標(biāo)點(diǎn)擊的3個(gè)基本狀態(tài),另外還要考慮到動態(tài)的文字和靜態(tài)的文字要求絕對不同,如果文字是靜止不動的,那么文字的字體就可以相對復(fù)雜、顏色可以多變、字號可以相對較小等;反之如果是動態(tài)的文字,如在動畫或在多
18、媒體中出現(xiàn)或文字本身具有動態(tài)的效果,那么文字字體必然不能夠太復(fù)</p><p> 各級頁面的色調(diào)統(tǒng)一,如背景色、主體色、文字色、圖片色、按鈕色等。人的活動受著思想、心理活動的支配,網(wǎng)頁界面做好的視覺導(dǎo)向,色彩的絕對不容忽視。例如考慮色彩的情感特征,色彩能夠給人
19、們帶來各種想象、聯(lián)想、印象與會議,使人產(chǎn)生喜怒、哀、樂各種情緒、感情與心境。從色調(diào)的功能上來看其有不同的感情效應(yīng),如黃色調(diào)光明、充滿希望;紅色調(diào),熱烈且刺激;藍(lán)色調(diào),冷靜,崇高與理智。又如:春、夏、秋ᦊ
20、0;冬季分別可以以嫩綠色、翠綠色、金黃色、灰褐色來象征。另外有一些已經(jīng)成為職業(yè)或行業(yè)的標(biāo)志色,如:軍警的橄欖綠、醫(yī)療衛(wèi)生的白色、高科技的藍(lán)色等。 </p><p> 另外還需統(tǒng)一的提示用詞、統(tǒng)一各級界面位置、按鈕也
21、在窗口的相同的位置。如你可以在一個(gè)列表的項(xiàng)目上雙擊后能夠彈出對話框,那么應(yīng)該在任何列表中雙擊都能彈出對話框。還包括圖表的統(tǒng)一、素材的統(tǒng)一等。 </p><p> 3 元素功能性的統(tǒng)一 </p><p> 在網(wǎng)頁界面設(shè)計(jì)中,各種元素所承載的這些功能都必須有相同的操作方法。通過對
22、這些元素的功能性的統(tǒng)一,使用戶在瀏覽起網(wǎng)頁來能夠建立起一種的心智模型,讓他們在使用熟練了一個(gè)網(wǎng)頁界面后,切換到另外一個(gè)網(wǎng)頁界面就能夠很輕松的推測出各種功能,語句理解也不需要費(fèi)神理解。這樣可以給瀏覽用戶統(tǒng)一感覺,不覺得混亂,讓整個(gè)的瀏覽過程變得輕松自然,方便易用。我們主要可以從圖標(biāo)、文字兩個(gè)元素來看。圖形大致可分為具象圖形和抽象圖形兩種類型,具象圖形通
23、過具體的形象來表達(dá)和傳達(dá)事物信息,它的特點(diǎn)是直接與明了,在網(wǎng)頁界面中常見用于傳達(dá)特定與既定的事物。而抽象圖形則用概括的手法升華圖形,這類圖形具有視覺沖擊效果強(qiáng)、容易識別的特點(diǎn),常見用于表達(dá)注意、警告等含義時(shí),通常是把強(qiáng)烈的色彩和簡潔易懂的抽象圖形結(jié)合起來達(dá)到最佳傳達(dá)效果。在網(wǎng)頁界面的設(shè)計(jì)當(dāng)中,我們往往不是做一個(gè)兩個(gè)的界面,而是有幾十個(gè)甚至上百個(gè)的不同
24、層級的界面,在這里我們就必須要把握住圖形功能性表達(dá)統(tǒng)一。但在圖形標(biāo)志的功能性定義中,</p><p> 網(wǎng)頁界面中另外一個(gè)承載功能較多的就是文字元素了。文字除了本身具有的絕對的說明功能表達(dá)功能之外,它還常常在網(wǎng)頁中承載著其他的功能,在界面設(shè)計(jì)中,必須要考慮讓同個(gè)詞語或同個(gè)字、同個(gè)句子所具備的功能是相同的。另外還有比較重要的一
25、點(diǎn)的是必須要把點(diǎn)擊過或正在瀏覽的超鏈接具有與未點(diǎn)擊過和未瀏覽過的超鏈接區(qū)分開來,如是文字鏈接,可考慮不同的字體、字號及顏色等;圖形鏈接可考慮采取不同的圖形或者變?yōu)椴豢捎脿顟B(tài)、添加相關(guān)的提示等,這樣才有助于瀏覽用戶理解整個(gè)的網(wǎng)頁。 </p><p> 最后,設(shè)計(jì)一個(gè)易于識別的網(wǎng)站導(dǎo)航也是做好視覺導(dǎo)向的一個(gè)重點(diǎn)。到底怎么樣的網(wǎng)
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 眾賞文庫僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 視覺體驗(yàn)導(dǎo)向下的網(wǎng)頁界面設(shè)計(jì)研究
- 網(wǎng)頁界面的設(shè)計(jì)規(guī)律研究.pdf
- 網(wǎng)頁界面視覺設(shè)計(jì)藝術(shù)研究.pdf
- 萬惠高爾夫網(wǎng)頁界面視覺設(shè)計(jì)體驗(yàn).pdf
- 交易型網(wǎng)頁界面的編排設(shè)計(jì)研究.pdf
- 基于移動端網(wǎng)頁界面的設(shè)計(jì)與實(shí)現(xiàn).pdf
- 基于視覺信息傳達(dá)的網(wǎng)頁界面設(shè)計(jì).pdf
- 網(wǎng)絡(luò)棋牌游戲界面的視覺設(shè)計(jì)研究.pdf
- 網(wǎng)頁界面設(shè)計(jì)中視覺體驗(yàn)的研究.pdf
- 網(wǎng)頁界面設(shè)計(jì)中信息的有效視覺傳達(dá).pdf
- 游戲界面的視覺流程研究.pdf
- 網(wǎng)上書店課程設(shè)計(jì)-- 網(wǎng)上書店登錄界面的網(wǎng)頁設(shè)計(jì)
- 購物網(wǎng)頁界面的設(shè)計(jì)分析研究_11542.pdf
- 網(wǎng)上書店課程設(shè)計(jì)--網(wǎng)上書店登錄界面的網(wǎng)頁設(shè)計(jì)
- 以目標(biāo)為導(dǎo)向的視覺界面設(shè)計(jì)研究.pdf
- 淺談“鮮逸農(nóng)莊”網(wǎng)頁界面的創(chuàng)新設(shè)計(jì)-畢業(yè)論文
- 淺談“鮮逸農(nóng)莊”網(wǎng)頁界面的創(chuàng)新設(shè)計(jì)-畢業(yè)論文
- 數(shù)碼產(chǎn)品界面的視覺信息傳達(dá)設(shè)計(jì)研究.pdf
- 可視化數(shù)字界面的視覺傳達(dá)設(shè)計(jì)研究.pdf
- 基于視覺體驗(yàn)的網(wǎng)頁界面極簡主義設(shè)計(jì)_12413.pdf
評論
0/150
提交評論