淺談新趨勢下的網(wǎng)頁藝術(shù)設(shè)計

陳偉

摘 要：網(wǎng)頁藝術(shù)設(shè)計是隨著計算機互聯(lián)網(wǎng)絡(luò)發(fā)展而形成的獨有的視聽設(shè)計伴生物，是網(wǎng)頁設(shè)計者以現(xiàn)有所能獲取的技術(shù)和藝術(shù)經(jīng)驗為基礎(chǔ)，依照給定的設(shè)計目的和要求對網(wǎng)頁的構(gòu)成元素進行藝術(shù)規(guī)劃的創(chuàng)造性思維活動，必然要成為設(shè)計藝術(shù)的重要組成部分，并隨著網(wǎng)絡(luò)技術(shù)的發(fā)展而發(fā)展。與傳統(tǒng)的藝術(shù)設(shè)計相比，網(wǎng)頁藝術(shù)設(shè)計的門檻更高，它是藝術(shù)與技術(shù)的完美結(jié)合。

關(guān)鍵詞：網(wǎng)頁；藝術(shù)；設(shè)計；

1 移動互聯(lián)網(wǎng)時代，網(wǎng)頁藝術(shù)設(shè)計的新趨向

網(wǎng)頁藝術(shù)設(shè)計是隨著計算機互聯(lián)網(wǎng)絡(luò)發(fā)展而形成的獨有的視聽設(shè)計伴生物，是網(wǎng)頁設(shè)計者以現(xiàn)有所能獲取的技術(shù)和藝術(shù)經(jīng)驗為基礎(chǔ)，依照給定的設(shè)計目的和要求對網(wǎng)頁的構(gòu)成元素進行藝術(shù)規(guī)劃的創(chuàng)造性思維活動，必然要成為設(shè)計藝術(shù)的重要組成部分，并隨著網(wǎng)絡(luò)技術(shù)的發(fā)展而發(fā)展。與傳統(tǒng)的藝術(shù)設(shè)計相比，網(wǎng)頁藝術(shù)設(shè)計的門檻更高，它是藝術(shù)與技術(shù)的完美結(jié)合。

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

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

2 網(wǎng)頁設(shè)計中的視覺傳達設(shè)計

2.1 確立網(wǎng)站的設(shè)計風(fēng)格

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

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

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

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

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

2.2 網(wǎng)頁設(shè)計中的藝術(shù)創(chuàng)新

2.2.1 圖形元素

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

2.2.2 色彩元素

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

2.2.3 版面設(shè)計

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

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

2.2.4 動態(tài)元素

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

成功的網(wǎng)頁應(yīng)使用戶接受并信任它。網(wǎng)頁應(yīng)該力求抓住而不是淹沒瀏覽者的注意力，過多的閃爍、色彩、下拉菜單框、圖片等會讓訪問者無所適從。因此，在網(wǎng)頁藝術(shù)設(shè)計中，動態(tài)特效的使用應(yīng)把握合理的度，恰當(dāng)?shù)牟攀亲蠲赖摹?/p>

3 結(jié)語

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

參考文獻：

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

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

[3] 曹世峰.淺析網(wǎng)頁設(shè)計中視覺表現(xiàn)的多樣性特征[J].美術(shù)教育研究.2011（11）：87.

[4] 涂杰.視知覺在網(wǎng)頁設(shè)計中的表現(xiàn)[J].藝海.2010（02）：74.

[5] 孫曉娟.基于Web標準的網(wǎng)站布局的設(shè)計與實現(xiàn)[J].科技信息.2010（01）：44.

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

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

[8] 周潔.網(wǎng)頁設(shè)計之視覺流程淺析[J].美術(shù)大觀.2009（01）：111.