沪ICP备06058754号-1
儿童科普教育APP—以“长江生态圈”为例

卓鑫苗

2019-12-09

用户体验 文集

2018年学术论文欣赏

本文段落精选

 

随着信息技术的不断发展,人们所通过获取信息、社交和休闲娱乐方式的途径基本都是来自APP,APP已经成为了人们生活的一个重要环节。不仅成人,越来越多人通过使用手机、IPAD等电子设备作为媒介下载各类儿童科普教育的APP作为辅助儿童学习的工具。

 

通过对“长江生态圈”APP的设计实践,将数字媒体艺术与教育知识相结合,通过互动方式能够提高儿童的学习兴趣,在娱乐的过程中学习到相应的知识点。本文对此进行了详细的描述。

 

 

 

 

儿童科普教育APP—以“长江生态圈”为例

卓鑫苗

南京艺术学院

 

 

摘要:

随着信息技术的不断发展,人们已日益习惯通过互联网移动端的途径来获取信息、社交和休闲娱乐的内容,渐渐改变了他们以往的生活、工作和学习方式。不仅成人,还有儿童也深受信息技术的影响。对于儿童教育已不局限于书籍与父母讲解上,越来越多人通过使用手机、IPAD等电子设备作为媒介下载各类儿童科普教育的APP作为辅助儿童学习的工具。本文主要从三个方面对儿童科普教育APP进行阐述:

    第一部分,对移动互联网与APP发展以及儿童科普教育APP的发展进行研究,从互联网将给儿童科普教育APP带来发展的角度,进行有关儿童科普教育APP的设计探究。

    第二部分,分析在App store上较热门的3款儿童科普教育类APP案例。对其视觉、交互设计上进行了分析,并总结这3款APP成功的原因。为后期进行儿童科普教育APP设计实践提供思路。

    第三部分,阐释毕业设计“长江生态圈” 设计,这是一款以长江流域动植物为表现主题的App,结合交互游戏的方式科普儿童知识,希望以此呼吁公众保护长江生态环境的理念。

关键词:儿童教育APP,长江动植物,交互,科普,功能游戏

 

 

1.引言

1.1研究背景

1.1.1关于移动互联网和APP

根据CNNIC调查数据显示至2017年12月底,我国使用互联网的民众规模达7.72亿,普及率达到55.8%,超过全球平均水平51.7%,超过亚洲平均水平46.7%。我国网民规模保持平稳增长,互联网模式不断创新与发展。越来越多人通过互联网移动端来获取信息、社交和休闲娱乐改变了他们以往的生活、工作和学习方式。而人们所通过获取信息、社交和休闲娱乐方式的途径基本都是来自APP,APP已经成为了人们生活的一个重要环节。所以各大软件供应商不断研发新的不同类型的APP,来满足人们生活中的各种需要。

据调研公司App Annie发布报告,至2018年3月底苹果应用商店下载量超过82亿次。其中游戏类应用所占比例为64%,教育类应用所占比例为7%。从数据中能够体现智能手机/平板电脑用户每天花在APP上的时间每天平均将近3小时,每月访问的APP数量接近40个。这些数据很好的向人们说明了手机/平板电脑和APP对我们现代人的生活有多重要。

 

1.1.2儿童科普教育APP的发展

随着时代的不断发展,公众对于科技产品的接受能力也日益增强。信息技术在改变着人们的生活方式,很多事情都变得更加智能化。不仅仅是成年人,还有儿童也深受信息技术的影响,在他们的生活中有着各种各样的电子科技产品。iPad、手机成为他们最喜爱的玩具不仅仅局限于以往的传统玩具,现在还有各种有趣的APP围绕在他们身边。根据《中国互联网数据资讯中心》显示至2017年底有98%的0-8岁儿童的家里都有移动设备, 32.48%的儿童平均每天在iPad、手机、电脑等电子产品上花费1-3小时,而这个数字在2011年只有4%。

截至2018年4月15日中国区App Store上教育、图书收费应用的下载排名来看,儿童教育和儿童图书在两类应用前50位排名中部占有40%以上。在收费和免费应用的前200名中,针对儿童的App也占有50%以上。如今,关于儿童APP应用已成为苹果公司App Store除了游戏以外的第二大营收项目。由此可见,越来越多儿童热衷于电子产品,也越来越多家长会通过下载儿童科普教育APP来作为儿童的启蒙学习途径。 

 

1.2研究的目的与意义

儿童在进行科普知识时,对于0~8岁的儿童作为启蒙教育来说有的知识点复杂抽象难以理解。不管是通过父母讲解还是通过图书学习知识,孩子的接收方式是被动的,还是难以理解的。0~8岁这阶段的儿童玩心较重,若是枯燥无味的学习方式,不但会使他们感到枯燥无味还会理解不了知识点。现在越来越多的学校针对儿童教育早已不再是纯粹的课本、板书,而是增加了许多与数字化相结合的教学工具。大部分学校已经采用了投影机、电视机等设备来辅助教学,还有的学校已经采用了使用iPad上课的模式,深受学生欢迎。若把课本知识点以交互游戏的方式相结合生成教育APP,想必会大大提高儿童学习的乐趣。

本文以南京滨江小学的“小灵娃看长江-高年级教材”为蓝本(图1),进行再创作。将数字媒体艺术与教育知识相结合,通过互动方式能够提高儿童的学习兴趣,在娱乐的过程中学习到相应的知识点。同时也能够呼吁公众提高保护环境的意识,关注周围濒临灭绝的动植物。这款APP是基于IPAD端主要针对4~8岁儿童希望他们在不受时间地点局限的情况下,以交互游戏的方式让儿童轻松愉快学习知识。除了常规的互动学习,还包含了给长江动植物填色的游戏,以及通过拍照的方式将用户个性的肖像与长江动植物相结合生成图片等功能。

 

图1

 

 

1.3研究现状

目前,在App Store上的儿童科普教育APP主要围绕儿童电子故事书类、字母语言类、数字教学类、音乐艺术类、生活常识类以及游戏类为主。而大部分儿童科普教育APP的交互形式主要分为以下几类:阅读、游戏或是通过游戏闯关的方式来学习知识点。对于既通过游戏的交互形式来学习相应的知识点,又包含拍照的方式将用户个性的肖像与学习内容相结合的儿童科普教育APP目前较少,WWF Togerther是包含了用户个性肖像与学习内容的一款APP(详见下文)。

 

2.儿童科普教育类APP作品案例分析

在进行儿童科普教育APP设计实践前,笔者分析了在App store上较热门的3款儿童科普教育类APP案例。对其视觉、交互设计上进行了分析,并总结这3款APP成功的原因。为后期进行儿童科普教育APP设计实践提供思路。

 

2.1《WWF Together》

WWF Together这是一款关于自然保护类教育APP,并且在2013年获得了WWDC设计奖。这个APP主要以濒危动物为主题,介绍了17种濒临灭绝的动物,并且给每个动物都贴上了标签。以折纸的设计形式表达濒临灭绝的动物形象,吸引眼球。(图2)在交互上,以野生动物的视角来观察这个世界,还结合地理位置信息以及与动物互动游戏,不仅让儿童,还能让成人直观地感受到保护动物及环境的重要性。同时在这款APP中还包含了拍照功能,用户可以通过拍摄风景或自身肖像,把动物的折纸形象与拍摄内容相结合生成图片。(图3)

 

  

图2

 

图3

 

2.2《Inventioneers》

Inventioneers APP在2015年获得 “最佳北欧儿童游戏奖”。这是一款益智类的游戏,主要通过游戏闯关的方式来考验儿童的实践逻辑能力以及激发儿童的丰富的创造力。在这款游戏中,分为不同场景。每个场景所涵盖的学习内容也是不同的。如用户通过果园场景中可以学习到果园内果树的分类、浇灌果树的肥料种类等知识;通过修理厂场景可以学习到修理器材所用到的五金工具的内容等。这款APP主要分为4个部分即“主页、场景选择、设置、分享”,交互流程简单明了。Inventioneers并没有很明确的规定儿童在游戏中学习哪方面的知识,主要是激发儿童的创造力和实践逻辑能力。(图4)

 

 

图4

 

2.3《hip hop hen》

这款APP是通过手绘的方式以此来展现字母让儿童学习。以卡通的视觉风格把字母与动物,食物,日常用品等相结合,让儿童在学习的过程中找到乐趣。通过儿童本身手绘出字母的方式让其对该字母有更深的印象。儿童还可以选择自己所喜欢的颜色去描绘字母让自己对其更有兴趣。(图5)

 

 

图5

 

2.4小结:儿童科普教育类APP有效设计方法

 经过对“WWF Together”、“Inventioneers”、 “hip hop hen”这3款APP的分析,对儿童科普教育APP有效设计方法总结了以下3点方面:

(1)内容上:“WWF Together”是通过系列动物高清大图以及视频让用户系统地学习到濒危动物的现状;“Inventioneers”是通过游戏方式从生活中场景来学习事物,让用户客观认知生活常识;“hip hop hen”是通过儿童熟知的卡通形象来间接引导用户学习字母。

(2)视觉上:“WWF Together”以具象的动物照片以及视频让用户直观了解动物的现状;“Inventioneers”与“hip hop hen”以大部分儿童喜爱的卡通风格呈现,鲜明的色彩与有趣的卡通形象是能够更吸引儿童的眼球。

(3)情感设计:“WWF Together”、“Inventioneers”、 “hip hop hen”这3款APP都是以生活中熟悉的事物来引导儿童学习。如“WWF Together”APP运用儿童所熟知的折纸形式来展现野生动物的形象;“Inventioneers”APP运用果园、修理厂等生活中的场景来引导儿童学习其中的内容常识;“hip hop hen”APP运用蜡笔自主绘画字母的方式来提高儿童对学习字母的兴趣。对于陌生的事物,容易让儿童一闪而过不放在心上。若通过儿童所熟知的场景或事物引领他们学习新的事物,这样能让儿童更快接受新事物的知识。

 

3.毕业设计 — “长江生态圈”为主题的儿童科普教育APP设计

3.1设计思路

儿童科普教育APP设计—“长江生态圈”是基于校本课程为蓝本进行设计的。首先,在南京地区小学都已经有属于每个学校独特的校本课程。“长江生态圈”这件作品借助南京滨江小学的“小灵娃看长江-高年级教材”为素材(图1.2),以数字图形的设计手段,交互游戏的方式科普儿童认知长江流域动植物的知识;其次,有部分长江流域的动植物处于濒临灭绝的处境,希望能够呼吁公众保护环境以及不要伤害这些稀有的动植物;最后,因为校本课程是南京每个小学独特的校本课程,不受限于国家或省级教材统一大纲,有了更多做创作的可能性。

 “长江生态圈”APP设计工作流程(图6)

 

   

图6

 

在“长江生态圈”APP中总共绘制了40种在长江流域的动植物,选择其中最有代表性的6种动物(即白鹭、猴面鹰、白鳍豚、水母、四川华吸鳅以及麋鹿)与2种植物(麻栎与梭鱼草)作为APP的主要介绍对象。“长江生态圈”设定为一款横屏基于IPAD端的儿童科普教育APP,交互流程框架由多个界面组成,分别是“主页、8个动植物场景、我的画板”等界面,其中还包括“文本介绍、填色、我的背包、照相、背景颜色、素材”等功能。(图7)其中模块部分主要分为“主页、文本介绍、填色、我的背包、照相”这五个模块,详细情况介绍如下:

 

图7

 

(1)“主页”模块:载入主页界面时会有主页动画来提示使用者长按点击进入二级界面的标识。在主页中设置了两种方式进入介绍动植物的二级界面。一种是“长按画面”(图8),这种方式是以线性进行观察,用户是无法任意选择要去的动植物界面;另一种是“点击左上角主页logo”(图9),这种方式是用户能够自行选择所要去的动植物界面。

 

 

图8    

           

图9

 

(2)“文本介绍”模块:用户在进入动植物二级画面中,左侧会有一条菜单栏上面有四个图标,分别是文本介绍、填色、我的背包以及照相这4个模板。刚进入动植物二级界面时,对于每个动植物的文本介绍会自动弹出,用户可以自主打开/关闭语音朗读。当用户阅读完文本内容或是想关闭文本框可以通过点击左侧菜单栏中文本介绍的图标来实现,想再次阅读也由此实现。

(3)“填色”模块:用户可以通过自主上色的方式为8个主体动植物进行填充自己喜欢的颜色,增加了更多的趣味性和娱乐性。给主体动植物填好色后,可以保存本地或分享至朋友圈、QQ、微博等。

(4)“我的背包”模块:用户可以通过选择界面中喜欢的物体,点击添加在“我的背包”中然后进行创作属于自己的画面。在这个模块中还包含了“背景颜色、已添加物体、素材”这3块内容。在“背景颜色”中选择喜欢的背景颜色再往里拖进已添加的物体,还可以再次改变该物体的颜色。在“素材”中有界面组合好的树林、礁石、珊瑚等素材供使用者选择。组合好新的场景后可以保存本地以及分享至朋友圈、QQ、微博等。

(5)“照相”模块:点击“照相”该图标,界面会弹出自动倒数5秒的提示,这时用户可以对着镜头进行拍照,拍完后画面上就会出现用户的肖像与动植物相结合的照片。将自身与画面相结合生成独一无二的照片进行保存与分享。

 

3.2设计流程

在设计“长江生态圈”APP之前,首先到南京滨江小学收集该小学“小灵娃看长江-高年级教材”的课本资料,选取其中小章节作为素材。并收集有关长江流域的动植物信息与形象图片、还分析了App store上热门的前10款儿童科普教育APP。随后挑选出40种长江流域动植物进行草图绘制并确认设计风格,再进行场景绘制、图形界面、交互流程分析等项目。然后导入Unity工程文件制作图形用户界面以及编写交互功能脚本,最后导出动态加载素材进行应用功能试调,最终上传服务器完成APP发布。具体流程(图6)

 

3.3视觉设计

 “长江生态圈”以长江流域场景以及周围动植物作为整个APP的呈现,主要是针对2~8岁的儿童科普知识使用。因此整个APP的视觉风格需要偏向卡通化一些,设计中借鉴了意大利插画家Philip的插画作品(图7)与荷兰插画家Erwin kro的插画作品(图8)。

 

 

 

图7

 

 

图8

 

(1)主体图形设计上:笔者从收集长江流域动植物形象图片中挑选出40种进行绘制,其中动物13种,植物27种。(图9部分展示)在图形的设计上主要是以几何块状来代替原本写实的形象,使动植物写实形象图形化、设计化,使使用者看起来会更有趣味性些。(图10)

 

 

图9部分展示

 

 

图10

 

(2)在logo设计上:因为“长江生态圈”APP是围绕长江流域及其周围环境展开的,所以在logo的设计上,笔者选择长江流域最具有代表性的动物-白鳍豚作为整个logo的主体,将白鳍豚的形象与江水相结合能够明确地突出“长江生态圈”这个APP的内容。(图11)

 

图11

 

(3)在色彩上:主要针对儿童,使用温和、舒适的色调,会给人带来温暖亲近的感觉。

(4)在界面设计上:在主页中笔者将部分动植物与江水结合在一起整体体现长江生态圈的氛围。(图12)而在8个动植物的二级界面中,结合长江流域场景以及动植物所生活的地域进行场景组合,在场景上绘制了夜晚、早晨等不同时间段还有陆地、江中不同地段的场景。(图13)

 

图12

 

图13

 

3.4交互流程设计

用户在进入“长江生态圈”APP后,出现的是主页界面动画,随之可以通过“点击长按”或“点击左上角图标”进入动植物二级界面。以通过“点击长按”进入第一个二级界面“白鹭界面”为例,进入白鹭界面后会自动弹出对“白鹭”的文本介绍,可通过左侧菜单栏中“文本介绍”图标对此进行关闭或打开。(图14)点击“填色”图标会出现,界面中的白鹭成线稿状态以及白鹭旁有个色条以此来进行自主的颜色填充。(图15)点击“我的背包”再无添加任何物体的情况下,“我的背包”呈现的是空的状态,用户可以通过选择界面中物体添加至“我的背包”中。(图16)

点击“照相”图标界面会自动弹出“请看镜头”以及倒计时5秒拍照,使用户肖像与场景相融合形成独一无二的照片。(图17)在添加完物体后,再点击“我的背包”进行创作会出现“画板界面”在此界面中包含“背景颜色、已添加物体与素材”三个功能。用户可以通过这三个功能来进行绘制属于自己的场景。(图18)

 

图14

图15

图16

图17

图18

 

3.5展示方式的呈现

对于“长江生态圈”APP的设计,为了使展示方式不仅仅是在IPAD端上呈现,想要使毕业设计展上有更多的趣味性。针对“长江生态圈”这个主题,把长江流域场景分为“春、夏、秋、冬”四个场景,四季场景表现生态环境,每个季节中呈现该季节的动植物。对于墙面投影的场景上,并制作了四季场景动画。以墙面投影结合IOS端和融入甩屏技术与墙面投影交互,增加更多互动性。(图19)针对IOS端,采用两种形式。第一种是在实体展示空间中参与者通过在IOS端上自主为动植物填色的方式投在大屏幕上,参与度高(图20);第二种是针对长江流域动植物制作一个APP基于IPAD端发布APP Store上(图21),APP主要是给儿童或公众不仅普及长江流域动植物的知识还增添了交互游戏自主上色以及将自己个性的肖像与长江流域动植物相结合生成图片等。此外,还制作了有关长江生态圈相关的衍生品展现在实体展示空间中。(图22)

 

 

图19

 

 

图20

 

 

图21

 

 

图22

 

4.结论

通过对“长江生态圈”APP的设计实践,了解到要实施一个项目并把这个项目做的完整是需要通过系列流程来实现的。在实施“长江生态圈”儿童科普教育APP前,要对互联网发展与APP发展现状、APP历年在App store上下载量的对比分析、儿童科普教育APP发展现状及每个家庭所持有电子设备的占有率进行分析以此来估评设计儿童科普教育APP的发展性。随之还要分析App store上已有的儿童科普教育App的类别、视觉效果、交互流程给接下来的设计提供思路。在确定内容上,以“长江生态圈“为主题的目的是因为在已有的儿童科普教育APP上对学校课程内容科普的范围较少,所以选取南京滨江小学的长江校本课程作为蓝本对其进行创作。确定完主题后开始收集长江流域周围动植物的资料进行图形设计、场景设计、界面设计以及交互设计。然后导入Unity工程文件制作图形用户界面以及编写交互功能脚本,最后导出动态加载素材进行应用功能试调,最终上传服务器完成APP发布。本文对此进行了详细的描述。

在儿童教育这个问题上,现在的父母亲对于儿童启蒙教育越来越重视。对于IPAD、手机等电子设备作为儿童早教工具的使用也越来越普遍。而把这些电子设备作为早教媒介的最离不开的是APP应用。

 

 

参考文献

 

[1]《用户体验要素:以用户为中心的产品设计》 [美] 加瑞特著.范晓燕译.北京机械工业出版社.2011.7

[2]《为IPAD而设计打造畅销APP》 [英]Chris Stevens著.陈勇/张晓雯译.人民邮电出版社.2013.9

[3]《设计师要懂心理学》[美] Susan Weinschenk著.徐佳/马迪/余盈亿译.人民邮电出版社.2013.5

[4]《史蒂夫·乔布斯传》[美] Walter Isaacson著. 中信出版社.2011.10(第一版)

[5]《简约至上:交互设计四策略》[英] Giles Colborne著. 李松峰/秦绪文译.人民邮电出版社.2011.1

[6]《交互设计沉思录》[美] Jon Kolko著。方舟译.人机械工业出版社华章公司.2012.10

[7] 启示录:打造用户喜爱的产品》Marty Cagan著.七印部落译.华中科技大学出版社.2011.5

[8]《界面设计中视觉信息的主导作用分析》[中] 徐丰.包装工程.2015.1.20

[9]《多设备时代的UI设计法则》[日]原田秀司著。付美平译. 中国青年出版社.2016.1

[10]《设计心理学3情感化设计》[美] 唐纳森·A·诺曼著.何笑梅/欧秋杏译. 中信出版社.2015.6

[11]《视觉锤》[美]劳拉·里斯著.王刚译. 机械工业出版社.2016.6

[12] 《写给大家看的设计书》[美] 罗宾·威廉姆斯著.苏金国/刘亮译. 人民邮电出版社.2009

 

UXPA中国会员登录

记住我

第三方登录

×

微信登录

×
请使用微信扫描二维码登录 “UXPA中国官网”

下雨的春天

已使用微信登录(更换账号)

×

会员密码找回

×