淺談新趨勢下的網頁藝術設計

陳偉

摘 要：網頁藝術設計是隨著計算機互聯網絡發展而形成的獨有的視聽設計伴生物，是網頁設計者以現有所能獲取的技術和藝術經驗為基礎，依照給定的設計目的和要求對網頁的構成元素進行藝術規劃的創造性思維活動，必然要成為設計藝術的重要組成部分，并隨著網絡技術的發展而發展。與傳統的藝術設計相比，網頁藝術設計的門檻更高，它是藝術與技術的完美結合。

關鍵詞：網頁；藝術；設計；

1 移動互聯網時代，網頁藝術設計的新趨向

網頁藝術設計是隨著計算機互聯網絡發展而形成的獨有的視聽設計伴生物，是網頁設計者以現有所能獲取的技術和藝術經驗為基礎，依照給定的設計目的和要求對網頁的構成元素進行藝術規劃的創造性思維活動，必然要成為設計藝術的重要組成部分，并隨著網絡技術的發展而發展。與傳統的藝術設計相比，網頁藝術設計的門檻更高，它是藝術與技術的完美結合。

隨著互聯網和移動終端的高度發展，新時期對網頁設計師的技術要求近乎“苛刻”，在考慮配色、設計、交互性和響應速度的同時，還要考慮筆記本、臺式電腦、智能手機、平板電腦等客戶端設備以及各種各樣的瀏覽器兼容性問題。藝術設計、功能技術、設備環境、瀏覽平臺等諸多問題都對網頁設計人員提出更高的要求。隨著響應設計、持續聯系和虛擬現實等新名詞的出現，未來網頁設計已經呈現出新的發展趨勢

HTML5在國內外越來越受到互聯網開發團隊的青睞。隨著CSS3+HTML5技術的應用范圍越來越廣，在動畫和多媒體技術上的不段完善，CSS3+HTML5技術將會得到更廣泛的應用。移動互聯網時代來臨之際，互聯網戰略要地從Web 端向Wap端轉移，智能手機、iPad和上網本銷量的不斷攀升，意味著網頁設計需要考慮更多移動終端用戶。CSS3+HTML5技術迎合移動互聯網時代，是Wap端開發必備利器。在使用CSS3的情況下，可以通過修改CSS文件來完成整個網站設計風格的修改，以符合用戶使用不同設備瀏覽網頁的需求。采用CSS+Javascript+JQuery 技術，可以實現更多網頁特效，例如炫酷的3D旋轉輪播圖特效、時間軸特效、3D相冊、懸浮菜單等。不僅如此，HTML5除了能實現更多的動畫效果，還能實現音樂播放器等多媒體應用。此外，觸屏設備的普及意味著網頁設計師需要重新考慮流體布局和指尖導航的問題，讓設計更加靈活，以應付各種挑戰。

2 網頁設計中的視覺傳達設計

2.1 確立網站的設計風格

網站設計風格是一個抽象的概念，指的是網站在整體上給訪問者帶來的視覺體驗，這種體驗是通過網頁中的內容、文字、色彩、圖片、動畫、多媒體等元素進行傳達的。鮮明而又相對統一的設計風格可有效避免網站設計的過程變成一個單一的信息堆砌過程。不同的主題網站有著不同的設計思路，引起思想、情感、形式等各方面的不同。網站設計首先要對企業、產品、受眾信息等進行全面的調研和綜合分析，以明確網站合適的整體風格。那么，如何正確地為網站確立恰當的設計風格呢？我們在實際設計中，應事先做好網站策劃統籌工作，按以下步驟進行：

首先，先明確網站的行業性質和受眾群體，再根據行業性質和群體來選擇相應的色彩和表現形式。如建筑行業，可選擇金碧輝煌或現代感強烈的色彩以及復古或簡明時尚的風格；食品行業，可選擇各類鮮明的色彩以及雜志類的風格，以刺激味蕾食欲為目的；醫療行業，可選擇藍綠等環保色彩以及簡潔的風格，當然女性?？漆t院可選擇女性色彩；購物網站，可選擇暖色調和灰色調搭配的色彩以及時尚大氣的風格，刺激購買欲；兒童類站點，可采用糖果色調以及可愛活潑的風格，以親近兒童、刺激互動為目的；IT行業，可選擇藍色調和灰色調為主基調以及簡潔明快的風格；教育培訓行業，可以采用明度較低的色調為主以及簡明風格，主要需要考慮用戶長期使用的疲勞問題……以此類推，不同行業，不同用戶群體，所需要采用的設計風格不盡相同。如果企業自身擁有相應的VI系統，那么應以企業VI系統中的相關色彩和風格要求為主。

其次，根據企業的總體經營思路和整體風格，針對內容，依據輯思維進行篩選，合理進行版面規劃，好比建筑設計中的平面規劃，做到統籌兼顧。在總體布局的時候，應將企業經營思路中的創新策略放在突出顯眼的位置上，重點體現。網站的策劃應分清主次、邏輯清晰、主次有序，讓用戶能夠順暢的瀏覽、便捷的操作，形成良好的用戶體驗，提升用戶的網站粘合度，引導用戶成為網站的忠實粉絲。

再次，依據主題與內容的不同，采用恰當的藝術表達方式。例如，企業形象頁面或者主題活動頁面，可采用平面設計的創意思維，使用視覺沖擊力強的色彩及圖片，輔以相應的動畫效果，使用Html5+Css3+JQuery技術實現用戶交互體驗。而資訊信息量大的網站，則需要從細節設計入手，在細微處下功夫，除了焦點圖區域外，不宜大面積使用視覺沖擊力強的色彩及圖片，以免用戶長時間瀏覽產生視覺疲勞，損害視力。一個優秀的設計必定是形式對內容的完美表現。正如黑格爾所說：“工藝的美就不在于要求實用品的外部造型、色彩、紋樣去摹擬事物，再現現實，而在于使其外部形式傳達和表現出一定的情緒、氣氛、格調、風尚、趣味，使物質經由象征變成相似于精神生活的有關環境?！?/p>

最后，網頁設計師應具有創新的意識，有針對性地讓訪問者通過網頁獲得不同的視覺體驗和心理體驗，迎合“小眾”心理。在創新方面，設計師要具備善變的潛質。網絡的世界日新月異，新的技術會帶來新的變革，而且這些變革來得迅猛，這就給設計師提出更高的要求。設計師不僅要關注藝術領域，而且要時刻關注技術領域，通過藝術和技術的完美結合，才能不斷推陳出新，改變傳統，讓自己的設計擁有生命力。

2.2 網頁設計中的藝術創新

2.2.1 圖形元素

圖形元素具有強烈的藝術美感和視覺沖擊力，是文字元素之外最早被引入到網頁設計中的元素，它在傳遞信息方面的直觀性遠勝于文字。因此，將重要信息進行圖形化處理，更能在第一時間吸引用戶的關注。在進行圖形設計過程中，網站的版式布局、色彩搭配、元素構成等都應符合大多數瀏覽者的審美心理和瀏覽習慣，以增加用戶粘合度。一般而言，大面積的圖形元素是用來宣傳企業形象或者用來表達該網頁所要體現的主題，而其他標題等細節處則宜使用小面積圖形元素進行點綴。頁面圖形元素的運用不是越多越好，也不是沖擊力越強越好，其大小搭配需要遵循一定的比例，細節處圖形的色彩運用也應多采用灰色系及過渡色階，這樣才能使頁面內容主次凸顯，讓用戶能夠一目了然地在短時間內瀏覽到自己所需要的信息，避免產生視覺疲勞。網頁和平面中圖形設計的一個重要不同點在于其像素和文件大小區別。在網頁設計過程中，受到帶寬的限制，為了滿足用戶順暢瀏覽的要求，圖形文件的分辨率應以72dpi為佳，存儲為web和設備所用格式，文件大小應盡可能的壓縮。

2.2.2 色彩元素

作為設計中不可或缺的元素，色彩建立在文字圖形的基礎上，通過眼睛所感覺的視覺沖擊力對心理起作用。每一種顏色都有不同的心理暗示。冷色中的藍色代表鎮靜和放松，暖色中的紅色代表溫暖和主動；過多的黑色會引起沮喪和消極情緒，適當的淺色則令人舒緩。不同色彩能夠喚起人們的不同感知，同時色彩也是網頁中最能夠給予訪問者視覺沖擊力的設計元素，所以在網頁藝術創新中，對色彩的運用作出創新是一個重要的突破口。色彩從色調、飽和度、明度三個方面影響著視覺感知，進而影響著網頁設計風格。因此，我們可以根據行業性質和受眾群體的不同來選擇相應的色彩和表現形式。進行網頁設計時，可以選擇不同的方式進行色彩設計：（1）可通過調整透明度或飽和度來合理搭配單一色彩的應用。這種色彩的運用使頁面看起來更統一，主次更分明。（2）適當地運用對比色，加強視覺沖擊力。（3）使用同一色系的色彩，如藍、綠的冷色調或者橙、紅的暖色調等等。同色系的頁面能令頁面色彩更柔和協調。由于目前顯示器大都采用RGB顏色標準，因而網頁色彩模式一般采取RGB模式。

2.2.3 版面設計

網站設計中的版面設計就是在有限的屏幕空間中遵循視覺設計原則，把網頁中各種元素進行合理的組合，個性化地表現理性思維，是同時具有個人風格和藝術特色的一種視聽傳達方式。版面設計雖然普遍遵循了平面設計的視覺傳達方式，但還是有所不同。其中，企業形象宣傳或者活動主題的網頁設計，其設計方式與平面設計類似，色彩鮮明，追求創意和視覺沖擊力，；而信息量大的頁面或者用戶操作界面則不能完全遵循平面設計的視覺傳達方式。例如信息量大的頁面中：根據人機心理學研究，人們瀏覽網頁的習慣，是從屏幕中心向四周游動。因此，設計師要將網站所要體現的重要信息布局在注視點高的區域，并著重筆墨進行主題創意設計，主次分明的將網站的精髓理念和信息傳達給用戶。其他區域則采用小面積的圖形元素和飽和度低的色彩與文字內容進行合理組合。

在界面設計中，合理的留白往往能夠起到畫龍點睛的作用。網頁內的空間并不一定要充分地利用，合理的留白有時候也能夠讓訪問者產生更好的瀏覽體驗。通過留白，網頁頁面在視覺上會更加平衡，并突出虛實、輕重和動靜的對比，使得頁面生動起來。網頁中的適當留白，使整個網頁設計排布松弛有度。事實上，在視覺元素的周圍留白能夠讓訪問者視覺停頓，從而讓訪問者對留白部分的內容產生更多的關注度，這對于網頁中強調某一重要信息具有很好的效果。

2.2.4 動態元素

網頁中動態特效的運用大大豐富了網頁藝術設計的表現力。利用多級空間、動態特效技術，在靜態中尋求動勢，在平面中力求立體。早期的動態元素的實現，網頁設計師大多采用的是FLASH 或者GIF動畫技術。隨著互聯網技術的深入發展，網頁設計的HTML+CSS語言的發生了日新月異的變化?，F在主流的動態特效大多通過Html5+CSS3+Javascript+JQuery技術來實現。如淘寶網的焦點圖片切換效果、對聯廣告效果，TAB標簽、動態導航菜單、圖片3D翻轉特效、表單按鈕特效、分頁特效、全屏廣告、視頻音頻播放器等。值得一提的是，這一技術目前被大量應用到Wap移動終端網站的開發上。典型案例有淘寶APP，滴滴打車、微信等服務行業網站。

成功的網頁應使用戶接受并信任它。網頁應該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、下拉菜單框、圖片等會讓訪問者無所適從。因此，在網頁藝術設計中，動態特效的使用應把握合理的度，恰當的才是最美的。

3 結語

伴隨著互聯網信息時代的發展，網頁藝術設計必然成為一個新興的藝術設計門類?！盎ヂ摼W+”概念的提出，特別是移動終端的高度發展，網頁藝術設計進入越來越多人的視野，越來越多的行業需要通過網頁藝術設計來提高企業知名度，推廣他們的品牌，推銷他們的產品。這給網頁藝術設計的發展帶來了新的契機，但同時也給網頁藝術設計師提出了更高的要求。

參考文獻：

[1] 張佳佳.論數字移動新媒體—手機媒體[J].現代裝飾： 理論.2012（06）：157-158.

[2] 梁春燕，陳麗麗，許憲玲，等.淺析HTML5和CSS3的新交互特性[J].數字技術與應用.2012（04）：273.

[3] 曹世峰.淺析網頁設計中視覺表現的多樣性特征[J].美術教育研究.2011（11）：87.

[4] 涂杰.視知覺在網頁設計中的表現[J].藝海.2010（02）：74.

[5] 孫曉娟.基于Web標準的網站布局的設計與實現[J].科技信息.2010（01）：44.

[6] 李安斌，曹巨江.新媒體時代的網頁設計[J].藝術與設計： 理論.2009（09）：74-76.

[7] 張榮科，崔薇.新媒體與基于公眾的科技傳播之實踐探析[J].科技傳播.2009（02）：78-80.

[8] 周潔.網頁設計之視覺流程淺析[J].美術大觀.2009（01）：111.