網(wǎng)頁交互中的虛擬情境體驗(yàn)

張曉娜，孔 霞

（晉中信息學(xué)院，山西 晉中 030800）

1 網(wǎng)頁中的交互

隨著人們審美觀念的提升，現(xiàn)代網(wǎng)頁設(shè)計(jì)是結(jié)合了計(jì)算機(jī)學(xué)、編程語言、美學(xué)、三維制作、傳感設(shè)備等技術(shù)藝術(shù)融合性學(xué)科，尤其是虛擬現(xiàn)實(shí)技術(shù)的開發(fā)和應(yīng)用，使網(wǎng)頁中的交互已由傳統(tǒng)的二位交互轉(zhuǎn)化為三維的虛擬情境交互，三維虛擬情境中真實(shí)、自然、生動(dòng)的人物場(chǎng)景，為我們網(wǎng)站交互指出了的新方向。因?yàn)槊缹W(xué)的加入，網(wǎng)頁上的頁面布局、排版、圖文信息更加地精致美觀，給使用者帶來新的視覺享受。網(wǎng)頁中的交互使得靜態(tài)網(wǎng)頁自然地轉(zhuǎn)化為三維的動(dòng)態(tài)網(wǎng)頁，無論從視覺、聽覺、觸覺、嗅覺上都能讓使用者真切地捕捉到場(chǎng)景中事物的動(dòng)態(tài)，并能進(jìn)行實(shí)時(shí)交互，工作效率得以提高，生活節(jié)奏得以加速，也大大增加了網(wǎng)頁瀏覽的受眾群，使大眾操作起來更簡(jiǎn)潔明了，規(guī)避了傳統(tǒng)網(wǎng)頁中的復(fù)雜操作的流程，大大提高了使用者的瀏覽速度。網(wǎng)頁交互中的虛擬情境，讓使用者可以360°無死角地進(jìn)行了深度觀察和體驗(yàn)，大大增加了網(wǎng)頁的趣味感和舒適度，使現(xiàn)代的網(wǎng)頁交互更好地為人們服務(wù)[1]。

2 虛擬情境體驗(yàn)

虛擬情境在網(wǎng)站上的使用是一種探索，也是一種創(chuàng)新，它立足根本，以用戶為中心，結(jié)合多種技術(shù)和藝術(shù)手法，就拿三維圖形生成技術(shù)來說，需要依靠三維建模軟件3D、Maya等軟件創(chuàng)建三維空間的人物、動(dòng)物、植物、場(chǎng)景等。如果能把這樣的交互體驗(yàn)和視覺盛宴也帶給網(wǎng)站的用戶，將會(huì)是網(wǎng)站的新風(fēng)口。網(wǎng)站交互的新風(fēng)向就需要考慮用戶的視覺需求，增強(qiáng)用戶的視覺享受，同時(shí)有特色的網(wǎng)站界面也給軟件產(chǎn)品帶來了巨大賣點(diǎn)。網(wǎng)站交互技術(shù)交融性，可以讓使用者感受到三維空間中的世界，是人與機(jī)“對(duì)話”的橋梁。而高分辨率技術(shù)是創(chuàng)建高清人物形象的基礎(chǔ)，只有高清的分辨率，才能讓受眾體驗(yàn)到虛擬情境中的真實(shí)感，甚至使用者可以全方位看到虛擬情境中的每一處細(xì)節(jié)，如人在畫中游一般。如大型網(wǎng)游就吸引了無數(shù)的主動(dòng)用戶，包括癡迷于網(wǎng)游的不同年齡段的使用者。人們通過分析可知，網(wǎng)游的超強(qiáng)吸引力主要原因之一在于游戲本身的體驗(yàn)感，用戶在使用過程中可以很直觀、無壓力、很興奮地沉浸其中。只需通過鍵盤或鼠標(biāo)的點(diǎn)擊操作，就能完成人機(jī)交互的動(dòng)態(tài)體驗(yàn)，用戶很輕松地融入到游戲場(chǎng)景中，切身感受到游戲帶來的興奮感和刺激感，甚至成為游戲中的一員，使得用戶有很強(qiáng)的存在感和體驗(yàn)感。借鑒游戲中的沉浸式體驗(yàn)，享受那一刻的刺激與心動(dòng)，虛擬情境會(huì)在未來的網(wǎng)頁交互設(shè)計(jì)中發(fā)揮不可估量的作用。

3 網(wǎng)頁交互中的視覺重構(gòu)

3.1 網(wǎng)頁交互的虛擬環(huán)境

網(wǎng)頁交互中虛擬環(huán)境的搭建是以軟件、硬件為依托，技術(shù)與藝術(shù)相結(jié)合的交互體系，不同于傳統(tǒng)的HTML網(wǎng)絡(luò)協(xié)議，它不再僅僅停留在平面形式的排版與設(shè)計(jì)，還支持全球用戶通過網(wǎng)絡(luò)應(yīng)用虛擬三維空間進(jìn)行實(shí)時(shí)交互。

3.2 頁面交互的情感體現(xiàn)

3.2.1 本能情感

對(duì)網(wǎng)站用戶來說，其第一時(shí)間看到網(wǎng)頁界面時(shí)所產(chǎn)生的不同心理感受和無意識(shí)的直覺就是本能情感。此情感有積極和消極之分，大數(shù)據(jù)環(huán)境下的網(wǎng)頁設(shè)計(jì)師追求的是能給用戶創(chuàng)造不一樣的頁面視覺感受，也就是所謂的第一印象，并通過技術(shù)、藝術(shù)、美學(xué)、趣味等方式體現(xiàn)出來。頁面中的視覺元素所帶來的藝術(shù)價(jià)值和人機(jī)交互中產(chǎn)生的趣味性顯得尤為重要。

3.2.2 行為情感

行為情感就是頁面在被用戶使用過程中，因人機(jī)互動(dòng)而產(chǎn)生的一種心理感受。成功的網(wǎng)頁交互設(shè)計(jì)無一例外都使用戶和頁面互動(dòng)，讓用戶有一種參與感。這就要求設(shè)計(jì)人員不僅會(huì)后臺(tái)編程，更需要掌握美學(xué)知識(shí)，抓住用戶的心理，讓用戶在使用網(wǎng)站時(shí)產(chǎn)生情感共鳴。

4 網(wǎng)頁交互中的虛擬情境體驗(yàn)

4.1 高效轉(zhuǎn)化率

在網(wǎng)頁交互中，虛擬情境體驗(yàn)顯得尤為重要，把新技術(shù)運(yùn)用到網(wǎng)站設(shè)計(jì)，立足于用戶，會(huì)無形中提高網(wǎng)站信息的傳輸和接受速率。在網(wǎng)頁設(shè)計(jì)創(chuàng)意中加入虛擬情境體驗(yàn)（如企業(yè)新品發(fā)布、娛樂游戲、專題專項(xiàng)活動(dòng)策劃等），可以準(zhǔn)確直觀地再現(xiàn)出網(wǎng)頁內(nèi)容主題，提前預(yù)測(cè)活動(dòng)效果，節(jié)省活動(dòng)成本，彌補(bǔ)活動(dòng)可能出現(xiàn)的不足，大大提高了轉(zhuǎn)化率。

4.2 優(yōu)化用戶體驗(yàn)

在眾多同類網(wǎng)站中，能讓用戶印象深刻并愿意多花時(shí)間使用的莫過于人性化的、特色明顯的實(shí)用性網(wǎng)站。如網(wǎng)頁各級(jí)菜單之間的切換效果，轉(zhuǎn)場(chǎng)動(dòng)態(tài)的效果，用戶的主動(dòng)控制系統(tǒng)交互的屬性，媒體元素的恰當(dāng)使用，都能很好地優(yōu)化用戶的體驗(yàn)感。

4.3 交互與沉浸性體驗(yàn)

在網(wǎng)頁設(shè)計(jì)中，交互體驗(yàn)是用戶與網(wǎng)頁之間建立的新媒介，交互是優(yōu)化用戶頁面更直觀有效的方法，用戶的體驗(yàn)感增強(qiáng)，信息的反饋也會(huì)更及時(shí)，網(wǎng)頁交互體驗(yàn)就是滿足目標(biāo)用戶的期許，了解用戶的需求和心理，用戶的審美心理、審美視知覺等，尋求技術(shù)與藝術(shù)兩者結(jié)合的“度”，在碰撞出最理想的狀態(tài)同時(shí)還要考慮各種有效的交互方式。視覺上對(duì)用戶的吸引只是短暫的，遠(yuǎn)遠(yuǎn)不能滿足現(xiàn)在人們對(duì)交互體驗(yàn)的更高追求，這就要求開發(fā)者需要花費(fèi)心思在交互體驗(yàn)上，如何讓交互與虛擬現(xiàn)實(shí)體驗(yàn)完美結(jié)合，讓用戶不自覺地全身心投入其中而不自知，才是用戶想要的真實(shí)體驗(yàn)，也是開發(fā)者的追求目標(biāo)。尤其在游戲和數(shù)字展示領(lǐng)域。網(wǎng)頁交互中沉浸式體驗(yàn)表現(xiàn)為用戶在瀏覽網(wǎng)頁時(shí)憂慮感消失，主觀的時(shí)間和空間短暫定格，身心愉悅地享受網(wǎng)業(yè)的神奇的體驗(yàn)效果。網(wǎng)頁交互中的虛擬情境的運(yùn)用，使得各個(gè)頁面可選擇的方式有很多，為不同主題網(wǎng)頁、不同用戶打造不一樣的體驗(yàn)。使得網(wǎng)站的整體效果上更個(gè)性化、特色化，也為不同用戶打造不同的體驗(yàn)效果。當(dāng)今社會(huì)，人們對(duì)滲入生活的各類網(wǎng)站提出更高的要求，設(shè)計(jì)師也需要站在時(shí)代前沿，以人為本，不斷創(chuàng)新。在網(wǎng)頁交互中，虛擬現(xiàn)實(shí)技術(shù)的用戶體驗(yàn)，仁者見仁、智者見智，當(dāng)然，設(shè)計(jì)師也要不斷更新展示方式，這樣做的網(wǎng)頁個(gè)性化十足，也剔除了一直被模仿的詬病，使網(wǎng)頁的設(shè)計(jì)更加個(gè)性化。

4.4 網(wǎng)頁創(chuàng)意性情境體驗(yàn)

網(wǎng)頁交互的情境體驗(yàn)對(duì)設(shè)計(jì)師的創(chuàng)意起到了促進(jìn)作用，讓網(wǎng)站設(shè)計(jì)師與用戶產(chǎn)生交流，并主動(dòng)融入作品，提升設(shè)計(jì)者的審美，推動(dòng)學(xué)科融合、專業(yè)有效銜接，不能為了技術(shù)而技術(shù)，也不能為了設(shè)計(jì)而設(shè)計(jì)，而是要多元化、多角度地考慮頁面中元素存在的合理性和必要性，認(rèn)真推敲，優(yōu)化頁面。網(wǎng)頁交互的虛擬情境體驗(yàn)不僅對(duì)設(shè)計(jì)師提出了要求，對(duì)用戶也呈現(xiàn)了不同情境，這就要求與時(shí)俱進(jìn)，不斷創(chuàng)新。

5 網(wǎng)頁交互中虛擬情境體驗(yàn)的優(yōu)勢(shì)

5.1 彌補(bǔ)硬件設(shè)施的不足

這里所說的“硬件”是廣泛意義上的硬件，不僅指機(jī)器設(shè)備本身，還指因受經(jīng)濟(jì)、地域、空間、時(shí)間等受限，不能在網(wǎng)頁上輕松操作完成。虛擬現(xiàn)實(shí)技術(shù)能幫助在不同行業(yè)中搭建新的四維空間，彌補(bǔ)硬件的短板，同時(shí)增加用戶的各種體驗(yàn)，獲得真切的現(xiàn)實(shí)體驗(yàn)，節(jié)省了硬件成本和人工成本。

5.2 打破空間的限制

能搭建模擬仿真模型，為人們創(chuàng)造一個(gè)生動(dòng)、逼真、趣味十足的新的空間環(huán)境，用戶可以參與進(jìn)來，扮演一個(gè)新角色，這樣在使用過程中既調(diào)動(dòng)起用戶的積極性又能激發(fā)其主人公意識(shí)，更有利于網(wǎng)頁的宣傳和推廣。一些已流失或消失的重要資料，通過平臺(tái)的搭建，可以真實(shí)再現(xiàn)以前的場(chǎng)景，讓用戶長(zhǎng)知識(shí)的同時(shí)縮短了大量查閱資料和收集資料的時(shí)間，在提高了效率的同時(shí)，縮短了距離，也為用戶無形中節(jié)省了時(shí)間。

6 交互網(wǎng)頁中虛擬情境的UI展示

人機(jī)交互界面是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的橋梁。UI交互更好更靈活，信息展示方式更符合人類直觀感受，操作簡(jiǎn)單。實(shí)體UI界面是用戶通過物理環(huán)境與數(shù)字信息發(fā)生交互行為，如VR（虛擬現(xiàn)實(shí)）和AR（增強(qiáng)現(xiàn)實(shí)）。在網(wǎng)頁交互中，恰當(dāng)?shù)腢I展示能給用戶帶來不一樣的使用體驗(yàn)。無論是網(wǎng)站、游戲，還是虛擬現(xiàn)實(shí)，都需要UI界面的制作，對(duì)于界面可分為兩種。一種是跟隨VR頭盔移動(dòng)的UI，這種模式需要提供一個(gè)攝像機(jī)用于渲染UI界面，在UI界面與攝像機(jī)之間放置一些開發(fā)對(duì)象，可以通過渲染攝像機(jī)，使用UI跟隨頭盔進(jìn)行移動(dòng)。另一種是將UI看作3D物體作用于空間中的開發(fā)對(duì)象，在這種模式下，整個(gè)畫布被認(rèn)定為是一個(gè)3D空間中的開發(fā)對(duì)象，與創(chuàng)建其他三維物體一樣，該模式下UI是不會(huì)跟著頭盔移動(dòng)。

在虛擬現(xiàn)實(shí)中的交互會(huì)通過手柄發(fā)出一條射線，當(dāng)射線碰到UI元素后，結(jié)合手柄的操作，可調(diào)用相應(yīng)的方法。用線來操作UI界面通常有以下幾種方式：利用LineReander繪制； 3DUI實(shí)現(xiàn)；利用Cube縮放和GL庫(kù)繪制。

虛擬情境的動(dòng)效UI在網(wǎng)站中可起到支持微交互、顯示運(yùn)動(dòng)過程、動(dòng)態(tài)解釋和裝飾的作用。富有美感和流動(dòng)性的動(dòng)效UI時(shí)刻提醒用戶接下來發(fā)生的事情，引導(dǎo)窗口切換，創(chuàng)造對(duì)象間的層級(jí)感和空間感，減少用戶對(duì)等待事件的認(rèn)知，同時(shí)提升網(wǎng)頁的趣味性和個(gè)性化。動(dòng)態(tài)UI虛擬情境可以拉近與用戶之間的距離，模擬真實(shí)的場(chǎng)景，用戶可以很清晰的感受物體與物體之間的位置和層級(jí)關(guān)系。

7 交互式網(wǎng)頁中虛擬情境的展示應(yīng)用

7.1 展示原理

基于立體顯示的影像展示原理包括：①視差原理。人眼具有輔助與自適應(yīng)特性，輔助特性可以合成左右眼看到的圖形，使其合并成一幅圖，從而避免重影現(xiàn)象的出現(xiàn)；自適應(yīng)特性可作用在視網(wǎng)膜上聚焦遠(yuǎn)處物體成像。立體顯示技術(shù)就是充分利用視差原理，是雙眼產(chǎn)生視差性。②電子全屏展示原理。拍攝時(shí)采用全息底片拍攝以及再現(xiàn)全息照片，使其為全息圖像提供動(dòng)態(tài)顯示，在動(dòng)態(tài)屏幕展示全息照片再現(xiàn)立體影像。③體積型展示原理。對(duì)立體物體的散射光進(jìn)行再現(xiàn)處理，并對(duì)三維物體進(jìn)行分割，使其成為點(diǎn)陣圖形，利用立體顯示圖像采集設(shè)備掃描點(diǎn)陣，同時(shí)利用人眼視覺固有的暫留效應(yīng)組建立體影像。利用體積型原理可減少觀看時(shí)產(chǎn)生的不適感。

7.2 應(yīng)用概況

目前虛擬現(xiàn)實(shí)在城市規(guī)劃、房地產(chǎn)建設(shè)、醫(yī)療、旅游、舞臺(tái)設(shè)計(jì)、影視等交互虛擬展示領(lǐng)域應(yīng)用廣泛，并取得了一定成效。如房子優(yōu)勢(shì)銷售是房地產(chǎn)營(yíng)銷的核心，營(yíng)銷中經(jīng)常使用虛擬現(xiàn)實(shí)情境手段為消費(fèi)者營(yíng)造真切的看房體驗(yàn)，將立體影像傳遞給消費(fèi)者，從而達(dá)到刺激消費(fèi)的目的。在產(chǎn)品展示方面，可以利用虛擬技術(shù)、三維模型、立體影像等技術(shù)在平臺(tái)上發(fā)布虛擬三維產(chǎn)品外形數(shù)據(jù)，展示臺(tái)可多角度全方位的呈現(xiàn)產(chǎn)品外形。據(jù)統(tǒng)計(jì)數(shù)據(jù)分析，目前虛擬展示應(yīng)用中解決了靈活度、技術(shù)人員缺失、投資額度大等難題，且獲得了交互性、人性化的展示。

7.3 應(yīng)用實(shí)例

以房地產(chǎn)為例，為了讓異地準(zhǔn)客戶能清晰領(lǐng)略項(xiàng)目的建筑環(huán)境、周邊配套、室內(nèi)格局及不同戶型的視覺效果，設(shè)計(jì)了以立體影像為基礎(chǔ)的虛擬影像系統(tǒng)，消費(fèi)者在體驗(yàn)系統(tǒng)時(shí)可觀看虛擬仿真的景觀配套、建筑立體模型、室內(nèi)效果，切身體驗(yàn)游歷樓盤項(xiàng)目的樂趣。另一方面，還可以利用交互虛擬系統(tǒng)中的查詢、導(dǎo)航等菜單，循環(huán)關(guān)注自己感興趣的部分。360°全景觀看影像還可以通過系統(tǒng)轉(zhuǎn)發(fā)到自己的電子設(shè)備上（如手機(jī)、計(jì)算機(jī)），以備隨時(shí)觀看。全方位立體化虛擬影像展示采用了以下方法：①三維場(chǎng)景設(shè)計(jì)。為了能夠展示360°全景效果，最大限度地還原樓盤項(xiàng)目的原貌，需要制作和搭建仿真的三維場(chǎng)景。在繪制全景圖時(shí)需采用樓盤照片、航拍技術(shù)、衛(wèi)星圖、規(guī)劃圖及實(shí)測(cè)數(shù)據(jù)資源，同時(shí)利用三維軟件制作相應(yīng)的模型圖，以便保證立體影像與實(shí)景的還原性、一致性。②音頻設(shè)計(jì)。為了提升消費(fèi)者的購(gòu)房欲望，在立體影像展示中可配以音頻效果（如解說、場(chǎng)景音樂等），且音頻設(shè)計(jì)是能夠靈活控制音量大小、停止或播放的。

7.4 網(wǎng)站中的探索

不同的網(wǎng)站有不同的展示效果，對(duì)于使用者來說，好的網(wǎng)站需要有明確的導(dǎo)航指引，精美的頁面展示，易學(xué)、易操作，以及良好的互動(dòng)性和絕美的體驗(yàn)感。以新建的學(xué)習(xí)型網(wǎng)站為例，用戶首先需要做的是操作上的便利，可以在頁面明顯的地方植入三維影像的全景手把手教學(xué)視頻，哪里不會(huì)點(diǎn)哪里，就是贏得使用者的好感，且節(jié)約了學(xué)習(xí)時(shí)間。對(duì)于技術(shù)性網(wǎng)站，專業(yè)性就顯得尤為重要，如果網(wǎng)站上有全景的導(dǎo)航指引，用戶在學(xué)習(xí)過程中就會(huì)省去很多麻煩，且體驗(yàn)感更好，也增加了學(xué)習(xí)的樂趣。

8 結(jié)束語

現(xiàn)階段，虛擬現(xiàn)實(shí)技術(shù)由于資金、設(shè)備等因素尚未普及，僅處于前期研發(fā)階段，網(wǎng)頁交互中的虛擬情境僅處于小范圍的體驗(yàn)中。但是，隨著技術(shù)的提升和跨學(xué)科跨專業(yè)的融合，網(wǎng)站交互的體驗(yàn)性也逐步成為開發(fā)者考慮的重心。