關(guān)于線上美術(shù)視頻教學(xué)“小伴”APP的設(shè)計研究

張華溢 靳偉霞 陳婷

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

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

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

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

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

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

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

2? 國內(nèi)外研究對比

2.1? 國外線上早教APP研究

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

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

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

2.3? 國內(nèi)外研究對比

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

3? “小伴”APP的實踐研究

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}