基于虚拟现实技术的线上教学平台交互设计.pdf

科技传播123信息科技基金项目：广州华商学院 2022 年青年学术科研项目“基于元宇宙线上教学的沉浸式用户体验设计研究”（2022HSXS019）。作者简介：张艺欣，助教，广州华商学院，研究方向为交互设计。0 引言在智能化、信息化的现代社会，现代教育模式也在技术加持下发展变革，尤其是新冠疫情的暴发，促使线上教学发展突飞猛进，但线上教学所暴露的问题也更加明显。在大量的在线教学实践中，需要综合利用技术手段、资源内容整合和新型的人机交互方式，解决线上教学中存在的种种问题。各行各业都在大数据、云计算、虚拟现实、增强现实等技术的推动中更新迭代。利用虚拟现实技术和可穿戴设备，学生能够在线上教学的虚拟空间进行沉浸式人机交互，在轻松愉悦的情绪下完成学习任务。线上教学平台利用虚拟现实技术能够为用户提供沉浸式、游戏化的学习体验，通过更自然、友好的人机交互方式为学生营造学习情境。1 线上教学与虚拟现实技术1.1 线上教学发展现状线上教学是互联网普及和教育教学改革的必然产物，受新冠疫情影响，线上教学方式几乎在全国范围内展开。新冠疫情期间，教育部提出“停课不停学”的举措，在线教学依托互联网和广播电视等技术，主要有网络在线课程、网络直播教学、学生自主学习、电视空中课堂等典型模式，其中网络在线课程以高等教育为主，网络直播教学作为补充措施可应用到各个阶段，师生交互水平较强但稳定性较差1。在高校的在线教学实践中，有研究调查表明大学生的自主学习能力总体不强，高校教师的线上教学能力有待提升，教学平台功能不完善和网络拥堵问题较为突出，线上教学效果与满意度不理想且存在城乡差异等问题，需要加强教学平台和网络建设，补齐线上教学“农村短板”2。线上教学是传统线下教学的功能延伸，混合式教学即将成为常态化，除了对线上教学的课程体系进行科学规划，也应充分利用现代的技术手段对线上教学平台进行设计与建设。1.2 虚拟现实技术在科技引领创新发展的环境下，虚拟现实（Virtual Reality，简称 VR）的技术发展成为创新设计的新路径，军事、医疗、工业、教育等社会各个领域都在借助虚拟现实的创新技术进行开发与应用。虚拟现实的关键技术包含三维建模技术、三维显示技术、三维音频技术和体感交互技术，虚拟现实系统利用不同的硬件设备和软件环境，可以为用户提供非沉浸式虚拟现实系统、半沉浸式虚拟现实系统、沉浸式虚拟现实系统和分布式虚拟现实系统的不同体验3。对于虚拟现实的理论研究，国内外学者进行了大量跨专业学科的探索提出了诸多新理论。在实践应用方面，依托虚拟现实技术深度的人机交互体验，这项技术已经逐渐覆盖社会各行各业，除了沉浸式体验的影视、游戏等满足用户的娱乐需求，虚拟现实技术的重要现实意义也体现在教育培训领域，尤其自新冠疫情暴发后，虚拟现实技术能够为在线教育提供新的学习方式、新理念和新环境。基于虚拟现实技术的线上教学平台交互设计张艺欣摘 要 通过分析线上教学的发展现状与问题，结合虚拟现实技术梳理线上教学平台的设计思路，并进行 VR 教学平台的交互设计实践。阐述了 VR 教学平台的功能、交互方式和视觉界面的设计思路，提出了在教学平台利用虚拟现实技术进行设计创新的要点。关键词 虚拟现实；线上教学；交互设计；沉浸式用户体验中图分类号 G2 文献标识码 A 文章编号 1674-6708（2023）337-0123-0520238（下）科技传播124信息科技1.3 虚拟现实线上教学应用随着在线教学的发展，虚拟现实技术通过三维模型创建虚拟空间，用户可以通过穿戴硬件设备进行人机交互，在教学平台构建的特殊情境中获得沉浸式学习体验。在美国，职业教育领域的虚拟现实技术在教师培训、人工智能和生物医学领域都有所应用，为我国职业教育的发展提供了先进经验4。有国内学者认为借助虚拟现实技术的优势，能够提升艺术设计类课程教学各个环节的教学质量，如知识演示环节内容呈现更直观，实验教学环节仿真实验室丰富学习方法，训练环节可以进行模块化训练，实习考察环节教师远程辅导等5。依托虚拟现实技术的线上教学，不仅应用于创新实验室和智慧校园的构建，更能带来教学理念和教学方式的改革与创新。2 VR 教学平台的功能设计在基于虚拟现实技术的教学平台设计实践中，根据现实中学习的多种需求进行功能设计，包括沉浸式体验的教学模块、自学模块和游戏化设计的互动模块、休闲模块，具体功能设计如图 1 所示。图1 VR教学平台功能设计2.1 沉浸式学习体验2.1.1 多样化教学方式在 VR 教学平台可进行直播教学，并建立系统的在线课程库。在直播教学中，根据班级课程安排由教师建立自主课程，根据不同的专业内容也可以开设公共分享课直播。利用虚拟现实技术，教师可以通过肢体动作与学生互动。教师可通过不同的手势和动作操作虚拟屏幕，进行板书设计和操作演示。在系统的在线课程中，根据课程内容设置音视频展示方式，在不同领域、不同专业、不同课程中科学分类，学生可以根据自己的需求搜索在线课程完成学习任务。2.1.2 虚拟现实仿真实验利用虚拟现实技术构建的仿真实验室，可以有效综合视觉、听觉、触觉等感觉进行沉浸式考察实训和仿真实验。虚拟仿真实验室能够节省高精尖仪器和大型设备的预算，并打破这些设备仪器的物理空间限制，为实操教学打下扎实基础。虚拟仿真实验室能够有效覆盖多领域，如医学专业进行模拟手术，职业技术教育进行设备实操，设计专业进行三维构建等。对于需要进行实地考察的专业，通过虚拟仿真实验室可以进行在线教学，如导游专业可以在虚拟空间进行讲解实践，设计专业可以进行在线考察，而不受时间和空间的限制。根据不同专业的教学需求，建立不同的虚拟现实仿真实验室能够有效为用户提供沉浸式学习体验。2.1.3 沉浸式自主学习现实世界的自学主要场景之一就是图书馆，VR教学平台中的图书馆成为现实世界的孪生空间，具备电子图书资料、影音资料和具有互动性的操作资料。在自习室中，利用虚拟空间设计可以屏蔽其他干扰因素进行沉浸式学习，并根据用户不同的情况自主建立学习档案，将学习情况储存在数据库中，使用户清楚学习进度，并根据知识掌握情况智能化推荐相关资料，实现沉浸式自主学习。2.2 游戏化设计2.2.1 互动会议与工作坊在所有教学的环节中离不开人与人的互动，师生间的教学互动，学生间的交流都需要有效的沟通。在VR 教学平台，互动环节不仅存在于教学过程中，还包括开设不同的会议和工作坊。如举办学术论坛时的一对多大型直播会议和多人对话的圆桌会议，还有小组协作的讨论会。针对各种会议方式的不同，设置不同会议室的功能。一对多的大型直播会议除了展示直播者的音视频，还包括在虚拟屏幕进行绘制和操作，收看直播的用户可以通过文字、表情、手势和肢体动作进行反馈互动。在工作坊活动中，同一小组成员可共享任务和进度，通过协同文档分配工作并实时查看小组进度。VR 教学平台的互动方式不仅包括传统的文字、音视频，更应该利用不同的感官和肢体动作，通过游戏化的方式完成学习任务。2.2.2 虚拟空间场景漫游VR 教学平台作为真实教学环境的孪生，在设计时将学校的教学楼、实验楼、图书馆、行政楼等具有不同功能的建筑空间，利用三维技术搭建出完整的校园环境。在虚拟的教学空间中，不仅包括教学所需的建筑空间，还应具有丰富的环境设计使之具有一定的休闲属性。虚拟世界的环境构建脱离了现实世界的束缚，在三维空间设计时借鉴游戏场景的思路，使学习空间具有趣味性和娱乐性。用户可以在丰富的三维虚拟空间中进行漫游探索，发现新的空间和事物，同时在界面中加入空间导览，用户可以一键到达想去的学习空间。这种游戏化的空间设计方式，让用户在学习的同时能够进行休闲放松。2.2.3 独立个人空间传统的互联网服务平台一般都具有个人设置模科技传播125信息科技块，VR 教学平台中的个人空间就是这种模块的三维化。在个人空间中，用户可以根据自己的喜好装扮房间，并摆放相关的功能入口，进行个性化设置。用户可以自己设计物品、学习资料和装扮，并在用户之间进行自主交易。在虚拟学习空间利用游戏化的设计方式，有利于让用户在简单枯燥的学习中体验趣味性，进而轻松愉悦地学习。3 VR 教学平台的交互方式设计3.1 人、物、空间的交互在 VR 教学平台中包含了人、物、空间三种元素的交互，用户之间的交互、用户与空间、用户与物品，甚至物品在空间中的交互，如图 2 所示。图2 人、物、空间交互方式3.1.1 人与人交互用户之间的互动是 VR 教学平台中最重要的交互，决定了 VR 教学平台是否“可用”，用户之间的交互是否流畅决定了教学任务能否顺利完成。老师在向学生发布任务、教学讲解与演示、接收学生反馈等环节，不仅利用文字、图像和语音，还利用虚拟现实和增强现实的方式对学生的作业进行指导，让学生能够更直观接收信息。除了师生间的互动，人与人的交互还包括学生之间的沟通，如在进行小组协作时，学生能通过讨论会议、文件共享等方式完成交互。只有人与人的交互需求充分实现，才能保证 VR 教学平台的有效性。3.1.2 人与物交互人与物交互是对用户的操作进行合理反馈，是决定 VR 教学平台是否“好用”的重要因素。这种“好用”体现在用户进行了某种操作后，通过设计让用户明确这种操作是否成功，并且能够简单、高效地完成学习任务。用户在执行了某种命令后，应及时出现界面跳转、提示信息、元素动态等，如果操作出错，也应进行反馈并告知用户如何改正错误。人与物的交互还体现在功能流程的设计上，用户完成一项功能的步骤应尽量简化且明确，才能实现 VR教学平台的“好用”。3.1.3 人与空间交互人与空间的交互实现了用户在 VR 教学平台的休闲娱乐性，让用户在轻松愉悦的心态下学习，使得用户“愿意用”VR 教学平台进行学习。人与空间的交互包括场景漫游、快速导航、空间探索和设计。用户在虚拟空间学习之余可以游览虚拟风光，在空间中寻找其他用户，或进入其他用户的个人空间，也可以对自己的个人空间进行设计。除了在虚拟空间中进行漫游探索，快速导航也是人与空间交互的一个重要部分，通过空间导航用户可以一键抵达目的地，且在交互界面中体现所在区域名称和路径，有利于让用户清晰 VR 教学平台中的逻辑关系。3.1.4 空间与物品在 VR 教学平台的交互设计中，让用户觉得“可用”“好用”和“愿意用”，还体现在空间与物品的关系这类设计细节中。当某种物品被用户放置在空间中，物品和空间都发生动态变化，也是对用户进行操作的反馈。如在最后限制时间内用户提交文件，空间进行闪烁提醒，用户所提交的文件作为物品被投递成功后，空间的闪烁消失，也意味着文件投递成功。另外在黑暗环境和明亮环境中，用户所拿的笔会随着空间亮度发生变化，能够在虚拟屏幕上绘制不同亮度的效果。空间与物品的动态关系有助于让用户在 VR 教学平台中获得明确的反馈，提高使用效率。3.2 自然交互方式自然交互方式可以脱离鼠标、键盘的限制，通过动作、手势、表情、声音等输入指令并进行人机交互。自然交互替代了用户在传统互联网平台中操作的表单界面，是一种隐藏的界面方式，在用户看不到操作界面时，需要通过日常的生活习惯进行人机交互，能够凭直觉完成操作。VR 教学平台借助VR 眼镜、VR 头显等设备通过自然化方式进行人机交互，输入方式包括手势、动作和语音，输出方式有图像和声音。在头显图像界面中显示用户的双手，通过跟踪用户双手的动态，实时改变界面中手的形态位置，人手操作虚拟手的方式在虚拟空间中进行交互操作。用户在进行仿真实验时，需要对肢体动作和手势等进行识别，帮助用户顺利完成抓取、放置、移动等操作，这种交互方式是传统的鼠标键盘输入无法完成的任务。3.3 情感化设计作为教育教学的辅助手段，在线教学解决了时间、空间、预算等现实问题，但也存在一定的弊端，如网络、技术、设备等条件问题，还由于网络产生的距离，师生之间有可能产生疏离感，因此存在用户的消极情绪和情感缺失问题。为改善用户的情绪和情感状况，VR 教学平台依托情感化设计，在虚拟空间、教学内容、教师和学生之间架起有效互动的桥梁。在虚拟空间的构建上，包括具有特殊20238（下）科技传播126信息科技意义的建筑、趣味性的造型、不同功能的公共空间和私密的个人空间。教学内容的情感化，是在大数据的支持下将教师提供的传统教材进行分类，并借助虚拟现实技术丰富呈现方式。教师在授课时的表情、动作、语气、语速等因素都有可能影响学生的状态，因此教师的情感也是激发学生情感的重要因素。另外情感化教学方式也有利于学生更好地吸收知识，如学生在轻松愉悦的心情下学习能够更加乐在其中。合理的情感化设计，能增强产品和用户之间的连接，为用户提供便利的同时带来趣味和惊喜，让用户获得愉悦的学习体验。4 VR 教学平台的界面设计4.1 三维场景搭建VR 教学平台的虚拟空间不是单纯将现实校园进行搬运，而是通过分析学生操作的历史数据生成不同的学习环境，学生也可以根据自己的喜好进行设置。在三维场景的搭建中，基本的教学功能根据虚拟建筑进行分类，如图书馆、实验楼、教学楼和个人空间等，每栋建筑都是一个分类的入口，如图 3所示。除了主要的功能入口建筑，还有其他休闲空间，用户可以在虚拟场景中进行探索，整个虚拟空间是集学习、休闲、游戏为一体的综合平台。三维场景的灯光模拟太阳光源，在虚拟世界的不同时间具有不同的光照效果，在室内空间或其他具有交互操作的空间利用区域光作为补充光源。主建筑体的内部是具有不同功能的独立场景，如教室、会议室、实验室、机房、办公室等。虚拟空间中模型的设计可以脱离现实物品的约束，在教室空间中搭建了悬浮透明屏幕、发光座椅、可交互书桌等，使虚拟空间更具有科技感，如图 4 所示。图3 虚拟教学空间设计图4 虚拟教室设计4.2 交互界面层次设计三维虚拟空间中的界面，和二维界面一样具有相关功能组件，如菜单、按钮、标签、表单等，但这些功能组件在三维界面中的表现形式有所不同，另外由于借助了虚拟现实技术，三维界面的交互方式也和二维界面不同。虚拟空间中的三维界面需要更简洁、明晰的表现，让用户更好地感知和操作，在设计策略上要利用景深关系构建用户在虚拟空间的和谐交互，也要根据用户的心理进行界面优化6。在 VR 教学平台的交互界面设计中，根据功能结构的不同分为远景、中景和近景三个层次，如图5所示。远景体现了虚拟空间的环境元素，使用户了解虚拟空间的逻辑结构，如大型的建筑和景观等。中景主要包括进行交互的物品、虚拟人等，使用户了解正在进行的操作和任务，也可以提示用户具体所在的位置。近景是用户进行交互操作的具体内容，如物品的特写、虚拟手的操作、文字提示和其他操作反馈。虚拟空间中的界面设计通过层次划分，有利于帮助用户理解三维空间结构关系，在三维界面中顺利完成交互操作。图5 界面层次设计4.3 视觉风格虚拟教学空间的三维场景运用科技感和未来感的建筑元素，重要的操作控件也利用三维模型与用户进行交互。在界面构图上合理分配环境元素、导航菜单、交互控件、图标等信息，用简明的图像信息替代复杂的文字，在必须出现文字指示的地方，尽可能使文字简短清晰。场景中采用了大量蓝色元素，三维模型运用了玻璃、金属和发光等材质，带给用户在虚拟世界的科幻感。图标是进行高效信息传达的图形语言，图标具有通用性，用户在不同平台使用同一种图标也可以明白其作用，在 VR 教学平台的图标设计中包括根据现实世界绘制的拟物化图标和具有通用性的抽象图标。交互按钮有三维立体和二维平面两种形式，重要的入口按钮运用三维立体图标融合在场景中，并用黄色、红色等能够在背景环境中凸显的颜色给用户提示。借助充满科技感的视觉效果，用户能够以游戏化的方式在 VR 教学平台完成学习任务，如图 6 所示。科技传播127信息科技图6 操作界面设计图4.4 动效设计顺畅的人机交互是让用户明白每一步操作的意义和效果，因此频繁而有效的反馈至关重要。在用户体验设计中，要根据用户的日常习惯进行交互设计，也要根据用户的心理和喜好进行视觉设计，用户的每一次点击、每一次操作都有适当的动画效果是设计的重要部分。动效设计能够将没有生命的物联网产品拟人化，能够为虚拟空间、虚拟人，甚至图标和按钮赋予人性化表现。动效设计包括基础操作动效、出错提示、环境动效等。基础操作动效是与用户进行交互的有效反馈，如用户在触发按钮时，按钮通过三维动态展示按下的效果。出错提示运用抖动或弹出效果，提示出错和向用户解释解决办法。环境动效是用户在虚拟空间中的互动体现，如经过草丛时，草丛随用户的方向运动等。良好的动效设计不仅是用户操作的反馈，也能将产品和用户进行情感连接，为用户带来积极的情绪。5 在线教学的设计创新展望5.1 沉浸式学习在二维网站的学习平台，用户的学习方式往往是“浏览式”，利用虚拟现实技术，用户能够在三维空间中转变为“沉浸式”学习。在虚拟现实的三维空间，用户通过感知系统和行为系统，能够全身心沉浸在平台提供的情境中。利用感知系统，用户可以体验视觉、听觉、触觉和其他感觉的沉浸。利用行为系统，用户可以在虚拟空间感受到方向、动作和语言等的沉浸。VR 教学平台的仿真实验室是沉浸式体验的重要体现，利用虚拟现实技术的沉浸式学习体验，能够为学生提供更真实的学习情境。5.2 互动方式游戏化在线教学平台的游戏化交互设计，是在教育教学的情境下，利用游戏的元素、交互方式、技术等让用户轻松愉悦地完成学习任务。游戏化的互动方式不是倡导无意义的娱乐游戏，而是让用户在学习情境下更具有沉浸感。在游戏化的互动方式中，学生不仅可以根据老师提供的内容进行学习，在虚拟现实技术的加持下，用户全身心投入学习情境也可以在探索中吸收隐形的知识，另外在虚拟空间中用户之间的无障碍沟通，也可以提高学生的协作能力。为提高教学平台的有效性，需要对用户的体验效果进行跟踪，不仅要总结用户对平台的可用性反馈，还要测评学生对知识掌握的情况，通过不断设计改进提高用户参与度和忠诚度。5.3 个性化教学模式随着教学模式的多元化和新的教育理念发展，使得旧有的教学环境、师生关系、知识体系和教学观念都要进行变革。在线上教学模式的学习环境中，每一个学生用户都是独立个体，其学习能力、学习环境、个人习惯等都有所不同，根据每一个学生提供个性化的教学方式是现代教育的发展新路径。在线教育需要借助智能化方式，通过大数据和云计算对学生前序知识的掌握、基础知识水平等进行分析，为学生的课前、课中和课后各阶段提供不同的学习内容和学习方式。在虚拟现实教学平台中，通过提供不同的情境、资源和工具，实现个性化教学。6 结语现代教育是新技术和新理念的融合，以学生需求为中心设计的交互方式才能真正结合新技术为教学服务。本文提出的 VR 教学平台是利用虚拟现实技术搭建的学习空间，能够在沉浸式学习和游戏化体验中完成教学、自学、互动、休闲等各个教育环节。在 VR 教学平台的交互设计中，提出了人、物、空间之间的交互方式，为用户提供自然化、情感化的人机交互体验，通过三维场景的构建和交互界面的设计，让学生在特定的教学情境中顺利完成学习任务。现代教育模式应该充分利用技术发展带来的机遇，通过虚拟现实技术创建沉浸式学习情境，能够让学生在游戏化的轻松体验中进行个性化学习。参考文献1焦建利，周晓清，陈泽璇.疫情防控背景下“停课不停学”在线教学案例研究J.中国电化教育，2020（3）：106-113.2刘燚，张辉蓉.高校线上教学调查研究J.重庆高教研究，2020，8（5）：66-78.3杨青，钟书华.国外“虚拟现实技术发展及演化趋势”研究综述J.自然辩证法通讯，2021，43（3）：97-106.4陈杰，王淼.美国职业教育虚拟现实技术的应用及启示J.成人教育，2021，41（6）：90-93.5牛雨，韩蓓.虚拟现实技术在艺术设计课程中的教学改革实践与应用J.中国新通信，2023，25（7）：92-94.6谷悦，谭佳佳，鲁晓波，等.虚拟现实空间中的三维界面设计研究J.设计，2022，35（22）：134-137.