基于心智模型的兒童移動(dòng)端編程平臺(tái)研究

李 放

(大連東軟信息學(xué)院 數(shù)字藝術(shù)與設(shè)計(jì)學(xué)院，遼寧 大連 116023)

0 引 言

近年來，隨著移動(dòng)設(shè)備的普及，移動(dòng)端應(yīng)用越來越受到人們的廣泛關(guān)注，其中面向兒童的移動(dòng)端應(yīng)用更是受到人們的重視[1-4]。但是，相比較快速增長的兒童移動(dòng)應(yīng)用需求，能夠吸引兒童注意力并且可以讓兒童進(jìn)行簡單操作的應(yīng)用卻非常少[5-8]。兒童心理學(xué)家Piaget指出兒童可以接受圖像、文字和簡單概念，但是不能進(jìn)行變化，不能對(duì)它們進(jìn)行操作，即思維能力比較簡單，善于模仿[9]。因此，設(shè)計(jì)出兒童能夠接受的圖像、文字等，同時(shí)又能夠培養(yǎng)其思維能力的應(yīng)用就顯得尤為重要[10-12]。Bers等[13]提出，學(xué)習(xí)編程不僅對(duì)兒童的語言等方面有著積極的作用，而且更重要的是可以培養(yǎng)兒童的邏輯思維能力。

目前，移動(dòng)市場中面向兒童的編程平臺(tái)種類繁多，其中最具代表性的就是Scratch和Codecademy。前者是一款由麻省理工學(xué)院(MIT)設(shè)計(jì)開發(fā)的少兒編程工具。其特點(diǎn)是：使用者可以不認(rèn)識(shí)英文單詞，也可以不會(huì)使用鍵盤。構(gòu)成程序的命令和參數(shù)通過積木形狀的模塊來實(shí)現(xiàn)。用鼠標(biāo)拖動(dòng)模塊到程序編輯欄就可以了。在學(xué)習(xí)的時(shí)候，孩子不用記住命令不代表不需要指導(dǎo)命令。積木模塊包括8個(gè)大類，100多個(gè)功能。包括了一個(gè)完整程序的每個(gè)環(huán)節(jié)，甚至數(shù)組和函數(shù)。這些圖形化的積木使用需要老師或者家長正確引導(dǎo)。孩子在模仿的過程中，能感悟到條件語句，循環(huán)語句，判斷，能理解參數(shù)和命令的區(qū)別。但是讓孩子理性總結(jié)出來是很困難的，因此引導(dǎo)是必須的，不符合兒童的認(rèn)知規(guī)律。后者被認(rèn)為是可以指導(dǎo)任何人學(xué)習(xí)編程的應(yīng)用，包括13歲以下的兒童。但這款應(yīng)用并不像其他兒童應(yīng)用，沒有卡通風(fēng)格的精靈和色彩豐富的界面，無法吸引兒童的注意力，進(jìn)而無法真正地培養(yǎng)兒童的邏輯思維能力。

綜上所述，文中提出并實(shí)現(xiàn)了一種基于心智模型的兒童移動(dòng)端編程平臺(tái)。該平臺(tái)以兒童認(rèn)知心理為基礎(chǔ)，設(shè)計(jì)平臺(tái)交互系統(tǒng)，不僅可以極大地吸引兒童的注意力，而且讓兒童在學(xué)習(xí)的過程中，體驗(yàn)到一種成就感，進(jìn)而提升學(xué)習(xí)興趣。與此同時(shí)，該平臺(tái)提供一種圖形化開發(fā)界面，兒童通過拖拽圖形元素，設(shè)置圖形參數(shù)來完成游戲的開發(fā)。整個(gè)開發(fā)過程無需編寫代碼，并且高效、便捷。目前將基于心智模型的用戶體驗(yàn)設(shè)計(jì)運(yùn)用在兒童編程平臺(tái)的研究不多，這也是文中展開研究工作的原因之一。

1 心智模型

1.1 心智模型的構(gòu)建

心智模型的定義是Young在2008年的著作《Mental Model：Aliging Design Strategy with Human Behavior》中提出的，“人們的動(dòng)機(jī)、思考過程，以及執(zhí)行行動(dòng)期間的情感和思維變化[14]”。即心智模型是由人們對(duì)某一事物的最初認(rèn)識(shí)而形成的，這種認(rèn)識(shí)可以是片面的，甚至是錯(cuò)誤的，但是隨著人們知識(shí)閱歷的加深，對(duì)同一事物的認(rèn)識(shí)也在不斷加深，甚至?xí)淖冎暗恼J(rèn)識(shí)，進(jìn)而修改該心智模型，循環(huán)往復(fù)，直到該模型可以指導(dǎo)其他同類型的認(rèn)知事物。

心理學(xué)家Norman提出，創(chuàng)建心智模型要符合其六個(gè)特征[15]。因此本平臺(tái)的設(shè)計(jì)就要結(jié)合這六個(gè)特征。不完整性，指的是兒童對(duì)新事物的認(rèn)識(shí)是片面的，不斷改進(jìn)的，因此在界面設(shè)計(jì)上要重點(diǎn)突出局部信息，比如放大某個(gè)字、突出某個(gè)動(dòng)物特征等；邊界模糊性，指的是兒童容易把相似的物體混淆，因此要選取特征點(diǎn)完全不同的物體作為界面，比如獅子和長頸鹿；不穩(wěn)定性，指的是兒童無法長時(shí)間觀察某一事物，因此要盡可能充分調(diào)動(dòng)兒童的感官，比如聲音等；局限性，指的是兒童的思維受到年齡的限制，因此要充分考慮年齡小的兒童體驗(yàn)心理；不科學(xué)性，指的是兒童的思維是感性的，邏輯性較差，因此交互邏輯就要盡可能簡單，采用順序的方式進(jìn)行交互；簡約，指的是兒童對(duì)簡單的圖形比較敏感，因此在界面設(shè)計(jì)上要極可能采取簡單的圖形，比如長方形、圓形等。

1.2 心智模型的兒童體驗(yàn)設(shè)計(jì)

基于兒童心理的心智模型設(shè)計(jì)流程如圖1所示。首先根據(jù)兒童的需求、語言表達(dá)以及行為表達(dá)對(duì)其進(jìn)行信息搜集，搜集的方式包括問卷調(diào)查和現(xiàn)場調(diào)查。在本平臺(tái)設(shè)計(jì)之前，隨機(jī)選擇了30名測試者，其中15名年齡在5-7歲之間，即學(xué)齡前兒童，15名7-17歲之間，即學(xué)齡內(nèi)兒童。問卷調(diào)查包括：(1)平時(shí)喜歡什么類型的游戲？(2)什么樣的游戲界面能夠吸引你？(3)什么樣的圖形設(shè)計(jì)能夠吸引你？通過回收的問卷反饋結(jié)果分析，不同年齡段的兒童喜歡的游戲類型不同，但是在游戲界面和圖形設(shè)計(jì)上是一致的，都是對(duì)顏色鮮艷，圖形簡單，通俗易懂的界面比較感興趣，這也為本平臺(tái)的設(shè)計(jì)提供了思路。根據(jù)這個(gè)思路生成心智模型，進(jìn)行模型轉(zhuǎn)換提出設(shè)計(jì)規(guī)范、需求要點(diǎn)以及交互界面，然后通過不斷的迭代設(shè)計(jì)，直至界面的體驗(yàn)符合預(yù)期的心智模型，最終完成設(shè)計(jì)。

圖1 心智模型設(shè)計(jì)流程

2 平臺(tái)設(shè)計(jì)

2.1 平臺(tái)框架設(shè)計(jì)

平臺(tái)的總體框架設(shè)計(jì)如圖2所示。兒童進(jìn)入到平臺(tái)后，點(diǎn)擊開始界面，進(jìn)行模型的選擇，可以選擇幫助模式，也可以選擇編程模式。如果選擇幫助模式，則可以通過元素介紹界面以及觀看演示視頻來獲得幫助。為了讓兒童能夠理解和明白如何使用，因此視頻采用兒童友好的格式規(guī)范進(jìn)行制作。觀看結(jié)束后，可以返回到開始界面。如果選擇編程模式，則兒童可以根據(jù)自己的喜好創(chuàng)建角色、創(chuàng)建場景，并通過拖拽編程模塊來給角色添加指令，讓角色動(dòng)起來，點(diǎn)擊運(yùn)行，觀看編程效果。觀看結(jié)束后，可以返回到開始界面，也可以返回到編程模式繼續(xù)編程。

圖2 平臺(tái)總體框架

2.2 平臺(tái)界面設(shè)計(jì)

本平臺(tái)使用PhotoShop CS6軟件進(jìn)行圖形界面的設(shè)計(jì)，PhotoShop CS6是專門的制圖軟件，可以通過連接手繪板進(jìn)行界面元素的設(shè)計(jì)與制作。根據(jù)1.2節(jié)的分析可知，為了滿足兒童心智模型的要求，界面元素的顏色要盡可能鮮艷，圖形盡可能簡單，因此場景背景圖采用兒童簡筆畫風(fēng)格，使用純色作為背景色，如圖3所示。角色圖同樣采用兒童簡筆畫風(fēng)格，選取特征比較明顯的動(dòng)物作為角色模型，比如小馬等，如圖4所示。編程模塊圖形采用方框樣式，其背景色采用純色風(fēng)格，字體采用黑色字體，如圖5所示。

圖3 場景背景

圖4 角 色

圖5 編程模塊

2.3 平臺(tái)編程邏輯設(shè)計(jì)

兒童的思維邏輯性較差，所以本平臺(tái)采用單鏈表的方式設(shè)計(jì)編程模塊。單鏈表的好處是采用順序的思維邏輯，兒童只需要將相應(yīng)的編程模塊拖拽到指定位置即可，并且該指定位置是按照順序的方式排列組合的，從而避免了復(fù)雜的邏輯。設(shè)計(jì)流程如圖6所示。

圖6 單鏈表流程

序號(hào)是該模塊的排列順序，序號(hào)1就意味著當(dāng)程序執(zhí)行的時(shí)候，首先運(yùn)行序號(hào)1的模塊，即模塊1。當(dāng)模塊1的動(dòng)作執(zhí)行完畢后，開始運(yùn)行序號(hào)2的模塊，以此類推，直到運(yùn)行最后一個(gè)序號(hào)所對(duì)應(yīng)的模塊，也就是模塊n。具體設(shè)計(jì)是將帶有具體動(dòng)作的，比如向上、向下等的編程模塊圖拖拽到指定位置，圖形設(shè)計(jì)如圖7所示。

圖7 編程模塊推拽

3 平臺(tái)實(shí)現(xiàn)

3.1 創(chuàng)建功能實(shí)現(xiàn)

3.1.1 創(chuàng)建角色功能

當(dāng)兒童點(diǎn)擊創(chuàng)建角色按鈕時(shí)，會(huì)在該按鈕旁邊顯示一個(gè)角色選擇列表，點(diǎn)擊選擇其中一個(gè)角色后，就會(huì)在場景中顯示該角色，也就代表創(chuàng)建角色成功。創(chuàng)建角色的實(shí)現(xiàn)思路是：當(dāng)創(chuàng)建角色按鈕被觸發(fā)，就會(huì)調(diào)用ShowRoleList方法，從而顯示角色列表。選擇角色后，觸發(fā)AddRole方法。AddRole方法中，實(shí)例化一個(gè)角色對(duì)象，設(shè)置父物體為角色列表，并在舞臺(tái)上添加角色。具體代碼如下：

public void ShowRoleList()

{

roleList.SetActive(true);

}

public void AddRole(int roleId)

{

roleList.SetActive(false);

role.transform.SetParent(roleList.transform);

role.transform.GetChild(0).GetComponent().sprite=role

[roleId-1].GetComponent().sprite;

role.name=role [roleId-1].name;

role.transform.SetParent(stageBg.transform);

role.transform.localPosition=Vector3.zero;

role.gameObject.name=role [roleId-1].name;

role.GetComponent().sprite=role [roleId-1].

GetComponent().sprite;

}

3.1.2 創(chuàng)建場景功能

當(dāng)兒童點(diǎn)擊創(chuàng)建場景按鈕時(shí)，會(huì)在該按鈕旁邊顯示一個(gè)場景選擇列表，點(diǎn)擊選擇其中一個(gè)背景圖后，就會(huì)顯示該場景。創(chuàng)建場景的實(shí)現(xiàn)思路是：當(dāng)創(chuàng)建場景按鈕被觸發(fā)，就會(huì)調(diào)用ShowSceneList方法，從而顯示背景列表。選擇背景后，觸發(fā)AddScene方法。AddScene方法中，實(shí)例化一個(gè)場景對(duì)象，設(shè)置父物體為場景列表，并在舞臺(tái)上添加背景圖。具體代碼如下：

public void ShowSceneList()

{

sceneList.SetActive(true);

}

public void AddScene(int sceneId)

{

sceneList.SetActive(false);

scene.transform.SetParent(sceneList.transform);

scene.transform.GetChild(0).GetComponent().sprite= scene[sceneId].

GetComponent().sprite;

stageBg.GetComponent().sprite = scene[sceneId].

GetComponent().sprite;

}

3.2 編程功能實(shí)現(xiàn)

當(dāng)要放入編程模塊到指定區(qū)域內(nèi)時(shí)，需要判斷手指抬起時(shí)是否在指定區(qū)域的格子中，如果不在，隱藏該編程模塊；如果在格子中，顯示該編程模塊。然后獲取該模塊的指令名稱，并將該名稱賦值給創(chuàng)建的字典，這就完成了指令塊拖入的效果。當(dāng)點(diǎn)擊運(yùn)行時(shí)執(zhí)行Run函數(shù)，開始對(duì)編程模塊的指令進(jìn)行編譯，然后將編譯存入數(shù)組中，再進(jìn)行指令判斷并且運(yùn)行。具體代碼如下：

for (int k=0;k

{

transform roleItemBlock=roleItemChild.GetChild(k);

if (roleItemBlock.childCount>0)

{

string blockName=roleItemBlock.name;

Item item=Item.GetItem(blockName);

if (item.ItemType=="Action")

{

MaskProAreaMove(true);

Action action=new Action(item.Id,item.Name,item.

Sprite);

roleComList.AddItem(action);

}else

{

roleComList.AddItem(item);

}

}

}

4 實(shí)驗(yàn)測試與分析

本平臺(tái)開發(fā)的PC設(shè)備是處理器Inter(R) Core(TM) i7-7700K CPU @ 4.20 GHz，內(nèi)存16 GB，顯卡NVDIA GeForce GTX 1080，開發(fā)軟件包括Unity3D，Photoshop CS6，腳本語言是C#。平臺(tái)可以發(fā)布到Android和Ios系統(tǒng)中，并且能夠流暢運(yùn)行，獲得了較好的效果，并受到廣大兒童和家長的喜歡。

啟動(dòng)平臺(tái)后，兒童可以根據(jù)自己的喜好選擇不同的場景和角色，然后通過拖拽的方式組合編程動(dòng)作，從而讓角色動(dòng)起來。實(shí)驗(yàn)結(jié)果表明，該平臺(tái)從兒童的心智模型角度出發(fā)，加入單鏈表的組合模式，不僅克服了以往該類型軟件兒童用戶體驗(yàn)不足的缺點(diǎn)，而且能夠極大地提升兒童的編程興趣，從而鍛煉了他們的邏輯思維能力，真正做到在游戲中學(xué)到知識(shí)。

5 結(jié)束語

基于心智模型的兒童移動(dòng)端編程平臺(tái)，通過設(shè)計(jì)與實(shí)現(xiàn)兒童喜愛的圖形和界面，從而滿足他們的心理需求。該平臺(tái)不僅可以作為兒童的娛樂平臺(tái)，而且也可以作為他們的教育平臺(tái)。通過簡單易懂的操作界面來提升兒童的編程興趣，使他們了解并熟悉編程思維，進(jìn)而提高自身的邏輯思維能力。未來，隨著智能手機(jī)的普及，該平臺(tái)將會(huì)在人機(jī)交互、用戶體驗(yàn)等方向繼續(xù)向前發(fā)展，添加更豐富的內(nèi)容。