基于交互設(shè)計(jì)的產(chǎn)品遠(yuǎn)程展示平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

(東北石油大學(xué)軟件學(xué)院，黑龍江大慶163318）

產(chǎn)品遠(yuǎn)程展示平臺(tái)，是一種基于網(wǎng)絡(luò)的、綜合多種媒體表現(xiàn)形式構(gòu)建的遠(yuǎn)程信息平臺(tái)，它很大程度上豐富了所要展示產(chǎn)品的內(nèi)容，并快捷的提供了相關(guān)產(chǎn)品的對(duì)比信息。交互設(shè)計(jì)是設(shè)計(jì)人們?nèi)粘Ｉ罟ぷ髦锌梢赃M(jìn)行互動(dòng)式的產(chǎn)品，它注重用戶在操作過(guò)程中的體驗(yàn)，以開(kāi)發(fā)出使用戶感覺(jué)愉悅、方便并且能夠高效使用的最終產(chǎn)品為目標(biāo)。從平臺(tái)的角度上說(shuō)，交互設(shè)計(jì)就是如何對(duì)產(chǎn)品進(jìn)行特殊設(shè)計(jì)，從而讓用戶更加全面的了解其內(nèi)部結(jié)構(gòu)、功能特性等。交互設(shè)計(jì)作為一門關(guān)注用戶體驗(yàn)的新學(xué)科吸引了越來(lái)越多人的研究與應(yīng)用，隨著多媒體技術(shù)和虛擬現(xiàn)實(shí)技術(shù)的發(fā)展，市場(chǎng)上出現(xiàn)了越來(lái)越多的交互式產(chǎn)品，交互方式也各異，數(shù)字化、網(wǎng)絡(luò)化、多樣化必將成為產(chǎn)品展示設(shè)計(jì)發(fā)展的一大趨勢(shì)。為此，筆者設(shè)計(jì)與實(shí)現(xiàn)了一種基于交互設(shè)計(jì)的產(chǎn)品遠(yuǎn)程展示平臺(tái)。

1 基于交互設(shè)計(jì)的產(chǎn)品遠(yuǎn)程展示平臺(tái)特點(diǎn)

90年代后期以來(lái)，展示設(shè)計(jì)采用了新的方式，是多元化、多種手段并存的：圖像-文字-三維環(huán)境-數(shù)字化展示[1]。隨著多媒體、虛擬現(xiàn)實(shí)技術(shù)的飛速發(fā)展，產(chǎn)品的展示形式也發(fā)生了變化，多媒體的虛擬化展示日益壯大，三維交互設(shè)計(jì)也被引入了產(chǎn)品虛擬展示平臺(tái)中。交互設(shè)計(jì)在遠(yuǎn)程展示平臺(tái)主要有以下優(yōu)點(diǎn)：

1）交互設(shè)計(jì)提高了遠(yuǎn)程展示平臺(tái)的直觀性 運(yùn)用交互設(shè)計(jì)的產(chǎn)品遠(yuǎn)程展示平臺(tái)通過(guò)三維建模渲染出具有真實(shí)效果的產(chǎn)品模型，實(shí)現(xiàn)了全方位的細(xì)節(jié)展示，更加的直觀清晰。

2）交互設(shè)計(jì)突出了遠(yuǎn)程展示平臺(tái)的互動(dòng)性 交互設(shè)計(jì)增加了產(chǎn)品與用戶之間的聯(lián)系，使得用戶不再單單按照程序設(shè)計(jì)的路線被動(dòng)查看，而是真正掌握主動(dòng)權(quán)，由自己決定查看方式，可以360°旋轉(zhuǎn)查看，可以自己動(dòng)手裝配或者拆卸產(chǎn)品模型，這種互動(dòng)性也增強(qiáng)了用戶瀏覽的積極性。

3）交互設(shè)計(jì)增強(qiáng)了遠(yuǎn)程展示平臺(tái)的真實(shí)性 交互設(shè)計(jì)的最終目標(biāo)是讓產(chǎn)品最大程度的被用戶熟悉了解，它模擬了實(shí)際工作生活中產(chǎn)品的功能，并通過(guò)簡(jiǎn)單的操作，配合豐富的聲音，使得展示效果更加的形象，更加的逼真。

2 產(chǎn)品遠(yuǎn)程展示平臺(tái)的設(shè)計(jì)原則

1）首先考慮虛擬展示空間的可用性 可用性體現(xiàn)在展示平臺(tái)的通用、易學(xué)、有效等方面，由于不同的展示平臺(tái)設(shè)計(jì)風(fēng)格不同，所以在設(shè)計(jì)上不要讓用戶的心理上有太大的差異[2]，同時(shí)考慮到用戶不可能經(jīng)常上網(wǎng)瀏覽，所以展示平臺(tái)必須要讓用戶容易操作，不會(huì)有挫敗感，并保證操作的高效性。

2）平臺(tái)中功能元素的設(shè)計(jì)要充分考慮用戶的目的和需求 收集用戶的具體需求，分析歸類，以便幫助設(shè)計(jì)操作流程，決定添加哪些功能模塊。對(duì)于產(chǎn)品的遠(yuǎn)程展示平臺(tái)的不同的模塊而言，需要提前針對(duì)不同類型的內(nèi)容加以分類，因?yàn)橄鄬?duì)于傳統(tǒng)的展示平臺(tái)，它綜合了文字、圖片、音頻、視頻、模型、動(dòng)畫(huà)等更多的多媒體元素，所以需要預(yù)先分類從而進(jìn)一步的評(píng)估所要添加的信息量。

所構(gòu)建的產(chǎn)品遠(yuǎn)程展示平臺(tái)最終是服務(wù)用戶的，因而用戶的感受與展示平臺(tái)的好壞息息相關(guān)[3]，對(duì)不同的展示平臺(tái)采用不同的設(shè)計(jì)方案，但在界面設(shè)計(jì)上大致都要遵循精美簡(jiǎn)潔的原則。此外，遠(yuǎn)程展示平臺(tái)中適當(dāng)?shù)募尤胍恍┯脩粢庀氩坏降膭?chuàng)意，也會(huì)增加趣味性。

3）導(dǎo)航簡(jiǎn)介清晰 如果說(shuō)遠(yuǎn)程展示平臺(tái)是一輛奔馳的跑車，網(wǎng)站導(dǎo)航就是GPS，讓用戶快速簡(jiǎn)捷的找到目的地，并以最佳的路徑到達(dá)。網(wǎng)站導(dǎo)航系統(tǒng)是否專業(yè)與用戶對(duì)網(wǎng)站的感受有著密不可分的關(guān)系，也是網(wǎng)站信息是否能夠有效地傳遞給用戶的重要影響因素之一。

4）界面設(shè)計(jì)秩序化、友好化 近幾年網(wǎng)絡(luò)的發(fā)展使人們?cè)絹?lái)越重視網(wǎng)頁(yè)設(shè)計(jì)，逐步產(chǎn)生了審美的需求，所以在避免網(wǎng)頁(yè)設(shè)計(jì) “塞”、“花”、“千篇一律”的基礎(chǔ)上，要設(shè)計(jì)出具有自身特色又符合用戶心理模型的網(wǎng)頁(yè)。

3 產(chǎn)品遠(yuǎn)程展示平臺(tái)的框架設(shè)計(jì)

對(duì)于一個(gè)基本的產(chǎn)品遠(yuǎn)程展示平臺(tái)來(lái)說(shuō)，應(yīng)該包含如下幾個(gè)功能模塊：產(chǎn)品的分類檢索模塊、產(chǎn)品展示與交互模塊、產(chǎn)品詳細(xì)介紹模塊、相關(guān)產(chǎn)品對(duì)比模塊、用戶討論模塊、購(gòu)買聯(lián)系模塊等(見(jiàn)圖1），同時(shí)針對(duì)不同模塊的特點(diǎn)，合理化布局并實(shí)現(xiàn)相關(guān)的功能。

圖1 產(chǎn)品遠(yuǎn)程展示平臺(tái)功能模塊圖

4 產(chǎn)品遠(yuǎn)程展示平臺(tái)的實(shí)現(xiàn)

1）系統(tǒng)開(kāi)發(fā)平臺(tái) 產(chǎn)品遠(yuǎn)程展示平臺(tái)采用Jsp＋Javabean＋SQL Server開(kāi)發(fā)。Jsp動(dòng)態(tài)網(wǎng)頁(yè)語(yǔ)言結(jié)合Javabean使得產(chǎn)品遠(yuǎn)程展示平臺(tái)具有很好的可移植性，不用重新編譯，即可從一個(gè)平臺(tái)移植到另一個(gè)平臺(tái)，同時(shí)后臺(tái)采用SQL Server數(shù)據(jù)庫(kù)存儲(chǔ)產(chǎn)品的相關(guān)信息，并提供相應(yīng)界面方便管理員進(jìn)行增刪改查及用戶的查詢的操作。

圖2 網(wǎng)站首頁(yè)圖

網(wǎng)站設(shè)計(jì)了6個(gè)主要的功能模塊(見(jiàn)圖2）：①產(chǎn)品的分類檢索模塊。該模塊有助于幫助用戶快捷的找到自己想要了解的產(chǎn)品，起到了一個(gè)導(dǎo)航的作用。在該模塊中，一般用到的檢索是基于產(chǎn)品屬性的檢索，比如品牌、價(jià)位、樣式等等。用戶通過(guò)平臺(tái)的操作界面以交互的方式經(jīng)Web服務(wù)器來(lái)訪問(wèn)后臺(tái)數(shù)據(jù)庫(kù)，并將提交的內(nèi)容與檢索結(jié)果以網(wǎng)頁(yè)的形式發(fā)送回客戶端顯示出來(lái)。②產(chǎn)品展示與交互模塊。作為整個(gè)界面中最重要的部分，它所需占據(jù)的空間比例也較大，用戶可以通過(guò)該模塊獲得產(chǎn)品最直觀的信息，包括圖片介紹、文字信息、模型交互、音頻模擬、動(dòng)畫(huà)演示等[4]，同產(chǎn)品模型進(jìn)行一系列的交互來(lái)體驗(yàn)產(chǎn)品的功能，一定程度上也會(huì)增加用戶的購(gòu)買欲望。將設(shè)計(jì)完成的產(chǎn)品模型輸出為可網(wǎng)絡(luò)發(fā)布的VRPIE文件嵌入網(wǎng)頁(yè)中，用戶在任何一臺(tái)聯(lián)網(wǎng)的計(jì)算機(jī)上便可自動(dòng)下載VRP-IE插件在線瀏覽或者下載VRP場(chǎng)景，進(jìn)而以用戶自己的想法來(lái)了解產(chǎn)品的各方面信息。③產(chǎn)品詳細(xì)介紹模塊。當(dāng)用戶查詢到感興趣的產(chǎn)品時(shí)，會(huì)希望進(jìn)一步了解產(chǎn)品的詳細(xì)信息，詳細(xì)介紹模塊可以很方便讓用戶瀏覽產(chǎn)品的信息，比如產(chǎn)品的規(guī)格(包括大小、材質(zhì)等）、產(chǎn)品的使用說(shuō)明、出廠信息、產(chǎn)品的模型和圖片，并可以在不需要的時(shí)候隱藏起來(lái)。④相關(guān)產(chǎn)品對(duì)比模塊。琳瑯滿目的產(chǎn)品有時(shí)候會(huì)使用戶想要直觀的比較產(chǎn)品之間的不同，此時(shí)就需要幾個(gè)產(chǎn)品同時(shí)出現(xiàn)在屏幕上，供用戶對(duì)比選擇，比如當(dāng)用戶購(gòu)買筆記本的時(shí)候，檢索到合適的品牌、型號(hào)的筆記本后，應(yīng)該在該產(chǎn)品下方展示出平臺(tái)中部分與用戶挑選的產(chǎn)品具有類似屬性的同類型其他產(chǎn)品的鏈接信息，以便于用戶購(gòu)買最稱心滿意的產(chǎn)品。⑤用戶討論模塊。進(jìn)入平臺(tái)的用戶可以注冊(cè)成為會(huì)員或者以游客的身份發(fā)表自己的看法以及對(duì)產(chǎn)品的評(píng)價(jià)，同時(shí)在線客服會(huì)提供相應(yīng)的咨詢服務(wù)，對(duì)于會(huì)員的留言提問(wèn)信息也會(huì)有管理員及時(shí)給予的回復(fù)。銷售者需要用戶的意見(jiàn)改進(jìn)的自身的產(chǎn)品，而消費(fèi)者的評(píng)論也會(huì)影響其他購(gòu)買者得心理。⑥購(gòu)買聯(lián)系模塊。產(chǎn)品遠(yuǎn)程展示平臺(tái)的最終目的也是希望消費(fèi)者購(gòu)買自己的產(chǎn)品，所以平臺(tái)中需要提供與商家溝通聯(lián)系的方式以及一些購(gòu)買功能設(shè)置，例如產(chǎn)品的價(jià)格、支付手段、售后服務(wù)以及賣主介紹，以確保交易順利成功的進(jìn)行。

圖3 技術(shù)流程圖

2）三維交互功能的實(shí)現(xiàn) 三維交互作為產(chǎn)品遠(yuǎn)程展示平臺(tái)中新的互動(dòng)方式，最大程度上做到了與用戶之間的零距離接觸。它的實(shí)現(xiàn)主要分為以下4個(gè)階段(見(jiàn)圖3）：①三維建模。收集所展產(chǎn)品的三維數(shù)據(jù)，并分析其結(jié)構(gòu)層次，確定不同部件的建模方法，同時(shí)考慮場(chǎng)景的運(yùn)行速度，對(duì)已建好的好模型進(jìn)行簡(jiǎn)化，減少不必要的數(shù)據(jù)，最后通過(guò)貼圖、紋理映射等手段編輯模型的材質(zhì)[5]，通過(guò)3DMax、AutoCAD等建模軟件最終構(gòu)建出產(chǎn)品三維模型，使得模型本身更加貼近真實(shí)產(chǎn)品。②動(dòng)畫(huà)展示制作。動(dòng)畫(huà)是展示平臺(tái)中非常重要的一部分，它不僅可以配合產(chǎn)品與用戶之間進(jìn)行基本的交互，而且可以設(shè)計(jì)一些復(fù)雜產(chǎn)品的工作方式的演示方案，類似機(jī)械產(chǎn)品的裝配與分離，然后制作成Flash嵌入到網(wǎng)頁(yè)中，或者用VRP內(nèi)置的時(shí)間軸做一些簡(jiǎn)單的原理模擬，豐富產(chǎn)品的本身信息。③虛擬交互設(shè)計(jì)。展臺(tái)中所需的三維產(chǎn)品模型和動(dòng)畫(huà)制作完成之后，需要對(duì)它們進(jìn)行虛擬的交互設(shè)計(jì)，這也是展示平臺(tái)與用戶之間進(jìn)行交互的關(guān)鍵環(huán)節(jié)，通過(guò)三維網(wǎng)絡(luò)技術(shù)，可以實(shí)現(xiàn)類比控制、旋轉(zhuǎn)、縮放、拆分之類的操作，目前比較流行的技術(shù)主要有Java3D、Viewpoint等，這里筆者主要運(yùn)用VRP設(shè)計(jì)產(chǎn)品模型的主要交互動(dòng)作。④后期制作(平臺(tái)發(fā)布）。將已設(shè)計(jì)完成的平臺(tái)框架與交互設(shè)計(jì)的產(chǎn)品模型整合成為一個(gè)整體，并適當(dāng)?shù)奶砑訄D片、視頻、動(dòng)畫(huà)等信息，最終形成產(chǎn)品遠(yuǎn)程展示平臺(tái)的各個(gè)交互界面，后期制作過(guò)程中既要保證預(yù)想的效果與功能可以順利實(shí)現(xiàn)，又要保證界面設(shè)計(jì)美觀大方，所以技術(shù)人員和美工人員之間要實(shí)時(shí)的溝通與配合。這樣后期制作后，平臺(tái)便可以通過(guò)相關(guān)的網(wǎng)絡(luò)技術(shù)發(fā)布到網(wǎng)絡(luò)上了，需要用到的相關(guān)技術(shù)有JSP動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)、數(shù)據(jù)庫(kù)技術(shù)等。

5 結(jié) 語(yǔ)

著重闡述了交互設(shè)計(jì)在產(chǎn)品遠(yuǎn)程展示平臺(tái)中的特點(diǎn)，并從用戶的角度出發(fā)敘述了平臺(tái)的搭建過(guò)程、基于交互設(shè)計(jì)的產(chǎn)品遠(yuǎn)程展示平臺(tái)的設(shè)計(jì)理念以及實(shí)現(xiàn)中應(yīng)注意的問(wèn)題。在計(jì)算機(jī)技術(shù)高速發(fā)展的信息時(shí)代，相信會(huì)有更多的產(chǎn)品遠(yuǎn)程展示平臺(tái)中引入交互設(shè)計(jì)的理念，而交互設(shè)計(jì)也會(huì)逐漸在其他的領(lǐng)域中發(fā)光發(fā)熱。

[1]鐘蕾，魏雅莉．論虛擬展示 [J]．包裝工程，2006，27（1）：239-241．

[2]尼爾森．可用性工程 [M]．北京：機(jī)械工業(yè)出版社，2004．

[3]孫敏．交互設(shè)計(jì)中德行為研究與目標(biāo)導(dǎo)向 [D]．蘇州：蘇州大學(xué)，2007．

[4]王衛(wèi)星，楊勤．產(chǎn)品設(shè)計(jì)中的交互創(chuàng)造 [A]．Proceedings of the 2004International Conference on Industrial Design [C]．2004．

[5]丁玉蘭，郭鋼，趙江洪．人機(jī)工程學(xué) [M]．北京：北京理工大學(xué)出版社，2000．