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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。