admin 管理员组文章数量: 1086019
2024年5月8日发(作者：matlab官网许可证)
技术应用
基于Hbuilder的古诗词鉴赏App的设计与实现
葛福鸿袁张丽萍
渊大同大学教育科学与技术学院袁山西大同037009冤
摘要：
随着移动网络技术的普及袁学习类App迅速崛起袁但诗词类App相对较少袁且功能简单遥
该课题基于Hbuilder的开发平台袁HTML5尧CSS3和JavaScript的开发语言袁设计开发了一款诗词鉴赏
类App遥针对中小学生增加了音频和视频功能袁可以吸引他们的注意力袁培养他们学习古诗词的兴趣袁
更能帮助他们理解古诗词遥该App功能较全面袁体验良好袁界面典雅美观袁中国风味道十足遥经测试袁
该应用可以激发学习者的学习兴趣袁对于提高学生的诗词素养起到积极作用遥
关键词：
Hbuilder曰诗词鉴赏
中图分类号：
G434
文献标志码：
A
文章编号院1673-8454渊2018冤18-0086-03
定义了用户需求和产品功能之后袁可以利用这款软件绘
制App或网站的线框图尧流程图尧低保真原型图遥这些图
是开发App的前期准备工作内容之一遥Axure作为专业
的原型设计工具袁能够快速高效地绘制低保真原型图袁
还支持团队合作设计和版本的更新迭代尧控制管理遥
Hbuilder是目前最快最方便的HTML开发工具之
2017年12月底袁中国手机网民规模达7.72亿遥智能手
机除了基本的通讯和娱乐功能外袁教育类App层出不
穷遥现在市场上已有的几款古诗词App袁水平也参差不
齐袁但是没有一款App有视频和音频功能袁小学生对这
方面有很大需求遥
中华古典诗词历史悠久袁博大精深袁底蕴厚重袁是文
学作品中的璀璨明珠袁以其独特的美感留存于世遥中国
古典诗词以其精湛的语言尧丰富的情感尧无穷的韵味和
深刻的内涵袁具有永恒的艺术魅力遥我国从小学就开始
学习古诗词袁陶冶高尚的情操袁提高学生综合素养遥针对
小学生的学习需求袁笔者设计开发了一款古诗词鉴赏
App袁提供优质的诗词内容尧注解译文和赏析袁加入音频尧
视频的资源入口袁提供评论交流的平台遥音频和视频不
仅帮助学生理解古诗词袁还可以吸引学生注意力袁培养
他们学习古诗词的兴趣遥该App整体风格采用典雅大方
的中国风设计袁提供了典雅的视觉盛宴袁实现了古诗词
的泛在学习袁有助于将中华古典文化的精髓发扬光大遥
一、关键技术
HTML5+CSS3尧JavaScript尧Axure尧PS尧Hbuilder遥
开发本款App需要的核心技术和平台支持袁有
HTML5+CSS3是用于静态布局的袁HTML5承载的
根据叶中国互联网络发展状况统计报告曳袁截至
一袁可以开发网站和App袁App打包也很快速遥它有强大
的代码助手袁其代码提醒功能很智能袁可以根据代码的
颜色判断正误袁大大降低了敲代码时的出错率遥
二、项目的功能分析
图1是该App的系统功能图袁共有六大模块院淤野壹
首冶板块有banner图尧今日荐诗尧为你读诗遥Banner图选
取古风唯美的图片袁为用户营造一种优美的学习环境遥
野今日荐诗冶每天推荐五六首诗词供用户欣赏袁野为你读
诗冶每天推荐一些优秀的音频供用户聆听学习遥于野诗
词冶板块是诗词的列表袁是随机顺序袁可一直下拉刷新遥
是内容袁CSS3承载的是样式遥HTML的绝大部分标签是
用来展示信息的袁而CSS是进行风格设计的袁JavaScript
是一种基于对象和事件驱动并具有相对安全性的客户
端脚本语言袁是用来添加动态功能的袁比如轮播图尧选项
卡尧弹框尧页面跳转等遥
AxureRP是一款快速专业的原型图设计工具遥在
图1系统功能图
86
中国教育信息化辕2018.18
盂野
方袁
与君语
是学习交流的地方
冶是评论展示的板块
袁有分享
袁
尧
是用户
评论尧喜欢等功能
野脑洞大开冶
袁
的地
使用
户更能互动学习
渊
遥榆个人中心主要包括我的下载尧心悦
关于我们
喜欢冤尧批悦
虞
按照朝代
搜索包括搜索框
尧意见反馈
渊评论冤尧我的粉丝尧我的关注袁次要信息有
尧作者尧类型
尧热门搜索和历史搜索
尧设置尧消息尧夜间模式尧登录注册遥
尧诗集尧教材进行分类的
遥愚野
遥朝代按从
分类冶是
古至今排序袁作者不是按照ABCD进行排序的袁而是按
照为后人所知程度即著名程度进行排序袁更有利于用户
检索遥类型有写景尧咏物尧春夏秋冬四季尧描写风花雪月
之类的遥教材分为小学尧初中袁均为课本上有的诗词遥教
材检索主要针对学生和家长遥
每一首诗点进去是诗词详情页袁主要内容有正文尧
注释尧译文尧赏析尧作者遥正文展示了诗的内容袁注释对一
些较难的字词进行了详细解释袁在译文中翻译了整篇古
诗袁赏析中包括权威人士对这首诗的评价分析袁有时也会
有关于本诗的争议或者精彩典故遥作者一栏介绍了作者
的简介尧生平或是一些后人传颂的有教育意义的事迹遥
诗词详情页中的部分诗词会有音频和视频袁尤其是
课本上的诗词袁配上音频有利于学生学习诵读技巧袁配
上视频有利于学生理解整首诗的意思袁体会诗的意境遥
针对低年级的小学生袁会不认识诗词中较难的字词袁音
频让他们学习诗词的发音袁潜移默化其诵读技巧袁视频
会吸引他们的注意力袁增强他们学习古诗的兴趣遥除此
之外袁这个页面中还有分享功能袁可通过QQ尧微信尧微博
等分享到朋友圈袁和志同道合的朋友交流学习遥
图2列出了用户使用App时的四个主要流程袁基
本涵盖了App的所有功能遥只有模拟出用户使用流程袁
才能在开发者和用户之间找到碰撞点袁才能使每个功能
在合理的页面袁每个功能点都引导用户进行下一步操
作遥学生在使用App的过程中要流畅袁点击什么都不会
觉得突兀袁这样App才是成功的遥
图2主流程图
三、界面设计和实现
这是一款针对中小学生的小众App遥整个App大量
留白袁给用户舒适的体验袁整体风格野大而简尧简而精冶袁
技术应用
让用户很方便地找到所需要的信息袁点击更方便袁给用
户易用尧好用的感觉遥
主色调采用的是深蓝色袁是古代书籍的一种颜色袁
为了营造一种理性的尧古色古香的学习氛围遥辅助色采
用的是朱砂红
App中作为点缀色
袁是古代文人墨客做批注的一种颜色
袁更符合这种氛围遥具体色值为院深蓝
袁在
色#233d69袁朱砂红#e93018遥
渊1冤logo
Logo用于启动图标和首页的标题
的设计
深蓝色袁是App的主色调袁中间文字是白色
渊如图
袁从视觉上更
3冤遥背景是
加突出袁有一种浮起来的感觉遥文字
是一种野宋体冶的变形遥变形过程中文
字中间加了野断口冶袁使文字更加透
气遥野诗冶字的末尾像古代的毛笔袁寓
意写诗袁有文学大家的意境遥野词冶字
的末尾像书签或旗帜袁书签寓意我们
图3logo设计
要多多看书袁旗帜寓意学习古诗袁传
承中华民族的文化袁是我们需要树立
的旗帜
渊2冤
遥
闪屏页如图
闪屏页面的设计
4所示袁背景用了
古代庭院和梅花的图片袁淡淡的袁营
造一种古色古香的感觉遥右边加入
了古代书籍装帧的效果遥上边是山
和月亮的图片袁给人一种悠远尧恢弘
大气的意境遥下边的文字野海量古诗
图4闪屏页设计
词鉴赏
App
线袁更有一种读诗
的概况介绍
袁囊括脍炙人口的经典以及中小学教材
遥
尧
运用了竖排的手法
荐诗尧听诗尧看诗的氛围
袁加入了一些小细
冶是对
遥闪屏页虽
然只是让用户欣赏三四秒的时间袁但是也会给用户留
下很深的印象袁一个好的闪屏是好的App的开端遥
渊1冤
首页有三大板块
首页的设计
院野壹首冶野诗词冶野与君语冶袁见图5遥
标题栏有搜索尧分类的功能袁还有一个侧滑到个人中心
的入口遥诗词类App的搜索和分类功能决定了用户能否
快速找到想要的古诗词袁减少用户焦虑感袁所以将这两
个功能放在首页标题栏遥从首页侧滑可进入个人中心袁
查看个人具体信息遥三大板块用的是分段选择控件袁也
就是选项卡进行展示的袁本来手机的横向空间有限袁选
项卡设计正是扩充了手机屏幕的横向空间遥
TheChineseJournalofICTinEducation
87
技术应用
图5首页低保真图和高保真图
香尧唯美大气的图片
野壹首冶板块的内容
袁营造一种赏心悦目的读诗环境
院Banner图袁在这里放入了古色古
遥图片
上加入一些文字排版袁使得banner图更加精美袁给用户视
觉上的享受遥Banner图下面加入了一个时间的设计袁阳历
阴历都有展示袁阴历两旁是个精美的图案袁灵感来源于古
代的野窗花冶袁用细线进行抽象化袁既美观又符合整体的统
一性遥时间下面是野今日荐诗冶袁二者相辅相成遥之后的一个
板块是野为你读诗冶袁
频
野
袁
野诗词冶板块院推荐的古诗随机排序
每天推荐一些音频供用户聆听学习
袁如果古诗有音
遥
列表式虽然不是现下最流行的布局方式
今日荐诗
后面会有一个小喇叭来提示用户
冶的延续袁利用列表式的布局结构进行排列
遥该板块可以说是
袁但是这种布局
袁
很经典
的交流学习
野与君语
袁所承载的信息是无穷
遥
冶
每一栏有头像
板块院是一些精彩评论的推荐
袁可以一直下拉刷新遥
尧用户名尧发表时间
袁促进用户
尧发表内
容和来自哪一首诗遥然后利用小图标的形式将分享尧回
复评论尧喜欢的功能放在右下角袁方便用户点击遥每一栏
的评论之间用小细线隔开袁同样是为了信息的明朗化袁
不会给用户造成困扰遥只有注重细节袁才能使整个App
赏心悦目
渊2冤
袁用户体验起来很舒适遥
首页侧滑或者点击左上角图标
个人中心和诵诗的页面设计
袁可进入图6中个人中
心界面袁页面主要内容有我的下载尧心悦尧批悦尧我的粉丝尧
关注袁运用了中英混排袁使得目录更加精致美观遥底部是四
个图标展示的功能袁设置尧夜间模式尧消息尧我的遥右上角有
两个次要功能野关于我们冶和野意见反馈冶袁字号缩小竖排遥背
图6诵诗
88
中国教育信息化辕2018.18
景加入了底纹野波浪冶袁有古风的感觉遥整体页面设计简洁尧
美观大方袁功能信息一目了然袁给用户良好的使用体验遥
点击诗词详情页的野诵冶按钮袁可进入图6野诵诗冶页
面袁这个页面的设计清新袁背景加入了亭台楼阁的水墨
画袁给人一种典雅安静的感觉遥点击中间的野话筒冶按钮袁
开始诵诗袁上面的古诗缓缓向上滑动袁中间的曲线流动
起来袁仿佛进入一个安静祥和尧风景如画的诵诗环境袁旨
在给用户美轮美奂的享受遥左边是返回按钮袁右边可进
入精彩音频的页面袁每一个页面保证功能完整遥
由于该App的页面较多袁在这里就不一一分析了遥
总的来说袁项目设计一直遵循功能至上尧体验优良尧界面
舒适美观的原则遥无论在人机交互还是操作逻辑上袁都
要以用户为中心袁界面设计注重细节袁打造一款适合中
小学生的古诗词鉴赏App遥
四、软件测试
上进行回馈测试
App软件测试是将已经确定好的功能需求在手机
遥测试的目的是验证功能需求是否满
足袁在测试过程中将不符合的功能点进行修改袁从而完
善功能需求遥测试人员要根据实际运行环境对软件进行
测试袁测试的方法有黑盒测试和白盒测试遥这两种测试
可以很全面地发现软件存在的问题
BUG
在设计
的调试袁
App
诗词鉴赏
遥通过两轮测试和对
的过程中
App
袁
可以正常使用
综合考虑中小学生特点
遥
尧用
户体验尧产品功能尧界面设计袁真正将界面设计和前端代
码融合在一起遥该App能很好地激发中小学生学习古诗
词的兴趣袁提高了学习的效率遥同时App中也有很多不
足之处袁技术方面还有些欠缺袁需要不断改进遥
参考文献：
[1]张奇伟.基于HTML5的移动应用的研究与开发
[D].北京:北京邮电大学,2013.
[2]武靖.主流智能移动终端平台界面设计分析[J].科
技视界,2014(36):139+210.
[3]严磊磊.科技信息服务中心综合管理系统的设计
与实现[D].厦门:厦门大学,2013.
[4]杨洁.嵌入式软件测试的实践与研究[D].上海:华
东师范大学,2009.
[5]卢丽容.刍议小学语文古诗词教学问题及其对策
[J].考试周刊,2015(3):40+8.
[6]丁楠.基于HTML5和CSS3的网易WAP站触屏
版移动产品研究[D].武汉:华中科技大学,2012.
[7]窦朝辉.CSSWeb设计高级教程[M].北京:清华大
学出版社,2009:13-68.
渊编辑院鲁利瑞冤
版权声明：本文标题：基于Hbuilder的古诗词鉴赏App的设计与实现 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1715140990a685950.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论