葛福鴻，張麗萍

（大同大學(xué) 教育科學(xué)與技術(shù)學(xué)院，山西 大同 037009）

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

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

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

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

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

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

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

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

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

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

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

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

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

2.主流程圖分析

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

圖2 主流程圖

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

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

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

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

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

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

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

Logo用于啟動(dòng)圖標(biāo)和首頁(yè)的標(biāo)題（如圖3）。背景是深藍(lán)色，是App的主色調(diào)，中間文字是白色，從視覺(jué)上更加突出，有一種浮起來(lái)的感覺(jué)。文字是一種“宋體”的變形。變形過(guò)程中文字中間加了 “斷口”，使文字更加透氣。“詩(shī)”字的末尾像古代的毛筆，寓意寫(xiě)詩(shī)，有文學(xué)大家的意境。“詞”字的末尾像書(shū)簽或旗幟，書(shū)簽寓意我們要多多看書(shū)，旗幟寓意學(xué)習(xí)古詩(shī)，傳承中華民族的文化，是我們需要樹(shù)立的旗幟。

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

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

圖3 logo設(shè)計(jì)

圖4 閃屏頁(yè)設(shè)計(jì)

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

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

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

圖5 首頁(yè)低保真圖和高保真圖

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

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

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

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

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

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

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

圖6 誦詩(shī)

四、軟件測(cè)試

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

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