王敏 董虹

摘要：在新媒體飛速發(fā)展的時(shí)代，網(wǎng)頁設(shè)計(jì)進(jìn)行了全新的改革，呈現(xiàn)出與傳統(tǒng)網(wǎng)頁截然不同的視覺和心理感受。在此背景下，本文對現(xiàn)代網(wǎng)頁設(shè)計(jì)進(jìn)行分析與研究。首先結(jié)合新媒體對網(wǎng)頁設(shè)計(jì)的影響，分別從網(wǎng)頁的結(jié)構(gòu)、風(fēng)格、情感三方面對網(wǎng)頁設(shè)計(jì)的發(fā)展趨勢進(jìn)行分析;其次利用新媒體的優(yōu)勢，以結(jié)合創(chuàng)新技術(shù)、引入動(dòng)態(tài)效果、融入3D元素為網(wǎng)頁設(shè)計(jì)的創(chuàng)新突破提供思路，從而開拓網(wǎng)頁設(shè)計(jì)更加廣闊、創(chuàng)新的發(fā)展道路。

關(guān)鍵詞：新媒體;網(wǎng)頁設(shè)計(jì);發(fā)展趨勢;創(chuàng)新

中圖分類號(hào)：TP393.0 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1004-9436（2021）01-0-02

新媒體是在互聯(lián)網(wǎng)技術(shù)的支撐下發(fā)展起來的，對于網(wǎng)頁設(shè)計(jì)而言，新媒體的誕生使網(wǎng)頁設(shè)計(jì)在形式和內(nèi)容上呈現(xiàn)出更加多元化的表現(xiàn)及可能性。在此背景下，本文對新媒體時(shí)代網(wǎng)頁設(shè)計(jì)的發(fā)展與創(chuàng)新展開相應(yīng)探討。

1 新媒體對網(wǎng)頁設(shè)計(jì)的影響

隨著互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，新媒體的出現(xiàn)使信息可以以極快的傳播速度以及獨(dú)特的交互形式傳遞給人們。網(wǎng)頁作為傳播信息的載體，得到了普羅大眾的密切關(guān)注和使用，網(wǎng)頁設(shè)計(jì)作為平面設(shè)計(jì)在網(wǎng)絡(luò)信息領(lǐng)域的延伸和發(fā)展必然受到網(wǎng)絡(luò)技術(shù)的強(qiáng)烈影響。因此，在新媒體時(shí)代網(wǎng)頁設(shè)計(jì)也進(jìn)行了全新的改革。在過去，傳統(tǒng)網(wǎng)頁的設(shè)計(jì)更注重功能性，其首要目的是傳遞信息，無論是視覺的表現(xiàn)性還是設(shè)計(jì)的互動(dòng)性都相對比較落后，整體網(wǎng)頁的風(fēng)格內(nèi)容單一化、表達(dá)方式靜態(tài)化、互動(dòng)形式簡單化。如今，在新媒體飛速發(fā)展的時(shí)代，網(wǎng)絡(luò)技術(shù)與交互技術(shù)的相互融合已成為現(xiàn)代網(wǎng)頁設(shè)計(jì)的創(chuàng)新趨勢，多媒體元素的交融和智能產(chǎn)業(yè)的支撐，使網(wǎng)頁設(shè)計(jì)的勢態(tài)由單一、靜態(tài)、二維向多元、動(dòng)態(tài)、三維轉(zhuǎn)化。與傳統(tǒng)網(wǎng)頁設(shè)計(jì)相比，現(xiàn)代網(wǎng)頁設(shè)計(jì)不再局限于考慮功能，而是發(fā)展成為了一種綜合性的考量。是否能夠利用多媒體使網(wǎng)頁形式更加豐富和完善，是否能夠采用新技術(shù)使網(wǎng)頁布局適配多種終端設(shè)備，是否能夠通過人機(jī)互動(dòng)使網(wǎng)頁的用戶體驗(yàn)更加優(yōu)化等都成為了網(wǎng)頁設(shè)計(jì)師需要考慮的問題。新媒體的到來使現(xiàn)代網(wǎng)頁設(shè)計(jì)可以給用戶帶來多層次、多方位、嶄新的視覺及情感體驗(yàn)，使網(wǎng)頁在傳遞信息的同時(shí)可以滿足用戶日益增長的體驗(yàn)需求。

2 新媒體背景下網(wǎng)頁設(shè)計(jì)發(fā)展趨勢分析

網(wǎng)頁設(shè)計(jì)的發(fā)展趨勢帶有明顯的時(shí)效性和階段性，在新媒體大環(huán)境下，網(wǎng)頁設(shè)計(jì)有了翻天覆地的變化。因此，掌握最前沿的網(wǎng)頁設(shè)計(jì)發(fā)展趨勢對設(shè)計(jì)師來說是非常有必要的。本文結(jié)合網(wǎng)頁設(shè)計(jì)的現(xiàn)狀，從不同的維度總結(jié)了網(wǎng)頁設(shè)計(jì)近幾年來較為突出的三大流行趨勢。

2.1 響應(yīng)式結(jié)構(gòu)，適應(yīng)不同設(shè)備

隨著新媒體以及移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展，傳統(tǒng)媒體的傳播內(nèi)容向全新的傳播空間移植。據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布的第45次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》數(shù)據(jù)顯示，截至2020年3月，我國手機(jī)網(wǎng)民規(guī)模達(dá)8.97億，較2018年底增長了7992萬，占我國網(wǎng)民比例的99.3%，使用臺(tái)式電腦、筆記本電腦、平板電腦上網(wǎng)的比例分別為42.7%、35.1%和29.0%[1]。由此可見，人們在上網(wǎng)設(shè)備的選擇上十分多樣并且更加熱衷于方便快捷的小型移動(dòng)設(shè)備。然而面對不同尺寸的需求，為每個(gè)終端設(shè)計(jì)一個(gè)全新的網(wǎng)頁版本顯然是不切實(shí)際的。為了使同一個(gè)網(wǎng)頁能夠適應(yīng)不同的設(shè)備，解決移動(dòng)互聯(lián)網(wǎng)瀏覽問題，具有良好適應(yīng)性和可塑性的響應(yīng)式設(shè)計(jì)顯然是最好的解決方案。同時(shí)，百度和谷歌等國內(nèi)外主流搜索引擎也已明確表明鼓勵(lì)響應(yīng)式網(wǎng)頁設(shè)計(jì)，因?yàn)樗阉髋琶麜?huì)通過網(wǎng)頁對移動(dòng)端的友好程度進(jìn)行相應(yīng)的等級調(diào)整，并且更注重移動(dòng)用戶體驗(yàn)。目前多個(gè)大型網(wǎng)站都已采用響應(yīng)式結(jié)構(gòu)設(shè)計(jì)，如蘋果公司官方網(wǎng)站（如圖所示），就以清晰簡約的設(shè)計(jì)風(fēng)格、彈性的布局結(jié)構(gòu)、靈活的適應(yīng)性受到用戶的喜愛[2]。這種響應(yīng)式設(shè)計(jì)不僅給用戶帶來了相對統(tǒng)一的優(yōu)質(zhì)瀏覽體驗(yàn)，提高了用戶對網(wǎng)頁操作流程的熟悉程度，而且也為用戶提供多設(shè)備的瀏覽方式，完成更高效的信息傳播，同時(shí)也減少了開發(fā)人員的建站及維護(hù)成本。正因如此，響應(yīng)式設(shè)計(jì)應(yīng)該且必須成為主流網(wǎng)頁設(shè)計(jì)趨勢之一。當(dāng)然，響應(yīng)式結(jié)構(gòu)設(shè)計(jì)也并非沒有缺陷。針對功能復(fù)雜和內(nèi)容煩瑣的網(wǎng)頁，如果要在電腦、平板、手機(jī)等多個(gè)屏幕呈現(xiàn)出不同狀態(tài)，就會(huì)因受到較大的局限而難以實(shí)現(xiàn)響應(yīng)式結(jié)構(gòu)。因此，設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁時(shí)需要根據(jù)網(wǎng)頁的內(nèi)容及性質(zhì)作出正確的判斷，不能一概而論。

2.2 扁平化風(fēng)格，打造簡約之美

密斯·凡德羅所提出的“少即是多”的設(shè)計(jì)概念是扁平化風(fēng)格所倡導(dǎo)的主要美學(xué)理念。簡單來說，就是要摒棄煩瑣的裝飾，通過簡潔的文字、圖片、色彩之間的組合，堅(jiān)持以功能性為主向用戶高效傳遞信息。雖然扁平化風(fēng)格主張一切從簡，但是最終所表現(xiàn)出來的效果卻是簡約而不簡單，有一種“塞翁失馬，焉知非?！钡囊馕?，其中“?！敝饕w現(xiàn)在以下三個(gè)方面。

第一，視覺體驗(yàn)——新媒體的興起推動(dòng)了“小屏幕”時(shí)代的到來，相比擬物化風(fēng)格，扁平化風(fēng)格因降低了設(shè)備的負(fù)載而在不同網(wǎng)頁尺寸上展現(xiàn)出了更優(yōu)質(zhì)的拓展性。其簡化的設(shè)計(jì)元素、清晰的網(wǎng)頁布局、明朗的顏色搭配、合適的字體選擇在小尺寸網(wǎng)頁上擁有更強(qiáng)的視覺辨識(shí)度，從而使用戶在獲取網(wǎng)頁信息時(shí)更加直觀、方便、快捷。

第二，信息組織——視覺設(shè)計(jì)并非扁平化網(wǎng)頁設(shè)計(jì)的唯一，框架扁平才是其主要目標(biāo)，扁平化的信息組織結(jié)構(gòu)縮短了信息路徑，減少了信息傳播層級[3]。新媒體時(shí)代，網(wǎng)頁設(shè)計(jì)要能跨越多種設(shè)備，而清晰的扁平化信息組織結(jié)構(gòu)使網(wǎng)頁內(nèi)容更易在設(shè)備之間互相轉(zhuǎn)化，達(dá)到減少用戶認(rèn)知成本、降低信息獲取難度的效果。

第三，交互方式——交互是新媒體不同于傳統(tǒng)媒體的最廣泛和深遠(yuǎn)的特性[4]，新媒體下的網(wǎng)頁設(shè)計(jì)要求人與網(wǎng)頁之間有更多的交互環(huán)節(jié)，因此靜態(tài)網(wǎng)頁轉(zhuǎn)向動(dòng)態(tài)網(wǎng)頁發(fā)展的趨勢顯而易見。扁平化以輕快的體量和簡單的設(shè)計(jì)程序開創(chuàng)了一種全新的交互方式，繼而可以使動(dòng)態(tài)效果創(chuàng)造更多的可能性。

2.3 情感化設(shè)計(jì)，提升用戶體驗(yàn)

新媒體的快速發(fā)展使人們對于網(wǎng)頁的關(guān)注不僅停留在功能的實(shí)現(xiàn)，用戶的情感化需求也更為明顯。維克多·帕帕納克在《為真實(shí)世界的設(shè)計(jì)》一書中也闡釋了對于界面設(shè)計(jì)的新觀點(diǎn)，認(rèn)為設(shè)計(jì)應(yīng)該以人為核心。因此，許多網(wǎng)頁設(shè)計(jì)師在設(shè)計(jì)時(shí)，會(huì)全面考慮用戶的使用習(xí)慣和使用心理，通過共情和人性化等方式使用戶與網(wǎng)頁之間產(chǎn)生更多的交流，提升網(wǎng)絡(luò)與用戶的情感關(guān)系。其中，作為搜索巨擘的百度就是一個(gè)很典型的例子。在2018年三八國際勞動(dòng)?jì)D女節(jié)，百度搜索首頁推出了“為五洲女子打Call”的主題，點(diǎn)擊后便能進(jìn)入三八國際勞動(dòng)?jì)D女節(jié)的主題頁面。同樣，在2019年的中秋節(jié)，百度搜索首頁呈現(xiàn)為一張動(dòng)圖，畫面中三只兔子拿著刀叉在空中劃著小船吃著月餅共賞圓月，既溫馨又有趣。除此之外，購物網(wǎng)站結(jié)合大型節(jié)日的主題網(wǎng)頁設(shè)計(jì)也比比皆是。這種情感化的設(shè)計(jì)方式雖然不存在太大的技術(shù)難題，但卻增強(qiáng)了節(jié)日氛圍，在用戶與網(wǎng)頁產(chǎn)生共鳴的同時(shí)建立了與用戶的情感關(guān)系，在提升用戶滿意度的基礎(chǔ)上提升了用戶體驗(yàn)。不僅如此，具有情感化的網(wǎng)頁更加感性和完整，情感化也賦予了網(wǎng)頁更飽滿的生命力。

3 新媒體背景下網(wǎng)頁設(shè)計(jì)的創(chuàng)新探究

3.1 結(jié)合技術(shù)新穎的創(chuàng)新設(shè)計(jì)

網(wǎng)頁設(shè)計(jì)的發(fā)展需要順應(yīng)社會(huì)的發(fā)展趨勢，在新媒體視域下，人們對網(wǎng)頁設(shè)計(jì)領(lǐng)域提出了更高的要求，單純從網(wǎng)頁的視覺設(shè)計(jì)方向入手，只在網(wǎng)頁色彩、內(nèi)容、排版等方面作調(diào)整很難將網(wǎng)頁設(shè)計(jì)推向一個(gè)新的高度，而創(chuàng)新技術(shù)的融合是驅(qū)動(dòng)網(wǎng)頁設(shè)計(jì)發(fā)展的強(qiáng)勁動(dòng)力之一。因此，想要突破傳統(tǒng)的網(wǎng)頁設(shè)計(jì)就必須利用新科技和新技術(shù)來開辟網(wǎng)頁設(shè)計(jì)的新道路，使其在具備良好視覺美感的同時(shí)，呈現(xiàn)出更加智能和真實(shí)的交互方式，給網(wǎng)頁用戶提供一個(gè)方便快捷、有溫度的網(wǎng)頁設(shè)計(jì)。例如，網(wǎng)頁可以運(yùn)用先進(jìn)的AI（人工智能）技術(shù)為用戶提供24小時(shí)在線咨詢服務(wù)，使用戶隨時(shí)都可以與網(wǎng)頁進(jìn)行交流互動(dòng)并及時(shí)獲得反饋，同時(shí)還可以借助語音交互功能實(shí)現(xiàn)對特殊人群的無障礙網(wǎng)頁設(shè)計(jì)。此外，網(wǎng)頁還可以通過VR（虛擬現(xiàn)實(shí)）技術(shù)改變網(wǎng)頁的呈現(xiàn)方式，滲透更多VR物料素材，通過將現(xiàn)實(shí)模擬物搬到網(wǎng)頁上使用戶“穿越”到另一個(gè)空間，從而帶給用戶一種沉浸式體驗(yàn)。創(chuàng)新技術(shù)與網(wǎng)頁設(shè)計(jì)的結(jié)合如同一場完美的化學(xué)反應(yīng)，而這場化學(xué)反應(yīng)的結(jié)果就是網(wǎng)頁設(shè)計(jì)將會(huì)發(fā)展到一個(gè)更加成熟的階段。

3.2 引入視覺愉悅的動(dòng)態(tài)效果

動(dòng)效是傳統(tǒng)網(wǎng)頁與現(xiàn)代網(wǎng)頁之間最基本的差別之一。動(dòng)態(tài)網(wǎng)頁作為一種新興的綜合媒體藝術(shù)形式，不僅是新媒體時(shí)代網(wǎng)頁發(fā)展的必然趨勢，同時(shí)也能從傳播內(nèi)容的展現(xiàn)形式上實(shí)現(xiàn)網(wǎng)頁設(shè)計(jì)的突破。常見的動(dòng)態(tài)效果可以從兩方面著手。一是將靜態(tài)網(wǎng)頁中的各部分元素變成動(dòng)態(tài)，如將靜態(tài)Logo（徽標(biāo)）設(shè)計(jì)成動(dòng)態(tài)，在鼠標(biāo)滑過的元素上體現(xiàn)出縮放、翻轉(zhuǎn)、旋轉(zhuǎn)等效果，又或者在整個(gè)頁面上覆蓋懸停動(dòng)效、引導(dǎo)性動(dòng)效、敘事性動(dòng)效等。通過CSS3（層疊樣式表3級）和HTML（超文本標(biāo)記語言）的配合，這些動(dòng)畫能夠很輕松地被實(shí)現(xiàn)，并且可以在部分功能上代替需要大量內(nèi)存的JavaScript和Flash。二是將網(wǎng)頁的文字信息或圖片信息轉(zhuǎn)換為動(dòng)態(tài)視頻，以視頻動(dòng)畫取代文字和圖片，這種形式不僅使信息傳播方式更加多元化，同時(shí)對于網(wǎng)頁用戶來說，相比文字和圖片而言動(dòng)畫效果更具張力，能讓用戶接收到更多的信息。當(dāng)然，無論是哪種方式，其核心目的都是通過引入愉悅的動(dòng)態(tài)效果提升用戶的視覺體驗(yàn)，豐富用戶與網(wǎng)頁之間的互動(dòng)方式，從而使信息能夠更加高效、巧妙地傳遞給用戶。

3.3 融入風(fēng)格突出的3D元素

隨著新媒體時(shí)代的到來和網(wǎng)絡(luò)技術(shù)的發(fā)展，人們對現(xiàn)代網(wǎng)頁設(shè)計(jì)視覺效果的期待越來越高。傳統(tǒng)的二維平面網(wǎng)頁因缺乏層次感和新鮮感難以激發(fā)人們的審美感受并逐漸脫離了時(shí)代的步伐。如今，3D技術(shù)被廣泛運(yùn)用在各個(gè)領(lǐng)域當(dāng)中，而在網(wǎng)頁設(shè)計(jì)中加入3D元素，其真實(shí)的視覺形象不僅豐富了網(wǎng)頁的視覺語言，而且能夠更生動(dòng)地傳達(dá)信息，因此，融入視覺突出的3D元素?zé)o疑成為網(wǎng)頁設(shè)計(jì)的創(chuàng)新方式之一。為了促使網(wǎng)頁設(shè)計(jì)向三維立體化方向發(fā)展，可以借助3D建模，通過迷人的色彩、細(xì)膩的光澤、契合的材質(zhì)等屬性渲染出具有縱深感和立體感的圖形或場景，以達(dá)到最真實(shí)的狀態(tài)，這些三維效果能給人們的視覺產(chǎn)生巨大的沖擊力[5]，讓用戶留下深刻的印象和新鮮的視覺感受，繼而使用戶能夠更加深入地參與網(wǎng)頁瀏覽。例如，在網(wǎng)頁Banner（橫幅廣告）部分將主體物或文字做成3D效果，或者給網(wǎng)頁的導(dǎo)航欄及其他重要模塊營造出三維效果，可以豐富視覺形象，在增強(qiáng)視覺樂趣的同時(shí)強(qiáng)化主體內(nèi)容，增強(qiáng)內(nèi)容識(shí)別性。3D元素在網(wǎng)頁設(shè)計(jì)中的運(yùn)用不僅是一種網(wǎng)頁設(shè)計(jì)的創(chuàng)新方式，更是對用戶強(qiáng)烈的視覺和心理需求的滿足。

4 結(jié)語

誠然，在當(dāng)前的新媒體時(shí)代，現(xiàn)代網(wǎng)頁形象呈現(xiàn)出了不同的視覺和心理感受，網(wǎng)頁設(shè)計(jì)借助媒體的更迭已經(jīng)取得了較好的成績。但隨著新媒體和新技術(shù)的不斷發(fā)展，網(wǎng)頁設(shè)計(jì)在創(chuàng)新方面還存在很大的想象與發(fā)展空間。因此，網(wǎng)頁設(shè)計(jì)要立足于用戶群體，考慮用戶需求，通過多種創(chuàng)新技術(shù)和綜合知識(shí)的結(jié)合，充分利用新媒體優(yōu)勢，以全面提高網(wǎng)頁質(zhì)量，增加網(wǎng)頁瀏覽量，為網(wǎng)頁設(shè)計(jì)開拓更加廣闊、不斷創(chuàng)新的發(fā)展道路。

參考文獻(xiàn)：

[1] 第45次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》[EB/OL].中國網(wǎng)信網(wǎng)，http：//www.cac.gov.cn/2020-04/27/c_1589535470378587.htm，2020-04-28.

[2] 岳婉琪.基于新媒體時(shí)代的企業(yè)網(wǎng)頁界面視覺設(shè)計(jì)[D].福建師范大學(xué)，2018.

[3] 劉娜娜.扁平化設(shè)計(jì)風(fēng)格在網(wǎng)頁設(shè)計(jì)中的優(yōu)勢[J].信息與電腦（理論版），2016（20）：72-73.

[4] 李雪.新媒體背景下網(wǎng)頁版式設(shè)計(jì)研究[D].北京林業(yè)大學(xué)，2011.

[5] 楊杰.如何在平面設(shè)計(jì)中對3D元素進(jìn)行成功運(yùn)用[J].大眾文藝，2014（08）：66.

作者簡介：王敏（1986—），女，湖北恩施人，博士，副教授，研究方向：設(shè)計(jì)管理、品牌傳播，

董虹（1993—），女，湖北武漢人，碩士在讀，研究方向：視覺傳達(dá)設(shè)計(jì)。