关于线上美术视频教学“小伴”APP的设计研究
2021-06-28张华溢靳伟霞陈婷
张华溢 靳伟霞 陈婷
摘 要：随着移动互联网技术的发展，“互联网+教学”的教育方式愈加受到人们的青睐。本着父母是孩子第一任教师的理念，文章设计开发了以“亲子互动教育”为核心的美术教学APP，加强父母与幼儿的亲子互动，让幼儿在父母的陪伴下更高效、更高质量地受到美术启蒙教育。该款APP运用专业开发工具和视觉设计工具，实现了线上学习、互动游戏等功能，缓解了线下幼儿机构教育的痛点，达到了启蒙教育的目的。
关键词：互联网+教学;亲子互动;美术启蒙
中图分类号：TP311.5 文献标识码：A 文章编号：2096-4706（2021）01-0088-05
Design Research on Online Art Video Teaching “Xiao Ban” APP
ZHANG Huayi，JIN Weixia，CHEN Ting
（Tianjin University of Commerce Boustead College，Tianjin 300384，China）
Abstract：With the development of mobile internet technology，the education model of “internet + teaching” is more and more favored by people. Based on the idea that parents are childrens first teachers，this paper designs and develops an art teaching APP with “parent-child interactive education” as its core，so as to strengthen parent-child interaction between parents and children，so that children can receive art enlightenment education more efficiently and with higher quality in the company of parents. Using professional development tool and visual design tool，this APP realizes online learning，interactive games and other functions，which alleviates the pain points of offline child educational institutions，and achieves the goal of enlightenment education.
Keywords：internet + teaching;parent-child interaction;art enlightenment
0 引 言
据了解，随着广大老百姓物质生活水平的提高，生活方式的多样化，已经有一部分家长选择把孩子送到“国际”学校接受教育，在孩子小的时候就给他报各种各样的兴趣班、课外辅导班。因此一款功能齐全且具有人性化的幼儿教学APP的设计研究是非常有必要的[1]。
早些年前，国外的线上启蒙教育就已经开始了，像Scratch就是由麻省理工学院开发的，专门用于帮助儿童、青少年学习编程的编程软件，以便充分地开发青少儿的自主学习能力和逻辑思维能力[2]。在此背景下，我们研究设计了一款名为“小伴”的线上美术教学APP，它综合了国内外、线上线下教育的丰富经验，确立了让幼儿在父母的陪伴下开展美术启蒙与学习的教育理念。
1 线上美术视频教学的目的
互联网和智能手机给人类带来了全新的生活方式，“互聯网+教学”也随之发展成为新的教学模式。笔者设计开发的“小伴”APP就是为了更好地培养幼儿对美术的兴趣，有效地节约家长的时间和成本，通过简易有趣的操作方式让家长陪伴孩子共同学习，在“小伴”这个平台上可以随时进行亲子之间的互动，可以轻松实现与家人一起完成一幅美术作品的过程，这不仅增进了亲子感情，对幼儿在美术方面的启蒙也会达到事半功倍的效果[2]。
2 国内外研究对比
2.1 国外线上早教APP研究
经过调查研究，美国有一款称作儿童的“电子图书馆”APP——“Epic”，如图1所示，这款APP在2019年被众多美国家长选择而登上金奖榜单并且位列第一，它适用于3岁到12岁年龄段的儿童，APP中包含的童书体量非常大而且内容丰富有趣，在儿童阅读的同时通过积累阅读时间来提升级别，从而激励孩子爱上读书。“Epic”APP以探索与学习为宗旨，蓝色为界面主体颜色，不同类别的图书分区域罗列在界面中。这款线上阅读APP为孩子们提供了创新的移动阅读体验，也让孩子们拥有了属于自己的“掌上阅读书库”。
2.2 国内线上早教APP研究
经过对国内幼儿早教APP的调查研究，我们分析了“宝宝听听”，如图2所示，主要是一款可以给幼儿讲故事的音频软件，拥有海量的儿歌、故事、动画等早教内容，它适用于0到12岁的儿童，面向家长和孩子都提供了丰富的课程，解决了幼儿启蒙学习的需求。另一款“宝宝巴士”，如图3所示，是分类比较详细的幼儿早教软件，内容不仅包括儿歌、故事、动画、游戏等，还增加了互动课程内容，通过“好看”“好学”“好听”来丰富幼儿的语言和兴趣爱好，实现了“一站式”线上早教育儿。
2.3 国内外研究对比
国内外关于幼儿启蒙教学的众多APP既有相同之处也有不同之处，相同之处就是这些软件大部分都是设计原理相同，界面操作简单易学，可以由孩子自主掌控，不需要家长引导却缺少了亲子互动的过程。不同之处是国外的软件更趋向于去开发幼儿的自主学习能力，培养孩子的开拓探索能力，而且软件应用的年龄范围比较广。国内的幼儿教育软件更多的是偏重于娱乐方面，通过儿歌、动画、小游戏等来吸引幼儿的好奇心，然而发现孩子们大多停留在看动画片和玩游戏的时间更多一些，导致“娱大于教”失去了启蒙教学的初衷，而且软件的适用年龄有一定局限性。
3 “小伴”APP的实践研究
为了加强“互联网+教学”这一模式的运用，研究发明一款更适合幼儿身心发展的线上美术教学APP——“小伴”，在研究之初即通过网络调研、家校走访、国内外相关软件研究对比等方式进行了调查，并结合线上线下发放调查问卷方式得出相关有效数据。其中，90.80%的家长有意识地培养孩子的爱好，但是67.82%的家长是没有空闲时间陪伴孩子一起学习的，85.33%的家长希望研发出一款家长可以陪伴儿童一起线上学习的美术教学APP。
3.1 设计理念与Logo设计
随着国家对“五育”的高度重视，美术已经成为重要的考核科目。“小伴”Logo设计主题是“相依相伴，一起成长”，孩子在左家长在右，家长是绿色代表着期许和寄托，孩子是红色代表着活泼和友爱，房屋顶部是镂空，中间有不同颜色的圆点和星星，代表着无限的想象和斑斓的人生，象征着每个孩子都能拥有实现梦想的权利，如图4所示。
3.2 功能逻0辑设计及实现
在“小伴”APP开发过程初期，首先确立了该款软件的核心功能，在此基础上梳理了从进入程序到使用每项功能的全部流程，并利用工程开发思维画出每项功能的逻辑流程图。该款软件开发过程中运用了APP制作工具APPbyme实现功能，运用PS、AI制作软件实现界面的设计和美化[3]。该款APP主要有7项功能：
（1）点击“直播课程”，进入直播课程学习;
（2）点击“选课咨询”，进入课程咨询聊天窗口，教师为用户提供一对一选课咨询服务;
（3）点击“课程管理”，进入课程列表，为用户展示已选课程列表及各门课程的学习进度;
（4）点击“我的老师”，接入教师列表，为用户展示所选课程对应的授课老师简介、联系方式等;
（5）点击“我们”，进入账户设置，为用户提供用户名、密码等登录信息设置;
（6）点击“乐趣”，在主界面展示互动游戏选项卡，用户通过左右滑动选择进入“为爱接力”“爱的拼图”“为爱涂色”“亲子猜画”四种亲子互动游戏;
（7）点击“练习”，进入画板模式，为用户提供带有画笔、颜色、橡皮擦选项的空白画板进行绘画练习。
“小伴”APP功能结构图如图5所示。
3.3 APP的界面设计
“小伴”的界面设计与传统的界面设计不同，开始界面设计以一个占满全页面的幻灯片来作为软件刚安装时点开的软件介绍，此部分可以用DW软件代码中的CSS设计一个简单的幻灯片。页面的上半部分是资讯栏模块，推送各种与绘画艺术相关的新闻资讯;中间部分为视频区模块，有点播课程、往期回顾、一对一辅导等视频教学;下半部分是功能区模块，可以选择直播课程、选课咨询、课程管理、我的老师、我们，每个用户可以根据个人情况进行设置和管理，用户进入到老师的直播间可以进行实时互动、提问交流，建组讨论;底端部分是乐趣和练习，新增的两个功能键是这款APP的亮点，如图6所示，“小伴”也会有比赛社区，我们会在资讯栏发布一些美术大赛的相关资讯，家长和孩子们可以报名参加，通过比赛实践来提升专业水平，激发孩子的美术学习兴趣[3]。
3.4 页面设计技术研究
“小伴”APP的页面设计可以用DW软件代码中的CSS设计一个简单的幻灯片，由于用户的设备屏幕大小不同，用radius代码使幻灯片自动适应所有用户的屏幕。然后再用CSS中的div效果做出幻灯片的滚动效果。在最后一页的幻灯片用HTML代码中的input代码设计一个“点击进入”的按钮，使用户在看完幻灯片并且对软件有了大概的了解之后可以立刻点击进入进行软件使用。
关于页面上半部分的资讯栏板块，用HTML中marquee给各种资讯赋予一个滚动的效果，将behavior设为scroll，使这些资讯可以滚动展示，然后loop的值设為-1，使每天推送的资讯可以不断显示，将资讯的图片算好尺寸用img在滚动效果中插入资讯图片。底栏用taBar设计一个导航栏，用list代码插入“乐趣”和“练习”两个功能键。用代码text规定导航栏的文本，再用代码pagePath后插入导航功能键点击后切换的页面，接着用代码iconPath后插入功能键点击前的图片，最后用代码selectedIconPath插入功能键点击后切换的图片。功能键的颜色依旧用color设计，点击后变换的字体颜色用selectedcolor设计。
关于侧边导航栏的设计[4]，也是用CSS中的div效果设计的，给侧边导航栏的div用class代码命名，在CSS的顶部输入对应的名称，然后在顶部用height设计侧边导航栏的高，用代码width设计侧边导航栏的宽度，如果要侧边导航栏做出触摸即会自动出来的效果，则用代码overflow后输入hidden使侧边导航栏超出的部分进行隐藏。规定侧边导航栏的隐藏宽度，则需要在对应名称后面输入冒号后面用代码hover去定义侧边导航栏隐藏部分的宽度，注意这里的宽度单位用px。对于连接中字体的颜色，则需另起一行，在对应名称后输入空格后输入链接代码的最开始字母a，后用color来规定链接中字体的颜色，然后用text-decoration来规定连接中字体有无下划线，代码none则为没有下划线。关于侧边导航栏的位置，代码padding用来规定侧边导航栏与屏幕顶部的距离，position则用来规定是在屏幕的左边还是右边，代码left为左边，right为右边。对于点击侧边导航栏的样式，则是用代码cursor来规定，pointer则为触摸时会展现导航栏的隐藏部分。如果想让侧边导航栏最外侧增加较粗实线，则在相应名称后输入代码border-left来规定侧边导航栏最外侧较粗实线的宽度，在其后输入空格之后再输入实线的颜色;如果最外侧为实线的话则再输入一个代码solid;如果想让侧边导航栏最左侧隐藏则需在代码前加入代码hover。
关于练习板块的画板用Python中的画图代码，首先以页面布局来看，把整个画板分为上下两部分，两个部分为绘图区域和功能区，绘图区域用Canvas实现，功能区由按钮实现。然后再对两个区域进行事件监听，通过给按钮链接各种效果，来实现不同的功能，比如：画各种形状。对于绘图区域，要使鼠标左键按下就开始绘图和鼠标左键抬起就停止绘图，并通过点击不同的按钮来进行不同图形的绘制。Canvas提供一个控件时有一个自定義的绘图区域，可以通过代码来绘制不同的图形。绘制直线则需要用代码create-line（self.x， self.y ，event .x，event.y，fill=self.f.gcolor），绘制带箭头的直线用代码create-line（self.x， self.y ，event .x，event.y，fill=self.f.gcolor，arrow=LAST），绘制矩形则用代码creat-rectangle。后面以此类推，用代码python简单的画图代码即可完成[4]。
部分代码为：
function MM_swapImgRestore（） { //v3.0
var i，x，a=document.MM_sr; for（i=0;a&&i } function MM_preloadImages（） { //v3.0 var d=document; if（d.images）{ if（！d.MM_p） d.MM_p=new Array（）; var i，j=d.MM_p.length，a=MM_preloadImages.arguments; for（i=0; i if （a[i].indexOf（"#"）！=0）{ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj（n， d） { //v4.01 var p，i，x; if（！d） d=document; if（（p=n.indexOf（"？"））>0&& parent.frames.length） { d=parent.frames[n.substring（p+1）].document; n=n.substring（0，p）;} if（！（x=d[n]）&&d.all） x=d.all[n]; for （i=0;！x&&i for（i=0;！x&&d.layers&&i if（！x && d.getElementById） x=d.getElementById（n）; return x; } function MM_swapImage（） { //v3.0 var i，j=0，x，a=MM_swapImage.arguments; document.MM_sr=new Array; for（i=0;i<（a.length-2）;i+=3） if （（x=MM_findObj（a[i]））！=null）{document.MM_sr[j++]=x; if（！x.oSrc） x.oSrc=x.src; x.src=a[i+2];} }
