幼儿早教APP的设计与开发毕业作品.docx

1、幼儿早教APP的设计与开发毕业作品BIYESHEJI幼儿早教APP的设计与开发学院专业教育技术学姓名学号摘 要：随着移动教育app的普及，幼儿教育app也是家长教育幼儿的主要手段之一。本文以苹果app幼儿早教的设计与开发为例，分析研究了幼儿教育app开发的可行性以及开发过程。本文分析了该苹果app的系统结构，同时阐述了该苹果app的设计理念，最后对该app中的功能模块设计以及核心技术的实现进行了相应的说明。关键字：移动；幼儿教育；苹果appAbstract:With the popularity of mobile education app, early childhood educatio

2、n app is also one of the main means of parents education children. In this paper, the app design and development of the childrens early education as an example, analyzed the feasibility of early childhood education app and development process. This article analyzes the system structure of the app, a

3、nd expounds the design concept of the apple app, finally the app in the function module design and the realization of the core technology of the corresponding instructions.KeyWords: move;early childhood education;iphone app目 次1 引 言 .1 2 幼儿早教app的功能分析. 2 3 幼儿早教app的设计 . 33.1 幼儿早教app的概要. 33.2 幼儿早教app的设计

4、理念. 33.3 幼儿早教app的系统结构设计. 44 幼儿早教app的实现. 54.1 幼儿早教app的UI设计. 54.2 幼儿早教app的关键技术及解决方法. 64.2.1 关键问题. 64.2.2 进入声音开启与退出声音关闭. 64.2.3 设置大象动画. 64.2.4 西瓜的消失. 74.2.5 脑筋急转弯电子书翻页动画的实现. 84.2.6 宝宝资讯的网页跳转. 95 总结 . 9参考文献 . 10 致 谢 .11 1 引言 根据Statistic Brain发布的2013年关于手机应用的统计数据，教育类app市场份额排名第四。让人不得不把目光驻足在教育类app上。应用商店里的ap

5、p多达数十万种，总的来说，教育类app的功能和内容不再局限于实体教育中的灌输式的知识和技术，更多的是体现轻便性和娱乐性。按照用户特征，教育类app可分为幼教类（eg：识字小游戏）、学生类（eg：课程格子）、通用类（eg：有道词典）等。以儿童市场为例。一款优秀的带教育性质的app总是带有多种功能或受多类人群喜欢。特别是儿童类app，不仅要让孩子喜欢，更要能让父母买单。随着智能手机和平板电脑的普及，各种适合孩子使用的工具设备兴起，家长和学生的教育观念也在慢慢转变：孩子学习的课堂不再局限于学校，而且任何时间都可以学习，关键是，学习也可以是快乐有趣的。甚至，不少教育企业针对学龄前儿童推出“轻教育”的概

6、念。他们向学龄前儿童推出主打“趣味”、“轻松”概念的教育类应用产品，受到不少家长热评。移动互联网时代教育类给孩子们带来的不仅只是简单的随时可用，而是教育方式的改变，通过多媒体的充分利用和交互方式的创意开拓。这种教育方式的变化，多样化交互进行学龄前儿童教育会成为未来发展的必然趋势。但是如今的移动应用开发产业让人眼花缭乱，移动操作平台有：iOS(iPhoneOS)、Android、Nokia Symbian、BlackBerry、Java ME、Windows Phone、Flash/FlashLite、mobileweb(WAP/XHTML/CSS/Javascript)。其中以Android和

7、iOS移动应用开发为主要平台。Android以其开放性，多任务，大功能，画面流畅，硬件设备优良多样等各种优点，占智能机一大部分；然而它也存在着很明显的不足，如：兼容性差，各种机型的配置不一样，以至于开发的时候出现各种版本。有些产品华而不实，用户体验差。iOS基于Object_C开发，同时OC的底层又是C，所以运行快，流畅，软件数量多并且质量也都很好，系统功能很完善。同时iPhone在中国极受欢迎。中国的各大移动运营商都积极地与苹果公司合作，各自推出适合中国人使用的手机套餐和应用，比如中国联通，中国电信等等，社会各界也对iPhone有很好的评价。因此做一款iOS的幼儿早教APP是很有前景的。 本

8、文的幼儿早教APP主要针对3-6岁儿童开发，帮助幼儿有效、轻便的学习并掌握知识。同时孩子的学习成果将作为第一手资料反馈给家长，帮助家长有效的观察和了解孩子的学习情况。2 幼儿早教app的功能分析 幼儿早教这款苹果app的用户群体是家长和儿童。首先，现在的儿童都喜欢听爸爸妈妈讲故事，听儿童歌曲，这是本项目必须实现的两个功能模块，在首页面上面会有“听我讲故事”，“音乐”两个图标。 “听我讲故事”这个模块主要就是将不同的儿童故事以书架的形式展现在儿童面前，当用户点击不同的故事图片，就会相应的进入不同故事的详情页面，此处的故事详情页面是比较简单明了的。详情页面只需要呈现一张对应故事的背景图片。图片上面

9、有相应的故事名称。控制故事播放与暂定的制作比较简单，只需要在进入详情的瞬间播放故事，在退出详情的瞬间结束故事。 “音乐”模块的主页面，需要音乐列表以表格的形式呈现在用户面前，每个表格的表现形式为左边为音乐图标，右边为音乐名称。点击对应的表格会进入相应的音乐播放详情列表，因为播放的详情列表的播放与暂定的要求同“听我讲故事”这个模块的播放与暂定的逻辑一样。“音乐”这个模块的详情页面的UI呈现很简单，主要分两个模块，上面为一张音乐图标，所有的儿童音乐都是一样的音乐图标，下面为因为播放的进度条，通过此进度条，可以随意调整首音乐的进度。 最基本的讲故事和听音乐的功能实现之后，需要实现的最核心的功能模块“

10、快乐学习”。此模块包括两个学习功能，一个是“摘西瓜”，一个是“跟我学习英语字母”。（这是两款学习类的小游戏）从“快乐学习”这个模块点击摘西瓜这个表格之后进入“摘西瓜”的游戏界面。“摘西瓜”这个小游戏需要实现的功能是游戏开始后，西瓜田地里面会有10个西瓜，下面会出现一个卡通人物大象，它的旁边会有一个篮子，大象会提示小朋友摘几个西瓜到篮子里面，此时小朋友可以通过手指拖拽将西瓜放入篮子中，如果小朋友觉得数量已经够了，就可以点击大象下面的完成按钮，即可知道游戏结果。如果小朋友摘的西瓜数与大象需要的的西瓜数量相同，即为游戏胜利，此时需要大象给予表扬的声音，如果游戏失败，需要鼓励小朋友再来一次，胜利与失败

11、页面都得出现相应的提示。第二个学习游戏“跟我学习英语字母”功能简单，只需在进入此游戏界面时，让26个字母从天上缓慢落下，同时伴有26个英文字母的歌曲。最后当字母都落地后，小朋友用手指点击不同的字母，会对应的出现字母的读音。实现此功能比较的简单。（同时由于这两个学习类型的小游戏都是全屏展示，故进入页面时候需要提醒用户如何返回） 最后一个为“更多”模块，此模块同样以表格的形式展现在用户面前，表格里面有3行，第一行为“脑筋急转弯”模块，这一模块主要是将脑筋急转弯以电子书的形式呈现在用户面前，此电子书需要实现上下翻页的效果。第二行“宝宝咨询”模块，此处只需要点击跳转到宝宝咨询这个网页即可。第三行为“更

12、多”模块，详情页面为此应用的开发背景说明。 3幼儿早教app的设计3.1 幼儿早教app的概要(1) 项目名称：幼儿早教(2) 适用对象： 3到6岁儿童(3) 开发工具： Xcode6.2(4) 运行平台： Mac OS3.2 幼儿早教app的设计理念（1）确定用户对象是写给小孩玩的游戏，还是用来理财的记账类应用，每个应用都有固定的适用人群，而这决定你应用的内容是什么，也决定了要给使用者以什么样的用户体验。（2）明确应用功能一个app有明确的使用目的是必须的。如何来明确？一个办法就是要去想清楚什么能吸引用户来使用你的app。（3）设计用户界面有了明确的理念和构想，下面就是该设计用户界面了，用户

13、界面是app使用者与你的app交互的地方，应该遵循简洁美观，便捷的原则，从app使用者的角度出发，带给用户良好的使用体验。（4）定义交互方式用户界面因为有了交互才变得有活起来。在app开发中，交互的启用都是通过用户操作的事件来触发的，比如手指的点击，滑动，捏合等操作。通过定义这些事件，我们可以精确地对用户的操作来给出响应，或者打开新的界面，或者提供展现的内容在当前界面上。（5）部署用户行为定义好交互方式后，接下来就要通过代码来实现这些定义好的行为了。可以说用户的所有操作都是通过我们实现的定义来得到响应的，如果没有前面明确的定义，那么会给用户带来困扰，这是一个好的app所不能出现的错误。（6）教

14、育与技术相结合 在设计的过程中，不能专注于app技术的实现而忽视了幼儿教育的内容，同时也不能只为了表达教育幼儿的内容而无法发挥app的在幼儿教育领域无法比拟的作用 以上的设计理念在幼儿早教app项目中均有体现，贯穿于整个app的设计与开发之中，有助于实现一个优秀的幼儿早教类的app。3.3 幼儿早教app的系统结构设计 根据本项目的功能分析以及上面的设计理念，我对幼儿早教app的系统结构进行了如下设计： 4 幼儿早教app的实现4.1 幼儿早教app的UI设计 一款优秀的app取决于两点：一是漂亮的UI界面，二是优秀的用户体验感。因此在实现项目代码之前，我通过网络收集了各种各样儿童特别喜欢的卡

15、通图片，儿童故事，音乐。然后通过PS将图片组合在一起，最后画出了整个项目所有的UI界面，下面将一一展示： （听我讲故事） （讲故事详情） （音乐界面） （音乐详情界面） （快乐学习） （摘西瓜） （摘西瓜结果页面） （跟我学英语字母） （更多界面） （脑筋急转弯） （宝宝资讯） （关于页面）4.2 幼儿早教app的关键技术及解决方法4.2.1 关键问题 开始编写项目代码的时候，需要解决下面的几个关键问题：如何实现进入开启声音，退出关闭声音；如何给大象设置动画；如何实现西瓜一碰到篮子，西瓜立刻消失；如何实现脑筋急转弯电子书翻页的动画，如何实现宝宝资讯的网页跳转等问题。4.2.2 进入声音开启与退

16、出声音关闭 讲故事与听音乐的功能需求是一进入详情页面即开始播放声音，一旦退出就结束声音的播放，代码实现如下：进入详情后，声音开始播放： NSString* path=NSBundle mainBundlepathForResource:NSString stringWithFormat:%d,self.newtag ofType:mp3;/根据self.newtag获取到相应的声音文件的本地路径 NSURL* url=NSURL fileURLWithPath:path;/将本地声音文件的路径转换为链接 _audioPlayer=AVAudioPlayer allocinitWithConte

17、ntsOfURL:url error:nil;/创建音乐播放对象_audioPlayer play;/开始播放控制声音播放停止_audioPlayer stop;/声音停止4.2.3 设置大象动画为了增加儿童对摘西瓜学习游戏的兴趣，游戏场景中，大象是上下点头的，代码实现如下： UIImage *elephent1 = UIImage imageNamed:elephent1.png;/大象抬头图片 UIImage *elephent2 = UIImage imageNamed:elephent2.png;/大象低头图片 NSArray *elephentArray = NSArray allo

18、c initWithObjects: elephent1, elephent2, nil autorelease;/将这两张图片放入一个数组里面 m_elephentImageView.animationImages = elephentArray;/将图片控件的动画图片设置为这个图片数组 m_elephentImageView.animationDuration = 1.0;/设置动画时间 m_elephentImageView startAnimating;/动画开始4.2.4 西瓜的消失 儿童将西瓜拖拽入篮子中，西瓜就从界面上面消失了，代码实现如下： /利用手势拖拽西瓜- (void)t

19、ouchesMoved: (NSSet *) touches withEvent: (UIEvent *) event UITouch *touch = touches anyObject;/获取触摸对象 if (m_pickImageView != nil) m_pickImageView.center = touch locationInView: m_pickImageView superview; / 拿到m_pickImageView在其父view中的touch点rect if (CGRectContainsRect(m_bascketView.frame, m_pickImageV

20、iew.frame ) | CGRectContainsPoint(m_bascketView.frame, m_pickImageView.center) /判断是否西瓜的rect与篮子的rect有交集 m_bascket_glow.hidden = YES;/有交集隐藏西瓜 else m_bascket_glow.hidden = NO;/无交集显示西瓜 如果西瓜没有法如篮子中，它将会返回至原地，代码实现如下：/手势拖拽结束- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event m_parentScrollView.

21、scrollEnabled = YES;/ScrollView的滚动属性设置为YE m_parentScrollView.delaysContentTouches = NO;/ScrollView的延迟触摸设置为NO UITouch *touch = touches anyObject;/获取触摸对象 if (m_pickImageView != nil) / 拖拽的西瓜碰到篮子了 if (CGRectContainsPoint(m_bascketView.frame, m_pickImageView.center) m_putSound play;/播放相应的声音 self addCurre

22、ntCount;/计算西瓜总数 m_bascket_glow.hidden = YES; /隐藏西瓜 else m_pickImageView.center = m_fruitPosition; / 如果没有碰到，返回 m_pickImageView = nil;/将图片控件置为nil 4.2.5 脑筋急转弯电子书翻页动画的实现 -(void)uppage/向上翻页 if(self.textview.contentOffset.y-400=0)/判断当前的textView的Y轴值是否大于400，若大于执行下面的代码 UIView beginAnimations:nil context:nil;

23、/将UIView里面其他的动画都置为空 UIView setAnimationDuration:0.7;/设置动画时间 UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES;/设置动画的方向以及所在视图 self.textview.contentOffset = CGPointMake(0, self.textview.contentOffset.y-400);/将textview的Y轴的值置为0 UIView commitAnimations;/动画开始 -(vo

24、id)downpage/向下翻页 UIView beginAnimations:nil context:nil; /将UIView里面其他的动画都置为空 UIView setAnimationDuration:0.7 ;/设置动画时间 UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES; /设置动画的方向以及所在视图 self.textview.contentOffset = CGPointMake(0, self.textview.contentOffset.y+4

25、00); /将textview的Y轴的值置为当前值+400 UIView commitAnimations; /动画开始4.2.6 宝宝资讯的网页网页的跳转通过下面代码实现：UIApplication sharedApplication openURL:NSURL URLWithString:;/根据url，然后应用程序跳转至相应的网页。 5 总结: 本文从苹果手机app和幼儿教育的角度出发，将移动app的优势与幼儿教育的特点相结合，开发出本款移动教育类的幼儿教育app，帮助幼儿有效、轻便的学习并掌握知识。同时孩子的学习成果将作为第一手资料反馈给家长，帮助家长有效的观察和了解孩子的学习情况。具

26、有一定的现实意义。参考文献: 1 严蔚敏，吴伟民 .数据结构（C语言）M.北京：清华大学出版社，2012:1-335。2 Shawn Welch. iOS 5核心框架（鲁成东）M.北京：人民邮电出版社，2012：1-100。3 Carlo Chung. iOS设计模式解析（刘威）M.北京：人民邮电出版社，2011：1-100。4 张亦航.iOS开发系列之C/Objective-C语言基础，北京人民出版社，2011年，94-99。5 刘璇.iOS开发系列值iOS开发指南第五版，北京人民出版社，2011年，34-42。6 陈汶滨 朱小梅 任冬梅 著 软件测试技术术基础 北京：清华大学出版社，200

27、8。7(美国)萨丹 著(美国)张彩霞 译 iPhone开发秘籍（第2版） 人民邮电出版社 2010。8(美国)Dava Mark (美国)Jeff LaMarche 著 译 漆振 解巧云 译iPhone开发基础教程2009-1-1。9周华杰.教育游戏的理论基础及应用模式D.上海:上海师范大学,2006。10罗亮. 寓教于乐_教育游戏研究综述J. 美与时代(下半月), 2008, (10): 130-132。11恽如伟.教育游戏概述 EB/OL.12皮亚杰.儿童心理学M.关福元译.商务印书馆,1993:110。13李建生，乔小艺，李艺 .教育中心流体验与学习成效的关系. 南京师范大学教育科学学院教育游戏研究中心，2012。致谢首先得感谢我的导师吴姜导师，他对我的帮助不仅仅是细心指导我论文的完成，他对我大学四年的指导