視覺元素的網(wǎng)頁設(shè)計(jì)應(yīng)用

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了視覺元素的網(wǎng)頁設(shè)計(jì)應(yīng)用范文，希望能給你帶來靈感和參考，敬請閱讀。

摘要：現(xiàn)今，人類社會(huì)已進(jìn)入了一個(gè)飛速發(fā)展的信息化時(shí)代，互聯(lián)網(wǎng)已滲透到人們生活的各個(gè)方面，正改變著人們傳統(tǒng)的生活方式和生活習(xí)慣。網(wǎng)頁作為一種新的信息載體，它讓信息的傳遞變得更加快速且豐富多樣，而網(wǎng)頁中的視覺元素是互聯(lián)網(wǎng)信息傳遞的重要組成部分，它們除了基本的信息傳遞功能以外，還應(yīng)該給用戶良好的視覺審美體驗(yàn)。一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)應(yīng)該具備三個(gè)標(biāo)準(zhǔn)：功能性、信息傳遞的有效性、審美性。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；視覺元素；信息傳播；用戶體驗(yàn)

互聯(lián)網(wǎng)是繼印刷紙媒、廣播、電視后的第四媒介，它的出現(xiàn)對人類文明進(jìn)程有著非常大的影響，為我們的學(xué)習(xí)、工作以及生活帶來了很多的便利?；ヂ?lián)網(wǎng)的應(yīng)用也促進(jìn)了各類型網(wǎng)站的發(fā)展，要將網(wǎng)站進(jìn)行細(xì)分可分為六種類型：電子商務(wù)類（如天貓、蘇寧易購）、搜索引擎門戶類（如百度，谷歌）、企業(yè)宣傳類（如蘋果官網(wǎng)）、交流平臺類（如BBS）、網(wǎng)絡(luò)社區(qū)類（如新浪微博）、大眾媒體類（今日頭條）。

一、網(wǎng)頁設(shè)計(jì)中的視覺元素——文字

從歷史發(fā)展來看，文字的發(fā)明就是為了儲存和傳遞信息，如中國的甲骨文就是早期的信息書面儲存的媒介，為信息的儲存提供了規(guī)范化的表現(xiàn)形式，可以說，文字的發(fā)明是人類文明的一大里程碑。在現(xiàn)代設(shè)計(jì)中，文字和視覺傳達(dá)設(shè)計(jì)有著密不可分的關(guān)系。近些年，文字圖形化設(shè)計(jì)成為一大研究熱門。文字從古至今都是信息傳遞的重要載體，現(xiàn)今也是網(wǎng)頁設(shè)計(jì)中不可輕視的主體，也是不可缺少的視覺元素。究其原因，將文字作為主要的視覺元素有兩大優(yōu)勢：

（一）從信息的有效傳播方面來看

用文字來描述對象，不易對信息產(chǎn)生誤解，可以非常準(zhǔn)確與清晰的傳達(dá)信息；

（二）從信息的傳播速度方面來看

文本類的信息傳輸速度會(huì)比較快，相較于圖片和視頻等來說對網(wǎng)絡(luò)的要求比較低，使瀏覽更加順暢。在網(wǎng)頁設(shè)計(jì)中，對于文字字體的選擇也是一門科學(xué)，每種字體都有不同的風(fēng)格和情感，字體的選擇對最后網(wǎng)頁呈現(xiàn)的整體效果也有著非常大的影響?，F(xiàn)在電腦的字庫給設(shè)計(jì)師提供了非常多的字體選擇，那么不同主題的網(wǎng)站應(yīng)該有不同的選擇思路，比如一個(gè)政府網(wǎng)站和一個(gè)賣母嬰產(chǎn)品的網(wǎng)站就不能選擇同一種字體。圖1是我國中央人民政府的網(wǎng)站，它的主要文字大部分都選擇了黑體，這種字體能給人嚴(yán)肅、穩(wěn)重、有力的感覺，識別性強(qiáng)，是政府網(wǎng)站的合適之選。圖2中的蜜芽是一個(gè)賣母嬰產(chǎn)品的網(wǎng)站，它的主要文字就選擇了比較圓潤的可愛的字體，甚至做了一些后期的處理，能給人一種柔和、輕松和親近的感覺，起到了很好的氣氛烘托作用。對于那些信息量很大的網(wǎng)站來說，文本的內(nèi)容會(huì)在網(wǎng)頁中占據(jù)較大的面積，這個(gè)時(shí)候文字的選擇和表現(xiàn)就顯得尤為重要了。從用戶的角度出發(fā)，在網(wǎng)頁設(shè)計(jì)選用文字元素時(shí)，不只要考慮到網(wǎng)頁的整體視覺效果，還要考慮用戶在瀏覽網(wǎng)頁時(shí)的情境和感受。大量實(shí)踐證明，用戶面對電腦屏幕上大面積的文字，很容易造成視覺疲勞，從而降低閱讀興趣。為了解決這種文字單一的問題，有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)將主視覺的文字進(jìn)行再設(shè)計(jì)，在滿足文字功能性的前提下，提高它的趣味性和審美性，來增強(qiáng)用戶的視覺體驗(yàn)。還有一種需要注意的情況，設(shè)計(jì)師已經(jīng)對文字進(jìn)行了精心的選擇或設(shè)計(jì)，但很大一部分用戶的電腦上只裝了系統(tǒng)自帶的字體，設(shè)計(jì)師設(shè)計(jì)的特殊字體還是無法顯示預(yù)期的效果，這也是網(wǎng)頁設(shè)計(jì)中字體應(yīng)用的一大局限性。針對這種情況有一個(gè)好的解決辦法，可以把這些特殊的字體以圖片的形式輸出，再上傳到網(wǎng)頁上，以達(dá)到良好的視覺展示效果。對于文字占比較大的網(wǎng)站，除了字體以外，字符的大小、字間距、行間距也是需要重點(diǎn)注意的，這些對于網(wǎng)頁的最終呈現(xiàn)效果有著非常大的影響。

二、網(wǎng)頁設(shè)計(jì)中的視覺元素——圖形

21世紀(jì)，人類已經(jīng)進(jìn)入了“讀圖時(shí)代”，隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，獲得信息已經(jīng)不再是一件難事，在快節(jié)奏的生活中面對大量的信息，人們更希望能夠快速直觀地接收到自己想要的信息，然后進(jìn)行轉(zhuǎn)化。說到圖形，它也具有信息傳遞的作用，在網(wǎng)頁設(shè)計(jì)中，圖形作為一種重要的視覺元素有其獨(dú)特的魅力。它是除文字以外最早被運(yùn)用到網(wǎng)頁設(shè)計(jì)中的視覺元素，與同等面積的文字相比，圖形有更強(qiáng)的趣味性，容易吸引到用戶的注意，它給用戶的沖擊力和視覺體驗(yàn)是要優(yōu)于文字的。但是，文字和圖形又有著相輔相成的關(guān)系，文字能對圖形的涵義進(jìn)行解說，反過來圖形是對文字的一種更直觀的表達(dá)，對文字起到一定的輔助作用，使用戶在瀏覽網(wǎng)頁的時(shí)候變得更加輕松。比如，在一個(gè)購物網(wǎng)站上，用戶需要買一雙運(yùn)動(dòng)鞋，即使用文字描述的再詳細(xì)，也還不如直接給用戶看一張商品實(shí)物圖或上腳的效果圖來得實(shí)在，更能讓用戶接受，并得到更好的體驗(yàn)。另外，圖形還能起到美化網(wǎng)頁頁面的作用。人類對美的追求是永不停歇的，有很多人都說，設(shè)計(jì)師是一個(gè)與丑陋做斗爭的戰(zhàn)士。這句話說的也不無道理。一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)除了有完善的功能規(guī)劃、嚴(yán)謹(jǐn)?shù)男畔?gòu)架、流暢的交互設(shè)計(jì)以外，也一定要有好的視覺表達(dá)，因?yàn)橐曈X是表現(xiàn)層，會(huì)最先被用戶所感知到。圖形的運(yùn)用對于提高網(wǎng)頁的審美性有很大的幫助，甚至一張好的圖形素材就是一個(gè)好的設(shè)計(jì)。當(dāng)然，對網(wǎng)頁中圖形的選擇一定要注意，不僅需要與主題相符和，也需要考慮用戶的審美心理，使用戶在瀏覽網(wǎng)頁的過程中感受到圖形這一視覺元素帶來的視覺沖擊力和藝術(shù)美感。很多人都有這樣的經(jīng)歷，平時(shí)在看書的時(shí)候，如果是滿版的文字，你會(huì)看得很累，而且在不經(jīng)意間失去閱讀的興趣，而對于那些圖文搭配的書，看起來給人的感覺就輕松多了。同理，在網(wǎng)頁設(shè)計(jì)中這種現(xiàn)象也是一樣存在的，所以將文字與圖形元素相互搭配，能夠構(gòu)成更生動(dòng)靈活的網(wǎng)頁，同時(shí)創(chuàng)造出舒適的視覺環(huán)境。

三、網(wǎng)頁設(shè)計(jì)中的視覺元素——色彩

在網(wǎng)頁設(shè)計(jì)中，色彩可以作為語言和情感傳達(dá)的使者，它能與內(nèi)容有機(jī)地結(jié)合，更加突出主題。人們看到不同的顏色會(huì)有不同的心理感受，在網(wǎng)頁設(shè)計(jì)中，色彩給用戶帶來的情感體驗(yàn)是至關(guān)重要的，所以，網(wǎng)站的用色也是網(wǎng)頁設(shè)計(jì)師需要用心思考的問題。研究表明，在網(wǎng)頁設(shè)計(jì)中，合理的色彩搭配能劃分信息的主次關(guān)系，將信息進(jìn)行分類，使用戶瀏覽時(shí)更加輕松與高效。網(wǎng)頁設(shè)計(jì)與平面設(shè)計(jì)中的色彩應(yīng)用有非常多的相似性，都遵循著色彩的基本理論，比如色相、明度、純度、冷暖等。它們的不同之處是，網(wǎng)頁設(shè)計(jì)的作品是不需要印刷的，以RGB的色彩模式為主，可以應(yīng)用非常豐富的色彩。但是要特別注意到的是，網(wǎng)頁通常是在電腦或移動(dòng)終端上使用的，一般離用戶眼睛的距離都比較近，盡量不要使用大面積的對比色和高飽和度的顏色，這樣容易讓用戶產(chǎn)生躁動(dòng)和視覺疲勞。

（一）網(wǎng)頁的色彩選擇

首先可以考慮到企業(yè)的標(biāo)準(zhǔn)色，將標(biāo)準(zhǔn)色當(dāng)主色來用，再搭配其他輔助色。經(jīng)過很多實(shí)驗(yàn)證明，一個(gè)網(wǎng)頁中的顏色盡量不要超過三種，不然就會(huì)顯得亂了。設(shè)計(jì)師也可以通過網(wǎng)站的主題和特色進(jìn)行顏色的選擇，比如與科技相關(guān)的公司會(huì)偏好于使用藍(lán)色，它能給人一種睿智、崇高、值得信賴的感覺，并用此表明企業(yè)的行業(yè)屬性，休閑娛樂行業(yè)的網(wǎng)站就很喜歡用對比色，而且飽和度一般都偏高，給人一種個(gè)性、大膽、放松的的感覺，如圖4的優(yōu)酷官網(wǎng)。而在餐飲行業(yè)中，暖色被選用的非常多，比如說紅色和橙色，肯德基大家應(yīng)該都不陌生，它的主色調(diào)就是紅色，它能給人一種愉快、熱情、友好的感覺，同時(shí)紅色在一定程度上能刺激人的神經(jīng)系統(tǒng)，使人產(chǎn)生饑餓的感覺或者沖動(dòng)的熱情，使顧客的購買率增加。但是由于民族、信仰、文化、性別、年齡等的不同，設(shè)計(jì)師在選擇色彩的時(shí)候也要將這些因素考慮進(jìn)來，使用符合受眾人群審美心理的色彩。另外，對于那些內(nèi)容多、層級豐富的網(wǎng)頁，設(shè)計(jì)師可以利用色彩對信息進(jìn)行區(qū)域劃分，這樣可以讓網(wǎng)頁保持統(tǒng)一的風(fēng)格，也能方便用戶閱讀。總的來說，在網(wǎng)頁設(shè)計(jì)進(jìn)行色彩選擇的時(shí)候，要注意以下兩個(gè)要點(diǎn)：1.利用色彩來突顯出重要信息，使用戶可以把控網(wǎng)頁中的重點(diǎn)；2.美化網(wǎng)頁頁面，給用戶以舒適感。在選色時(shí)，要以簡潔為主，處理好色彩與各個(gè)視覺元素之間的關(guān)系，注意色彩的飽和度、明度、對比度等，在對比中求和諧，緊貼網(wǎng)站內(nèi)涵進(jìn)行設(shè)計(jì)，確保網(wǎng)站主題風(fēng)格的一致性。

四、網(wǎng)頁設(shè)計(jì)中的視覺元素——?jiǎng)有гO(shè)計(jì)

人類是視覺動(dòng)物，我們的眼睛天生對移動(dòng)的物體會(huì)比較敏感?，F(xiàn)今，我們可以看到很多網(wǎng)站中加入了動(dòng)效設(shè)計(jì)，越來越多的設(shè)計(jì)團(tuán)隊(duì)開始意識到動(dòng)效設(shè)計(jì)在網(wǎng)頁中的重要性了，那么動(dòng)效設(shè)計(jì)在網(wǎng)頁中有什么作用呢？

（一）為用戶的操作提供視覺反饋

良好的交互設(shè)計(jì)應(yīng)該在每一個(gè)操作上都給予用戶相應(yīng)的反饋，這些反饋能使用戶感覺到自己與網(wǎng)頁界面上的元素進(jìn)行了真實(shí)的互動(dòng)，而動(dòng)效設(shè)計(jì)能很直觀地演示這種互動(dòng)。比如：當(dāng)用戶的一個(gè)操作沒有成功的時(shí)候，可以通過動(dòng)效設(shè)計(jì)給用戶一個(gè)簡潔易懂的反饋。生活中我們常常會(huì)遇到這樣的情況，登陸賬號時(shí)當(dāng)密碼輸入有誤的時(shí)候，我們常常會(huì)見到左右搖晃的動(dòng)態(tài)效果，而這種動(dòng)效很容易讓我們聯(lián)想到日常生活中擺手和搖頭的動(dòng)作，表示“NO”的意思，很直觀明了，這些小動(dòng)效的設(shè)計(jì)的使用，制造了一個(gè)很好的用戶體驗(yàn)效果。

（二）起到提示的作用

在網(wǎng)頁設(shè)計(jì)中為用戶當(dāng)前所處的狀態(tài)提供一個(gè)視覺引導(dǎo)是很重要的，我們應(yīng)該讓用戶在瀏覽網(wǎng)頁的時(shí)候，時(shí)刻知道系統(tǒng)當(dāng)前處于一種什么樣的狀態(tài)，而不是讓用戶茫然地去猜。例如我們在下載一份文件，通常都有一個(gè)動(dòng)態(tài)的加載效果反饋給用戶系統(tǒng)正在下載，并且還伴有下載進(jìn)度，通過這個(gè)動(dòng)效設(shè)計(jì)用戶可以對下載完成的時(shí)間有一個(gè)預(yù)估，這也是動(dòng)效設(shè)計(jì)給用戶帶來的良好體驗(yàn)。

（三）增加網(wǎng)頁界面的活力，吸引用戶的注意力

在網(wǎng)頁界面中運(yùn)用一些動(dòng)態(tài)的效果，相較于靜態(tài)元素而言，更容易引起用戶的注意力。而且有些動(dòng)態(tài)效果還會(huì)給用戶一些預(yù)期之外的驚喜，比如在加載頁面的時(shí)候，受網(wǎng)速等因素的影響，常常需要一些等候的時(shí)間，這個(gè)時(shí)候，我們就可以在這個(gè)等候的間隙加入一些有趣的、炫酷的、可愛的小的動(dòng)效設(shè)計(jì)，讓等待變得可視化，那么用戶在等待的時(shí)候就不會(huì)那么無聊了，這樣的設(shè)計(jì)會(huì)使用戶倍感親切，并感受到產(chǎn)品的趣味性和生命力，從而產(chǎn)生對產(chǎn)品的認(rèn)同感。

五、結(jié)語

一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)應(yīng)該具備三個(gè)標(biāo)準(zhǔn)：功能性、信息傳遞的有效性、審美性。本文著重探究視覺元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用，對當(dāng)今網(wǎng)頁設(shè)計(jì)中的主要視覺元素文字、圖形、色彩及動(dòng)效設(shè)計(jì)的應(yīng)用表現(xiàn)、特征、作用與意義等進(jìn)行了深入的研究，并結(jié)合相應(yīng)的案例進(jìn)行論述，為當(dāng)前網(wǎng)頁設(shè)計(jì)提供了一些建議和理論指導(dǎo)。在網(wǎng)頁設(shè)計(jì)的實(shí)踐操作中將這些視覺元素合理靈活地運(yùn)用，能提高網(wǎng)頁的易用性和美觀性，使用戶在瀏覽網(wǎng)頁的時(shí)候有更好的體驗(yàn)。時(shí)至今日，網(wǎng)頁設(shè)計(jì)已經(jīng)由最開始簡單的信息呈現(xiàn)發(fā)展到后來的圖形化風(fēng)格再到抽象化表現(xiàn)，進(jìn)而演變成今天的信息可視化風(fēng)格，這和科技的發(fā)展、人們對功能的需求以及審美趣味的變化有著密切的關(guān)系，所以網(wǎng)頁設(shè)計(jì)也會(huì)帶著時(shí)代的烙印。在進(jìn)行網(wǎng)頁設(shè)計(jì)的時(shí)候我們要利用這些視覺元素表現(xiàn)時(shí)代的文化現(xiàn)象和設(shè)計(jì)潮流，融入受眾的需求和審美特點(diǎn)，這樣做出來的網(wǎng)頁設(shè)計(jì)作品才是用戶歡迎的和喜愛的，而這些也正是網(wǎng)頁設(shè)計(jì)師們所要追求的。

參考文獻(xiàn)：

[1]顧紅霞.基于視覺傳達(dá)的網(wǎng)頁界面藝術(shù)設(shè)計(jì)研究[D].天津：天津美術(shù)學(xué)院，2014.

[2]董海斌.平面視覺元素在網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究[D].西安：西安理工大學(xué)，2008.

[3]霍俊燕.視覺效應(yīng)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].湖南大眾傳媒職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2016(1):58-60.

[4]李嬋.網(wǎng)頁界面設(shè)計(jì)中信息的有效視覺傳達(dá)[D].石家莊：河北師范大學(xué)，2014.

[5]劉利華.網(wǎng)頁設(shè)計(jì)中視覺元素的運(yùn)用研究[D].長沙：湖南師范大學(xué)，2009.

作者:曾坤 單位:廣東工業(yè)大學(xué)藝術(shù)與設(shè)計(jì)學(xué)院