網頁設計中平面視覺元素的應用

摘 要：網頁設計作為新的視覺語言，已經成為信息交流中極具影響力的新興媒體，它綜合了平面設計中文字、圖形和色彩等平面視覺元素，豐富了我們的信息交流方式，本文以網頁設計中平面視覺元素的應用為主線，探討了萬維網的發展，網頁的構成要素，闡述了網頁設計中平面視覺元素對網頁整體視覺效果的影響。

關鍵字：文字；圖形；色彩；

緒論

進入新的世紀以來，由于互聯網絡的迅速發展，使得信息傳播業面臨深刻的革命。萬維網絡作為一種全新的傳媒，具有價廉、迅速、及時、互動性好、傳播面廣的特點，為視覺傳達設計的推廣傳播提供了良好的條件；基于萬維網絡傳播的視覺傳達設計、又會受到萬維網技術的限制。新媒體、新工具的發明，對于設計者來說，有著十分重要意義。

眾所周知，互聯網的最基本單元就是網頁。在我國，互聯網的迅速發展，帶來網站的成倍增長，但網頁設計的質量卻讓人咋舌。除一些大型的專業功能性網站在排版的設計上考究外，其它小型網站很少能見到設計考究、有視覺沖擊力的網站了。

網頁設計是通過將各組網頁組成要素排列編輯后，來進行信息的有效表達。網頁中的最基本構成元素，成為了如何打造精細網站的關鍵細節。網頁設計的組成要素包括圖片、信息導航、圖片、標志、色彩、文字、信息正文、廣告、版權等內容。其主要內容有設計和編排文字；圖片的設計和色彩運用。

1、文字的編排

中國運用特有的漢字來表達信息，也成為網頁設計的主要組成部分，在網站中設計，漢字占據了很大的部分，漢字在形式上好與壞的表現，對網站設計的視覺質量來說起到了不可忽視的作用。然而要想達到漢字在網頁中表達的有效性，則需要對文字視覺運用的整體效果進行研究，把不必要的裝飾去掉，使人易讀。

網站漢字的編排和設計，要從網站的信息內容的性質與特點出發，其設計風格要與內容相符，不可脫節，更不能相對立。如政府網站漢字具有嚴肅大氣的特質，突出了漢字被稱為方塊字的特點、有序、簡潔、大氣；而有關于歷史文化、教育方面的網站，字體設計具有優美清新的格調或端莊典雅的風范；其他比如商業網站則根據各自的企業理念或行業性質、產品特點，則追求有個性化特征的字體設計（如圖一）；而個人主頁則是在很大程度上根據個體的性格、喜好和當時的個人心情做出別出心裁的，很獨特的視覺沖擊效果，從而留下深刻的印象。在網頁文字的設計中，因為計算機給我們提供了很多的字庫，所以設計者在運用文字設計上有了很大的選擇余地，但是在進行同一網站設計時，運用哪幾種字體來編排設計，則需要細心考究。一般來說，同一網站選擇字體種類最多不會超過四種。漢字作為網頁的形象要素之一，已經被符號化，除了表“意”外，已經具有了表達情感的功能，所以在設計上必須具有視覺美感，才會給瀏覽者留下深刻印象，獲得心靈上的共鳴（如圖二）。

2、圖片的運用

圖片是漢字之后第二個引入到互聯網中的對象。網站通常采用圖文并茂的形式達到準確、快速傳遞信息。網站而圖片的運用，大大美化了單調的漢字頁面，在網頁中一條單調的信息遠不如一個漂亮的圖片更吸引瀏覽者（如圖三），在網站中應用圖片的優勢是圖片的分別率不高，只要求72 分辨率，就可以達到圖片的最佳效果；因為質量很高的圖片與分辨率為72的圖片在顯示器里用肉眼是很難分辨出圖像質量的好壞的。特點是圖片追求盡量“小”。這里說的“小”不是上面說的分別率，而是網絡傳輸中限制的k數大小，因為圖片在傳輸中會受到帶寬限制的，所以圖片在規定的范圍內k數越少越好，文件越小，下載時間就越短，這樣才能實現圖片在網頁中快速打開。網頁中圖片在位置、數量、形式等方面直接影響著網頁整體視覺表達。因此在選擇圖片時，要考慮到圖片在網頁中在能否與網頁達到和諧一。

3、色彩應用

網頁是網絡發展中誕生出來藝術品，除了對文字和圖片有著很高的要求外，對色彩也有很高的視覺要求。在網頁中如果能夠很好的運用色彩，就會使網站更加生動活潑，瀏覽者在瀏覽網站時，第一印象就是網站所選擇的主題色彩，它會直接影響閱讀者瀏覽網站的興趣，因此，網頁的色彩應用在網頁設計中占有很重要的位置。

網頁的色彩應用要注意兩點：一是整體網站根據主題思想來定位的色彩傾向，確定一個主色調。我們看的大多數網站一般以同色系色彩為主，配上與主色成的對比色的字體，讓瀏覽者在閱讀時有清晰流暢的感覺，這樣的設計一般都是為了突出文字信息，在圖片的選擇上也是以同色系的色系為主，已達到素淡、柔和的效果，防止喧賓奪主。二是在背景色的運用上，當采用大面積色彩填充時，不要同時使用對比強烈的色彩，應采用對比度低或者是同一色系的色彩填充，過于豐富的背景色會使頁面中的圖片和文字難以搭配顏色，從而影響文字識別。

所以，網站設計時通常以一種顏色為主色，采用同一色系或者是互補色系來加強個性化網站需要。例如在設計網站時，（如圖四），為了讓題目看起來很醒目時，可以用搭配背景圖片。同時，為了防止色彩的突兀，用灰色調加以輔助，起到穩定色彩的作用。并配合以同一色系的暖色調和少量的互補色藍色相襯托，實現了網站從整體上看起來穩重中不失活潑，實際上title的色彩運用決定了網站的整體風格和情調，起到了畫龍點睛的作用，吸引了網民的注意力，體現了網站的主題。

結束語

數字時代的到來，讓人類的信息傳播進入新紀元，這個現代化的信息“交通工具”，填補了人類靠耗時費力的手段傳遞信息的空白，縮短了信息傳遞時間，顯示出了網絡傳遞信息的巨大的優越性。

本文以網絡設計平面視覺元素的構成探討了萬維網的基本概念，分析了網頁設計視覺元素在網頁設計中的應用。現在網絡己經成為人類不可或缺的一部分，所以提出了本文的論題，想就網頁設計的視覺元素---文字、圖片、色彩這幾方面的功能與審美進行探討的同時，喚起更多的設計師投身到新媒體的視覺傳達設計中來，能夠在網絡這一新興媒體中繼續發揚我國民族文化的特點，將具有中國化特點的設計推上世界設計的舞臺。

參考文獻:

【1】尹定邦.圖形與意義「M」.湖南:湖南科學技術出版社，2003

【2】譚平著.越位:設計:以承傳的名義「M」.四川美術出版社，2005

【3】尹定邦，(英)EH.貢布里希.秩序感「M」.長沙:湖南科學技術出版社，2003:109

【4】(韓)黃在賢.設計師談精彩網頁設計「M」.北京:電子工業出版社，2004:6

【5】(美)艾莉森.古德曼，王群譯.平面設計的七大要素「M」.上海人民美術出版社，2002

【6】李四達著.新媒體藝術學概論「M」.清華大學出版社，2006:314

【7】黃海燕，張輝.網頁設計與平面設計「J」.包裝教程，第25卷，2004:126- 127

【8】(英)EH.貢布里希.秩序感「M」.長沙:湖南科學技術出版社，2000

【9】瓦西里.康定斯基著，羅世平譯.點線面是抽象藝術的基礎「M」上海人民美術出版社，1988:l8

【10】于穎慧，馬晨.教育類網站的藝術設計一點的應用「J」北京l:業職業技術學院學報，2006，5(4):33

【11】陳飛.組合之美一談網頁設計的點、線、面的運用「J」.內蒙古藝術，2003，26-27

【12】劉丹.視覺元素在網頁設計中的運用「J」合肥上業大學學報，2006，20(2):129-we132

【13】王愉，隋涌.論網頁視覺要素設計「J」北京印刷學院學報，2005，13(掃:59-62

【14】宋瑩，劉寶岳，平面構成設計「M」.中國建筑工業出版社，2005:45

【15】南波飛.網絡媒體的視覺傳達設計研究「D」.湖南大學碩士學位論文，2002

【16】杭間，何潔，靳棣強.中國傳統圖形與現代視覺設計「C」.山東畫報出版社，2005:226

【17】王紹強.版式設計風格化「M」“廣西：廣西美術出版社，2004.

【18】王受之.世界平面設計史「M」.北京:中國青年出版社，2002

【19】尹定邦.貢布里希論設計「M」湖南科學技術出版社，2004:170

【20】崔美善.網頁視覺特效「M」北京:電子工業出版社，2006[1]謝依君.電子報的新聞介面分析[D].臺北:臺灣國產政治大學新聞學系，1999.

注：本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文