基于三维虚拟视觉的产品交互设计平台的开发与实现

张璐琪

摘 要： 当前产品交互平台建模大都采用二维显示的方式，存在交互性低、工作量过大以及难更新等缺陷，因此将三维虚拟视觉融入产品交互设计平台中，依据三维虚拟视觉技术塑造产品交互场景，通过三维数字建模模拟产品信息，实现基于三维虚拟视觉的产品交互设计平台开发。该平台包括交互设计模块、三维虚拟视觉展示模块以及交互展示模块。分析了产品交互功能的实现过程，主要包括三维虚拟视觉建模、动画展示过程、虚拟交互设计和平台发布。给出产品交互平台的人机交互界面设计过程，以及实现产品外形三维虚拟视觉展示的主要代码。实验结果表明，所设计产品交互平台，具有较高的认可度和可用性。

关键词： 三维虚拟视觉； 产品交互设计平台； 二维显示； 产品信息模拟

中图分类号： TN919?34 文献标识码： A 文章编号： 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 引 言

产品交互平台是一种基于网络的综合多种媒体表现形成构建的信息平台，其丰富了产品的内容[1?3]，具有较高的应用价值。虚拟现实是基于计算机技术和相关科学技术，将用户置身于一个虚拟三维的世界中，确保用户可与虚拟场景中的物体进行交互的行为。当前产品交互平台建模大都采用二维显示的方式，存在交互性较低、工作量过大以及难更新等缺陷[4?5]。而随着多媒体技术和虚拟现实技术的不断发展，产品交互方式呈现网络化和多样化趋势，因此，本文设计与实现了基于三维虚拟视觉的产品交互平台。

目前研究产品交互平台的方法较多，但都存在一定的问题。其中，文献[6]将设计的思维引入产品交互领域，该过程注重交互设计师与软件工程师间的沟通，局限性较高。文献[7]提出了在多声道环绕立体投影显示系统中，采用VR?Platform技术平台，实现产品的虚拟展示和交互，该种方法抗噪能力较差，交互效果不佳。文献[8]分析了基于投影动态捕捉演示设备和多通道环幕显示，实现产品交互，可向用户提供生动形象的产品信息，但是存在效率低和耗能高的弊端。文献[9]基于FHG?IGD图形和计算机技术实现产品交互，该方法过于依赖产品的二维图形特征，敏感性较高，用户体验满意度较低。为了解决上述分析的问题，本文将三维虚拟视觉融入产品交互设计平台中，依据三维虚拟视觉技术塑造产品交互场景，通过三维数字建模模拟产品信息，实现了基于三维虚拟视觉的产品交互设计平台开发。分析了产品交互功能的实现过程，并给出产品交互平台的人机交互界面设计过程，以及实现产品外形三维虚拟视觉展示的主要代码。实验结果说明，所设计产品交互平台具有较高的认可度和可用性。

1 基于三维虚拟视觉的产品交互设计平台的

开发与实现

本文分析的三维虚拟视觉交互技术，是在虚拟现实产品交互设计平台中的三维人机交互技术，其是一种多通道人机交互过程，是在计算机中塑造三维模型并通过交互软件设置交互程序。三维人机交互是在三维虚拟视觉空间环境中同虚拟三维物体交互对象进行交互的行为。

1.1 平台总体结构

本文设计的基于三维虚拟视觉的产品交互设计平台的总体结构如图1所示，其关键部分是交互设计模块、三维虚拟视觉展示模块以及交互展示模块。

图1 三维虚拟视觉产品交互平台总体结构

（1） 交互设计模块。交互设计模块可实现企业对产品的虚拟交互平台的设计，该模块有模型和材质的导入、模型的重命名、模型运动的设定、模型分解展示的设定、备选模型和材质的关联设定和设计参数的存储等功能模块。交互设计模块依据采集的产品用户的交互操作信息，如点击鼠标、文本输入等执行不同的设计流程。

（2） 三维虚拟视觉展示模块。三维虚拟视觉展示模块确保用户在产品交互平台中可随机调控观察点，全面了解产品特征。该模块由视点的变换和动态渲染两个模块构成。三维虚拟视觉展示模块同用户进行交互可获取该模块的运行参数。

（3） 交互展示模块。交互展示模块的功能确保用户在设计的产品交互平台中同平台进行交互处理。该模块由产品展示方式的选择、产品不同部件的行为交互、交互采集产品组件的相关信息以及产品个性化定制等模块组成。交互展示模块可确保用户全面了解产品和相关部件的特征，为用户的个性化需求服务，提高用户的购买积极性。

1.2 基于三维虚拟视觉的产品交互功能实现过程

三维虚拟视觉作为产品交互平台的新的互动方式，可确保用户同产品交互平台间的沟通距离最小化，其实现主要包括如下4个过程，如图2所示。

（1） 三维虚拟视觉建模。采集所交互产品的三维虚拟视觉数据，分析其结构层次，获取产品不同构件的建模方法，简化已建好的模型，并采用贴图纹理映射等方法设置模型的材质，使用3D Max，AutoCAD等建模软件，塑造产品的三维虚拟视觉模型。

（2） 动画展示过程。动画是交互平台的关键部分，其是实现用户同产品间交互的关键，同时可对复杂产品的信息进行演示，向用户展示更为全面的产品信息。

（3） 虚拟交互设计。完成交互平台中的三维产品模型和动画制作后，应对它们进行虚拟的交互设计，可确保用户对产品进行旋转、缩放等控制。本文采用VRML（Virtual Reality Modeling Language），全称为虚拟现实建模语言设计产品模型的交互动作。

（4） 平台发布。将设计完成的产品交互平台框架同交互设计的产品模型融合成为一个总体，并辅以图片和时频等因素，可生产一个完整的产品交互平台界面，用户通过该界面实现产品的交互。

1.3 基于三维虚拟视觉的产品交互平台人机界面设计

基于上述分析的产品交互平台功能实现过程，能够明确产品交互平台的用户界面应包含的因素如下：

页面导航：依据三维虚拟交互平台的交互流程，该平台的导航模块需要包括外观浏览、交互处理以及用户帮助三部分。用不同的图标描述不同的内容，用户点击相应的图标则可选择对应的服务。

页面布局：布置层叠状的标签卡，用户点击鼠标，则可打开标签卡对应的分类服务内容。

页面元素：用户选择相应的服务后，页面上显示对应的产品信息，并且页面上还有调控产品三维虚拟视觉展示的按钮和管理音量高低的按钮。

1.4 代码设计

本文设计的平台中实现产品外形三维虚拟视觉展示的主要代码如下：

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； //采集鼠标塑造的响应

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；

}

采用以上代码，用户能够在场景视图中对鼠标进行变换操作，进而对产品特征进行综合观测。

2 实验分析

为了验证本文设计的基于三维虚拟视觉的产品交互平台的有效性，需要进行相关的实验。实验对本文设计的某手机三维虚拟视觉交互平台的学习程度、效率以及交互满意度三个方面进行评估。实验邀请10名用户参加检测，采用的对比平台为手机购物超市，并通过调查问卷方式对用户操作产品交互平台过程中的交互感受进行量化分析。三维虚拟实景展示如图3所示。

2.1 数据处理及分析

本文实验受试者为10名，其中大学生5名，互联网从业人员5名。10名被试者对本文设计的产品交互平台的主观评价采用评分制进行评估，评分标准为：1～5分分别表示很不满意、不满意、一般、满意、很满意。评分的均值、标准差、均值的标准误差计算公式如下：

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

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

[sx=1ns] （3）

式中：n表示受试人数；x用于描述受试者对手机交互平台打出的分数。

2.2 实验结果分析

统计分析用户操作记录，结果为：

受试者对本文设计的手机三维交互平台的初次印象评分均值如表1所示。分析表1可得，10名受试者对本文设计的手机三维交互平台的初次印象的平均分为4.65，说明大部分测试者对手机三维交互平台具有较好的印象。

受试者对手机三维交互平台的交互方式评分均值如表2所示。分析表2可得，平均分数为4.78，能够看出用户对本文设计的手机三维交互平台的交互方式具有较高的认可度。

实验对比分析受试者使用本文设计的手机交互平台和手机购物超市的界面可用性以及购物体验结果，分别如图4和图5所示。分析图4和图5可得，本文设计的基于三维虚拟视觉的手机交互平台的可用性和满意度都优于手机购物超市，具有较大的优势。

3 结 论

本文将三维虚拟视觉融入产品交互设计平台中，依据三维虚拟视觉技术塑造产品交互场景，通过三维数字建模模拟产品信息，实现基于三维虚拟视觉的产品交互设计平台开发。该平台包括交互设计模块、三维虚拟视觉展示模块以及交互展示模块。

分析了产品交互功能的实现过程，主要包括三维虚拟视觉建模、动画展示过程、虚拟交互设计和平台发布。给出产品交互平台的人机交互界面设计过程，以及实现产品外形三维虚拟视觉展示的主要代码。实验结果说明，所设计产品交互平台，具有较高的认可度和可用性。

参考文献

[1] 王晓丹.商品展示的虚拟时代[J].消费电子，2013（10）：133.

[2] 唐磊.交互设计的发展现状与趋势[J].长春教育学院学报，2012，28（4）：56?57.

[3] DDF.UXPA.用户体验百家谈[M].北京：电子工业出版社，2014.

[4] 廖宏建，曲哲.基于Kinect体感交互技术的虚拟装配实验系统开发[J].实验技术与管理，2013，30（7）：98?102.

[5] 蒋松儒.交互技术应用趋势下的展示设计[J].天津美术学院学报，2013（2）：79.

[6] 董世海.人机交互的进展及面临的挑战[J].计算机辅助设计与图形学报，2004，16（1）：1?13.

[7] 廖祝华，刘晓平.EAST装配仿真的三维交互和用户界面设计[J].系统仿真学报，2004，16（10）：2329?2331.

[8] 陈卯纯，孙薇，赵小惠.物联网智能家居中的人机交互[J].包装工程，2014，35（2）：64?67.

[9] 刘要华，朱珍民，叶剑.协同人机交互机制的研究与设计[J].计算机工程与设计，2014，35（2）：726?730.