基于Hbuilder的古诗词鉴赏App的设计与实现

葛福鸿，张丽萍

（大同大学 教育科学与技术学院，山西 大同 037009）

根据 《中国互联网络发展状况统计报告》，截至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.系统功能图分析

图1 系统功能图

图1是该App的系统功能图，共有六大模块：①“壹首”板块有banner图、今日荐诗、为你读诗。Banner图选取古风唯美的图片，为用户营造一种优美的学习环境。“今日荐诗”每天推荐五六首诗词供用户欣赏，“为你读诗”每天推荐一些优秀的音频供用户聆听学习。②“诗词”板块是诗词的列表，是随机顺序，可一直下拉刷新。③“与君语”是评论展示的板块，是用户“脑洞大开”的地方，是学习交流的地方，有分享、评论、喜欢等功能，使用户更能互动学习。④个人中心主要包括我的下载、心悦（喜欢）、批悦（评论）、我的粉丝、我的关注，次要信息有关于我们、意见反馈、设置、消息、夜间模式、登录注册。⑤搜索包括搜索框、热门搜索和历史搜索。⑥“分类”是按照朝代、作者、类型、诗集、教材进行分类的。朝代按从古至今排序，作者不是按照ABCD进行排序的，而是按照为后人所知程度即著名程度进行排序，更有利于用户检索。类型有写景、咏物、春夏秋冬四季、描写风花雪月之类的。教材分为小学、初中，均为课本上有的诗词。教材检索主要针对学生和家长。

每一首诗点进去是诗词详情页，主要内容有正文、注释、译文、赏析、作者。正文展示了诗的内容，注释对一些较难的字词进行了详细解释，在译文中翻译了整篇古诗，赏析中包括权威人士对这首诗的评价分析，有时也会有关于本诗的争议或者精彩典故。作者一栏介绍了作者的简介、生平或是一些后人传颂的有教育意义的事迹。

诗词详情页中的部分诗词会有音频和视频，尤其是课本上的诗词，配上音频有利于学生学习诵读技巧，配上视频有利于学生理解整首诗的意思，体会诗的意境。针对低年级的小学生，会不认识诗词中较难的字词，音频让他们学习诗词的发音，潜移默化其诵读技巧，视频会吸引他们的注意力，增强他们学习古诗的兴趣。除此之外，这个页面中还有分享功能，可通过QQ、微信、微博等分享到朋友圈，和志同道合的朋友交流学习。

2.主流程图分析

图2列出了用户使用App时的四个主要流程，基本涵盖了App的所有功能。只有模拟出用户使用流程，才能在开发者和用户之间找到碰撞点，才能使每个功能在合理的页面，每个功能点都引导用户进行下一步操作。学生在使用App的过程中要流畅，点击什么都不会觉得突兀，这样App才是成功的。

图2 主流程图

三、界面设计和实现

1.总体设计风格

这是一款针对中小学生的小众App。整个App大量留白，给用户舒适的体验，整体风格“大而简、简而精”，让用户很方便地找到所需要的信息，点击更方便，给用户易用、好用的感觉。

2.标准色定义

主色调采用的是深蓝色，是古代书籍的一种颜色，为了营造一种理性的、古色古香的学习氛围。辅助色采用的是朱砂红，是古代文人墨客做批注的一种颜色，在App中作为点缀色，更符合这种氛围。具体色值为：深蓝色#233d69，朱砂红#e93018。

3.logo与闪屏页的设计

（1）logo的设计

Logo用于启动图标和首页的标题（如图3）。背景是深蓝色，是App的主色调，中间文字是白色，从视觉上更加突出，有一种浮起来的感觉。文字是一种“宋体”的变形。变形过程中文字中间加了 “断口”，使文字更加透气。“诗”字的末尾像古代的毛笔，寓意写诗，有文学大家的意境。“词”字的末尾像书签或旗帜，书签寓意我们要多多看书，旗帜寓意学习古诗，传承中华民族的文化，是我们需要树立的旗帜。

（2）闪屏页面的设计

闪屏页如图4所示，背景用了古代庭院和梅花的图片，淡淡的，营造一种古色古香的感觉。右边加入了古代书籍装帧的效果。上边是山和月亮的图片，给人一种悠远、恢弘大气的意境。下边的文字“海量古诗词鉴赏，囊括脍炙人口的经典以及中小学教材”是对App的概况介绍。运用了竖排的手法，加入了一些小细线，更有一种读诗、荐诗、听诗、看诗的氛围。闪屏页虽然只是让用户欣赏三四秒的时间，但是也会给用户留下很深的印象，一个好的闪屏是好的App的开端。

图3 logo设计

图4 闪屏页设计

4.主要页面的设计

（1）首页的设计

首页有三大板块：“壹首”“诗词”“与君语”，见图5。标题栏有搜索、分类的功能，还有一个侧滑到个人中心的入口。诗词类App的搜索和分类功能决定了用户能否快速找到想要的古诗词，减少用户焦虑感，所以将这两个功能放在首页标题栏。从首页侧滑可进入个人中心，查看个人具体信息。三大板块用的是分段选择控件，也就是选项卡进行展示的，本来手机的横向空间有限，选项卡设计正是扩充了手机屏幕的横向空间。

图5 首页低保真图和高保真图

“壹首”板块的内容：Banner图，在这里放入了古色古香、唯美大气的图片，营造一种赏心悦目的读诗环境。图片上加入一些文字排版，使得banner图更加精美，给用户视觉上的享受。Banner图下面加入了一个时间的设计，阳历阴历都有展示，阴历两旁是个精美的图案，灵感来源于古代的“窗花”，用细线进行抽象化，既美观又符合整体的统一性。时间下面是“今日荐诗”，二者相辅相成。之后的一个板块是“为你读诗”，每天推荐一些音频供用户聆听学习。

“诗词”板块：推荐的古诗随机排序，如果古诗有音频，后面会有一个小喇叭来提示用户。该板块可以说是“今日荐诗”的延续，利用列表式的布局结构进行排列，列表式虽然不是现下最流行的布局方式，但是这种布局很经典，所承载的信息是无穷，可以一直下拉刷新。

“与君语”板块：是一些精彩评论的推荐，促进用户的交流学习。每一栏有头像、用户名、发表时间、发表内容和来自哪一首诗。然后利用小图标的形式将分享、回复评论、喜欢的功能放在右下角，方便用户点击。每一栏的评论之间用小细线隔开，同样是为了信息的明朗化，不会给用户造成困扰。只有注重细节，才能使整个App赏心悦目，用户体验起来很舒适。

（2）个人中心和诵诗的页面设计

首页侧滑或者点击左上角图标，可进入图6中个人中心界面，页面主要内容有我的下载、心悦、批悦、我的粉丝、关注，运用了中英混排，使得目录更加精致美观。底部是四个图标展示的功能，设置、夜间模式、消息、我的。右上角有两个次要功能“关于我们”和“意见反馈”，字号缩小竖排。背景加入了底纹“波浪”，有古风的感觉。整体页面设计简洁、美观大方，功能信息一目了然，给用户良好的使用体验。

点击诗词详情页的“诵”按钮，可进入图6“诵诗”页面，这个页面的设计清新，背景加入了亭台楼阁的水墨画，给人一种典雅安静的感觉。点击中间的“话筒”按钮，开始诵诗，上面的古诗缓缓向上滑动，中间的曲线流动起来，仿佛进入一个安静祥和、风景如画的诵诗环境，旨在给用户美轮美奂的享受。左边是返回按钮，右边可进入精彩音频的页面，每一个页面保证功能完整。

由于该App的页面较多，在这里就不一一分析了。总的来说，项目设计一直遵循功能至上、体验优良、界面舒适美观的原则。无论在人机交互还是操作逻辑上，都要以用户为中心，界面设计注重细节，打造一款适合中小学生的古诗词鉴赏App。

图6 诵诗

四、软件测试

App软件测试是将已经确定好的功能需求在手机上进行回馈测试。测试的目的是验证功能需求是否满足，在测试过程中将不符合的功能点进行修改，从而完善功能需求。测试人员要根据实际运行环境对软件进行测试，测试的方法有黑盒测试和白盒测试。这两种测试可以很全面地发现软件存在的问题。通过两轮测试和对BUG的调试，诗词鉴赏App可以正常使用。

在设计App的过程中，综合考虑中小学生特点、用户体验、产品功能、界面设计，真正将界面设计和前端代码融合在一起。该App能很好地激发中小学生学习古诗词的兴趣，提高了学习的效率。同时App中也有很多不足之处，技术方面还有些欠缺，需要不断改进。