李 放

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

0 引 言

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

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

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

1 心智模型

1.1 心智模型的構建

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

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

1.2 心智模型的兒童體驗設計

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

圖1 心智模型設計流程

2 平臺設計

2.1 平臺框架設計

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

圖2 平臺總體框架

2.2 平臺界面設計

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

圖3 場景背景

圖4 角 色

圖5 編程模塊

2.3 平臺編程邏輯設計

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

圖6 單鏈表流程

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

圖7 編程模塊推拽

3 平臺實現(xiàn)

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

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

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

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)建場景功能

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

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 編程功能實現(xiàn)

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

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 實驗測試與分析

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

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

5 結束語

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