牛 敏， 陳錦昌

（華南理工大學(xué)機(jī)械與汽車工程學(xué)院，廣東 廣州 510640）

隨著網(wǎng)絡(luò)信息化、科技化的高速發(fā)展，交互設(shè)計(jì)正以驚人的發(fā)展速度，不斷滲透到產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)、動(dòng)畫(huà)設(shè)計(jì)、廣告?zhèn)髅皆O(shè)計(jì)等各種設(shè)計(jì)領(lǐng)域中，并慢慢地融入到人們的生活中，被人們所接受。交互設(shè)計(jì)著重從用戶角度考慮，是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)。通過(guò)對(duì)產(chǎn)品的界面和行為進(jìn)行交互設(shè)計(jì)，讓產(chǎn)品和其使用者之間建立一種有機(jī)關(guān)系，從而達(dá)到使用者充分了解產(chǎn)品功能特性與操作方法的目的，進(jìn)而提高產(chǎn)品可用性。因此，交互設(shè)計(jì)致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時(shí)彼此的行為，了解人本身的心理和行為特點(diǎn)。產(chǎn)品交互設(shè)計(jì)涉及到多個(gè)學(xué)科，以及多領(lǐng)域多背景的人員溝通，是一門綜合性很強(qiáng)的研究。

然而如何實(shí)現(xiàn)交互設(shè)計(jì)，怎樣滿足設(shè)計(jì)的最終需求，虛擬現(xiàn)實(shí)技術(shù)、Web3D技術(shù)的產(chǎn)生與發(fā)展使交互設(shè)計(jì)的實(shí)現(xiàn)成為了可能。利用虛擬現(xiàn)實(shí)技術(shù)，通過(guò) Web3D技術(shù)可以使計(jì)算機(jī)生成一個(gè)逼真的三維感覺(jué)世界，用戶可以在其中實(shí)現(xiàn)簡(jiǎn)單的漫游活動(dòng)，因而出現(xiàn)了許多的 Web3D技術(shù)，如VRML、Viewpoint、Cult3D、Shockwave3D、Atmosphere等。在眾多的Web3D技術(shù)中，Cult3D具有良好的交互性、靈活性以及擴(kuò)展性等優(yōu)勢(shì)，將其作為產(chǎn)品交互設(shè)計(jì)的開(kāi)發(fā)工具就突出了它的優(yōu)勢(shì)所在。

因此，在產(chǎn)品設(shè)計(jì)中，特別是在機(jī)電產(chǎn)品的設(shè)計(jì)中引入交互設(shè)計(jì)，以突出設(shè)計(jì)的作用，體現(xiàn)產(chǎn)品可用性的目的。本文就是通過(guò) Cult3D對(duì)機(jī)電產(chǎn)品進(jìn)行交互設(shè)計(jì)，進(jìn)一步說(shuō)明在虛擬現(xiàn)實(shí)技術(shù)中，Cult3D在機(jī)電產(chǎn)品交互設(shè)計(jì)中的現(xiàn)實(shí)意義。

1 Cult3D

Cult3D是由瑞典Cycore公司推出的一款跨平臺(tái)的網(wǎng)絡(luò)應(yīng)用程序，可以在網(wǎng)頁(yè)上或者各種文檔格式中建立交互的3D對(duì)象，其最大的特點(diǎn)就是文件小，而且可以保留漂亮的貼圖以及強(qiáng)大的交互功能，讓用戶的3D模型作品可以完整顯示在網(wǎng)頁(yè)中，因而Cult3D廣泛應(yīng)用到了電子商務(wù)和電子交易、產(chǎn)品服務(wù)和培訓(xùn)、產(chǎn)品和銷售展示以及娛樂(lè)游戲等領(lǐng)域中[1]。

此外，Cult3D還具有跨平臺(tái)性、交互性好、渲染快等特點(diǎn)，它的內(nèi)核是基于JAVA，甚至可以嵌入JAVA類，利用JAVA來(lái)增強(qiáng)交互和擴(kuò)展，它的開(kāi)發(fā)環(huán)境也更趨向人性化和條理化，開(kāi)發(fā)效率也要高得多[2]。因此，在虛擬現(xiàn)實(shí)技術(shù)中，利用Cult3D技術(shù)對(duì)產(chǎn)品進(jìn)行交互設(shè)計(jì)的研究就顯示出了其優(yōu)勢(shì)所在。

對(duì)于Cult3D，主要由3個(gè)部分組成：

（1）Cult3D Designer 這主要是Cult3D的核心技術(shù)。在Cult3D Designer中可以建立具有交互的Cult3D對(duì)象。

（2）Cult3D Player插件 這個(gè)插件是給Netscape和Explorer等瀏覽器使用的，它的功能是讓瀏覽器可以播放Cult3D對(duì)象并展示交互其交互性能。

（3）Cult3D Exporter 插件 這個(gè)插件是給3D建模軟件如3DMAX或者M(jìn)AYA使用的。利用這個(gè)插件就可以從3DMAX或者M(jìn)AYA中把文件導(dǎo)出到Cult3D Designer來(lái)制作[3]。

因此，在進(jìn)行交互設(shè)計(jì)之前，需要在相應(yīng)的軟件中安裝對(duì)應(yīng)的插件，以保證設(shè)計(jì)工作的正常進(jìn)行。

在信息技術(shù)飛速發(fā)展的當(dāng)代，產(chǎn)品設(shè)計(jì)與計(jì)算機(jī)、網(wǎng)絡(luò)相結(jié)合已成為今后發(fā)展的一個(gè)重要方向，通過(guò)虛擬形式的互動(dòng)設(shè)計(jì)，設(shè)計(jì)師能更好地理解和感受產(chǎn)品的功能、形態(tài)、空間、色彩、人機(jī)關(guān)系及所構(gòu)成的環(huán)境情景，它能以最直觀的方式向消費(fèi)者表達(dá)設(shè)計(jì)創(chuàng)意，而消費(fèi)者可獲得最直觀的體驗(yàn)，它是傳統(tǒng)方式無(wú)法比擬的設(shè)計(jì)輔助方式[4]。由此可知，研究機(jī)電產(chǎn)品的交互設(shè)計(jì)成為產(chǎn)品設(shè)計(jì)領(lǐng)域中不可或缺的一部分，也是未來(lái)的發(fā)展趨勢(shì)。

2 利用 Cult3D對(duì)高亮潔打蠟機(jī)進(jìn)行交互設(shè)計(jì)

交互設(shè)計(jì)是綜合性較強(qiáng)的研究，在對(duì)產(chǎn)品進(jìn)行交互設(shè)計(jì)的整個(gè)過(guò)程中，不僅需要選擇合適的交互平臺(tái)，同時(shí)要準(zhǔn)確掌握產(chǎn)品與人之間是如何進(jìn)行交互的過(guò)程，將使用人群的特性，產(chǎn)品的功能特征等因素結(jié)合起來(lái)進(jìn)行設(shè)計(jì)。通過(guò)交互設(shè)計(jì)，用戶可以借助平臺(tái)從各個(gè)角度觀察、體驗(yàn)產(chǎn)品的不同特性，也可以根據(jù)用戶的需求，對(duì)產(chǎn)品進(jìn)行參數(shù)調(diào)整，使用戶更好的了解產(chǎn)品，從而增強(qiáng)產(chǎn)品與用戶之間的溝通能力，體現(xiàn)交互設(shè)計(jì)的重要作用。因此，對(duì)產(chǎn)品來(lái)說(shuō)，如何設(shè)計(jì)好的交互設(shè)計(jì)是非常重要的。下面以瓷磚生產(chǎn)線中的高亮潔打蠟機(jī)為例研究機(jī)電產(chǎn)品的交互設(shè)計(jì)。

所謂機(jī)電產(chǎn)品，就是指機(jī)械設(shè)備、電氣設(shè)備、交通運(yùn)輸工具、電子產(chǎn)品、電器產(chǎn)品和儀器儀表等及其零部件、元器件。結(jié)合上述分析，對(duì)于機(jī)電設(shè)備中的高亮潔打蠟機(jī)來(lái)說(shuō)，其交互設(shè)計(jì)主要由4部分組成：三維建模、模型渲染、交互設(shè)計(jì) 以及產(chǎn)品發(fā)布，其流程圖如圖1所示。

圖1 交互設(shè)計(jì)流程圖

2.1 高亮潔打蠟機(jī)的三維建模

在三維建模技術(shù)中，有許多計(jì)算機(jī)輔助設(shè)計(jì)軟件可以實(shí)現(xiàn)三維建模，其中主要包括工程類的三維建模軟件（即機(jī)械設(shè)計(jì)軟件）UG、Pro/E、SoliWorks等，以及美術(shù)類三維建模軟件（即工業(yè)設(shè)計(jì)軟件)3DSMax、Rhino、Maya、Sketch等。選擇第二類軟件進(jìn)行工業(yè)設(shè)計(jì)的三維建模，可以使模型更加直觀化、可操作性強(qiáng)，能滿足建模需求。3DSMax 的三角建模較強(qiáng)、一般經(jīng)常用在室內(nèi)以及建筑等方面，而Rhino是Nurbs曲面建模，具有精確性、相容性、高效性、易用性、經(jīng)濟(jì)性等特點(diǎn)，可以創(chuàng)建任何想象中的造型，被廣泛應(yīng)用于工業(yè)設(shè)計(jì)的三維造型設(shè)計(jì)中。本文采用Rhino軟件進(jìn)行高亮潔打蠟機(jī)的三維建模。

圖2為高亮潔打蠟機(jī)的視圖展示，4部分圖分別展示了整個(gè)機(jī)電設(shè)備的頂視圖、左視圖、前視圖以及透視圖，其中透視圖展現(xiàn)了整體的三維模型效果，為下一步的模型渲染做好準(zhǔn)備。

圖2 高亮潔打蠟機(jī)的模型視圖展示

2.2 高亮潔打蠟機(jī)的模型渲染

對(duì)三維模型進(jìn)行渲染，可以使模型產(chǎn)生更加逼真的效果，能讓用戶看到產(chǎn)品的最終效果。逼真的效果使用戶在進(jìn)行交互操作時(shí)，用戶可以更加直觀的了解目標(biāo)產(chǎn)品的整體情況，包括材質(zhì)、色彩、整體尺寸等因素。因此，優(yōu)質(zhì)的渲染效果是交互設(shè)計(jì)中必不可少的環(huán)節(jié)，同時(shí)也體現(xiàn)出了其在交互設(shè)計(jì)中的重要性。

首先，根據(jù)模型特點(diǎn)以及需要的渲染特效，將建好的模型從Rhino軟件中通過(guò).obj格式的文件導(dǎo)入到3DSMax軟件中。為了使渲染能產(chǎn)生更好的效果，在導(dǎo)出文件時(shí)一定要對(duì)曲面進(jìn)行優(yōu)化處理，通過(guò)參數(shù)調(diào)節(jié)，減少曲面數(shù)量，保證曲面的光滑度等特性。

其次，根據(jù)設(shè)計(jì)需求，通過(guò)調(diào)整材質(zhì)球的參數(shù)，將設(shè)置好的材質(zhì)、貼圖添加到材質(zhì)球上，并將這些材質(zhì)、貼圖按照要求添加到相應(yīng)的模型部件中。同時(shí)通過(guò)多次局部渲染，以觀察是否獲得滿意的渲染效果。

最后，對(duì)于環(huán)境的設(shè)置，可以在場(chǎng)景中的不同位置打上燈光，來(lái)增強(qiáng)模型不同部位的明暗效果，同時(shí)配合使用攝像機(jī)，從不同角度觀察模型，得到多角度的可視效果。

這樣渲染后的三維模型效果圖才能呈現(xiàn)出比較逼真的產(chǎn)品視圖，而模型的材質(zhì)、色彩在整體環(huán)境的影響下，充分展示了高亮潔打蠟機(jī)整體造型特點(diǎn)。圖3為最終的高亮潔打蠟機(jī)渲染效果圖。

圖3 高亮潔打蠟機(jī)的渲染效果圖

2.3 高亮潔打蠟機(jī)的交互設(shè)計(jì)

通過(guò)上述步驟，確定了產(chǎn)品最終的效果，但是三維效果圖的表現(xiàn)卻不能產(chǎn)生動(dòng)態(tài)的交互性效果，體現(xiàn)不出產(chǎn)品與用戶之間的交互關(guān)系以及產(chǎn)品本身的特點(diǎn)，因此需要將三維模型轉(zhuǎn)化為可交互的動(dòng)態(tài)設(shè)計(jì)。而這樣的交互設(shè)計(jì)可以增強(qiáng)用戶和產(chǎn)品的互動(dòng)關(guān)系，僅僅通過(guò)計(jì)算機(jī)以及網(wǎng)絡(luò)這些平臺(tái)，就可以讓用戶全方位掌握產(chǎn)品特性，并可以根據(jù)用戶需求來(lái)自行搭配產(chǎn)品的色彩、材質(zhì)等，進(jìn)行最終方案的確定。

因此，利用 Cult3D來(lái)實(shí)現(xiàn)機(jī)電產(chǎn)品交互設(shè)計(jì)的相關(guān)操作，需要從下面5方面來(lái)研究。

2.3.1 動(dòng)畫(huà)設(shè)計(jì)

在3DS Max環(huán)境中進(jìn)行關(guān)鍵幀動(dòng)畫(huà)的設(shè)置，制作簡(jiǎn)單動(dòng)畫(huà)，因此要對(duì)高亮潔打蠟機(jī)需要實(shí)現(xiàn)動(dòng)畫(huà)的部分進(jìn)行設(shè)計(jì)。由于要通過(guò)交互動(dòng)作使用戶參與到產(chǎn)品的操作中，所以將設(shè)備主體部分的觀察窗作為設(shè)計(jì)動(dòng)畫(huà)的一部分，即窗戶開(kāi)與關(guān)的動(dòng)畫(huà)實(shí)現(xiàn)。這樣，當(dāng)用戶進(jìn)行相關(guān)操作時(shí)，這些簡(jiǎn)單的動(dòng)畫(huà)就可以使用戶對(duì)產(chǎn)品有大致了解，這一步也為接下來(lái)的交互設(shè)計(jì)做好準(zhǔn)備。

2.3.2 導(dǎo)出文件

要導(dǎo)出 Cult3D能載入的文件格式，需要在3DSMax 中安裝相應(yīng)版本的 Cult3D Exporter插件，本例采用 3DSMax 8.0對(duì)應(yīng)版本的 Cult3D Exporter。在3DSMax程序窗口中點(diǎn)擊文件菜單中的 Export 命令，選擇保存類型為 Cult3D Designer(*.c3d)，在彈出的對(duì)話框中的Notes節(jié)點(diǎn)中選擇 Animation動(dòng)畫(huà)屬性，選定 Matrix animation矩陣動(dòng)畫(huà)，設(shè)置參數(shù)完畢，點(diǎn)擊保存即可。保存后的文件就可以通過(guò) Cult3D Designer軟件打開(kāi)，進(jìn)一步設(shè)計(jì)具體的交互動(dòng)作。

2.3.3 交互設(shè)計(jì)

根據(jù) 2.3.2節(jié)內(nèi)容，將保存好的文件導(dǎo)入到Cult3D Designer 中。單擊File 中的Add Cult3D Designer File，文件添加成功，此時(shí)就可以進(jìn)行交互設(shè)計(jì)了。經(jīng)分析可知，作為機(jī)電設(shè)備的高亮潔打蠟機(jī)，在設(shè)計(jì)交互動(dòng)作時(shí)，用戶需要知道產(chǎn)品各個(gè)部分的具體造型特點(diǎn)，同時(shí)了解相關(guān)操作部分的設(shè)計(jì)情況。因此，根據(jù)需求，可以設(shè)計(jì)出讓用戶只通過(guò)鼠標(biāo)與鍵盤的配合操作即可實(shí)現(xiàn)的交互功能。

圖4則為在Cult3D Designer 中進(jìn)行交互操作的窗口，激活菜單欄上的黑色小三角，通過(guò)鼠標(biāo)與鍵盤的操作，簡(jiǎn)單的交互動(dòng)作就可以實(shí)現(xiàn)了。

下面就從鼠標(biāo)與鍵盤操作兩方面對(duì)設(shè)計(jì)好的交互操作進(jìn)行分析。

對(duì)于鼠標(biāo)的操作，用戶可以通過(guò)鼠標(biāo)左鍵對(duì)設(shè)備前窗戶部分進(jìn)行打開(kāi)與關(guān)閉的演示操作，同時(shí)可以通過(guò)鼠標(biāo)右鍵對(duì)設(shè)備后窗戶部分進(jìn)行打開(kāi)與關(guān)閉的演示操作，方便用戶了解內(nèi)部結(jié)構(gòu)的大致情況，如圖5所示；此外，如果按住鼠標(biāo)左鍵不放可使產(chǎn)品圍繞中心軸旋轉(zhuǎn)，按住鼠標(biāo)右鍵不放可實(shí)現(xiàn)放大和縮小，同時(shí)按住鼠標(biāo)左鍵和右鍵可實(shí)現(xiàn)平移功能，如圖6所示。

圖4 交互操作的窗口

圖5 配合鼠標(biāo)開(kāi)窗操作

圖6 配合鼠標(biāo)平移縮放旋轉(zhuǎn)操作

對(duì)于鍵盤的操作，可以根據(jù)要求設(shè)置相關(guān)的數(shù)字鍵實(shí)現(xiàn)功能。例如，設(shè)置數(shù)字鍵“1”，每執(zhí)行一次，產(chǎn)品就會(huì)按照要求逆時(shí)針旋轉(zhuǎn) 90°，總共旋轉(zhuǎn)4次，回到初始狀態(tài)，這樣用戶就可以了解產(chǎn)品各個(gè)部位的造型情況；當(dāng)然也可以根據(jù)要求設(shè)置不同角度的參數(shù)，從而進(jìn)行不同角度的旋轉(zhuǎn)。圖7分別展示了不同旋轉(zhuǎn)角度的交互情況。

圖7 配合鍵盤旋轉(zhuǎn)操作

2.4 高亮潔打蠟機(jī)的產(chǎn)品發(fā)布

設(shè)計(jì)完成的作品需要通過(guò)相關(guān)的途徑進(jìn)行產(chǎn)品發(fā)布，才能充分展示產(chǎn)品交互設(shè)計(jì)的特性，進(jìn)而能讓用戶實(shí)現(xiàn)交互操作功能。在 Cult3D Designer中，可通過(guò)HTML網(wǎng)頁(yè)、PDF文件以及Office文檔進(jìn)行產(chǎn)品發(fā)布。對(duì)于高亮潔打蠟機(jī)，服務(wù)的對(duì)象主要是企業(yè)與用戶，需要通過(guò)網(wǎng)絡(luò)的方式實(shí)現(xiàn)企業(yè)、用戶與產(chǎn)品之間的交流，而Cult3D最后生成的.co格式文件非常適用于網(wǎng)絡(luò)上傳輸，可以很好的嵌入到網(wǎng)頁(yè)中，這樣可以讓用戶在瀏覽企業(yè)產(chǎn)品網(wǎng)站的過(guò)程中直接體驗(yàn)產(chǎn)品與人之間的交互關(guān)系，進(jìn)一步拉近產(chǎn)品與用戶之間的距離，體現(xiàn)產(chǎn)品可用性的特點(diǎn)?；诖瞬捎镁W(wǎng)頁(yè)的方式進(jìn)行發(fā)布。圖8為產(chǎn)品發(fā)布后通過(guò)網(wǎng)頁(yè)進(jìn)行交互的圖，用戶只需根據(jù)預(yù)定操作方式進(jìn)行操作，即可實(shí)現(xiàn)交互功能，體驗(yàn)交互設(shè)計(jì)的優(yōu)勢(shì)。

圖8 發(fā)布產(chǎn)品交互圖

2.5 高亮潔打蠟機(jī)的功能擴(kuò)展

為了使用戶能更加全方位的了解產(chǎn)品狀況，擴(kuò)大其功能的交互性是必要的。因此，結(jié)合上文研究思路，利用JAVA來(lái)增強(qiáng)交互效果，這時(shí)就需要掌握相關(guān)的編程知識(shí)，通過(guò)添加觸發(fā)事件以及配合動(dòng)作，對(duì)產(chǎn)品進(jìn)行外觀色彩選擇，設(shè)備環(huán)境選擇，以及模擬設(shè)備工作環(huán)境的聲音等，豐富產(chǎn)品與用戶之間的交互關(guān)系。然而更多的交互功能就需要有合適的用戶界面來(lái)對(duì)用戶進(jìn)行引導(dǎo)，使之形成交互性更強(qiáng)的平臺(tái)，利用Dreamweaver以及相關(guān)插件 Cult3D.mxp就可以實(shí)現(xiàn)這方面的要求。在Dreamwaver中結(jié)合平面設(shè)計(jì)知識(shí)以及用戶界面知識(shí)，設(shè)計(jì)出符合實(shí)際需求的界面，將其作為發(fā)布產(chǎn)品的平臺(tái)，這些將更能豐富交互與互動(dòng)的內(nèi)容，使機(jī)電產(chǎn)品具有更強(qiáng)的互動(dòng)功能，從而達(dá)到一定的市場(chǎng)效應(yīng)。

3 結(jié)束語(yǔ)

利用 Cult3D對(duì)機(jī)電產(chǎn)品進(jìn)行交互設(shè)計(jì)，使得設(shè)計(jì)在互動(dòng)層面上體現(xiàn)出產(chǎn)品的發(fā)展趨勢(shì)：注重產(chǎn)品與用戶之間的互動(dòng)關(guān)系，提高產(chǎn)品的可用性，這進(jìn)一步說(shuō)明了交互設(shè)計(jì)對(duì)產(chǎn)品的重要性。原先只能通過(guò)不同角度效果圖來(lái)表現(xiàn)產(chǎn)品，或者通過(guò)Flash影片播放來(lái)表現(xiàn)產(chǎn)品，在一定程度上能展示產(chǎn)品的外觀或者內(nèi)部結(jié)構(gòu)，但是卻未增強(qiáng)用戶與產(chǎn)品的互動(dòng)關(guān)系，用戶只能看，卻不能參與。交互設(shè)計(jì)的引入改變了產(chǎn)品與用戶的關(guān)系，使得用戶對(duì)產(chǎn)品能夠有更加全面、深入的了解。這樣不僅提高了設(shè)計(jì)、質(zhì)量、速度、提高了產(chǎn)品市場(chǎng)的競(jìng)爭(zhēng)力，降低了成本，更為企業(yè)帶來(lái)翻倍的利潤(rùn)。因此，利用 Cult3D技術(shù)來(lái)對(duì)機(jī)電產(chǎn)品進(jìn)行交互設(shè)計(jì)體現(xiàn)了其優(yōu)勢(shì)所在。

隨著國(guó)際互聯(lián)網(wǎng)的普及、網(wǎng)絡(luò)技術(shù)和硬件設(shè)施的飛速發(fā)展以及網(wǎng)絡(luò)帶寬的增加，網(wǎng)絡(luò)化三維產(chǎn)品必將成為今后產(chǎn)品交互的發(fā)展主流，交互設(shè)計(jì)也必將占據(jù)產(chǎn)品設(shè)計(jì)的主流，而交互設(shè)計(jì)思想的不斷成熟以及 Web3D技術(shù)的不斷發(fā)展將使得Cult3D技術(shù)的功能更加強(qiáng)大與完善，進(jìn)而在產(chǎn)品的交互設(shè)計(jì)中，完成更加豐富、更加真實(shí)的交互效果。

[1]鄧定華, 顏 武, 等. 基于Cult3D 實(shí)現(xiàn)交互式虛擬現(xiàn)實(shí)網(wǎng)頁(yè)[J]. 計(jì)算機(jī)與現(xiàn)代化, 2006, (8): 116-121.

[2]翟 彤. 基于Web3D的Cult3D的應(yīng)用與實(shí)踐[J]. 武漢工業(yè)學(xué)院學(xué)報(bào), 2005, 24(1): 41-43.

[3]蘇威洲, 童仲豪, 葉翰鴻. 實(shí)現(xiàn)網(wǎng)絡(luò)三維互動(dòng)——Cult3D應(yīng)用指南[M]. 北京: 清華大學(xué)出版社, 2001.1-3.

[4]范勁松, 羊 健. 產(chǎn)品虛擬展示環(huán)境設(shè)計(jì)技術(shù)[J].包裝工程, 2004, 25(3): 89-91.