基于三維虛擬視覺(jué)的產(chǎn)品交互設(shè)計(jì)平臺(tái)的開(kāi)發(fā)與實(shí)現(xiàn)

張璐琪

摘 要： 當(dāng)前產(chǎn)品交互平臺(tái)建模大都采用二維顯示的方式，存在交互性低、工作量過(guò)大以及難更新等缺陷，因此將三維虛擬視覺(jué)融入產(chǎn)品交互設(shè)計(jì)平臺(tái)中，依據(jù)三維虛擬視覺(jué)技術(shù)塑造產(chǎn)品交互場(chǎng)景，通過(guò)三維數(shù)字建模模擬產(chǎn)品信息，實(shí)現(xiàn)基于三維虛擬視覺(jué)的產(chǎn)品交互設(shè)計(jì)平臺(tái)開(kāi)發(fā)。該平臺(tái)包括交互設(shè)計(jì)模塊、三維虛擬視覺(jué)展示模塊以及交互展示模塊。分析了產(chǎn)品交互功能的實(shí)現(xiàn)過(guò)程，主要包括三維虛擬視覺(jué)建模、動(dòng)畫(huà)展示過(guò)程、虛擬交互設(shè)計(jì)和平臺(tái)發(fā)布。給出產(chǎn)品交互平臺(tái)的人機(jī)交互界面設(shè)計(jì)過(guò)程，以及實(shí)現(xiàn)產(chǎn)品外形三維虛擬視覺(jué)展示的主要代碼。實(shí)驗(yàn)結(jié)果表明，所設(shè)計(jì)產(chǎn)品交互平臺(tái)，具有較高的認(rèn)可度和可用性。

關(guān)鍵詞： 三維虛擬視覺(jué)； 產(chǎn)品交互設(shè)計(jì)平臺(tái)； 二維顯示； 產(chǎn)品信息模擬

中圖分類(lèi)號(hào)： TN919?34 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 1004?373X（2016）08?0118?04

Development and implementation of product interaction design platform

based on 3D virtual vision

ZHANG Luqi

（Hubei University of Automotive Technology， Shiyan 442002， China）

Abstract： The mode of two?dimensional display is adopted in modeling of the most current product interactive platforms， which has the defects of low interaction， excessive workload and difficult update. Therefore， 3D virtual vision is integrated into the product interaction design platform to mould the product interaction scene according to 3D virtual visual technology， simulate the product information by means of 3D digital modeling technology， and then realize the development of the product interaction design platform based on 3D virtual vision. The platform includes interaction design module， 3D virtual visual display module and interactive display module. The realization process of the interaction function is analyzed， mainly including 3D virtual visual modeling， animation display process， virtual interaction design and platform release. The human?computer interaction interface design process of product interaction platform and the main code of 3D virtual visual display to realize the product appearance are given. The experimental results indicate that the designed product interactive platform has high recognition degree and availability.

Keywords： 3D virtual vision； product interaction design platform； 2D display； product information simulation

0 引 言

產(chǎn)品交互平臺(tái)是一種基于網(wǎng)絡(luò)的綜合多種媒體表現(xiàn)形成構(gòu)建的信息平臺(tái)，其豐富了產(chǎn)品的內(nèi)容[1?3]，具有較高的應(yīng)用價(jià)值。虛擬現(xiàn)實(shí)是基于計(jì)算機(jī)技術(shù)和相關(guān)科學(xué)技術(shù)，將用戶(hù)置身于一個(gè)虛擬三維的世界中，確保用戶(hù)可與虛擬場(chǎng)景中的物體進(jìn)行交互的行為。當(dāng)前產(chǎn)品交互平臺(tái)建模大都采用二維顯示的方式，存在交互性較低、工作量過(guò)大以及難更新等缺陷[4?5]。而隨著多媒體技術(shù)和虛擬現(xiàn)實(shí)技術(shù)的不斷發(fā)展，產(chǎn)品交互方式呈現(xiàn)網(wǎng)絡(luò)化和多樣化趨勢(shì)，因此，本文設(shè)計(jì)與實(shí)現(xiàn)了基于三維虛擬視覺(jué)的產(chǎn)品交互平臺(tái)。

目前研究產(chǎn)品交互平臺(tái)的方法較多，但都存在一定的問(wèn)題。其中，文獻(xiàn)[6]將設(shè)計(jì)的思維引入產(chǎn)品交互領(lǐng)域，該過(guò)程注重交互設(shè)計(jì)師與軟件工程師間的溝通，局限性較高。文獻(xiàn)[7]提出了在多聲道環(huán)繞立體投影顯示系統(tǒng)中，采用VR?Platform技術(shù)平臺(tái)，實(shí)現(xiàn)產(chǎn)品的虛擬展示和交互，該種方法抗噪能力較差，交互效果不佳。文獻(xiàn)[8]分析了基于投影動(dòng)態(tài)捕捉演示設(shè)備和多通道環(huán)幕顯示，實(shí)現(xiàn)產(chǎn)品交互，可向用戶(hù)提供生動(dòng)形象的產(chǎn)品信息，但是存在效率低和耗能高的弊端。文獻(xiàn)[9]基于FHG?IGD圖形和計(jì)算機(jī)技術(shù)實(shí)現(xiàn)產(chǎn)品交互，該方法過(guò)于依賴(lài)產(chǎn)品的二維圖形特征，敏感性較高，用戶(hù)體驗(yàn)滿(mǎn)意度較低。為了解決上述分析的問(wèn)題，本文將三維虛擬視覺(jué)融入產(chǎn)品交互設(shè)計(jì)平臺(tái)中，依據(jù)三維虛擬視覺(jué)技術(shù)塑造產(chǎn)品交互場(chǎng)景，通過(guò)三維數(shù)字建模模擬產(chǎn)品信息，實(shí)現(xiàn)了基于三維虛擬視覺(jué)的產(chǎn)品交互設(shè)計(jì)平臺(tái)開(kāi)發(fā)。分析了產(chǎn)品交互功能的實(shí)現(xiàn)過(guò)程，并給出產(chǎn)品交互平臺(tái)的人機(jī)交互界面設(shè)計(jì)過(guò)程，以及實(shí)現(xiàn)產(chǎn)品外形三維虛擬視覺(jué)展示的主要代碼。實(shí)驗(yàn)結(jié)果說(shuō)明，所設(shè)計(jì)產(chǎn)品交互平臺(tái)具有較高的認(rèn)可度和可用性。

1 基于三維虛擬視覺(jué)的產(chǎn)品交互設(shè)計(jì)平臺(tái)的

開(kāi)發(fā)與實(shí)現(xiàn)

本文分析的三維虛擬視覺(jué)交互技術(shù)，是在虛擬現(xiàn)實(shí)產(chǎn)品交互設(shè)計(jì)平臺(tái)中的三維人機(jī)交互技術(shù)，其是一種多通道人機(jī)交互過(guò)程，是在計(jì)算機(jī)中塑造三維模型并通過(guò)交互軟件設(shè)置交互程序。三維人機(jī)交互是在三維虛擬視覺(jué)空間環(huán)境中同虛擬三維物體交互對(duì)象進(jìn)行交互的行為。

1.1 平臺(tái)總體結(jié)構(gòu)

本文設(shè)計(jì)的基于三維虛擬視覺(jué)的產(chǎn)品交互設(shè)計(jì)平臺(tái)的總體結(jié)構(gòu)如圖1所示，其關(guān)鍵部分是交互設(shè)計(jì)模塊、三維虛擬視覺(jué)展示模塊以及交互展示模塊。

圖1 三維虛擬視覺(jué)產(chǎn)品交互平臺(tái)總體結(jié)構(gòu)

（1） 交互設(shè)計(jì)模塊。交互設(shè)計(jì)模塊可實(shí)現(xiàn)企業(yè)對(duì)產(chǎn)品的虛擬交互平臺(tái)的設(shè)計(jì)，該模塊有模型和材質(zhì)的導(dǎo)入、模型的重命名、模型運(yùn)動(dòng)的設(shè)定、模型分解展示的設(shè)定、備選模型和材質(zhì)的關(guān)聯(lián)設(shè)定和設(shè)計(jì)參數(shù)的存儲(chǔ)等功能模塊。交互設(shè)計(jì)模塊依據(jù)采集的產(chǎn)品用戶(hù)的交互操作信息，如點(diǎn)擊鼠標(biāo)、文本輸入等執(zhí)行不同的設(shè)計(jì)流程。

（2） 三維虛擬視覺(jué)展示模塊。三維虛擬視覺(jué)展示模塊確保用戶(hù)在產(chǎn)品交互平臺(tái)中可隨機(jī)調(diào)控觀(guān)察點(diǎn)，全面了解產(chǎn)品特征。該模塊由視點(diǎn)的變換和動(dòng)態(tài)渲染兩個(gè)模塊構(gòu)成。三維虛擬視覺(jué)展示模塊同用戶(hù)進(jìn)行交互可獲取該模塊的運(yùn)行參數(shù)。

（3） 交互展示模塊。交互展示模塊的功能確保用戶(hù)在設(shè)計(jì)的產(chǎn)品交互平臺(tái)中同平臺(tái)進(jìn)行交互處理。該模塊由產(chǎn)品展示方式的選擇、產(chǎn)品不同部件的行為交互、交互采集產(chǎn)品組件的相關(guān)信息以及產(chǎn)品個(gè)性化定制等模塊組成。交互展示模塊可確保用戶(hù)全面了解產(chǎn)品和相關(guān)部件的特征，為用戶(hù)的個(gè)性化需求服務(wù)，提高用戶(hù)的購(gòu)買(mǎi)積極性。

1.2 基于三維虛擬視覺(jué)的產(chǎn)品交互功能實(shí)現(xiàn)過(guò)程

三維虛擬視覺(jué)作為產(chǎn)品交互平臺(tái)的新的互動(dòng)方式，可確保用戶(hù)同產(chǎn)品交互平臺(tái)間的溝通距離最小化，其實(shí)現(xiàn)主要包括如下4個(gè)過(guò)程，如圖2所示。

（1） 三維虛擬視覺(jué)建模。采集所交互產(chǎn)品的三維虛擬視覺(jué)數(shù)據(jù)，分析其結(jié)構(gòu)層次，獲取產(chǎn)品不同構(gòu)件的建模方法，簡(jiǎn)化已建好的模型，并采用貼圖紋理映射等方法設(shè)置模型的材質(zhì)，使用3D Max，AutoCAD等建模軟件，塑造產(chǎn)品的三維虛擬視覺(jué)模型。

（2） 動(dòng)畫(huà)展示過(guò)程。動(dòng)畫(huà)是交互平臺(tái)的關(guān)鍵部分，其是實(shí)現(xiàn)用戶(hù)同產(chǎn)品間交互的關(guān)鍵，同時(shí)可對(duì)復(fù)雜產(chǎn)品的信息進(jìn)行演示，向用戶(hù)展示更為全面的產(chǎn)品信息。

（3） 虛擬交互設(shè)計(jì)。完成交互平臺(tái)中的三維產(chǎn)品模型和動(dòng)畫(huà)制作后，應(yīng)對(duì)它們進(jìn)行虛擬的交互設(shè)計(jì)，可確保用戶(hù)對(duì)產(chǎn)品進(jìn)行旋轉(zhuǎn)、縮放等控制。本文采用VRML（Virtual Reality Modeling Language），全稱(chēng)為虛擬現(xiàn)實(shí)建模語(yǔ)言設(shè)計(jì)產(chǎn)品模型的交互動(dòng)作。

（4） 平臺(tái)發(fā)布。將設(shè)計(jì)完成的產(chǎn)品交互平臺(tái)框架同交互設(shè)計(jì)的產(chǎn)品模型融合成為一個(gè)總體，并輔以圖片和時(shí)頻等因素，可生產(chǎn)一個(gè)完整的產(chǎn)品交互平臺(tái)界面，用戶(hù)通過(guò)該界面實(shí)現(xiàn)產(chǎn)品的交互。

1.3 基于三維虛擬視覺(jué)的產(chǎn)品交互平臺(tái)人機(jī)界面設(shè)計(jì)

基于上述分析的產(chǎn)品交互平臺(tái)功能實(shí)現(xiàn)過(guò)程，能夠明確產(chǎn)品交互平臺(tái)的用戶(hù)界面應(yīng)包含的因素如下：

頁(yè)面導(dǎo)航：依據(jù)三維虛擬交互平臺(tái)的交互流程，該平臺(tái)的導(dǎo)航模塊需要包括外觀(guān)瀏覽、交互處理以及用戶(hù)幫助三部分。用不同的圖標(biāo)描述不同的內(nèi)容，用戶(hù)點(diǎn)擊相應(yīng)的圖標(biāo)則可選擇對(duì)應(yīng)的服務(wù)。

頁(yè)面布局：布置層疊狀的標(biāo)簽卡，用戶(hù)點(diǎn)擊鼠標(biāo)，則可打開(kāi)標(biāo)簽卡對(duì)應(yīng)的分類(lèi)服務(wù)內(nèi)容。

頁(yè)面元素：用戶(hù)選擇相應(yīng)的服務(wù)后，頁(yè)面上顯示對(duì)應(yīng)的產(chǎn)品信息，并且頁(yè)面上還有調(diào)控產(chǎn)品三維虛擬視覺(jué)展示的按鈕和管理音量高低的按鈕。

1.4 代碼設(shè)計(jì)

本文設(shè)計(jì)的平臺(tái)中實(shí)現(xiàn)產(chǎn)品外形三維虛擬視覺(jué)展示的主要代碼如下：

if （flogon） {

interval Vector3.Interval（flogon.equilib，gameobject.transform.equilib）；

if（Input.GetMouseButton（0））{

X += Input.ObtainDren（"Mouse X"） * xSpeed * 0.01；

y ?= Input.ObtainDren（"Mouse Y"） * ySpeed * 0.01；

y = Discretion（y， yMinExtreme， yMaxExtreme）；

}

interval ?? Input.ObtainDren（"Mouse ScrollQueue"） * queueSpeed； //采集鼠標(biāo)塑造的響應(yīng)

interval = lVIathf.Betwen（interval，mineExt，maxExt）；

//距離取最大值和最小值

transform == Quaternion.Euler（y， x， 0）；

equilib = transform * Vector3（0.0， 0.0， ?interval） + flogon.equilib；

transform. transform = transform；

transform.equilib = equilib；

}

采用以上代碼，用戶(hù)能夠在場(chǎng)景視圖中對(duì)鼠標(biāo)進(jìn)行變換操作，進(jìn)而對(duì)產(chǎn)品特征進(jìn)行綜合觀(guān)測(cè)。

2 實(shí)驗(yàn)分析

為了驗(yàn)證本文設(shè)計(jì)的基于三維虛擬視覺(jué)的產(chǎn)品交互平臺(tái)的有效性，需要進(jìn)行相關(guān)的實(shí)驗(yàn)。實(shí)驗(yàn)對(duì)本文設(shè)計(jì)的某手機(jī)三維虛擬視覺(jué)交互平臺(tái)的學(xué)習(xí)程度、效率以及交互滿(mǎn)意度三個(gè)方面進(jìn)行評(píng)估。實(shí)驗(yàn)邀請(qǐng)10名用戶(hù)參加檢測(cè)，采用的對(duì)比平臺(tái)為手機(jī)購(gòu)物超市，并通過(guò)調(diào)查問(wèn)卷方式對(duì)用戶(hù)操作產(chǎn)品交互平臺(tái)過(guò)程中的交互感受進(jìn)行量化分析。三維虛擬實(shí)景展示如圖3所示。

2.1 數(shù)據(jù)處理及分析

本文實(shí)驗(yàn)受試者為10名，其中大學(xué)生5名，互聯(lián)網(wǎng)從業(yè)人員5名。10名被試者對(duì)本文設(shè)計(jì)的產(chǎn)品交互平臺(tái)的主觀(guān)評(píng)價(jià)采用評(píng)分制進(jìn)行評(píng)估，評(píng)分標(biāo)準(zhǔn)為：1～5分分別表示很不滿(mǎn)意、不滿(mǎn)意、一般、滿(mǎn)意、很滿(mǎn)意。評(píng)分的均值、標(biāo)準(zhǔn)差、均值的標(biāo)準(zhǔn)誤差計(jì)算公式如下：

[x=x1+x2+…+xnn] （1）

[s=1n-1i=1n（xi-x）2] （2）

[sx=1ns] （3）

式中：n表示受試人數(shù)；x用于描述受試者對(duì)手機(jī)交互平臺(tái)打出的分?jǐn)?shù)。

2.2 實(shí)驗(yàn)結(jié)果分析

統(tǒng)計(jì)分析用戶(hù)操作記錄，結(jié)果為：

受試者對(duì)本文設(shè)計(jì)的手機(jī)三維交互平臺(tái)的初次印象評(píng)分均值如表1所示。分析表1可得，10名受試者對(duì)本文設(shè)計(jì)的手機(jī)三維交互平臺(tái)的初次印象的平均分為4.65，說(shuō)明大部分測(cè)試者對(duì)手機(jī)三維交互平臺(tái)具有較好的印象。

受試者對(duì)手機(jī)三維交互平臺(tái)的交互方式評(píng)分均值如表2所示。分析表2可得，平均分?jǐn)?shù)為4.78，能夠看出用戶(hù)對(duì)本文設(shè)計(jì)的手機(jī)三維交互平臺(tái)的交互方式具有較高的認(rèn)可度。

實(shí)驗(yàn)對(duì)比分析受試者使用本文設(shè)計(jì)的手機(jī)交互平臺(tái)和手機(jī)購(gòu)物超市的界面可用性以及購(gòu)物體驗(yàn)結(jié)果，分別如圖4和圖5所示。分析圖4和圖5可得，本文設(shè)計(jì)的基于三維虛擬視覺(jué)的手機(jī)交互平臺(tái)的可用性和滿(mǎn)意度都優(yōu)于手機(jī)購(gòu)物超市，具有較大的優(yōu)勢(shì)。

3 結(jié) 論

本文將三維虛擬視覺(jué)融入產(chǎn)品交互設(shè)計(jì)平臺(tái)中，依據(jù)三維虛擬視覺(jué)技術(shù)塑造產(chǎn)品交互場(chǎng)景，通過(guò)三維數(shù)字建模模擬產(chǎn)品信息，實(shí)現(xiàn)基于三維虛擬視覺(jué)的產(chǎn)品交互設(shè)計(jì)平臺(tái)開(kāi)發(fā)。該平臺(tái)包括交互設(shè)計(jì)模塊、三維虛擬視覺(jué)展示模塊以及交互展示模塊。

分析了產(chǎn)品交互功能的實(shí)現(xiàn)過(guò)程，主要包括三維虛擬視覺(jué)建模、動(dòng)畫(huà)展示過(guò)程、虛擬交互設(shè)計(jì)和平臺(tái)發(fā)布。給出產(chǎn)品交互平臺(tái)的人機(jī)交互界面設(shè)計(jì)過(guò)程，以及實(shí)現(xiàn)產(chǎn)品外形三維虛擬視覺(jué)展示的主要代碼。實(shí)驗(yàn)結(jié)果說(shuō)明，所設(shè)計(jì)產(chǎn)品交互平臺(tái)，具有較高的認(rèn)可度和可用性。

參考文獻(xiàn)

[1] 王曉丹.商品展示的虛擬時(shí)代[J].消費(fèi)電子，2013（10）：133.

[2] 唐磊.交互設(shè)計(jì)的發(fā)展現(xiàn)狀與趨勢(shì)[J].長(zhǎng)春教育學(xué)院學(xué)報(bào)，2012，28（4）：56?57.

[3] DDF.UXPA.用戶(hù)體驗(yàn)百家談[M].北京：電子工業(yè)出版社，2014.

[4] 廖宏建，曲哲.基于Kinect體感交互技術(shù)的虛擬裝配實(shí)驗(yàn)系統(tǒng)開(kāi)發(fā)[J].實(shí)驗(yàn)技術(shù)與管理，2013，30（7）：98?102.

[5] 蔣松儒.交互技術(shù)應(yīng)用趨勢(shì)下的展示設(shè)計(jì)[J].天津美術(shù)學(xué)院學(xué)報(bào)，2013（2）：79.

[6] 董世海.人機(jī)交互的進(jìn)展及面臨的挑戰(zhàn)[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)報(bào)，2004，16（1）：1?13.

[7] 廖祝華，劉曉平.EAST裝配仿真的三維交互和用戶(hù)界面設(shè)計(jì)[J].系統(tǒng)仿真學(xué)報(bào)，2004，16（10）：2329?2331.

[8] 陳卯純，孫薇，趙小惠.物聯(lián)網(wǎng)智能家居中的人機(jī)交互[J].包裝工程，2014，35（2）：64?67.

[9] 劉要華，朱珍民，葉劍.協(xié)同人機(jī)交互機(jī)制的研究與設(shè)計(jì)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2014，35（2）：726?730.