基于Hbuilder的古詩詞鑒賞App的設(shè)計(jì)與實(shí)現(xiàn)

葛福鴻 張麗萍

摘 要：隨著移動(dòng)網(wǎng)絡(luò)技術(shù)的普及，學(xué)習(xí)類App迅速崛起，但詩詞類App相對較少，且功能簡單。該課題基于Hbuilder的開發(fā)平臺(tái)，HTML5、CSS3和JavaScript的開發(fā)語言，設(shè)計(jì)開發(fā)了一款詩詞鑒賞類App。針對中小學(xué)生增加了音頻和視頻功能，可以吸引他們的注意力，培養(yǎng)他們學(xué)習(xí)古詩詞的興趣，更能幫助他們理解古詩詞。該App功能較全面，體驗(yàn)良好，界面典雅美觀，中國風(fēng)味道十足。經(jīng)測試，該應(yīng)用可以激發(fā)學(xué)習(xí)者的學(xué)習(xí)興趣，對于提高學(xué)生的詩詞素養(yǎng)起到積極作用。

關(guān)鍵詞：Hbuilder；詩詞鑒賞

中圖分類號(hào)：G434 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1673-8454（2018）18-0086-03

根據(jù)《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》，截至2017年12月底，中國手機(jī)網(wǎng)民規(guī)模達(dá)7.72億。智能手機(jī)除了基本的通訊和娛樂功能外，教育類App層出不窮?，F(xiàn)在市場上已有的幾款古詩詞App，水平也參差不齊，但是沒有一款A(yù)pp有視頻和音頻功能，小學(xué)生對這方面有很大需求。

中華古典詩詞歷史悠久，博大精深，底蘊(yùn)厚重，是文學(xué)作品中的璀璨明珠，以其獨(dú)特的美感留存于世。中國古典詩詞以其精湛的語言、豐富的情感、無窮的韻味和深刻的內(nèi)涵，具有永恒的藝術(shù)魅力。我國從小學(xué)就開始學(xué)習(xí)古詩詞，陶冶高尚的情操，提高學(xué)生綜合素養(yǎng)。針對小學(xué)生的學(xué)習(xí)需求，筆者設(shè)計(jì)開發(fā)了一款古詩詞鑒賞App，提供優(yōu)質(zhì)的詩詞內(nèi)容、注解譯文和賞析，加入音頻、視頻的資源入口，提供評論交流的平臺(tái)。音頻和視頻不僅幫助學(xué)生理解古詩詞，還可以吸引學(xué)生注意力，培養(yǎng)他們學(xué)習(xí)古詩詞的興趣。該App整體風(fēng)格采用典雅大方的中國風(fēng)設(shè)計(jì)，提供了典雅的視覺盛宴，實(shí)現(xiàn)了古詩詞的泛在學(xué)習(xí)，有助于將中華古典文化的精髓發(fā)揚(yáng)光大。

一、關(guān)鍵技術(shù)

開發(fā)本款A(yù)pp需要的核心技術(shù)和平臺(tái)支持，有HTML5+CSS3、JavaScript、Axure、PS、Hbuilder。

HTML5+CSS3是用于靜態(tài)布局的，HTML5承載的是內(nèi)容，CSS3承載的是樣式。HTML的絕大部分標(biāo)簽是用來展示信息的，而CSS是進(jìn)行風(fēng)格設(shè)計(jì)的，JavaScript是一種基于對象和事件驅(qū)動(dòng)并具有相對安全性的客戶端腳本語言，是用來添加動(dòng)態(tài)功能的，比如輪播圖、選項(xiàng)卡、彈框、頁面跳轉(zhuǎn)等。

Axure RP是一款快速專業(yè)的原型圖設(shè)計(jì)工具。在定義了用戶需求和產(chǎn)品功能之后，可以利用這款軟件繪制App或網(wǎng)站的線框圖、流程圖、低保真原型圖。這些圖是開發(fā)App的前期準(zhǔn)備工作內(nèi)容之一。Axure作為專業(yè)的原型設(shè)計(jì)工具，能夠快速高效地繪制低保真原型圖，還支持團(tuán)隊(duì)合作設(shè)計(jì)和版本的更新迭代、控制管理。

Hbuilder是目前最快最方便的HTML開發(fā)工具之一，可以開發(fā)網(wǎng)站和App，App打包也很快速。它有強(qiáng)大的代碼助手，其代碼提醒功能很智能，可以根據(jù)代碼的顏色判斷正誤，大大降低了敲代碼時(shí)的出錯(cuò)率。

二、項(xiàng)目的功能分析

1.系統(tǒng)功能圖分析

圖1是該App的系統(tǒng)功能圖，共有六大模塊：①“壹首”板塊有banner圖、今日薦詩、為你讀詩。Banner圖選取古風(fēng)唯美的圖片，為用戶營造一種優(yōu)美的學(xué)習(xí)環(huán)境。“今日薦詩”每天推薦五六首詩詞供用戶欣賞，“為你讀詩”每天推薦一些優(yōu)秀的音頻供用戶聆聽學(xué)習(xí)。②“詩詞”板塊是詩詞的列表，是隨機(jī)順序，可一直下拉刷新。③“與君語”是評論展示的板塊，是用戶“腦洞大開”的地方，是學(xué)習(xí)交流的地方，有分享、評論、喜歡等功能，使用戶更能互動(dòng)學(xué)習(xí)。④個(gè)人中心主要包括我的下載、心悅（喜歡）、批悅（評論）、我的粉絲、我的關(guān)注，次要信息有關(guān)于我們、意見反饋、設(shè)置、消息、夜間模式、登錄注冊。⑤搜索包括搜索框、熱門搜索和歷史搜索。⑥“分類”是按照朝代、作者、類型、詩集、教材進(jìn)行分類的。朝代按從古至今排序，作者不是按照ABCD進(jìn)行排序的，而是按照為后人所知程度即著名程度進(jìn)行排序，更有利于用戶檢索。類型有寫景、詠物、春夏秋冬四季、描寫風(fēng)花雪月之類的。教材分為小學(xué)、初中，均為課本上有的詩詞。教材檢索主要針對學(xué)生和家長。

每一首詩點(diǎn)進(jìn)去是詩詞詳情頁，主要內(nèi)容有正文、注釋、譯文、賞析、作者。正文展示了詩的內(nèi)容，注釋對一些較難的字詞進(jìn)行了詳細(xì)解釋，在譯文中翻譯了整篇古詩，賞析中包括權(quán)威人士對這首詩的評價(jià)分析，有時(shí)也會(huì)有關(guān)于本詩的爭議或者精彩典故。作者一欄介紹了作者的簡介、生平或是一些后人傳頌的有教育意義的事跡。

詩詞詳情頁中的部分詩詞會(huì)有音頻和視頻，尤其是課本上的詩詞，配上音頻有利于學(xué)生學(xué)習(xí)誦讀技巧，配上視頻有利于學(xué)生理解整首詩的意思，體會(huì)詩的意境。針對低年級(jí)的小學(xué)生，會(huì)不認(rèn)識(shí)詩詞中較難的字詞，音頻讓他們學(xué)習(xí)詩詞的發(fā)音，潛移默化其誦讀技巧，視頻會(huì)吸引他們的注意力，增強(qiáng)他們學(xué)習(xí)古詩的興趣。除此之外，這個(gè)頁面中還有分享功能，可通過QQ、微信、微博等分享到朋友圈，和志同道合的朋友交流學(xué)習(xí)。

2.主流程圖分析

圖2列出了用戶使用App時(shí)的四個(gè)主要流程，基本涵蓋了App的所有功能。只有模擬出用戶使用流程，才能在開發(fā)者和用戶之間找到碰撞點(diǎn)，才能使每個(gè)功能在合理的頁面，每個(gè)功能點(diǎn)都引導(dǎo)用戶進(jìn)行下一步操作。學(xué)生在使用App的過程中要流暢，點(diǎn)擊什么都不會(huì)覺得突兀，這樣App才是成功的。

三、界面設(shè)計(jì)和實(shí)現(xiàn)

1.總體設(shè)計(jì)風(fēng)格

這是一款針對中小學(xué)生的小眾App。整個(gè)App大量留白，給用戶舒適的體驗(yàn)，整體風(fēng)格“大而簡、簡而精”，讓用戶很方便地找到所需要的信息，點(diǎn)擊更方便，給用戶易用、好用的感覺。

2.標(biāo)準(zhǔn)色定義

主色調(diào)采用的是深藍(lán)色，是古代書籍的一種顏色，為了營造一種理性的、古色古香的學(xué)習(xí)氛圍。輔助色采用的是朱砂紅，是古代文人墨客做批注的一種顏色，在App中作為點(diǎn)綴色，更符合這種氛圍。具體色值為：深藍(lán)色#233d69，朱砂紅#e93018。

3.logo與閃屏頁的設(shè)計(jì)

（1）logo的設(shè)計(jì)

Logo用于啟動(dòng)圖標(biāo)和首頁的標(biāo)題（如圖3）。背景是深藍(lán)色，是App的主色調(diào)，中間文字是白色，從視覺上更加突出，有一種浮起來的感覺。文字是一種“宋體”的變形。變形過程中文字中間加了“斷口”，使文字更加透氣?！霸姟弊值哪┪蚕窆糯拿P，寓意寫詩，有文學(xué)大家的意境?！霸~”字的末尾像書簽或旗幟，書簽寓意我們要多多看書，旗幟寓意學(xué)習(xí)古詩，傳承中華民族的文化，是我們需要樹立的旗幟。

（2）閃屏頁面的設(shè)計(jì)

閃屏頁如圖4所示，背景用了古代庭院和梅花的圖片，淡淡的，營造一種古色古香的感覺。右邊加入了古代書籍裝幀的效果。上邊是山和月亮的圖片，給人一種悠遠(yuǎn)、恢弘大氣的意境。下邊的文字“海量古詩詞鑒賞，囊括膾炙人口的經(jīng)典以及中小學(xué)教材”是對App的概況介紹。運(yùn)用了豎排的手法，加入了一些小細(xì)線，更有一種讀詩、薦詩、聽詩、看詩的氛圍。閃屏頁雖然只是讓用戶欣賞三四秒的時(shí)間，但是也會(huì)給用戶留下很深的印象，一個(gè)好的閃屏是好的App的開端。

4.主要頁面的設(shè)計(jì)

（1）首頁的設(shè)計(jì)

首頁有三大板塊：“壹首”“詩詞”“與君語”，見圖5。標(biāo)題欄有搜索、分類的功能，還有一個(gè)側(cè)滑到個(gè)人中心的入口。詩詞類App的搜索和分類功能決定了用戶能否快速找到想要的古詩詞，減少用戶焦慮感，所以將這兩個(gè)功能放在首頁標(biāo)題欄。從首頁側(cè)滑可進(jìn)入個(gè)人中心，查看個(gè)人具體信息。三大板塊用的是分段選擇控件，也就是選項(xiàng)卡進(jìn)行展示的，本來手機(jī)的橫向空間有限，選項(xiàng)卡設(shè)計(jì)正是擴(kuò)充了手機(jī)屏幕的橫向空間。

“壹首”板塊的內(nèi)容：Banner圖，在這里放入了古色古香、唯美大氣的圖片，營造一種賞心悅目的讀詩環(huán)境。圖片上加入一些文字排版，使得banner圖更加精美，給用戶視覺上的享受。Banner圖下面加入了一個(gè)時(shí)間的設(shè)計(jì)，陽歷陰歷都有展示，陰歷兩旁是個(gè)精美的圖案，靈感來源于古代的“窗花”，用細(xì)線進(jìn)行抽象化，既美觀又符合整體的統(tǒng)一性。時(shí)間下面是“今日薦詩”，二者相輔相成。之后的一個(gè)板塊是“為你讀詩”，每天推薦一些音頻供用戶聆聽學(xué)習(xí)。

“詩詞”板塊：推薦的古詩隨機(jī)排序，如果古詩有音頻，后面會(huì)有一個(gè)小喇叭來提示用戶。該板塊可以說是“今日薦詩”的延續(xù)，利用列表式的布局結(jié)構(gòu)進(jìn)行排列，列表式雖然不是現(xiàn)下最流行的布局方式，但是這種布局很經(jīng)典，所承載的信息是無窮，可以一直下拉刷新。

“與君語”板塊：是一些精彩評論的推薦，促進(jìn)用戶的交流學(xué)習(xí)。每一欄有頭像、用戶名、發(fā)表時(shí)間、發(fā)表內(nèi)容和來自哪一首詩。然后利用小圖標(biāo)的形式將分享、回復(fù)評論、喜歡的功能放在右下角，方便用戶點(diǎn)擊。每一欄的評論之間用小細(xì)線隔開，同樣是為了信息的明朗化，不會(huì)給用戶造成困擾。只有注重細(xì)節(jié)，才能使整個(gè)App賞心悅目，用戶體驗(yàn)起來很舒適。

（2）個(gè)人中心和誦詩的頁面設(shè)計(jì)

首頁側(cè)滑或者點(diǎn)擊左上角圖標(biāo)，可進(jìn)入圖6中個(gè)人中心界面，頁面主要內(nèi)容有我的下載、心悅、批悅、我的粉絲、關(guān)注，運(yùn)用了中英混排，使得目錄更加精致美觀。底部是四個(gè)圖標(biāo)展示的功能，設(shè)置、夜間模式、消息、我的。右上角有兩個(gè)次要功能“關(guān)于我們”和“意見反饋”，字號(hào)縮小豎排。背景加入了底紋“波浪”，有古風(fēng)的感覺。整體頁面設(shè)計(jì)簡潔、美觀大方，功能信息一目了然，給用戶良好的使用體驗(yàn)。

點(diǎn)擊詩詞詳情頁的“誦”按鈕，可進(jìn)入圖6“誦詩”頁面，這個(gè)頁面的設(shè)計(jì)清新，背景加入了亭臺(tái)樓閣的水墨畫，給人一種典雅安靜的感覺。點(diǎn)擊中間的“話筒”按鈕，開始誦詩，上面的古詩緩緩向上滑動(dòng)，中間的曲線流動(dòng)起來，仿佛進(jìn)入一個(gè)安靜祥和、風(fēng)景如畫的誦詩環(huán)境，旨在給用戶美輪美奐的享受。左邊是返回按鈕，右邊可進(jìn)入精彩音頻的頁面，每一個(gè)頁面保證功能完整。

由于該App的頁面較多，在這里就不一一分析了?？偟膩碚f，項(xiàng)目設(shè)計(jì)一直遵循功能至上、體驗(yàn)優(yōu)良、界面舒適美觀的原則。無論在人機(jī)交互還是操作邏輯上，都要以用戶為中心，界面設(shè)計(jì)注重細(xì)節(jié)，打造一款適合中小學(xué)生的古詩詞鑒賞App。

四、軟件測試

App軟件測試是將已經(jīng)確定好的功能需求在手機(jī)上進(jìn)行回饋測試。測試的目的是驗(yàn)證功能需求是否滿足，在測試過程中將不符合的功能點(diǎn)進(jìn)行修改，從而完善功能需求。測試人員要根據(jù)實(shí)際運(yùn)行環(huán)境對軟件進(jìn)行測試，測試的方法有黑盒測試和白盒測試。這兩種測試可以很全面地發(fā)現(xiàn)軟件存在的問題。通過兩輪測試和對BUG的調(diào)試，詩詞鑒賞App可以正常使用。

在設(shè)計(jì)App的過程中，綜合考慮中小學(xué)生特點(diǎn)、用戶體驗(yàn)、產(chǎn)品功能、界面設(shè)計(jì)，真正將界面設(shè)計(jì)和前端代碼融合在一起。該App能很好地激發(fā)中小學(xué)生學(xué)習(xí)古詩詞的興趣，提高了學(xué)習(xí)的效率。同時(shí)App中也有很多不足之處，技術(shù)方面還有些欠缺，需要不斷改進(jìn)。

參考文獻(xiàn)：

[1]張奇?zhèn)?基于HTML5的移動(dòng)應(yīng)用的研究與開發(fā)[D].北京：北京郵電大學(xué)，2013.

[2]武靖.主流智能移動(dòng)終端平臺(tái)界面設(shè)計(jì)分析[J].科技視界，2014（36）：139+210.

[3]嚴(yán)磊磊.科技信息服務(wù)中心綜合管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].廈門：廈門大學(xué)，2013.

[4]楊潔.嵌入式軟件測試的實(shí)踐與研究[D].上海：華東師范大學(xué)，2009.

[5]盧麗容.芻議小學(xué)語文古詩詞教學(xué)問題及其對策[J].考試周刊，2015（3）：40+8.

[6]丁楠.基于HTML5和CSS3的網(wǎng)易WAP站觸屏版移動(dòng)產(chǎn)品研究[D].武漢：華中科技大學(xué)，2012.

[7]竇朝輝.CSS Web設(shè)計(jì)高級(jí)教程[M].北京：清華大學(xué)出版社，2009：13-68.

（編輯：魯利瑞）