- 相關推薦
淺析Internet網頁的視覺傳達
【摘 要】 網頁設計在網絡高速發展的今天已經成為重要的設計門類，不僅是對平面視覺傳達設計美學的一種繼承和延伸，更是藝術與技術的高度統一。作者以哈爾濱商業大學設計藝術學院網頁設計為例分析網頁的平面設計，嘗試從平面藝術設計的內容、原則和形式美等方面分析；從網頁的色彩設計和網頁心理學方面分析，對這個新的藝術設計領域進行初步的歸納總結和理論探討。【關鍵詞】 網頁與平面設計 色彩 心理學
１ 網頁的平面設計
每個網站都是由諸多網頁構成，故網頁是構成互聯網的基本元素。我國這兩年的網絡發展非常快，網站數量也以倍率增長，然而網頁的設計卻不容樂觀。除了一些大的專業網站在版面的編排上比較講究之外，其他很少見到界面設計考究、美術創意優秀的中文網站，這是因為沒有和平面設計緊密結合。網頁本身就是無數個“頁面”的平面，平面設計規則也適用網頁設計，網頁設計的審美需求是對平面視覺傳達設計美學的一種繼承和延伸。兩者的表現形式和目的都有一定的相似性，把傳統平面設計中美的形式規律同現代的網頁設計的具體問題相結合起來，才能設計出符合審美規則的網頁。故設計者應該巧妙利用平面設計的設計規則，結合網絡媒體的特點，認識網絡，了解平面的特征，才能使網頁更加適合于網絡上的傳播。
平面設計中如變化和統一、條理與反復、對比和調和、均齊與平衡等，對網頁中文字、圖形、色彩的設計都是十分有效的視覺規律。首先，網頁的內容與形式的表現必須統一和具有秩序，形式表現必須服從內容要求，網頁上的各種構成要素之間的視覺流程，能自然而有序地達到信息訴求的重點位置。在我們把大量的信息塞到網頁上去的時候，考慮怎樣把它們以合理的統一的方式來排布，使整體感強的同時又要有變化，怎樣使它們脈絡清楚又富有清晰的視覺效果等等。例如哈爾濱商業大學設計藝術學院網頁設計之歡迎界面，在黃色的背景襯托下，各種線條貫穿其中，運用平面設計中的圖形設計加以修飾，增加網頁設計的美感和大眾的視覺審美需求。符合設計學院的設計的理念，又有學術機構的沉穩。內容與形式的表現達到了高度的統一。其次，突出主題要素，必須在眾多構成要素中突出一個清楚的主體，它應盡可能地成為閱讀時視線流動的起點。哈爾濱商業大學設計藝術學院網頁設計之主頁設計作為設計的主體，如果沒有這個主體要素，瀏覽者的視線將會無所適從，或者導致視線流動偏離設計的初衷。主頁設計中各構成要素在組合時，要注意其結構的輕重大小、虛實、多少等對比因素，加強視覺力度，以強化頁面的整體吸引力。再次，網頁版式的新意，網頁的版式設計同報刊雜志等平面媒體的版式設計有很多共同之處，它在網頁的藝術設計中占據著重要的地位。所謂網頁的版式設計，是在有限的屏幕空間上將視聽多媒體元素進行有機的排列組合，將理性思維個性化地表現出來，是一種具有個人風格和藝術特色的視聽傳達方式，它在傳達信息的同時，也產生感官上的美感和精神上的享受。哈爾濱商業大學設計藝術學院網頁設計的版式設計賦予了很多心意，版面運用歡快輕盈的風格進行設計，打破常理設計規范，有鮮明的節奏感，給人以生機盎然的感受，版面中的文字和圖片利用線條隔開，主題突出，追求某種富于活力的圖文編排與設計。
２ 網頁視覺設計中色彩的設計
網頁的色彩，是最先也是最持久地給瀏覽者以網站形象的因素，瀏覽者在瀏覽網頁時，留下的第一印象就是頁面的色彩設計。色彩本身是無任何含義的，有的只是人賦予它的。但色彩確實可以在不知不覺間影響人的心理，左右人的情緒，所以就有人給各種色彩都加上特定的含義：紅色：強有力、喜慶的色彩，很容易使人有興奮感覺，是一種雄壯的精神體現；黃色：亮度最高的色，給人感覺就是很有溫暖感；綠色：美麗、優雅，給人感覺大度、寬容；藍色：永恒、博大，給人感覺平靜、理智；紫色：神秘、女性、溫柔、冒險；黑色：有時給人沉默、虛空的感覺，但有時也給人一種莊嚴肅穆的感覺；白色：有時給人無盡的希望感覺，但有時也給人一種恐懼和悲哀的感受；灰色：具有中庸、平凡、溫和、謙讓、中立和高雅的感覺。網頁的色彩使用得當可以產生強烈的視覺效果，使頁面更加生動。巧妙使用色彩可以直接影響閱讀者的觀賞興趣，因此，色彩設計在網頁設計中居于十分重要的地位。網頁的色彩設計應把握以下幾個方面：
2.1 確定主體色。確定一個主色調，可以有利于體現網站主題，遵循主從關系，這是最穩定的處理色彩原則，在網頁設計頁面上，除白色為背景外大量使用的顏色，就是這個網頁的主體顏色。如果在同一個頁面內運用了多種顏色，把握不好的話，就無法確定哪個是主體色。因為其他的顏色面積不能過大，要遵循主從關系。我們現在看到的網頁，一般以淺顏色為背景的居多，如淺灰色、淺黃色、淺藍色、淺綠色。以淺顏色為底，哈爾濱商業大學設計藝術學院網頁的主體色就是以淺黃色、淺藍色為主色調，整體感覺柔和、素淡，配上深顏色的字，如黑色，讀來自然、流暢，也有利于突出頁面的重點，有利于整個頁面的配色，更容易為大多數人認可和掌握。
其他一些次要內容，如背景圖片、線條適宜采用不搶眼的顏色，以免喧賓奪主。只有少量精心選擇的元素，為了突出強調主頁的視覺效果，題頭部分采用明亮的色彩，這些彩色亮點就會產生強烈的視覺沖擊，并有設計藝術學院的特色。
2.2 背景色處理。在背景的色調搭配上一定要注意不能有強烈的對比，特別是同時使用色彩對立的顏色。大面積顏色適宜采用低比度，因為過于豐富的背景色彩會影響前景圖片和文字的取色，嚴重時會使文字溶于背景中，不易辨識。所以，背景一般應以單純為宜。如果需要一定的變化以增加背景的厚度，也應是在盡量統一的前提下的一種變化。例如在制用標題時，為追求醒目的視覺效果，可用比較深的顏色，配上對比鮮明的字體。實際上背景的作用主要在于統一整個網頁的風格和情調，對視覺的主體起到一定的襯托和協調作用，一方面吸引網民的注意力，另一方面有助于體現網站的主題。對一些明度較高的網站，配以黑色，可以適當地降低其明度。白色是網站用的最普遍的一種顏色。很多網站甚至留出大塊的白色空間，作為網站的一個組成部分，這就是留白藝術。哈爾濱商業大學設計藝術學院網頁設計的二級界面就較多運用留白藝術。留白，給人一個遐想的空間，讓人感覺心情舒適，暢快，恰當的留白對于協調頁面的均衡起到相當大的作用。
2.3 頁面的色彩分配。網頁標題是網站的指路燈，瀏覽者要在網頁間跳轉，要了解網站的結構，哈爾濱商業大學設計藝術學院網頁設計的導航設計利用頁面中的一些小標題，使用稍微具有跳躍性的色彩，吸引瀏覽者的視線，讓他們感覺網站清晰明了，層次分明。網頁標志是宣傳網站最重要的部分之一，所以這兩個部分一定要在頁面上突迎而出。怎樣做到這一點呢？LOGO和BANNER設計來源是哈爾濱商業大學設計藝術學院標志，鮮亮、對比強烈的標志設計寓意哈爾濱商業大學設計學院的設計精神和學術精神，LOGO和BANNER的色彩跟網頁的主題色分離開來，突出主題。網頁文字是網頁傳遞信息的主體，如果一個網站用了背景顏色，必須要考慮到背景顏色的用色，與前景文字的搭配等問題。一般的網站側重的是文字，所以背景可以選擇純度或者明度較低的色彩，文字用較為突出的亮色。讓人一目了然。設計藝術學院網頁頁面當中的文字設計并沒有使用大眾的黑色，在白色背景的襯托下，深灰色的文字既有利于讀者的閱讀，又賦予了活躍的氣氛。導航菜單所在區域是網民利用率比較高的，把菜單背景顏色設置暗一些，然后依靠較高的顏色對比度、比較強烈的圖形元素或獨特的字體將網頁內容和菜單的不同目的準確地區分開。頁腳，這一項最不重要，不應該喧賓奪主。可以考慮和側欄相同的顏色，設計學院的頁腳稍微壓了一下深一些的顏色，也可以在配色上使用一些比較跳躍的顏色，用來引導視線。
３ 心理學與網頁設計
人類在互通信息的同時也在交換彼此的情緒，如果沒有好的溝通情緒，所謂話不投機半句多，雙方可能說沒有兩句話就結束談話了。因此若要利用網絡的方式做有效的溝通，則必須讓溝通雙方有臨場感，并引起彼此“良好溝通情緒”。由于網頁在計算機屏幕上呈現給別人視覺畫面，因此一方面觀者要學習從計算機畫面上看見信息；另一方面網頁設計者要了解觀者的“看見”的能力，從而設計能使人易懂的畫面，協助觀者能看見信息。由此就涉及到一個認知的過程。認知心理學可以定義為：為了解人類行為，而對人類心智歷程及結構所作的科學分析。認知心理學的主要理論架構是“信息處理模式”。這個模式視人類為主動的信息處理者，探討人類憑感官接受信息、貯存信息以及提取、運用信息等不同階段所發生的事，所以認知心理學也常被稱做“信息處理心理學”。而對于信息，感官記憶可貯存大量的信息，只是若不予以注意，信息很快就會失去。所以要進一步“注意”，作“圖樣辨識”，選擇需要的感官信號做進一步的處理。一般說來，感覺刺激很少的信息很難被記憶，而那些能引起人們很強感覺刺激的信息很容易被人記憶。而現今社會是一個信息爆炸的時代，人們獲取信息的方式主要是從網絡獲得，這就必定要求在網頁的設計上要遵循認知心理學的要求，才可以被人們容易感知。網頁設計就要善于通過信息處理心理學，喚起欣賞者身心結構上的類似反應，利用心理學在設計網頁時，會縮短與網民的距離。設計學院網頁設計運用了信息心理學和審美心理學進行設計，瀏覽者也會在高速的信息傳遞中快速掌握信息，讓網民對頁面有深刻的認識和感知，增強版面的表現力和可讀性。
網頁設計是一種綜合性的設計，它所涉及的范圍非常的廣泛，包括消費者心理學、視覺設計美學、字體設計、標志設計、人機工程、哲學、等諸多方面，當然也離不開一定的科學技術發展。技術與藝術、色彩與版式、圖片與文字、構成了網頁設計，哈爾濱商業大學設計藝術學院網頁設計只是網頁設計中遵循原則的一個成功案例，在網絡高速發展下，網頁設計更似工作站，發揮更大的機能。
參考文獻
1 徐珂等.網頁視覺與設計[M].北京：人民郵電出版社，2003
2 張憲榮等.設計色彩學.北京：化學工業出版社，2005
3 張金霞.網頁設計參考手冊.北京：清華大學出版社，2009
【淺析Internet網頁的視覺傳達】相關文章：
談視覺經驗與視覺傳達設計03-18
試論傳統美學與視覺傳達設計11-20
視覺傳達設計開題報告5篇06-01
試析視覺傳達設計中的傳統美學觀03-21
視覺傳達畢業設計開題報告范文08-27
探析視覺傳達設計中的傳統美學觀03-21
探索視覺傳達設計中體現情感設計的方法12-02
淺論新媒體視覺傳達的特征理論分析03-24
視覺傳達設計應從傳統裝飾藝術中挖掘什么11-22