李 放

(大连东软信息学院 数字艺术与设计学院，辽宁 大连 116023)

0 引 言

近年来，随着移动设备的普及，移动端应用越来越受到人们的广泛关注，其中面向儿童的移动端应用更是受到人们的重视[1-4]。但是，相比较快速增长的儿童移动应用需求，能够吸引儿童注意力并且可以让儿童进行简单操作的应用却非常少[5-8]。儿童心理学家Piaget指出儿童可以接受图像、文字和简单概念，但是不能进行变化，不能对它们进行操作，即思维能力比较简单，善于模仿[9]。因此，设计出儿童能够接受的图像、文字等，同时又能够培养其思维能力的应用就显得尤为重要[10-12]。Bers等[13]提出，学习编程不仅对儿童的语言等方面有着积极的作用，而且更重要的是可以培养儿童的逻辑思维能力。

目前，移动市场中面向儿童的编程平台种类繁多，其中最具代表性的就是Scratch和Codecademy。前者是一款由麻省理工学院(MIT)设计开发的少儿编程工具。其特点是：使用者可以不认识英文单词，也可以不会使用键盘。构成程序的命令和参数通过积木形状的模块来实现。用鼠标拖动模块到程序编辑栏就可以了。在学习的时候，孩子不用记住命令不代表不需要指导命令。积木模块包括8个大类，100多个功能。包括了一个完整程序的每个环节，甚至数组和函数。这些图形化的积木使用需要老师或者家长正确引导。孩子在模仿的过程中，能感悟到条件语句，循环语句，判断，能理解参数和命令的区别。但是让孩子理性总结出来是很困难的，因此引导是必须的，不符合儿童的认知规律。后者被认为是可以指导任何人学习编程的应用，包括13岁以下的儿童。但这款应用并不像其他儿童应用，没有卡通风格的精灵和色彩丰富的界面，无法吸引儿童的注意力，进而无法真正地培养儿童的逻辑思维能力。

综上所述，文中提出并实现了一种基于心智模型的儿童移动端编程平台。该平台以儿童认知心理为基础，设计平台交互系统，不仅可以极大地吸引儿童的注意力，而且让儿童在学习的过程中，体验到一种成就感，进而提升学习兴趣。与此同时，该平台提供一种图形化开发界面，儿童通过拖拽图形元素，设置图形参数来完成游戏的开发。整个开发过程无需编写代码，并且高效、便捷。目前将基于心智模型的用户体验设计运用在儿童编程平台的研究不多，这也是文中展开研究工作的原因之一。

1 心智模型

1.1 心智模型的构建

心智模型的定义是Young在2008年的著作《Mental Model：Aliging Design Strategy with Human Behavior》中提出的，“人们的动机、思考过程，以及执行行动期间的情感和思维变化[14]”。即心智模型是由人们对某一事物的最初认识而形成的，这种认识可以是片面的，甚至是错误的，但是随着人们知识阅历的加深，对同一事物的认识也在不断加深，甚至会改变之前的认识，进而修改该心智模型，循环往复，直到该模型可以指导其他同类型的认知事物。

心理学家Norman提出，创建心智模型要符合其六个特征[15]。因此本平台的设计就要结合这六个特征。不完整性，指的是儿童对新事物的认识是片面的，不断改进的，因此在界面设计上要重点突出局部信息，比如放大某个字、突出某个动物特征等；边界模糊性，指的是儿童容易把相似的物体混淆，因此要选取特征点完全不同的物体作为界面，比如狮子和长颈鹿；不稳定性，指的是儿童无法长时间观察某一事物，因此要尽可能充分调动儿童的感官，比如声音等；局限性，指的是儿童的思维受到年龄的限制，因此要充分考虑年龄小的儿童体验心理；不科学性，指的是儿童的思维是感性的，逻辑性较差，因此交互逻辑就要尽可能简单，采用顺序的方式进行交互；简约，指的是儿童对简单的图形比较敏感，因此在界面设计上要极可能采取简单的图形，比如长方形、圆形等。

1.2 心智模型的儿童体验设计

基于儿童心理的心智模型设计流程如图1所示。首先根据儿童的需求、语言表达以及行为表达对其进行信息搜集，搜集的方式包括问卷调查和现场调查。在本平台设计之前，随机选择了30名测试者，其中15名年龄在5-7岁之间，即学龄前儿童，15名7-17岁之间，即学龄内儿童。问卷调查包括：(1)平时喜欢什么类型的游戏？(2)什么样的游戏界面能够吸引你？(3)什么样的图形设计能够吸引你？通过回收的问卷反馈结果分析，不同年龄段的儿童喜欢的游戏类型不同，但是在游戏界面和图形设计上是一致的，都是对颜色鲜艳，图形简单，通俗易懂的界面比较感兴趣，这也为本平台的设计提供了思路。根据这个思路生成心智模型，进行模型转换提出设计规范、需求要点以及交互界面，然后通过不断的迭代设计，直至界面的体验符合预期的心智模型，最终完成设计。

图1 心智模型设计流程

2 平台设计

2.1 平台框架设计

平台的总体框架设计如图2所示。儿童进入到平台后，点击开始界面，进行模型的选择，可以选择帮助模式，也可以选择编程模式。如果选择帮助模式，则可以通过元素介绍界面以及观看演示视频来获得帮助。为了让儿童能够理解和明白如何使用，因此视频采用儿童友好的格式规范进行制作。观看结束后，可以返回到开始界面。如果选择编程模式，则儿童可以根据自己的喜好创建角色、创建场景，并通过拖拽编程模块来给角色添加指令，让角色动起来，点击运行，观看编程效果。观看结束后，可以返回到开始界面，也可以返回到编程模式继续编程。

图2 平台总体框架

2.2 平台界面设计

本平台使用PhotoShop CS6软件进行图形界面的设计，PhotoShop CS6是专门的制图软件，可以通过连接手绘板进行界面元素的设计与制作。根据1.2节的分析可知，为了满足儿童心智模型的要求，界面元素的颜色要尽可能鲜艳，图形尽可能简单，因此场景背景图采用儿童简笔画风格，使用纯色作为背景色，如图3所示。角色图同样采用儿童简笔画风格，选取特征比较明显的动物作为角色模型，比如小马等，如图4所示。编程模块图形采用方框样式，其背景色采用纯色风格，字体采用黑色字体，如图5所示。

图3 场景背景

图4 角 色

图5 编程模块

2.3 平台编程逻辑设计

儿童的思维逻辑性较差，所以本平台采用单链表的方式设计编程模块。单链表的好处是采用顺序的思维逻辑，儿童只需要将相应的编程模块拖拽到指定位置即可，并且该指定位置是按照顺序的方式排列组合的，从而避免了复杂的逻辑。设计流程如图6所示。

图6 单链表流程

序号是该模块的排列顺序，序号1就意味着当程序执行的时候，首先运行序号1的模块，即模块1。当模块1的动作执行完毕后，开始运行序号2的模块，以此类推，直到运行最后一个序号所对应的模块，也就是模块n。具体设计是将带有具体动作的，比如向上、向下等的编程模块图拖拽到指定位置，图形设计如图7所示。

图7 编程模块推拽

3 平台实现

3.1 创建功能实现

3.1.1 创建角色功能

当儿童点击创建角色按钮时，会在该按钮旁边显示一个角色选择列表，点击选择其中一个角色后，就会在场景中显示该角色，也就代表创建角色成功。创建角色的实现思路是：当创建角色按钮被触发，就会调用ShowRoleList方法，从而显示角色列表。选择角色后，触发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 创建场景功能

当儿童点击创建场景按钮时，会在该按钮旁边显示一个场景选择列表，点击选择其中一个背景图后，就会显示该场景。创建场景的实现思路是：当创建场景按钮被触发，就会调用ShowSceneList方法，从而显示背景列表。选择背景后，触发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 编程功能实现

当要放入编程模块到指定区域内时，需要判断手指抬起时是否在指定区域的格子中，如果不在，隐藏该编程模块；如果在格子中，显示该编程模块。然后获取该模块的指令名称，并将该名称赋值给创建的字典，这就完成了指令块拖入的效果。当点击运行时执行Run函数，开始对编程模块的指令进行编译，然后将编译存入数组中，再进行指令判断并且运行。具体代码如下：

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 实验测试与分析

本平台开发的PC设备是处理器Inter(R) Core(TM) i7-7700K CPU @ 4.20 GHz，内存16 GB，显卡NVDIA GeForce GTX 1080，开发软件包括Unity3D，Photoshop CS6，脚本语言是C#。平台可以发布到Android和Ios系统中，并且能够流畅运行，获得了较好的效果，并受到广大儿童和家长的喜欢。

启动平台后，儿童可以根据自己的喜好选择不同的场景和角色，然后通过拖拽的方式组合编程动作，从而让角色动起来。实验结果表明，该平台从儿童的心智模型角度出发，加入单链表的组合模式，不仅克服了以往该类型软件儿童用户体验不足的缺点，而且能够极大地提升儿童的编程兴趣，从而锻炼了他们的逻辑思维能力，真正做到在游戏中学到知识。

5 结束语

基于心智模型的儿童移动端编程平台，通过设计与实现儿童喜爱的图形和界面，从而满足他们的心理需求。该平台不仅可以作为儿童的娱乐平台，而且也可以作为他们的教育平台。通过简单易懂的操作界面来提升儿童的编程兴趣，使他们了解并熟悉编程思维，进而提高自身的逻辑思维能力。未来，随着智能手机的普及，该平台将会在人机交互、用户体验等方向继续向前发展，添加更丰富的内容。