張華溢 靳偉霞 陳婷

摘? 要：隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展，“互聯(lián)網(wǎng)+教學(xué)”的教育方式愈加受到人們的青睞。本著父母是孩子第一任教師的理念，文章設(shè)計(jì)開(kāi)發(fā)了以“親子互動(dòng)教育”為核心的美術(shù)教學(xué)APP，加強(qiáng)父母與幼兒的親子互動(dòng)，讓幼兒在父母的陪伴下更高效、更高質(zhì)量地受到美術(shù)啟蒙教育。該款A(yù)PP運(yùn)用專業(yè)開(kāi)發(fā)工具和視覺(jué)設(shè)計(jì)工具，實(shí)現(xiàn)了線上學(xué)習(xí)、互動(dòng)游戲等功能，緩解了線下幼兒機(jī)構(gòu)教育的痛點(diǎn)，達(dá)到了啟蒙教育的目的。

關(guān)鍵詞：互聯(lián)網(wǎng)+教學(xué);親子互動(dòng);美術(shù)啟蒙

中圖分類號(hào)：TP311.5 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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? 引? 言

據(jù)了解，隨著廣大老百姓物質(zhì)生活水平的提高，生活方式的多樣化，已經(jīng)有一部分家長(zhǎng)選擇把孩子送到“國(guó)際”學(xué)校接受教育，在孩子小的時(shí)候就給他報(bào)各種各樣的興趣班、課外輔導(dǎo)班。因此一款功能齊全且具有人性化的幼兒教學(xué)APP的設(shè)計(jì)研究是非常有必要的[1]。

早些年前，國(guó)外的線上啟蒙教育就已經(jīng)開(kāi)始了，像Scratch就是由麻省理工學(xué)院開(kāi)發(fā)的，專門用于幫助兒童、青少年學(xué)習(xí)編程的編程軟件，以便充分地開(kāi)發(fā)青少兒的自主學(xué)習(xí)能力和邏輯思維能力[2]。在此背景下，我們研究設(shè)計(jì)了一款名為“小伴”的線上美術(shù)教學(xué)APP，它綜合了國(guó)內(nèi)外、線上線下教育的豐富經(jīng)驗(yàn)，確立了讓幼兒在父母的陪伴下開(kāi)展美術(shù)啟蒙與學(xué)習(xí)的教育理念。

1? 線上美術(shù)視頻教學(xué)的目的

互聯(lián)網(wǎng)和智能手機(jī)給人類帶來(lái)了全新的生活方式，“互聯(lián)網(wǎng)+教學(xué)”也隨之發(fā)展成為新的教學(xué)模式。筆者設(shè)計(jì)開(kāi)發(fā)的“小伴”APP就是為了更好地培養(yǎng)幼兒對(duì)美術(shù)的興趣，有效地節(jié)約家長(zhǎng)的時(shí)間和成本，通過(guò)簡(jiǎn)易有趣的操作方式讓家長(zhǎng)陪伴孩子共同學(xué)習(xí)，在“小伴”這個(gè)平臺(tái)上可以隨時(shí)進(jìn)行親子之間的互動(dòng)，可以輕松實(shí)現(xiàn)與家人一起完成一幅美術(shù)作品的過(guò)程，這不僅增進(jìn)了親子感情，對(duì)幼兒在美術(shù)方面的啟蒙也會(huì)達(dá)到事半功倍的效果[2]。

2? 國(guó)內(nèi)外研究對(duì)比

2.1? 國(guó)外線上早教APP研究

經(jīng)過(guò)調(diào)查研究，美國(guó)有一款稱作兒童的“電子圖書館”APP——“Epic”，如圖1所示，這款A(yù)PP在2019年被眾多美國(guó)家長(zhǎng)選擇而登上金獎(jiǎng)榜單并且位列第一，它適用于3歲到12歲年齡段的兒童，APP中包含的童書體量非常大而且內(nèi)容豐富有趣，在兒童閱讀的同時(shí)通過(guò)積累閱讀時(shí)間來(lái)提升級(jí)別，從而激勵(lì)孩子愛(ài)上讀書?！癊pic”APP以探索與學(xué)習(xí)為宗旨，藍(lán)色為界面主體顏色，不同類別的圖書分區(qū)域羅列在界面中。這款線上閱讀APP為孩子們提供了創(chuàng)新的移動(dòng)閱讀體驗(yàn)，也讓孩子們擁有了屬于自己的“掌上閱讀書庫(kù)”。

2.2? 國(guó)內(nèi)線上早教APP研究

經(jīng)過(guò)對(duì)國(guó)內(nèi)幼兒早教APP的調(diào)查研究，我們分析了“寶寶聽(tīng)聽(tīng)”，如圖2所示，主要是一款可以給幼兒講故事的音頻軟件，擁有海量的兒歌、故事、動(dòng)畫等早教內(nèi)容，它適用于0到12歲的兒童，面向家長(zhǎng)和孩子都提供了豐富的課程，解決了幼兒?jiǎn)⒚蓪W(xué)習(xí)的需求。另一款“寶寶巴士”，如圖3所示，是分類比較詳細(xì)的幼兒早教軟件，內(nèi)容不僅包括兒歌、故事、動(dòng)畫、游戲等，還增加了互動(dòng)課程內(nèi)容，通過(guò)“好看”“好學(xué)”“好聽(tīng)”來(lái)豐富幼兒的語(yǔ)言和興趣愛(ài)好，實(shí)現(xiàn)了“一站式”線上早教育兒。

2.3? 國(guó)內(nèi)外研究對(duì)比

國(guó)內(nèi)外關(guān)于幼兒?jiǎn)⒚山虒W(xué)的眾多APP既有相同之處也有不同之處，相同之處就是這些軟件大部分都是設(shè)計(jì)原理相同，界面操作簡(jiǎn)單易學(xué)，可以由孩子自主掌控，不需要家長(zhǎng)引導(dǎo)卻缺少了親子互動(dòng)的過(guò)程。不同之處是國(guó)外的軟件更趨向于去開(kāi)發(fā)幼兒的自主學(xué)習(xí)能力，培養(yǎng)孩子的開(kāi)拓探索能力，而且軟件應(yīng)用的年齡范圍比較廣。國(guó)內(nèi)的幼兒教育軟件更多的是偏重于娛樂(lè)方面，通過(guò)兒歌、動(dòng)畫、小游戲等來(lái)吸引幼兒的好奇心，然而發(fā)現(xiàn)孩子們大多停留在看動(dòng)畫片和玩游戲的時(shí)間更多一些，導(dǎo)致“娛大于教”失去了啟蒙教學(xué)的初衷，而且軟件的適用年齡有一定局限性。

3? “小伴”APP的實(shí)踐研究

為了加強(qiáng)“互聯(lián)網(wǎng)+教學(xué)”這一模式的運(yùn)用，研究發(fā)明一款更適合幼兒身心發(fā)展的線上美術(shù)教學(xué)APP——“小伴”，在研究之初即通過(guò)網(wǎng)絡(luò)調(diào)研、家校走訪、國(guó)內(nèi)外相關(guān)軟件研究對(duì)比等方式進(jìn)行了調(diào)查，并結(jié)合線上線下發(fā)放調(diào)查問(wèn)卷方式得出相關(guān)有效數(shù)據(jù)。其中，90.80%的家長(zhǎng)有意識(shí)地培養(yǎng)孩子的愛(ài)好，但是67.82%的家長(zhǎng)是沒(méi)有空閑時(shí)間陪伴孩子一起學(xué)習(xí)的，85.33%的家長(zhǎng)希望研發(fā)出一款家長(zhǎng)可以陪伴兒童一起線上學(xué)習(xí)的美術(shù)教學(xué)APP。

3.1? 設(shè)計(jì)理念與Logo設(shè)計(jì)

隨著國(guó)家對(duì)“五育”的高度重視，美術(shù)已經(jīng)成為重要的考核科目?！靶“椤盠ogo設(shè)計(jì)主題是“相依相伴，一起成長(zhǎng)”，孩子在左家長(zhǎng)在右，家長(zhǎng)是綠色代表著期許和寄托，孩子是紅色代表著活潑和友愛(ài)，房屋頂部是鏤空，中間有不同顏色的圓點(diǎn)和星星，代表著無(wú)限的想象和斑斕的人生，象征著每個(gè)孩子都能擁有實(shí)現(xiàn)夢(mèng)想的權(quán)利，如圖4所示。

3.2? 功能邏0輯設(shè)計(jì)及實(shí)現(xiàn)

在“小伴”APP開(kāi)發(fā)過(guò)程初期，首先確立了該款軟件的核心功能，在此基礎(chǔ)上梳理了從進(jìn)入程序到使用每項(xiàng)功能的全部流程，并利用工程開(kāi)發(fā)思維畫出每項(xiàng)功能的邏輯流程圖。該款軟件開(kāi)發(fā)過(guò)程中運(yùn)用了APP制作工具APPbyme實(shí)現(xiàn)功能，運(yùn)用PS、AI制作軟件實(shí)現(xiàn)界面的設(shè)計(jì)和美化[3]。該款A(yù)PP主要有7項(xiàng)功能：

（1）點(diǎn)擊“直播課程”，進(jìn)入直播課程學(xué)習(xí);

（2）點(diǎn)擊“選課咨詢”，進(jìn)入課程咨詢聊天窗口，教師為用戶提供一對(duì)一選課咨詢服務(wù);

（3）點(diǎn)擊“課程管理”，進(jìn)入課程列表，為用戶展示已選課程列表及各門課程的學(xué)習(xí)進(jìn)度;

（4）點(diǎn)擊“我的老師”，接入教師列表，為用戶展示所選課程對(duì)應(yīng)的授課老師簡(jiǎn)介、聯(lián)系方式等;

（5）點(diǎn)擊“我們”，進(jìn)入賬戶設(shè)置，為用戶提供用戶名、密碼等登錄信息設(shè)置;

（6）點(diǎn)擊“樂(lè)趣”，在主界面展示互動(dòng)游戲選項(xiàng)卡，用戶通過(guò)左右滑動(dòng)選擇進(jìn)入“為愛(ài)接力”“愛(ài)的拼圖”“為愛(ài)涂色”“親子猜畫”四種親子互動(dòng)游戲;

（7）點(diǎn)擊“練習(xí)”，進(jìn)入畫板模式，為用戶提供帶有畫筆、顏色、橡皮擦選項(xiàng)的空白畫板進(jìn)行繪畫練習(xí)。

“小伴”APP功能結(jié)構(gòu)圖如圖5所示。

3.3? APP的界面設(shè)計(jì)

“小伴”的界面設(shè)計(jì)與傳統(tǒng)的界面設(shè)計(jì)不同，開(kāi)始界面設(shè)計(jì)以一個(gè)占滿全頁(yè)面的幻燈片來(lái)作為軟件剛安裝時(shí)點(diǎn)開(kāi)的軟件介紹，此部分可以用DW軟件代碼中的CSS設(shè)計(jì)一個(gè)簡(jiǎn)單的幻燈片。頁(yè)面的上半部分是資訊欄模塊，推送各種與繪畫藝術(shù)相關(guān)的新聞資訊;中間部分為視頻區(qū)模塊，有點(diǎn)播課程、往期回顧、一對(duì)一輔導(dǎo)等視頻教學(xué);下半部分是功能區(qū)模塊，可以選擇直播課程、選課咨詢、課程管理、我的老師、我們，每個(gè)用戶可以根據(jù)個(gè)人情況進(jìn)行設(shè)置和管理，用戶進(jìn)入到老師的直播間可以進(jìn)行實(shí)時(shí)互動(dòng)、提問(wèn)交流，建組討論;底端部分是樂(lè)趣和練習(xí)，新增的兩個(gè)功能鍵是這款A(yù)PP的亮點(diǎn)，如圖6所示，“小伴”也會(huì)有比賽社區(qū)，我們會(huì)在資訊欄發(fā)布一些美術(shù)大賽的相關(guān)資訊，家長(zhǎng)和孩子們可以報(bào)名參加，通過(guò)比賽實(shí)踐來(lái)提升專業(yè)水平，激發(fā)孩子的美術(shù)學(xué)習(xí)興趣[3]。

3.4? 頁(yè)面設(shè)計(jì)技術(shù)研究

“小伴”APP的頁(yè)面設(shè)計(jì)可以用DW軟件代碼中的CSS設(shè)計(jì)一個(gè)簡(jiǎn)單的幻燈片，由于用戶的設(shè)備屏幕大小不同，用radius代碼使幻燈片自動(dòng)適應(yīng)所有用戶的屏幕。然后再用CSS中的div效果做出幻燈片的滾動(dòng)效果。在最后一頁(yè)的幻燈片用HTML代碼中的input代碼設(shè)計(jì)一個(gè)“點(diǎn)擊進(jìn)入”的按鈕，使用戶在看完幻燈片并且對(duì)軟件有了大概的了解之后可以立刻點(diǎn)擊進(jìn)入進(jìn)行軟件使用。

關(guān)于頁(yè)面上半部分的資訊欄板塊，用HTML中marquee給各種資訊賦予一個(gè)滾動(dòng)的效果，將behavior設(shè)為scroll，使這些資訊可以滾動(dòng)展示，然后loop的值設(shè)為-1，使每天推送的資訊可以不斷顯示，將資訊的圖片算好尺寸用img在滾動(dòng)效果中插入資訊圖片。底欄用taBar設(shè)計(jì)一個(gè)導(dǎo)航欄，用list代碼插入“樂(lè)趣”和“練習(xí)”兩個(gè)功能鍵。用代碼text規(guī)定導(dǎo)航欄的文本，再用代碼pagePath后插入導(dǎo)航功能鍵點(diǎn)擊后切換的頁(yè)面，接著用代碼iconPath后插入功能鍵點(diǎn)擊前的圖片，最后用代碼selectedIconPath插入功能鍵點(diǎn)擊后切換的圖片。功能鍵的顏色依舊用color設(shè)計(jì)，點(diǎn)擊后變換的字體顏色用selectedcolor設(shè)計(jì)。

關(guān)于側(cè)邊導(dǎo)航欄的設(shè)計(jì)[4]，也是用CSS中的div效果設(shè)計(jì)的，給側(cè)邊導(dǎo)航欄的div用class代碼命名，在CSS的頂部輸入對(duì)應(yīng)的名稱，然后在頂部用height設(shè)計(jì)側(cè)邊導(dǎo)航欄的高，用代碼width設(shè)計(jì)側(cè)邊導(dǎo)航欄的寬度，如果要側(cè)邊導(dǎo)航欄做出觸摸即會(huì)自動(dòng)出來(lái)的效果，則用代碼overflow后輸入hidden使側(cè)邊導(dǎo)航欄超出的部分進(jìn)行隱藏。規(guī)定側(cè)邊導(dǎo)航欄的隱藏寬度，則需要在對(duì)應(yīng)名稱后面輸入冒號(hào)后面用代碼hover去定義側(cè)邊導(dǎo)航欄隱藏部分的寬度，注意這里的寬度單位用px。對(duì)于連接中字體的顏色，則需另起一行，在對(duì)應(yīng)名稱后輸入空格后輸入鏈接代碼的最開(kāi)始字母a，后用color來(lái)規(guī)定鏈接中字體的顏色，然后用text-decoration來(lái)規(guī)定連接中字體有無(wú)下劃線，代碼none則為沒(méi)有下劃線。關(guān)于側(cè)邊導(dǎo)航欄的位置，代碼padding用來(lái)規(guī)定側(cè)邊導(dǎo)航欄與屏幕頂部的距離，position則用來(lái)規(guī)定是在屏幕的左邊還是右邊，代碼left為左邊，right為右邊。對(duì)于點(diǎn)擊側(cè)邊導(dǎo)航欄的樣式，則是用代碼cursor來(lái)規(guī)定，pointer則為觸摸時(shí)會(huì)展現(xiàn)導(dǎo)航欄的隱藏部分。如果想讓側(cè)邊導(dǎo)航欄最外側(cè)增加較粗實(shí)線，則在相應(yīng)名稱后輸入代碼border-left來(lái)規(guī)定側(cè)邊導(dǎo)航欄最外側(cè)較粗實(shí)線的寬度，在其后輸入空格之后再輸入實(shí)線的顏色;如果最外側(cè)為實(shí)線的話則再輸入一個(gè)代碼solid;如果想讓側(cè)邊導(dǎo)航欄最左側(cè)隱藏則需在代碼前加入代碼hover。

關(guān)于練習(xí)板塊的畫板用Python中的畫圖代碼，首先以頁(yè)面布局來(lái)看，把整個(gè)畫板分為上下兩部分，兩個(gè)部分為繪圖區(qū)域和功能區(qū)，繪圖區(qū)域用Canvas實(shí)現(xiàn)，功能區(qū)由按鈕實(shí)現(xiàn)。然后再對(duì)兩個(gè)區(qū)域進(jìn)行事件監(jiān)聽(tīng)，通過(guò)給按鈕鏈接各種效果，來(lái)實(shí)現(xiàn)不同的功能，比如：畫各種形狀。對(duì)于繪圖區(qū)域，要使鼠標(biāo)左鍵按下就開(kāi)始繪圖和鼠標(biāo)左鍵抬起就停止繪圖，并通過(guò)點(diǎn)擊不同的按鈕來(lái)進(jìn)行不同圖形的繪制。Canvas提供一個(gè)控件時(shí)有一個(gè)自定義的繪圖區(qū)域，可以通過(guò)代碼來(lái)繪制不同的圖形。繪制直線則需要用代碼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簡(jiǎn)單的畫圖代碼即可完成[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（?。▁=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];}

}