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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、網(wǎng)頁設(shè)計中的視覺元素——動效設(shè)計

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

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

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

（二）起到提示的作用

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

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

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

五、結(jié)語

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

參考文獻：

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

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

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

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

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

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