葛福鴻，張麗萍

（大同大學 教育科學與技術學院，山西 大同 037009）

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

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

一、關鍵技術

開發(fā)本款App需要的核心技術和平臺支持，有HTML5+CSS3、JavaScript、Axure、PS、Hbuilder。

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

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

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

二、項目的功能分析

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

圖1 系統(tǒng)功能圖

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

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

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

2.主流程圖分析

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

圖2 主流程圖

三、界面設計和實現(xiàn)

1.總體設計風格

這是一款針對中小學生的小眾App。整個App大量留白，給用戶舒適的體驗，整體風格“大而簡、簡而精”，讓用戶很方便地找到所需要的信息，點擊更方便，給用戶易用、好用的感覺。

2.標準色定義

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

3.logo與閃屏頁的設計

（1）logo的設計

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

（2）閃屏頁面的設計

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

圖3 logo設計

圖4 閃屏頁設計

4.主要頁面的設計

（1）首頁的設計

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

圖5 首頁低保真圖和高保真圖

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

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

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

（2）個人中心和誦詩的頁面設計

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

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

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

圖6 誦詩

四、軟件測試

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

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