PureMVC框架下的AR五線譜應(yīng)用設(shè)計(jì)

閆興亞 裴夢(mèng)澤 崔曉云 郭亞鵬

摘 ?要： 針對(duì)五線譜與琴鍵間視覺(jué)屬性不同、傳統(tǒng)教學(xué)方式直觀性有待提高的問(wèn)題，利用PureMVC（一款基于MVC的開(kāi)源框架）框架結(jié)合AR（Augmented Reality，增強(qiáng)現(xiàn)實(shí)）設(shè)計(jì)并實(shí)現(xiàn)五線譜教學(xué)應(yīng)用。搭建UI界面引導(dǎo)邏輯，將高音譜表中五線譜與琴鍵間關(guān)系作為學(xué)習(xí)內(nèi)容進(jìn)行增強(qiáng)性顯示;使用射線檢測(cè)，實(shí)現(xiàn)人機(jī)交互;利用啟發(fā)式評(píng)估法探究界面可用性，為增強(qiáng)現(xiàn)實(shí)在樂(lè)理教學(xué)領(lǐng)域的研究提供參考。

關(guān)鍵詞： 增強(qiáng)現(xiàn)實(shí); PureMVC框架; 五線譜; 教學(xué)

中圖分類號(hào)：TP391.9 ? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A ? ? 文章編號(hào)：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 引言

增強(qiáng)現(xiàn)實(shí)技術(shù)在教育領(lǐng)域中被視為一種新型輔助教學(xué)工具，有助于將復(fù)雜抽象的概念進(jìn)行直觀具體的呈現(xiàn)。目前研究領(lǐng)域已積累了大量關(guān)于鋼琴[1]教學(xué)的增強(qiáng)現(xiàn)實(shí)解決方案，但在樂(lè)理方面的研究相對(duì)較少[2]。

樂(lè)理知識(shí)的掌握有利于提高學(xué)習(xí)者的專注力、思維和理解能力等。目前現(xiàn)有的專利技術(shù)中存在一種五線譜磁鐵教學(xué)板[3]。典型的實(shí)現(xiàn)方式是將多個(gè)音符設(shè)計(jì)成賦有磁性的標(biāo)記卡，需要哪個(gè)音符便直接將對(duì)應(yīng)標(biāo)記卡吸附到磁板相應(yīng)位置。但是該方式與傳統(tǒng)教學(xué)類似，存在引導(dǎo)性不強(qiáng)、直觀性不足的問(wèn)題。本研究將增強(qiáng)現(xiàn)實(shí)技術(shù)應(yīng)用到五線譜與琴鍵間關(guān)系的教學(xué)中，通過(guò)Unity引擎及Vuforia SDK（Software Development Kit，軟件開(kāi)發(fā)工具包）進(jìn)行五線譜增強(qiáng)現(xiàn)實(shí)應(yīng)用的構(gòu)建。

1 AR五線譜應(yīng)用的設(shè)計(jì)與實(shí)現(xiàn)

1.1 應(yīng)用簡(jiǎn)介

該應(yīng)用以“五線譜與琴鍵間對(duì)應(yīng)關(guān)系”為教學(xué)內(nèi)容，將兩者通過(guò)增強(qiáng)現(xiàn)實(shí)技術(shù)進(jìn)行可視化呈現(xiàn)。學(xué)習(xí)者進(jìn)入應(yīng)用程序后，自動(dòng)啟動(dòng)UI界面引導(dǎo)窗體。學(xué)習(xí)者選擇進(jìn)入理論教學(xué)窗體獲取基本理論知識(shí)或選擇實(shí)踐學(xué)習(xí)窗體掃描識(shí)別圖出現(xiàn)虛擬琴鍵（如圖1所示），而整個(gè)增強(qiáng)交互與增強(qiáng)顯示模塊的設(shè)計(jì)有利于使用者迅速找到正確的琴鍵，正確則顯示綠色，否則顯示紅色，可根據(jù)個(gè)人學(xué)習(xí)需求打開(kāi)或關(guān)閉音符提示面板。每個(gè)按下的琴鍵將顯示音名及唱名，不同顏色的設(shè)計(jì)能吸引學(xué)習(xí)者查看當(dāng)前琴鍵的信息。系統(tǒng)將自動(dòng)記錄正確或錯(cuò)誤數(shù)、耗時(shí)等數(shù)據(jù)，有助于學(xué)習(xí)者了解個(gè)人學(xué)習(xí)情況，增強(qiáng)自主學(xué)習(xí)能力[4]。

1.2 創(chuàng)新設(shè)計(jì)

本文在琴鍵與五線譜的內(nèi)容設(shè)計(jì)上，主要參考文獻(xiàn)[5]中將五線譜方向旋轉(zhuǎn)一定角度，使其與琴鍵處于同一視覺(jué)屬性下，在原有理論基礎(chǔ)上增加標(biāo)準(zhǔn)五線譜作為對(duì)照，并將相關(guān)學(xué)習(xí)資源合理設(shè)計(jì)進(jìn)行AR 呈現(xiàn)（如圖2所示）。這是增強(qiáng)現(xiàn)實(shí)五線譜應(yīng)用設(shè)計(jì)的挑戰(zhàn)之處，同時(shí)也是“提示面板”設(shè)計(jì)的核心部分，承載著學(xué)習(xí)內(nèi)容和目標(biāo)。

根據(jù)天津師范大學(xué)王志軍教授[6]關(guān)于知識(shí)大類的研究，本研究結(jié)合五線譜與琴鍵間的關(guān)系，嘗試尋求增強(qiáng)現(xiàn)實(shí)技術(shù)與其適配的設(shè)計(jì)方案（如圖3所示）。王教授指出，程序性知識(shí)的交互設(shè)計(jì)應(yīng)關(guān)注學(xué)習(xí)者在進(jìn)行AR畫(huà)面操作時(shí)其主觀能動(dòng)性的充分發(fā)揮。由于五線譜與琴鍵間的對(duì)應(yīng)關(guān)系屬于程序性知識(shí)，所以可通過(guò)射線檢測(cè)的人機(jī)交互方式實(shí)現(xiàn)學(xué)習(xí)者與琴鍵間的自然交互，符合學(xué)習(xí)者的認(rèn)知需求。

1.3 功能實(shí)現(xiàn)

PureMVC是一款基于MVC的開(kāi)源框架[7]。PureMVC開(kāi)源框架核心功能層包括Command（命令層）、Mediator（視圖層）、Proxy（模型層）。PureMVC技術(shù)框架下的AR五線譜應(yīng)用設(shè)計(jì)可通過(guò)引入Mediator并結(jié)合事件機(jī)制很好的解決層與層之間緊耦合的問(wèn)題，提高項(xiàng)目開(kāi)發(fā)效率和可擴(kuò)展性（如圖4所示）。

由圖4可知，PureMVC框架下的增強(qiáng)現(xiàn)實(shí)五線譜應(yīng)用設(shè)計(jì)主要包括三個(gè)功能模塊：UI界面引導(dǎo)窗體模塊、增強(qiáng)現(xiàn)實(shí)系統(tǒng)模塊、信息可視化反饋模塊。

⑴ UI界面引導(dǎo)窗體模塊。當(dāng)多個(gè)場(chǎng)景會(huì)反復(fù)出現(xiàn)同一個(gè)UI界面時(shí)便會(huì)導(dǎo)致項(xiàng)目的運(yùn)行效率降低，本研究將項(xiàng)目中反復(fù)使用的UI界面進(jìn)行緩存，提高運(yùn)行效率。而UI界面引導(dǎo)模塊主要通過(guò)UI窗體自動(dòng)加載管理、緩存UI窗體、UI窗體生命周期管理三個(gè)核心功能保證應(yīng)用的正常開(kāi)啟和關(guān)閉，并保證學(xué)習(xí)者可順暢進(jìn)入增強(qiáng)現(xiàn)實(shí)系統(tǒng)模塊。

⑵ 增強(qiáng)現(xiàn)實(shí)系統(tǒng)模塊。將制作好的圖片生成目標(biāo)識(shí)別圖，并建立具有獨(dú)特性高的小型圖像數(shù)據(jù)庫(kù)。由攝像頭輸入真實(shí)場(chǎng)景的圖像，同時(shí)判斷場(chǎng)景中是否存在識(shí)別圖。如果存在則對(duì)識(shí)別圖進(jìn)行跟蹤，得到其更新位姿及所匹配的識(shí)別圖ID。此時(shí)Unity渲染引擎將渲染對(duì)應(yīng)的三維虛擬琴鍵模型、五線譜標(biāo)準(zhǔn)面板及提示面板。否則，引擎將輸入圖像進(jìn)行渲染后輸出至屏幕。

⑶ 信息可視化反饋模塊。在交互過(guò)程中系統(tǒng)將自動(dòng)記錄學(xué)習(xí)者學(xué)習(xí)過(guò)程花費(fèi)的時(shí)間、正確和錯(cuò)誤次數(shù)的數(shù)據(jù)。數(shù)據(jù)的可視化不僅可以讓學(xué)習(xí)者了解個(gè)人學(xué)習(xí)的程度而且有助于研發(fā)者對(duì)相關(guān)實(shí)驗(yàn)數(shù)據(jù)進(jìn)行收集。

2 界面的可用性測(cè)試

啟發(fā)式評(píng)估法是用來(lái)分析用戶界面設(shè)計(jì)中可用性的方法，旨在利用已確立的可用性原則和經(jīng)驗(yàn)來(lái)發(fā)現(xiàn)應(yīng)用潛在的可用性問(wèn)題。在選擇評(píng)審人數(shù)上，Jakob Nielsen[8]建議啟發(fā)式評(píng)估選用3～5名評(píng)估人員。實(shí)驗(yàn)過(guò)程需每名評(píng)審人員使用系統(tǒng)原型進(jìn)行交互體驗(yàn)，然后截圖保存數(shù)據(jù)并填寫(xiě)一份問(wèn)題列表。測(cè)試進(jìn)行前，預(yù)留10分鐘讓評(píng)審人員熟悉相關(guān)操作，并明確任務(wù)及整個(gè)實(shí)驗(yàn)流程。本研究選擇啟發(fā)式可用性原則[9]作為本次實(shí)驗(yàn)的基準(zhǔn)原則。研究人員匯總五名評(píng)估人員最終確定的問(wèn)題，形成最終問(wèn)題列表及解決方案（如表1所示）。

總結(jié)上述對(duì)增強(qiáng)現(xiàn)實(shí)五線譜在界面迭代設(shè)計(jì)階段所做的調(diào)整，主要集中于界面圖標(biāo)的可讀性（色調(diào)、位置、大小）及增強(qiáng)現(xiàn)實(shí)應(yīng)用合理的呈現(xiàn)形式。具體表現(xiàn)在：①對(duì)于增強(qiáng)現(xiàn)實(shí)應(yīng)用設(shè)計(jì)而言，需要考慮到移動(dòng)設(shè)備屏幕顯示范圍的局限性。建議將部分二維圖標(biāo)控制的功能遷移至三維立體空間，一方面可以降低二維圖標(biāo)和三維虛擬物體間的覆蓋程度，另一方面可以增加與虛擬物體的交互，豐富交互體驗(yàn);②界面的圖標(biāo)色調(diào)選取應(yīng)考慮到應(yīng)用的目標(biāo)人群。如若目標(biāo)人群主要面向兒童，應(yīng)偏向色彩鮮艷型。

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

本研究以高音譜表中五線譜與琴鍵間關(guān)系作為教學(xué)內(nèi)容，結(jié)合PureMVC框架和增強(qiáng)現(xiàn)實(shí)技術(shù)直觀呈現(xiàn)五線譜與琴鍵間的關(guān)系。主要探究了學(xué)習(xí)內(nèi)容及形式與增強(qiáng)現(xiàn)實(shí)技術(shù)的交互設(shè)計(jì)，通過(guò)用戶界面引導(dǎo)窗體進(jìn)入增強(qiáng)現(xiàn)實(shí)主場(chǎng)景后啟動(dòng)PureMVC框架，提高應(yīng)用運(yùn)行速度的同時(shí)增強(qiáng)程序邏輯的可擴(kuò)展性。

PureMVC框架下AR五線譜的實(shí)現(xiàn)在內(nèi)容及功能上依舊存在需完善及有望在未來(lái)進(jìn)一步擴(kuò)展的地方：首先理論教學(xué)模塊內(nèi)容有待充實(shí)，需增加音名教學(xué)模塊;其次部分二維圖標(biāo)可轉(zhuǎn)換到三維場(chǎng)景中，增大移動(dòng)設(shè)備顯示屏的視野;最后對(duì)于系統(tǒng)應(yīng)用的教育適用性仍需繼續(xù)研究，為有志于將增強(qiáng)現(xiàn)實(shí)應(yīng)用于樂(lè)理學(xué)習(xí)的設(shè)計(jì)研發(fā)人員提供一定的參考。

參考文獻(xiàn)（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] 朱明超.一種移動(dòng)音符五線譜教學(xué)板：中國(guó).420031793[P]，2005.

[4] 王春艷，甘甜，吳倩蓮等.基于Unity3D的VR英語(yǔ)教育游戲的設(shè)計(jì)與開(kāi)發(fā)[J].計(jì)算機(jī)時(shí)代，2019.10：74-77

[5] 劉可滇.基于五線譜與琴鍵全新理解的鋼琴學(xué)習(xí)方法[J].音樂(lè)時(shí)空（理論版），2012.8：110-112

[6] 王志軍.促進(jìn)學(xué)習(xí)情境轉(zhuǎn)化的增強(qiáng)現(xiàn)實(shí)學(xué)習(xí)資源設(shè)計(jì)研究[J].中國(guó)電化教育，2019.389：114-122

[7] 王斌.PureMVC框架在鐵路自動(dòng)售票機(jī)內(nèi)軟件的應(yīng)用[D].中國(guó)鐵道科學(xué)研究院，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] 董建明，傅利民，饒培倫.人機(jī)交互：已用戶為中心的設(shè)計(jì)和評(píng)估[M].清華大學(xué)出版社，2016.