網頁設計中的視覺節省研習范文

本站小編為你精心準備了網頁設計中的視覺節省研習參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

1網頁設計中視覺節省的實際應用

1．1文字設計中的視覺節省

目前網頁設計的主體是以文字信息傳達為主要手段。作為網頁主要信息描述中必不可少的元素，網頁文字占據了主要面積，文字表達的好與壞，將直接影響到整個網頁的質量。筆者嘗試通過Photo－shop對幾個網站首頁的設計，分析視覺節省在網頁設計中的實際運用。見圖2，DISAPPEAR網站首頁設計對比圖。這是DISAPPEAR網站首頁設計，該設計以單純、簡潔的形式展現網站的設計的統一性。網站沒有使用告訴介紹之類的繁復文字，而是使用了簡潔明了的文字配以圖形化來處理整個頁面。這個版面中最醒目的就是被遮掉下半部分的文字，用Photo－shop把被遮掉的半邊文字重新展現出原貌，就是B1圖片的圖形效果。比較一下A1和B1兩個版本展現的視覺效果有什么不同？不難發現完全可以用前面談到的視覺節省原理中“多余度”來分析。如A1圖片是一個文字被遮住一半的網頁設計，但是不難發現，大家都會認出被遮掉一半的文字。這是因為在閱讀時受眾的眼睛飛快的移動著，以吸取整個網頁說明的意義。在“跟”著設計者的同時，還在進行著許多猜測和預期。受眾是生活在一個熟悉的環境中，看到被遮掉一半的文字，不難猜測出是“1998”，就像通常認為光是從上面照下來的，平靜的水域是平面的一樣，見到的事物總是與預期的相符，這樣的預期大大減少需要特別注意的信息量，從而節省視覺活動。而從審美的角度來看B1圖片，文字被還原成整體展示在網頁中很刺眼呆板，而A1圖片的處理就顯得巧妙而含蓄，整個的視覺效果也整體舒緩些。因此在網頁設計中要達到這種各種信息的有效傳達，網頁中的文字設計，其風格要與內容特性相吻合，要服從信息內容的性質及特點的要求，不能相互沖突，并脫離實際。可充分利用視覺節省的“多余度”的原理調動受眾的注意度，減少對不必要信息的篩查與檢索從而達到視覺節省的目的。

1．2圖形設計中的視覺節省

圖片在網絡傳播中占有很大的比重，視覺沖擊力比文字強85％，在視覺傳達上能輔助文字，幫助理解，更可以使網頁布局立體、真實。見圖3，A2圖片是SWATCH手表的一個網站設計，它主要以年輕男女為消費對象，所以選用了顏色非常鮮艷的圖片來展現青春的活力四射。該網頁是由四張圖片為主要視覺元素來構成，筆者依照原網頁設計中圖片擺放的位置，用Photoshop把每張圖片都還原成同一明度的色彩全部展現出來（即B2圖片所示），比較一下前后的視覺差別。先看A2圖片，設計者把圖片中三張做了降低明度的模糊處理，只留下中間一張保持原色彩明度。受眾在瀏覽過程中視線始終停留最多的只是在中間色彩明度高的圖片上。再看B2圖片，在圖中四張圖片都沒做降低明度的模糊處理，在瀏覽過程中視線在四張圖片上來回不定選擇停留。

圖3SWATCH手表網站頁面圖片（A2為原圖，B2為對比圖）從中不難看出，A2圖片讓人的視覺活動有節省的傾向，也體現了視覺節省發生的原因之一———清晰度的消失原理。清晰度的消失原理提出相同或類似的元素可以以一個或一種作為視覺的焦點加以關注，其他部分可以抽象或模糊處理，從而達到視覺節省活動的目的。這種觀念的提出同樣使設計師在處理視覺元素的過程中也受到啟發，A2圖中以中間一張色彩高明度的圖片作為整個網頁中的視覺焦點，而其他三張都作模糊處理，受眾的視線始終最后停留在視覺焦點上，從而大大節省了瀏覽者的視覺注意力。

視覺焦點的合理應用能使圖片由平淡的事物變成強而有力的訴求性畫面，形成獨特的性格成為吸引視覺的重要素材。并能加倍地放大它所提供的信息量。對于重要信息來說，受眾對圖片的關注遠遠超過單純的文字。圖片的位置、方向面積、數量等直接關系到網頁的有效視覺傳達。如何運用圖片在網頁設計中產生明快、簡潔的造型語言，給人帶來清晰、醒目的視覺效果，還需要不斷的探索，視覺節省的有效應用就是很好的探索方向。

1．3色彩設計中的視覺節省

在網頁視覺傳達設計中，盡管文字、圖形是信息的只要載體，但視覺沖擊力最強的要數色彩。色彩是第一性的。網站的個性化特征也是有色彩感知的，色彩是影響視覺感受最直觀的因素。受眾在瀏覽網頁時，首先注重頁面的色彩設計，它直接影響閱讀者的觀賞興趣和態度。見圖4，A3圖片是ARTSEENSOHO的網站，此網站的目的是介紹位于美國紐約的藝術之城，有來自于世界各地的年輕藝術家，經紀人以及大大小小的畫廊。此網站設計比較簡潔，色彩鮮明，極富藝術氣息。

A3圖片的網頁主要以為整個設計主色調，可是設計者突然以一幅黑白建筑大樓的照片貫穿于整個頁面中心，打斷了本來橘黃色的主基調，使視覺效果十分醒目，瀏覽者的視線被黑白建筑大樓的照片牢牢栓住。筆者試著用Photoshop圖象菜單／調整／變化命令將A3圖的黑白建筑大樓的照片做上橘黃色（如B3圖片所示），此時明顯的變色后B3圖片沒有A3圖片醒目。因此根據顯著點的中斷原理，整齊或規則程度上的任何變化都將引起注意，不管是結構密度上的間斷，成分排列方向上的間斷，還是其它無數種引人注目的間斷，都會使受眾節省視覺活動。該案例采用了顏色上的間斷，使瀏覽者節省了視覺活動。圖5是e百萬格子網。

e百萬首頁上共有一萬個格子，每一個格子售價是100元，100×10000就是一百萬了。e－baiwan．com只有1個首頁＋28個分類子頁。每個頁面只存放1萬個超級格子前，1000個超級格子買家先挑選首頁位置，同時贈送分類子頁位置，位置可自選（先到先得）。1000個超級格子買家以后，只能挑選分類子頁，首頁不再增加任何形式的位置。此網站的首頁如圖5所示，以單純的空白方格子作為整個的頁面設計，以最簡單的方式表達了網站設計的創意，也是視覺節省運用在網頁設計中的典范。因此色彩設計在網頁設計應注意整個頁面主色調的確定，有利于網站主題展現。在主流網頁設計中，一般以淺顏色為底配上深顏色的字，傳達的自然流暢，利于突出頁面的重點和整個頁面的配色，次要內容，如背景圖片、線條適宜采用柔和的顏色，避免喧賓奪主。只有為了突出和強調元素才采用明亮的色彩，這些亮點顏色就會產生強烈的視覺沖擊從而達到視覺節省的目的。

2結束語

以上實例是從網頁的視覺傳達設計的構成要素的三個主要方面：文字、圖片、色彩的角度，嘗試著用視覺節省產生的原理分別分析幾個網頁案例的設計，提出視覺節省在網頁設計中運用的可行性和指導性。當然視覺節省的發生遠不只本文中分析的這些方面。視覺節省在網頁中的運用是Internet網頁視覺傳達設計的發展趨勢，它不僅僅給視覺傳達設計注入新的活力，也給Internet網頁視覺傳達設計帶來新的研究方向，其設計理論也不僅僅局限于網頁設計中，在其他設計領域也有其廣闊發揮的空間，需要在設計實踐中進一步的論證與創新。

作者：歐亞梅單位：湖北科技職業學院