《【網(wǎng)頁(yè)設(shè)計(jì)論文】視覺(jué)元素的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用》由會(huì)員分享，可在線閱讀，更多相關(guān)《【網(wǎng)頁(yè)設(shè)計(jì)論文】視覺(jué)元素的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用（7頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、【網(wǎng)頁(yè)設(shè)計(jì)論文】視覺(jué)元素的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用
摘要：現(xiàn)今，人類社會(huì)已進(jìn)入了一個(gè)飛速發(fā)展的信息化時(shí)代，互聯(lián)網(wǎng)已滲透到人們生活的各個(gè)方面，正改變著人們傳統(tǒng)的生活方式和生活習(xí)慣。網(wǎng)頁(yè)作為一種新的信息載體，它讓信息的傳遞變得更加快速且豐富多樣，而網(wǎng)頁(yè)中的視覺(jué)元素是互聯(lián)網(wǎng)信息傳遞的重要組成部分，它們除了基本的信息傳遞功能以外，還應(yīng)該給用戶良好的視覺(jué)審美體驗(yàn)。一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該具備三個(gè)標(biāo)準(zhǔn)：功能性、信息傳遞的有效性、審美性。
關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；視覺(jué)元素；信息傳播；用戶體驗(yàn)
互聯(lián)網(wǎng)是繼印刷紙媒、廣播、電視后的第四媒介，它的出現(xiàn)對(duì)人類文明進(jìn)程有著非常大的影響，為我們的學(xué)習(xí)
2、、工作以及生活帶來(lái)了很多的便利。互聯(lián)網(wǎng)的應(yīng)用也促進(jìn)了各類型網(wǎng)站的發(fā)展，要將網(wǎng)站進(jìn)行細(xì)分可分為六種類型：電子商務(wù)類（如天貓、蘇寧易購(gòu)）、搜索引擎門(mén)戶類（如百度，谷歌）、企業(yè)宣傳類（如蘋(píng)果官網(wǎng)）、交流平臺(tái)類（如BBS）、網(wǎng)絡(luò)社區(qū)類（如新浪微博）、大眾媒體類（今日頭條）。
一、網(wǎng)頁(yè)設(shè)計(jì)中的視覺(jué)元素——文字
從歷史發(fā)展來(lái)看，文字的發(fā)明就是為了儲(chǔ)存和傳遞信息，如中國(guó)的甲骨文就是早期的信息書(shū)面儲(chǔ)存的媒介，為信息的儲(chǔ)存提供了規(guī)范化的表現(xiàn)形式，可以說(shuō)，文字的發(fā)明是人類文明的一大里程碑。在現(xiàn)代設(shè)計(jì)中，文字和視覺(jué)傳達(dá)設(shè)計(jì)有著密不可分的關(guān)系。近些年，文字圖形化設(shè)計(jì)成為一大研究熱門(mén)。文
3、字從古至今都是信息傳遞的重要載體，現(xiàn)今也是網(wǎng)頁(yè)設(shè)計(jì)中不可輕視的主體，也是不可缺少的視覺(jué)元素。究其原因，將文字作為主要的視覺(jué)元素有兩大優(yōu)勢(shì)：
（一）從信息的有效傳播方面來(lái)看
用文字來(lái)描述對(duì)象，不易對(duì)信息產(chǎn)生誤解，可以非常準(zhǔn)確與清晰的傳達(dá)信息；
（二）從信息的傳播速度方面來(lái)看
文本類的信息傳輸速度會(huì)比較快，相較于圖片和視頻等來(lái)說(shuō)對(duì)網(wǎng)絡(luò)的要求比較低，使瀏覽更加順暢。在網(wǎng)頁(yè)設(shè)計(jì)中，對(duì)于文字字體的選擇也是一門(mén)科學(xué)，每種字體都有不同的風(fēng)格和情感，字體的選擇對(duì)最后網(wǎng)頁(yè)呈現(xiàn)的整體效果也有著非常大的影響。現(xiàn)在電腦的字庫(kù)給設(shè)計(jì)師提供了非常多的字體選擇
4、，那么不同主題的網(wǎng)站應(yīng)該有不同的選擇思路，比如一個(gè)政府網(wǎng)站和一個(gè)賣母嬰產(chǎn)品的網(wǎng)站就不能選擇同一種字體。圖1是我國(guó)中央人民政府的網(wǎng)站，它的主要文字大部分都選擇了黑體，這種字體能給人嚴(yán)肅、穩(wěn)重、有力的感覺(jué)，識(shí)別性強(qiáng)，是政府網(wǎng)站的合適之選。圖2中的蜜芽是一個(gè)賣母嬰產(chǎn)品的網(wǎng)站，它的主要文字就選擇了比較圓潤(rùn)的可愛(ài)的字體，甚至做了一些后期的處理，能給人一種柔和、輕松和親近的感覺(jué)，起到了很好的氣氛烘托作用。對(duì)于那些信息量很大的網(wǎng)站來(lái)說(shuō)，文本的內(nèi)容會(huì)在網(wǎng)頁(yè)中占據(jù)較大的面積，這個(gè)時(shí)候文字的選擇和表現(xiàn)就顯得尤為重要了。從用戶的角度出發(fā)，在網(wǎng)頁(yè)設(shè)計(jì)選用文字元素時(shí)，不只要考慮到網(wǎng)頁(yè)的整體視覺(jué)效果，還要考慮用戶在瀏覽網(wǎng)
5、頁(yè)時(shí)的情境和感受。大量實(shí)踐證明，用戶面對(duì)電腦屏幕上大面積的文字，很容易造成視覺(jué)疲勞，從而降低閱讀興趣。為了解決這種文字單一的問(wèn)題，有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)將主視覺(jué)的文字進(jìn)行再設(shè)計(jì)，在滿足文字功能性的前提下，提高它的趣味性和審美性，來(lái)增強(qiáng)用戶的視覺(jué)體驗(yàn)。還有一種需要注意的情況，設(shè)計(jì)師已經(jīng)對(duì)文字進(jìn)行了精心的選擇或設(shè)計(jì)，但很大一部分用戶的電腦上只裝了系統(tǒng)自帶的字體，設(shè)計(jì)師設(shè)計(jì)的特殊字體還是無(wú)法顯示預(yù)期的效果，這也是網(wǎng)頁(yè)設(shè)計(jì)中字體應(yīng)用的一大局限性。針對(duì)這種情況有一個(gè)好的解決辦法，可以把這些特殊的字體以圖片的形式輸出，再上傳到網(wǎng)頁(yè)上，以達(dá)到良好的視覺(jué)展示效果。對(duì)于文字占比較大的網(wǎng)站，除了字體以外，字符的大小、字
6、間距、行間距也是需要重點(diǎn)注意的，這些對(duì)于網(wǎng)頁(yè)的最終呈現(xiàn)效果有著非常大的影響。
二、網(wǎng)頁(yè)設(shè)計(jì)中的視覺(jué)元素——圖形
21世紀(jì)，人類已經(jīng)進(jìn)入了“讀圖時(shí)代”，隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，獲得信息已經(jīng)不再是一件難事，在快節(jié)奏的生活中面對(duì)大量的信息，人們更希望能夠快速直觀地接收到自己想要的信息，然后進(jìn)行轉(zhuǎn)化。說(shuō)到圖形，它也具有信息傳遞的作用，在網(wǎng)頁(yè)設(shè)計(jì)中，圖形作為一種重要的視覺(jué)元素有其獨(dú)特的魅力。它是除文字以外最早被運(yùn)用到網(wǎng)頁(yè)設(shè)計(jì)中的視覺(jué)元素，與同等面積的文字相比，圖形有更強(qiáng)的趣味性，容易吸引到用戶的注意，它給用戶的沖擊力和視覺(jué)體驗(yàn)是要優(yōu)于文字的。但是，文字和圖形又有著相輔相
7、成的關(guān)系，文字能對(duì)圖形的涵義進(jìn)行解說(shuō)，反過(guò)來(lái)圖形是對(duì)文字的一種更直觀的表達(dá)，對(duì)文字起到一定的輔助作用，使用戶在瀏覽網(wǎng)頁(yè)的時(shí)候變得更加輕松。比如，在一個(gè)購(gòu)物網(wǎng)站上，用戶需要買(mǎi)一雙運(yùn)動(dòng)鞋，即使用文字描述的再詳細(xì)，也還不如直接給用戶看一張商品實(shí)物圖或上腳的效果圖來(lái)得實(shí)在，更能讓用戶接受，并得到更好的體驗(yàn)。另外，圖形還能起到美化網(wǎng)頁(yè)頁(yè)面的作用。人類對(duì)美的追求是永不停歇的，有很多人都說(shuō)，設(shè)計(jì)師是一個(gè)與丑陋做斗爭(zhēng)的戰(zhàn)士。這句話說(shuō)的也不無(wú)道理。一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)除了有完善的功能規(guī)劃、嚴(yán)謹(jǐn)?shù)男畔?gòu)架、流暢的交互設(shè)計(jì)以外，也一定要有好的視覺(jué)表達(dá)，因?yàn)橐曈X(jué)是表現(xiàn)層，會(huì)最先被用戶所感知到。圖形的運(yùn)用對(duì)于提高網(wǎng)頁(yè)的審
8、美性有很大的幫助，甚至一張好的圖形素材就是一個(gè)好的設(shè)計(jì)。當(dāng)然，對(duì)網(wǎng)頁(yè)中圖形的選擇一定要注意，不僅需要與主題相符和，也需要考慮用戶的審美心理，使用戶在瀏覽網(wǎng)頁(yè)的過(guò)程中感受到圖形這一視覺(jué)元素帶來(lái)的視覺(jué)沖擊力和藝術(shù)美感。很多人都有這樣的經(jīng)歷，平時(shí)在看書(shū)的時(shí)候，如果是滿版的文字，你會(huì)看得很累，而且在不經(jīng)意間失去閱讀的興趣，而對(duì)于那些圖文搭配的書(shū)，看起來(lái)給人的感覺(jué)就輕松多了。同理，在網(wǎng)頁(yè)設(shè)計(jì)中這種現(xiàn)象也是一樣存在的，所以將文字與圖形元素相互搭配，能夠構(gòu)成更生動(dòng)靈活的網(wǎng)頁(yè)，同時(shí)創(chuàng)造出舒適的視覺(jué)環(huán)境。
三、網(wǎng)頁(yè)設(shè)計(jì)中的視覺(jué)元素——色彩
在網(wǎng)頁(yè)設(shè)計(jì)中，色彩可以作為語(yǔ)言和情感傳達(dá)
9、的使者，它能與內(nèi)容有機(jī)地結(jié)合，更加突出主題。人們看到不同的顏色會(huì)有不同的心理感受，在網(wǎng)頁(yè)設(shè)計(jì)中，色彩給用戶帶來(lái)的情感體驗(yàn)是至關(guān)重要的，所以，網(wǎng)站的用色也是網(wǎng)頁(yè)設(shè)計(jì)師需要用心思考的問(wèn)題。研究表明，在網(wǎng)頁(yè)設(shè)計(jì)中，合理的色彩搭配能劃分信息的主次關(guān)系，將信息進(jìn)行分類，使用戶瀏覽時(shí)更加輕松與高效。網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)中的色彩應(yīng)用有非常多的相似性，都遵循著色彩的基本理論，比如色相、明度、純度、冷暖等。它們的不同之處是，網(wǎng)頁(yè)設(shè)計(jì)的作品是不需要印刷的，以RGB的色彩模式為主，可以應(yīng)用非常豐富的色彩。但是要特別注意到的是，網(wǎng)頁(yè)通常是在電腦或移動(dòng)終端上使用的，一般離用戶眼睛的距離都比較近，盡量不要使用大面積的對(duì)比色
10、和高飽和度的顏色，這樣容易讓用戶產(chǎn)生躁動(dòng)和視覺(jué)疲勞。
（一）網(wǎng)頁(yè)的色彩選擇
首先可以考慮到企業(yè)的標(biāo)準(zhǔn)色，將標(biāo)準(zhǔn)色當(dāng)主色來(lái)用，再搭配其他輔助色。經(jīng)過(guò)很多實(shí)驗(yàn)證明，一個(gè)網(wǎng)頁(yè)中的顏色盡量不要超過(guò)三種，不然就會(huì)顯得亂了。設(shè)計(jì)師也可以通過(guò)網(wǎng)站的主題和特色進(jìn)行顏色的選擇，比如與科技相關(guān)的公司會(huì)偏好于使用藍(lán)色，它能給人一種睿智、崇高、值得信賴的感覺(jué)，并用此表明企業(yè)的行業(yè)屬性，休閑娛樂(lè)行業(yè)的網(wǎng)站就很喜歡用對(duì)比色，而且飽和度一般都偏高，給人一種個(gè)性、大膽、放松的的感覺(jué)，如圖4的優(yōu)酷官網(wǎng)。而在餐飲行業(yè)中，暖色被選用的非常多，比如說(shuō)紅色和橙色，肯德基大家應(yīng)該都不陌生，它的主色調(diào)就是紅
11、色，它能給人一種愉快、熱情、友好的感覺(jué)，同時(shí)紅色在一定程度上能刺激人的神經(jīng)系統(tǒng)，使人產(chǎn)生饑餓的感覺(jué)或者沖動(dòng)的熱情，使顧客的購(gòu)買(mǎi)率增加。但是由于民族、信仰、文化、性別、年齡等的不同，設(shè)計(jì)師在選擇色彩的時(shí)候也要將這些因素考慮進(jìn)來(lái)，使用符合受眾人群審美心理的色彩。另外，對(duì)于那些內(nèi)容多、層級(jí)豐富的網(wǎng)頁(yè)，設(shè)計(jì)師可以利用色彩對(duì)信息進(jìn)行區(qū)域劃分，這樣可以讓網(wǎng)頁(yè)保持統(tǒng)一的風(fēng)格，也能方便用戶閱讀?？偟膩?lái)說(shuō)，在網(wǎng)頁(yè)設(shè)計(jì)進(jìn)行色彩選擇的時(shí)候，要注意以下兩個(gè)要點(diǎn)：1.利用色彩來(lái)突顯出重要信息，使用戶可以把控網(wǎng)頁(yè)中的重點(diǎn)；2.美化網(wǎng)頁(yè)頁(yè)面，給用戶以舒適感。在選色時(shí)，要以簡(jiǎn)潔為主，處理好色彩與各個(gè)視覺(jué)元素之間的關(guān)系，注意色
12、彩的飽和度、明度、對(duì)比度等，在對(duì)比中求和諧，緊貼網(wǎng)站內(nèi)涵進(jìn)行設(shè)計(jì)，確保網(wǎng)站主題風(fēng)格的一致性。
四、網(wǎng)頁(yè)設(shè)計(jì)中的視覺(jué)元素——?jiǎng)有гO(shè)計(jì)
人類是視覺(jué)動(dòng)物，我們的眼睛天生對(duì)移動(dòng)的物體會(huì)比較敏感?，F(xiàn)今，我們可以看到很多網(wǎng)站中加入了動(dòng)效設(shè)計(jì)，越來(lái)越多的設(shè)計(jì)團(tuán)隊(duì)開(kāi)始意識(shí)到動(dòng)效設(shè)計(jì)在網(wǎng)頁(yè)中的重要性了，那么動(dòng)效設(shè)計(jì)在網(wǎng)頁(yè)中有什么作用呢？
（一）為用戶的操作提供視覺(jué)反饋
良好的交互設(shè)計(jì)應(yīng)該在每一個(gè)操作上都給予用戶相應(yīng)的反饋，這些反饋能使用戶感覺(jué)到自己與網(wǎng)頁(yè)界面上的元素進(jìn)行了真實(shí)的互動(dòng)，而動(dòng)效設(shè)計(jì)能很直觀地演示這種互動(dòng)。比如：當(dāng)用戶的一個(gè)操作沒(méi)有成功的
13、時(shí)候，可以通過(guò)動(dòng)效設(shè)計(jì)給用戶一個(gè)簡(jiǎn)潔易懂的反饋。生活中我們常常會(huì)遇到這樣的情況，登陸賬號(hào)時(shí)當(dāng)密碼輸入有誤的時(shí)候，我們常常會(huì)見(jiàn)到左右搖晃的動(dòng)態(tài)效果，而這種動(dòng)效很容易讓我們聯(lián)想到日常生活中擺手和搖頭的動(dòng)作，表示“NO”的意思，很直觀明了，這些小動(dòng)效的設(shè)計(jì)的使用，制造了一個(gè)很好的用戶體驗(yàn)效果。
（二）起到提示的作用
在網(wǎng)頁(yè)設(shè)計(jì)中為用戶當(dāng)前所處的狀態(tài)提供一個(gè)視覺(jué)引導(dǎo)是很重要的，我們應(yīng)該讓用戶在瀏覽網(wǎng)頁(yè)的時(shí)候，時(shí)刻知道系統(tǒng)當(dāng)前處于一種什么樣的狀態(tài)，而不是讓用戶茫然地去猜。例如我們?cè)谙螺d一份文件，通常都有一個(gè)動(dòng)態(tài)的加載效果反饋給用戶系統(tǒng)正在下載，并且還伴有下載進(jìn)度，通過(guò)這個(gè)
14、動(dòng)效設(shè)計(jì)用戶可以對(duì)下載完成的時(shí)間有一個(gè)預(yù)估，這也是動(dòng)效設(shè)計(jì)給用戶帶來(lái)的良好體驗(yàn)。
（三）增加網(wǎng)頁(yè)界面的活力，吸引用戶的注意力
在網(wǎng)頁(yè)界面中運(yùn)用一些動(dòng)態(tài)的效果，相較于靜態(tài)元素而言，更容易引起用戶的注意力。而且有些動(dòng)態(tài)效果還會(huì)給用戶一些預(yù)期之外的驚喜，比如在加載頁(yè)面的時(shí)候，受網(wǎng)速等因素的影響，常常需要一些等候的時(shí)間，這個(gè)時(shí)候，我們就可以在這個(gè)等候的間隙加入一些有趣的、炫酷的、可愛(ài)的小的動(dòng)效設(shè)計(jì)，讓等待變得可視化，那么用戶在等待的時(shí)候就不會(huì)那么無(wú)聊了，這樣的設(shè)計(jì)會(huì)使用戶倍感親切，并感受到產(chǎn)品的趣味性和生命力，從而產(chǎn)生對(duì)產(chǎn)品的認(rèn)同感。
五、結(jié)語(yǔ)
15、
一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該具備三個(gè)標(biāo)準(zhǔn)：功能性、信息傳遞的有效性、審美性。本文著重探究視覺(jué)元素在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用，對(duì)當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)中的主要視覺(jué)元素文字、圖形、色彩及動(dòng)效設(shè)計(jì)的應(yīng)用表現(xiàn)、特征、作用與意義等進(jìn)行了深入的研究，并結(jié)合相應(yīng)的案例進(jìn)行論述，為當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)提供了一些建議和理論指導(dǎo)。在網(wǎng)頁(yè)設(shè)計(jì)的實(shí)踐操作中將這些視覺(jué)元素合理靈活地運(yùn)用，能提高網(wǎng)頁(yè)的易用性和美觀性，使用戶在瀏覽網(wǎng)頁(yè)的時(shí)候有更好的體驗(yàn)。時(shí)至今日，網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)由最開(kāi)始簡(jiǎn)單的信息呈現(xiàn)發(fā)展到后來(lái)的圖形化風(fēng)格再到抽象化表現(xiàn)，進(jìn)而演變成今天的信息可視化風(fēng)格，這和科技的發(fā)展、人們對(duì)功能的需求以及審美趣味的變化有著密切的關(guān)系，所以網(wǎng)頁(yè)設(shè)計(jì)也會(huì)
16、帶著時(shí)代的烙印。在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候我們要利用這些視覺(jué)元素表現(xiàn)時(shí)代的文化現(xiàn)象和設(shè)計(jì)潮流，融入受眾的需求和審美特點(diǎn)，這樣做出來(lái)的網(wǎng)頁(yè)設(shè)計(jì)作品才是用戶歡迎的和喜愛(ài)的，而這些也正是網(wǎng)頁(yè)設(shè)計(jì)師們所要追求的。
參考文獻(xiàn)：
[1]顧紅霞.基于視覺(jué)傳達(dá)的網(wǎng)頁(yè)界面藝術(shù)設(shè)計(jì)研究[D].天津：天津美術(shù)學(xué)院，2014.
[2]董海斌.平面視覺(jué)元素在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用研究[D].西安：西安理工大學(xué)，2008.
[3]霍俊燕.視覺(jué)效應(yīng)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].湖南大眾傳媒職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2016(1):58-60.
[4]李嬋.網(wǎng)頁(yè)界面設(shè)計(jì)中信息的有效視覺(jué)傳達(dá)[D].石家莊：河北師范大學(xué)，2014.
[5]劉利華.網(wǎng)頁(yè)設(shè)計(jì)中視覺(jué)元素的運(yùn)用研究[D].長(zhǎng)沙：湖南師范大學(xué)，2009.
作者:曾坤 單位:廣東工業(yè)大學(xué)藝術(shù)與設(shè)計(jì)學(xué)院
【網(wǎng)頁(yè)設(shè)計(jì)論文】視覺(jué)元素的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用
