PureMVC框架下的AR五線譜應用設計

閆興亞 裴夢澤 崔曉云 郭亞鵬

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

關鍵詞： 增強現(xiàn)實; 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 引言

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

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

1 AR五線譜應用的設計與實現(xiàn)

1.1 應用簡介

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

1.2 創(chuàng)新設計

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

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

1.3 功能實現(xiàn)

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

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

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

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

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

2 界面的可用性測試

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

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

3 結(jié)束語

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

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

參考文獻（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英語教育游戲的設計與開發(fā)[J].計算機時代，2019.10：74-77

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

[6] 王志軍.促進學習情境轉(zhuǎn)化的增強現(xiàn)實學習資源設計研究[J].中國電化教育，2019.389：114-122

[7] 王斌.PureMVC框架在鐵路自動售票機內(nèi)軟件的應用[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.