PureMVC框架下的AR五线谱应用设计

闫兴亚 裴梦泽 崔晓云 郭亚鹏

摘  要： 针对五线谱与琴键间视觉属性不同、传统教学方式直观性有待提高的问题，利用PureMVC（一款基于MVC的开源框架）框架结合AR（Augmented Reality，增强现实）设计并实现五线谱教学应用。搭建UI界面引导逻辑，将高音谱表中五线谱与琴键间关系作为学习内容进行增强性显示;使用射线检测，实现人机交互;利用启发式评估法探究界面可用性，为增强现实在乐理教学领域的研究提供参考。

关键词： 增强现实; PureMVC框架; 五线谱; 教学

中图分类号：TP391.9          文献标识码：A     文章编号：1006-8228（2020）03-44-04

Design of staff teaching AR application with PureMVC framework

Yan Xingya1，2， Pei Mengze3， Cui Xiaoyun3， Guo Yapeng2

（1. School of Education， Shaanxi Normal University， Xi'an， Shaanxi 710062， China; 2. School of Digital Arts， Xi`an University of Posts & Telecommunications; 3. School of Computing， Xi`an University of Posts & Telecommunications）

Abstract： For the problem that the visual attributes between the staff and the keys on keyboard instrument are different and the traditional teaching methods need to be improved， the PureMVC （An open source framework based on MVC） framework is combined with AR （Augmented Reality） technology to design an application of staff teaching. By constructing of UI guidance logic， the relationship between the staff and the keys is enhanced display on the treble staff as the learning content. The human-computer interaction is realized by Ray Casting. The usability of the interface is explored by the heuristic evaluation method and provides a reference for the application of augmented reality on music theory teaching.

Key words： augmented reality; PureMVC framework; staff; teaching

0 引言

增強现实技术在教育领域中被视为一种新型辅助教学工具，有助于将复杂抽象的概念进行直观具体的呈现。目前研究领域已积累了大量关于钢琴[1]教学的增强现实解决方案，但在乐理方面的研究相对较少[2]。

乐理知识的掌握有利于提高学习者的专注力、思维和理解能力等。目前现有的专利技术中存在一种五线谱磁铁教学板[3]。典型的实现方式是将多个音符设计成赋有磁性的标记卡，需要哪个音符便直接将对应标记卡吸附到磁板相应位置。但是该方式与传统教学类似，存在引导性不强、直观性不足的问题。本研究将增强现实技术应用到五线谱与琴键间关系的教学中，通过Unity引擎及Vuforia SDK（Software Development Kit，软件开发工具包）进行五线谱增强现实应用的构建。

1 AR五线谱应用的设计与实现

1.1 应用简介

该应用以“五线谱与琴键间对应关系”为教学内容，将两者通过增强现实技术进行可视化呈现。学习者进入应用程序后，自动启动UI界面引导窗体。学习者选择进入理论教学窗体获取基本理论知识或选择实践学习窗体扫描识别图出现虚拟琴键（如图1所示），而整个增强交互与增强显示模块的设计有利于使用者迅速找到正确的琴键，正确则显示绿色，否则显示红色，可根据个人学习需求打开或关闭音符提示面板。每个按下的琴键将显示音名及唱名，不同颜色的设计能吸引学习者查看当前琴键的信息。系统将自动记录正确或错误数、耗时等数据，有助于学习者了解个人学习情况，增强自主学习能力[4]。

1.2 创新设计

本文在琴键与五线谱的内容设计上，主要参考文献[5]中将五线谱方向旋转一定角度，使其与琴键处于同一视觉属性下，在原有理论基础上增加标准五线谱作为对照，并将相关学习资源合理设计进行AR 呈现（如图2所示）。这是增强现实五线谱应用设计的挑战之处，同时也是“提示面板”设计的核心部分，承载着学习内容和目标。

根据天津师范大学王志军教授[6]关于知识大类的研究，本研究结合五线谱与琴键间的关系，尝试寻求增强现实技术与其适配的设计方案（如图3所示）。王教授指出，程序性知识的交互设计应关注学习者在进行AR画面操作时其主观能动性的充分发挥。由于五线谱与琴键间的对应关系属于程序性知识，所以可通过射线检测的人机交互方式实现学习者与琴键间的自然交互，符合学习者的认知需求。

1.3 功能实现

PureMVC是一款基于MVC的开源框架[7]。PureMVC开源框架核心功能层包括Command（命令层）、Mediator（视图层）、Proxy（模型层）。PureMVC技术框架下的AR五线谱应用设计可通过引入Mediator并结合事件机制很好的解决层与层之间紧耦合的问题，提高项目开发效率和可扩展性（如图4所示）。

由图4可知，PureMVC框架下的增强现实五线谱应用设计主要包括三个功能模块：UI界面引导窗体模块、增强现实系统模块、信息可视化反馈模块。

⑴ UI界面引导窗体模块。当多个场景会反复出现同一个UI界面时便会导致项目的运行效率降低，本研究将项目中反复使用的UI界面进行缓存，提高运行效率。而UI界面引导模块主要通过UI窗体自动加载管理、缓存UI窗体、UI窗体生命周期管理三个核心功能保证应用的正常开启和关闭，并保证学习者可顺畅进入增强现实系统模块。

⑵ 增强现实系统模块。将制作好的图片生成目标识别图，并建立具有独特性高的小型图像数据库。由摄像头输入真实场景的图像，同时判断场景中是否存在识别图。如果存在则对识别图进行跟踪，得到其更新位姿及所匹配的识别图ID。此时Unity渲染引擎将渲染对应的三维虚拟琴键模型、五线谱标准面板及提示面板。否则，引擎将输入图像进行渲染后输出至屏幕。

⑶ 信息可视化反馈模块。在交互过程中系统将自动记录学习者学习过程花费的时间、正确和错误次数的数据。数据的可视化不仅可以让学习者了解个人学习的程度而且有助于研发者对相关实验数据进行收集。

2 界面的可用性测试

启发式评估法是用来分析用户界面设计中可用性的方法，旨在利用已确立的可用性原则和经验来发现应用潜在的可用性问题。在选择评审人数上，Jakob Nielsen[8]建议启发式评估选用3～5名评估人员。实验过程需每名评审人员使用系统原型进行交互体验，然后截图保存数据并填写一份问题列表。测试进行前，预留10分钟让评审人员熟悉相关操作，并明确任务及整个实验流程。本研究选择启发式可用性原则[9]作为本次实验的基准原则。研究人员汇总五名评估人员最终确定的问题，形成最终问题列表及解决方案（如表1所示）。

总结上述对增强现实五线谱在界面迭代设计阶段所做的调整，主要集中于界面图标的可读性（色调、位置、大小）及增强现实应用合理的呈现形式。具体表现在：①对于增强现实应用设计而言，需要考虑到移动设备屏幕显示范围的局限性。建议将部分二维图标控制的功能迁移至三维立体空间，一方面可以降低二维图标和三维虚拟物体间的覆盖程度，另一方面可以增加与虚拟物体的交互，丰富交互体验;②界面的图标色调选取应考虑到应用的目标人群。如若目标人群主要面向儿童，应偏向色彩鲜艳型。

3 结束语

本研究以高音谱表中五线谱与琴键间关系作为教学内容，结合PureMVC框架和增强现实技术直观呈现五线谱与琴键间的关系。主要探究了学习内容及形式与增强现实技术的交互设计，通过用户界面引导窗体进入增强现实主场景后启动PureMVC框架，提高应用运行速度的同时增强程序逻辑的可扩展性。

PureMVC框架下AR五线谱的实现在内容及功能上依旧存在需完善及有望在未来进一步扩展的地方：首先理论教学模块内容有待充实，需增加音名教学模块;其次部分二维图标可转换到三维场景中，增大移动设备显示屏的视野;最后对于系统应用的教育适用性仍需继续研究，为有志于将增强现实应用于乐理学习的设计研发人员提供一定的参考。

参考文献（References）：

[1] Fernando Trujano， Mina Khan， Pattie Maes. ARpianoEfficient Music Learning Using Augmented Reality[C].1st International Conference on Innovative Technologies and Learning.ICITL 2018. Portoroz， Slovenia：Springer Verlag，2018：3-17

[2] Mar?al Rusi?ol，Joseph Chazalon，Katerine Diaz-Chito.Augmented songbook：an augmented reality educational application for raising music awareness[J].Springer New York LLC，2018.77（11）：13773-13798

[3] 朱明超.一种移动音符五线谱教学板：中国.420031793[P]，2005.

[4] 王春艳，甘甜，吴倩莲等.基于Unity3D的VR英语教育游戏的设计与开发[J].计算机时代，2019.10：74-77

[5] 刘可滇.基于五线谱与琴键全新理解的钢琴学习方法[J].音乐时空（理论版），2012.8：110-112

[6] 王志军.促进学习情境转化的增强现实学习资源设计研究[J].中国电化教育，2019.389：114-122

[7] 王斌.PureMVC框架在铁路自动售票机内软件的应用[D].中国铁道科学研究院，2014：1-64

[8] J Nielsen，R Molich.Heuristic evaluation of user interface[C].ACM CHI90 Conference on Human Factors in Computing System. New York： ACM Press，1990：249-256

[9] 董建明，傅利民，饒培伦.人机交互：已用户为中心的设计和评估[M].清华大学出版社，2016.