網(wǎng)頁設(shè)計之視覺傳達分析

1、 網(wǎng)頁設(shè)計之視覺傳達分析嚴卿方(貴州財經(jīng)學(xué)院 貴州貴陽 550004摘要:近幾年隨著網(wǎng)絡(luò)的發(fā)展, 網(wǎng)頁作為網(wǎng)絡(luò)的載體, 把各種信息以快捷、方便的形式傳達給受眾, 在這種情況下, 逐步產(chǎn)生了對于網(wǎng)頁審美的需求。人們對美感的追求是不斷深入的, 網(wǎng)頁設(shè)計同樣如此。我們應(yīng)從網(wǎng)頁設(shè)計中視覺元素的功能及其審美表現(xiàn)的角度, 來考慮如何更有效的傳達信息, 給用戶留下好的印象, 提高網(wǎng)站的訪問量, 促進網(wǎng)站的良好運作。關(guān)鍵詞:網(wǎng)頁設(shè)計; 視覺元素; 視覺傳達中圖分類號:J524 3文獻標識碼:A 文章編號:1671-444X (2009 04-0056-03 收稿日期:2009-10-11作者簡介:嚴卿方(19

2、81-, 女, 四川重慶人, 貴州財經(jīng)學(xué)院助教, 貴州大學(xué)藝術(shù)學(xué)院碩士研究生, 主要從事廣告研究與教學(xué)。一、網(wǎng)頁中對視覺元素的功能需求網(wǎng)絡(luò)作為一種媒體形式, 綜合了圖形、文字、聲音、動畫等多種信息, 給人們提供了一個便捷的信息交流平臺。網(wǎng)頁中視覺信息的表達成為網(wǎng)絡(luò)信息傳達的重要部分。近年來, 網(wǎng)頁的視覺表現(xiàn)己經(jīng)從簡單圖、文編排的形式, 發(fā)展到多種視覺元素的綜合運用。新媒介下的網(wǎng)頁設(shè)計使視覺傳達的效果煥然一新。就目前的網(wǎng)頁設(shè)計現(xiàn)狀來講, 網(wǎng)頁設(shè)計的發(fā)展還處于一個不理想的狀態(tài), 比如受寬帶流量低、網(wǎng)頁設(shè)計人員水平有限、計算機編程技術(shù)不高等因素的影響, 網(wǎng)頁設(shè)計還處于一個以文字為主的信息交流形式,

3、而真正能吸引網(wǎng)民興趣的點, 如音頻、視頻、圖片、動畫等形式?jīng)]有得到充分的運用, 網(wǎng)頁設(shè)計欠缺藝術(shù)美感, 其功能性也沒有得到好的體現(xiàn)。截止到2005年12月31日, 我國的網(wǎng)民總?cè)藬?shù)為11100萬人, 與上年同期調(diào)查結(jié)果相比, 我國網(wǎng)民總?cè)藬?shù)一年增加了1700萬人, 增長率為18. 1%, 同1997年10月第一次調(diào)查結(jié)果62萬網(wǎng)民人數(shù)相比, 現(xiàn)在的網(wǎng)民人數(shù)已是當初的179. 0倍。 ! (圖1 。我國的網(wǎng)民總數(shù)很大, 增長速度較快, 網(wǎng)頁發(fā)展空間仍非常大, 所以互聯(lián)網(wǎng)在我國的發(fā)展前景非常廣闊, 網(wǎng)頁的視覺傳達設(shè)計更是成為 一個不可忽視的領(lǐng)域。圖1 中國上網(wǎng)人數(shù)增長表二、網(wǎng)頁設(shè)計中的視覺傳達問題

4、目前的網(wǎng)頁設(shè)計中, 視覺信息傳達的可識別性與便捷性, 己經(jīng)有了一些研究成果和實踐經(jīng)驗, 但是能夠成功地吸收和應(yīng)用這些成果的網(wǎng)頁設(shè)計作品還是不多見。! CNN I C 發(fā)布第十七次中國互聯(lián)網(wǎng)絡(luò)發(fā)展狀況統(tǒng)計報告, 中國互聯(lián)網(wǎng)絡(luò)信息中心(www. cnn ic . co m 2006-1 網(wǎng)頁視覺表達較單一, 網(wǎng)頁鏈接繁瑣等, 這些因素嚴重阻礙網(wǎng)絡(luò)信息的有效傳播, 使信息無法有效的傳達給用戶, 不利于與用戶之間相互溝通。 視覺效果和網(wǎng)頁布局是有著明顯差別的。網(wǎng)頁布局受網(wǎng)站的信息設(shè)計結(jié)構(gòu)及內(nèi)容量的影響, 視覺效果則可以依靠網(wǎng)站性質(zhì)、客戶興趣、網(wǎng)頁設(shè)計師的個性表現(xiàn)得豐富多樣。 1對于不同類型的網(wǎng)站, 設(shè)

5、計師應(yīng)該明確采取什么樣的手法來表現(xiàn), 以達到相應(yīng)的傳達目的。網(wǎng)頁設(shè)計已經(jīng)不再是一種純粹的媒介, 它已經(jīng)成為一種藝術(shù)形式。目前我國網(wǎng)頁設(shè)計有待開發(fā), 相對來說, 國外網(wǎng)頁設(shè)計在理論與實踐上發(fā)展比較健全, 視覺的表現(xiàn)較和諧統(tǒng)一。所以, 分析網(wǎng)頁設(shè)計中的視覺信息傳達對提高網(wǎng)頁點擊率及全民審美意識有著極其重要的意義。網(wǎng)頁設(shè)計是依據(jù)網(wǎng)站宗旨, 將結(jié)構(gòu)、圖文信息、色彩等視覺要素有機地統(tǒng)一在網(wǎng)頁中, 并對網(wǎng)頁風(fēng)格等進行整體設(shè)計, 利用合理的版面元素準確、系統(tǒng)、有效地傳達信息。網(wǎng)頁的版式設(shè)計, 是在有限的屏幕空間上將視聽多媒體元素進行有機的排列組合, 將理性思維個性化表現(xiàn)出來, 是一種具有個人風(fēng)格和藝術(shù)特色的

6、視聽傳達方式。它在傳達信息的同時, 也產(chǎn)生感官上的美感和精神上的享受。為了使網(wǎng)頁獲得最大的視覺傳達功能, 使其真正成為可讀性強而且新穎的互聯(lián)網(wǎng)載體, 網(wǎng)頁設(shè)計必須適應(yīng)人們視覺流程的心理和生理特點, 確定各種視覺構(gòu)成元素之間的關(guān)系和秩序, 組織好自然流暢的視覺導(dǎo)向。視覺元素的功能與形式美, 將直接影響到信息傳達的準確與有效性。視覺元素包括圖形、文字和色彩, 由于網(wǎng)頁的虛擬空間特性, 在網(wǎng)頁設(shè)計里視覺元素演變得更加豐富, 如動態(tài)信息、音頻和視頻等, 同時又可以通過 點擊鏈接 使得頁面相互跳轉(zhuǎn), 進行超鏈接和互動, 這些元素在信息的傳遞過程中不僅顯示出各自的功能優(yōu)勢, 同時豐富了網(wǎng)頁的視覺傳達形式。

7、元素。第一, 形式與內(nèi)容的統(tǒng)一。要求形式表現(xiàn)必須符合功能, 其視覺流程能自然有序地到達信息, 在網(wǎng)頁設(shè)計中整體風(fēng)格上要求同存異, 使信息傳達明了, 視覺效果清晰, 層次豐富, 做到內(nèi)部有機聯(lián)系、外部和諧完整的美感。第二, 突出主題元素。利用視覺流程的焦點, 突出主題, 主題元素會使得瀏覽者的視線有始有終。以清晰、美觀、整體統(tǒng)一的視覺效果呈現(xiàn)給瀏覽者, 使其在瀏覽過程中心情愉快地接收信息。人們在閱讀中, 視覺有一種自然的流動習(xí)慣, 但是這種視覺的習(xí)慣又是可以被視覺元素所影響的。視覺流程的形成是由人類的視覺特性所決定的, 受生理結(jié)構(gòu)限制, 人眼只能產(chǎn)生一個焦點, 不能同時把視線停留在兩處或更多的地

8、方, 我們可以做的只有依照一定的順序瀏覽觀察。劉覽網(wǎng)頁雖然是一個動態(tài)的視覺流程, 平面設(shè)計中的很多規(guī)律同樣適用于網(wǎng)頁設(shè)計, 如均衡、韻律等。在圖2中的上圖, 正方形兩條對角線相交于一個交點, 這個交點就是視覺上的焦點, 正方形中心點的吸引力要比角的頂點的吸引力大一些。 2一般來說, 我們的視覺習(xí)慣于從左向右, 從上向下看, 所以一個空白的網(wǎng)頁給我們帶來的自然視覺流程是從左上方到右下方的一個弧形曲線。在這個弧形曲線上, 視覺優(yōu)勢從上到下遞減(圖2 。在網(wǎng)頁設(shè)計中, 要注意網(wǎng)格系統(tǒng)的應(yīng)用, 來自于歐洲的網(wǎng)格系統(tǒng)能使各種信息要素合理分布并能快速排版, 在位置、間隙、大小上保持一定的節(jié)奏感和美感, 同

9、時也保持了視覺要素的統(tǒng)一。通過網(wǎng)格系統(tǒng)的分析, 有助于我們合理地安排網(wǎng)頁中視覺元素的位置及分布。例如歐美網(wǎng)站(圖3-1、圖3- 2網(wǎng)頁版式的功能, 主要是為了滿足人們的實用需求, 讓人與網(wǎng)頁的互動更加順利。這就要求做到三點:! 主次分明, 突出重點。在網(wǎng)頁設(shè)計前期, 應(yīng)該明確該網(wǎng)站的目的是什么, 每個網(wǎng)站都會有自己的終極目標, 突出自己的特色, 明確該網(wǎng)站應(yīng)該說些什么, 怎么說。導(dǎo)航清晰美觀, 瀏覽便利。導(dǎo)航在網(wǎng)頁中很重要, 導(dǎo)航的清晰、美觀決定著瀏覽的順暢。在設(shè)計時應(yīng)盡可能地使網(wǎng)站各個頁面間的切換簡便。#善于運用圖形。網(wǎng)頁設(shè)計中圖形的運用比較常見, 這些圖形引導(dǎo)用戶查看所需信息, 有抽象與具

10、象之分, 如:網(wǎng)站標志、抽象圖形搭配、引導(dǎo)按鈕、文字符號等, 每一個小的形狀都可以起到引導(dǎo)信息傳遞的作用, 這些圖形可以歸納為網(wǎng)頁上的點、線、面, 影響著網(wǎng)頁的視覺審美。在網(wǎng)頁設(shè)計中,圖 2要仔細分析這些圖形元素的大小、位置、色彩層次, 統(tǒng)一風(fēng)格, 求同存異。好的版圖3-2(主頁圖3-1(首頁 四周留白, 中心位置成為視覺的焦點, 使所要表達的信息更為鮮明, 強烈。而圖3-2(主頁 根據(jù)人們閱讀材料時的習(xí)慣, 按照從左到右, 從上到下的順序進行。瀏覽者的眼睛首先看到的是頁面的左上角, 然后逐漸往下看。該主頁根據(jù)這一習(xí)慣, 設(shè)計時將公司的重要信息 標志 放到左上角的位置, 然后按重要性依次放置其

11、他的內(nèi)容。圖3-1(首頁 和圖3-2(主頁 使網(wǎng)站整體形象統(tǒng)一, 風(fēng)格一致, 通過重復(fù)的視覺刺激給瀏覽者留下深刻而統(tǒng)一的網(wǎng)站印象。圖3-1(首頁 四、網(wǎng)頁中的版式功能與審美三、網(wǎng)頁設(shè)計中的視覺規(guī)律遵守網(wǎng)頁設(shè)計的視覺規(guī)律, 可以提高網(wǎng)頁的視覺傳達力。網(wǎng)頁設(shè)計的視覺原則包括:形式與內(nèi)容的統(tǒng)一, 突出主題57 式設(shè)計能根據(jù)網(wǎng)頁創(chuàng)意, 進行創(chuàng)造性的精心編排和設(shè)計, 最終以優(yōu)異的視覺構(gòu)成形態(tài), 形成格調(diào)優(yōu)美、韻味十足的良好視覺效果, 瞬間撲捉瀏覽者的目光, 給人留下深刻的印象。息, 整個頁面風(fēng)格顯得較正式, 由于不受大量廣告的影響, 結(jié)構(gòu)清晰, 視覺元素沒有太多的裝飾。這些網(wǎng)站頁面視覺簡單、明了, 形式

12、上具有嚴肅感, 增加了內(nèi)容的可信度。但形式感不夠豐富, 容易視覺疲勞, 飄動窗口擾亂視線, 要謹慎使用。限制而提出的設(shè)計解決方案, 但是在使用這些技術(shù)的同時, 我們首先需要注意盡量使網(wǎng)頁簡潔。首先檢查一下網(wǎng)頁在HTM L 文件的構(gòu)造上是否過于復(fù)雜。因為簡潔的HTM L 文件所構(gòu)成的網(wǎng)頁可以使瀏覽器更快地完成各種數(shù)據(jù)的讀取工作, 盡量使用簡潔的表格設(shè)計。保證圖像質(zhì)量的同時減小圖像文件。二、綜合高效地運用多媒體技術(shù)。多媒體, 多種媒介傳播載體, 如平面印刷、網(wǎng)絡(luò)、電視、電影、手機、商務(wù)通等, 是全面的、綜合性的信息資源。其基本特征是具有美觀大方的頁面版式、生動逼真的音畫效果, 色彩和諧的動態(tài)視頻、

13、靈活便捷的交互手五、不同類型網(wǎng)站網(wǎng)頁視覺元素的功能與審美網(wǎng)站的類型是根據(jù)網(wǎng)站的服務(wù)來定性的, 可以分為公共服務(wù)、教育與學(xué)習(xí)、資源分享、商業(yè)運行以及個人網(wǎng)站等等, 不同類型網(wǎng)頁設(shè)計元素的功能與審美都是不同的, 比如在結(jié)構(gòu)的安排、顏色的運用、圖像與文字的設(shè)置上有著差別。根據(jù)網(wǎng)站主題設(shè)定視覺元素的不同表現(xiàn), 將各自的功能與形式在網(wǎng)頁里面統(tǒng)一起來。(1 商業(yè)網(wǎng)站。從最基本的功能來分析是為了商品交易而制作的。如圖4, 上海商情網(wǎng)站頁面, 在結(jié)構(gòu)的安排上比較單調(diào), 注重產(chǎn)品的介紹和購買順序。信息內(nèi)容上安排的比較緊, 色彩的運用比較單一和死板, 沒有層次變化, 盡管整個頁面安排有秩序, 但視覺表現(xiàn)上顯得很單

14、調(diào), 文字內(nèi)容過于繁多。圖5(3 個人網(wǎng)站。個人網(wǎng)站無論從結(jié)構(gòu)、色彩、文字的編排上, 還是其它視覺元素的表現(xiàn)上都具有極強的個性風(fēng)格, 主要表現(xiàn)個人信息。如圖6的個人網(wǎng)站頁面, 結(jié)構(gòu)沒有固定的模式, 色彩的使用鮮亮明快, 圖形變化多樣, 頁面中視覺元素 的組合很有視覺感染力。段。用戶不僅可以通過文字信息, 還可以通過看到的影像和聽到的聲音來了解感興趣的對象, 參與或改變信息的演示。三、增加互動性。互動性能夠充分調(diào)動人的參與性, 在網(wǎng)絡(luò)的環(huán)境下人從被動發(fā)展到主動, 從而充分實現(xiàn)每個人的個性化需求。在網(wǎng)頁中信息通過特別的信息導(dǎo)航, 使用戶能夠從中得到更深層次的了解和接受, 從而更快地做出決定。比如在

15、互動三維廣告中, 消費者與虛擬產(chǎn)品或虛擬環(huán)境交互時能夠產(chǎn)生逼真現(xiàn)場感, 這種現(xiàn)場感能增強消費者的認知, 改變消費者的心理及行為, 這在單一的HTM L 環(huán)境下是不可能實現(xiàn)的。圖6參考文獻:1韓崔美善. 馬曉陽、劉娟譯. 設(shè)計師談網(wǎng)頁視覺特效M.北京:電子工業(yè)出版社, 2006. P022美魯?shù)婪虬⒍骱Ｄ? 騰守堯、朱疆源譯. 藝術(shù)與視知覺M.成都:四川人民出版社, 2005. P6圖4(2 公共服務(wù)網(wǎng)站。比較常見的如政府機構(gòu)的一些網(wǎng)站。例如圖5, 這樣的網(wǎng)站信息量比較多, 多為新聞及宣傳信六、提高網(wǎng)頁設(shè)計中視覺信息傳達有效性的方法一、處理好網(wǎng)頁效果與速度的矛盾關(guān)系?，F(xiàn)在有許多針對網(wǎng)頁傳送速度的

16、An Analysis of V isual Trans m issi on i nW ebpage DesignYANG Q ing fang(GuizhouC ollege o f F inance and E cono m ics , Guiyang, Guizhou, 550004, Ch i n aAbst ract :In recent years , w ith the rapid developm ent of the I nterne, t w ebpage , as a carrier of the ne t w ork , qu ickl y and convenient

17、ly convey various i n fo r m ation to the audience . So people gradually creat an aesthetic de m and o f the w ebpage . Peop le %s pursu it o f aesthetic feeli n g is constantly pro m o ted , and the sa m e is tr ue ofw ebpage design . Fro m the v i e w po i n t o f the function o f v isual ele m ents and aest h etic expression , the designers shou l d consider ho w to tr