康媛媛，劉芝傲，陸泊霖，楊宛螢

(東北林業(yè)大學(xué) 機(jī)電工程學(xué)院，黑龍江 哈爾濱 150006)

1 研究背景

目前，在動(dòng)物行為研究領(lǐng)域，國(guó)外在不同層次的動(dòng)物行為研究上，都有比較專(zhuān)業(yè)的分析儀器，比如采集儀器、觀察儀器、實(shí)驗(yàn)儀器，并逐步擁有智能自動(dòng)一體化的各類(lèi)輔助儀器和專(zhuān)業(yè)儀器[1]。動(dòng)物行為相關(guān)文獻(xiàn)的研究?jī)?nèi)容和方向既廣泛又深入[1]。從宏觀上看，國(guó)內(nèi)的動(dòng)物行為學(xué)研究水平正處于發(fā)展階段，研究方向比較單一，大多集中在哺乳動(dòng)物，對(duì)鳥(niǎo)類(lèi)、魚(yú)類(lèi)、昆蟲(chóng)類(lèi)研究還不夠廣泛和深入。利用紅外自動(dòng)相機(jī)和其他設(shè)備協(xié)助中國(guó)動(dòng)物行為研究還沒(méi)有普及，研究方法比較單一[2]。不過(guò)，當(dāng)下研究者的意識(shí)正逐漸提高。我國(guó)動(dòng)物行為研究正在向著與專(zhuān)業(yè)化的儀器相結(jié)合發(fā)展[3]。

隨著互聯(lián)網(wǎng)行業(yè)的蓬勃發(fā)展，信息技術(shù)在各個(gè)行業(yè)的不斷應(yīng)用，各種移動(dòng)工具不斷被設(shè)計(jì)開(kāi)發(fā)，為人們的生活帶來(lái)很多便利。WebApp的設(shè)計(jì)在金融系統(tǒng)、評(píng)審系統(tǒng)、檢測(cè)系統(tǒng)[4]、教育領(lǐng)域等有著廣泛的應(yīng)用，為人們提供便利，提高效率，減輕煩瑣工作的負(fù)擔(dān)。當(dāng)下WebApp發(fā)展勢(shì)頭良好，移動(dòng)端WebApp穩(wěn)定性不斷提升[5]，移動(dòng)端WebApp正成為移動(dòng)互聯(lián)網(wǎng)應(yīng)用的主流[6]。

“動(dòng)物記”WebApp主要為從事動(dòng)物行為研究的學(xué)生、老師設(shè)計(jì)?！皠?dòng)物記”WebApp滿足這類(lèi)用戶的信息收集記錄、表格設(shè)計(jì)、共享表格的需求。它通過(guò)云端存儲(chǔ)處理來(lái)提高工作效率和減少表格丟失。

2 研究前期

2.1 功能需求分析

本文對(duì)動(dòng)物行為記錄過(guò)程進(jìn)行研究，采訪相關(guān)工作人員的工作狀態(tài)和需求，明確了WebApp的需求框架[7]。

2.1.1 表格需求分析

(1)首頁(yè)近期表格編輯快速進(jìn)入。用戶進(jìn)入系統(tǒng)后，在首頁(yè)看到按照時(shí)間順序排列的最新編輯表格，方便用戶在觀察動(dòng)物行為時(shí)根據(jù)需要快速進(jìn)入曾經(jīng)編輯或編輯完成的表格。

(2)頁(yè)面邏輯符合動(dòng)物行為使用者表格記錄的習(xí)慣，符合其填寫(xiě)流程。根據(jù)用戶的調(diào)研問(wèn)卷數(shù)據(jù)以及動(dòng)物行為記錄專(zhuān)業(yè)的相關(guān)知識(shí)，本研究對(duì)取樣方式和記錄方式的不同組合按照常用頻率進(jìn)行優(yōu)先級(jí)排序。

(3)表格輔助功能減少繁多內(nèi)容填寫(xiě)。用戶點(diǎn)擊，自動(dòng)填入表格要求填寫(xiě)的日期、天氣、記錄人。

(4)表格的搜索。表格分為填寫(xiě)完整的可編輯表格、未填寫(xiě)完成的需要繼續(xù)增加行為譜的表格。

2.1.2 表格云庫(kù)需求分析

(1)云庫(kù)中搜索用戶需要的表格。

在云庫(kù)中，用戶可搜索確定的即將記錄動(dòng)物的相關(guān)記錄表格，下載到個(gè)人表格區(qū)，方便記錄。

(2)云庫(kù)中查看表格。

用戶通過(guò)云庫(kù)中公開(kāi)的表格可查看共同記錄同類(lèi)動(dòng)物的用戶，選擇關(guān)注同類(lèi)研究用戶，促進(jìn)交流。

(3)我的云庫(kù)查看與管理。

(4)用戶可以查看個(gè)人云庫(kù)中關(guān)注與被關(guān)注的用戶、專(zhuān)業(yè)信息、ID號(hào)。表格共享與交流在用戶個(gè)人需求下，進(jìn)行增刪、更改管理。

2.1.3 用戶個(gè)人管理需求分析

本設(shè)計(jì)有新用戶注冊(cè)登錄、老用戶登錄和老用戶密碼找回功能[8]。

個(gè)人中心有以下功能：專(zhuān)業(yè)認(rèn)證、個(gè)人表格(包括曾經(jīng)做過(guò)的可編輯表格和不可編輯表格)、個(gè)人云庫(kù)管理。

2.2 性能需求分析

2.2.1 訪問(wèn)量需求分析

WebApp主要用戶是動(dòng)物行為學(xué)觀察記錄者，有相關(guān)專(zhuān)業(yè)的學(xué)生、老師和專(zhuān)業(yè)研究人員。WebApp的服務(wù)器和數(shù)據(jù)服務(wù)器保證應(yīng)用穩(wěn)定性即可[8]。

2.2.2 頁(yè)面響應(yīng)需求分析

響應(yīng)時(shí)間應(yīng)滿足當(dāng)下智能頁(yè)面的響應(yīng)速度，不超過(guò)500 ms[8]。

3 “動(dòng)物記”WebApp設(shè)計(jì)

頁(yè)面設(shè)計(jì)綜合用戶訪談等用戶研究工具獲得的需求，基于互聯(lián)網(wǎng)飛速發(fā)展下默認(rèn)的行為規(guī)范[8]，通過(guò)測(cè)試后明確了WebApp的頁(yè)面框架如圖1所示。按照常用的App習(xí)慣以及功能需求，頁(yè)面設(shè)計(jì)分為3個(gè)部分：“我的”“主頁(yè)面”“庫(kù)”。在“我的”中，完成個(gè)人資料、專(zhuān)業(yè)認(rèn)證以及“我的云庫(kù)”跳轉(zhuǎn)的功能；在“主頁(yè)面”中，完成搜索表格、新建表格、查找近期記錄表格，跳轉(zhuǎn)到“云庫(kù)”和“我的頁(yè)面”功能；在“庫(kù)”中，完成跳轉(zhuǎn)到“我的云庫(kù)”；云庫(kù)有表格管理、共享云庫(kù)的跳轉(zhuǎn)、在“個(gè)人表格”內(nèi)上傳表格的功能。

圖1 需求框架

針對(duì)表格查看特點(diǎn)，本研究采用列表式布局進(jìn)行設(shè)計(jì)。

WebApp頁(yè)面的設(shè)計(jì)風(fēng)格體現(xiàn)自然、簡(jiǎn)潔、專(zhuān)業(yè)的特點(diǎn)。在顏色上，本設(shè)計(jì)選擇綠色作為主色，橙色作為輔色，整體應(yīng)用灰色不同明度區(qū)分頁(yè)面的不同功能區(qū)。

“動(dòng)物記”WebApp通過(guò)需求分析以及用戶使用流程，對(duì)移動(dòng)端頁(yè)面進(jìn)行設(shè)計(jì)，而后將設(shè)計(jì)完成的頁(yè)面交由動(dòng)物行為專(zhuān)業(yè)的同學(xué)和老師測(cè)試[9]。設(shè)計(jì)者收集意見(jiàn)進(jìn)行修改，明確了專(zhuān)業(yè)性較強(qiáng)的表格記錄頁(yè)面內(nèi)容。該部分頁(yè)面應(yīng)符合使用習(xí)慣，是“動(dòng)物記”WebApp重要頁(yè)面，介紹如下。

(1)頁(yè)面邏輯：用戶根據(jù)動(dòng)物行為表格的制作流程進(jìn)行填寫(xiě)，如圖2所示。在主頁(yè)面，用戶可查看最近編輯記錄的表格，同時(shí)可以進(jìn)入新的行為譜；如圖3所示，在表格編輯頁(yè)面，根據(jù)動(dòng)物行為記錄要求確定表格記錄內(nèi)容，用戶可長(zhǎng)按自動(dòng)填入天氣、日期和填寫(xiě)人姓名。用戶根據(jù)自身需求選擇取樣方式和記錄方式的組合；選擇完成后即可使用設(shè)計(jì)好的表格外出進(jìn)行觀察記錄；用戶最終記錄內(nèi)容可以存儲(chǔ)為圖片，方便分享和交作業(yè)，如圖4所示。

圖2 主頁(yè)面

圖3 表格編輯頁(yè)面

圖4 導(dǎo)出頁(yè)面

(2)云庫(kù)功能：在“庫(kù)”頁(yè)面，用戶可查看共享云庫(kù)和個(gè)人云庫(kù)，用戶在云庫(kù)中使用表格下載和查看功能，如圖5所示。在頂部，跳轉(zhuǎn)“我的云庫(kù)”和“共享云庫(kù)”。

圖5 庫(kù)頁(yè)面

4 “動(dòng)物記”WebApp開(kāi)發(fā)

4.1 “動(dòng)物記”WebApp前端

前端部分應(yīng)用Vue框架，提供較高的運(yùn)行效率，同時(shí)結(jié)合相應(yīng)的elementUI組件庫(kù)進(jìn)行前端頁(yè)面的開(kāi)發(fā)。圖表部分的前端應(yīng)用chartjs，可以使用戶完成WebApp的主要功能模塊——表格的填寫(xiě)。前端頁(yè)面由HTML和CSS3構(gòu)成，頁(yè)面邏輯按照前期的需求框架和使用流程，由JavaScript驅(qū)動(dòng)的Vue3.js框架進(jìn)行處理。

4.2 “動(dòng)物記”WebApp后端

根據(jù)以上WebApp的需求，后端安裝搭建nodejs+koa2的架構(gòu)，給輕量化的框架提供穩(wěn)定的后端，采用靈活穩(wěn)定的NoSQL類(lèi)型的數(shù)據(jù)庫(kù)——Mongobd數(shù)據(jù)庫(kù)，能夠?qū)崿F(xiàn)用戶表格數(shù)據(jù)的單表查引和數(shù)據(jù)的索引。后端邏輯框架如圖6所示。用戶前端對(duì)表格增刪、改查的請(qǐng)求發(fā)出后，后端通過(guò)Nginx代理轉(zhuǎn)發(fā)前端的請(qǐng)求到Kao.js框架，Kao.js框架由JavaScript驅(qū)動(dòng)處理前端請(qǐng)求。表格數(shù)據(jù)存儲(chǔ)在MySQL數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)根據(jù)前端接收到的請(qǐng)求進(jìn)行增刪、改查。

圖6 后端邏輯框架

5 結(jié)語(yǔ)

本文從動(dòng)物行為領(lǐng)域入手，挖掘當(dāng)前動(dòng)物行為專(zhuān)業(yè)對(duì)于記錄工具智能化的需求，設(shè)計(jì)“動(dòng)物記”WebApp作為記錄輔助工具。通過(guò)前期的行業(yè)與專(zhuān)業(yè)調(diào)研，用戶需求分析，本文明確WebApp的功能和使用的邏輯與流程，基于確定的需求進(jìn)行頁(yè)面設(shè)計(jì)。在專(zhuān)業(yè)性、使用必要性和創(chuàng)新性較大的表格記錄流程和頁(yè)面部分，WebApp多次進(jìn)行用戶測(cè)試，獲取修改意見(jiàn)，分析修改頁(yè)面設(shè)計(jì)，使其合理流暢。前端部分應(yīng)用“vue3+vite2+elementUI+chartjs”的技術(shù)，完成前端頁(yè)面的開(kāi)發(fā)，后端部分應(yīng)用“nodejs+koa2”架構(gòu)和mongobd數(shù)據(jù)庫(kù)完成后端的開(kāi)發(fā)。原先動(dòng)物行為表格記錄過(guò)程分為設(shè)計(jì)表格、觀察記錄、繪制表格、上傳統(tǒng)計(jì)數(shù)據(jù)、分析5個(gè)部分。用戶在紙筆觀察記錄的過(guò)程中，易出現(xiàn)表格缺失、動(dòng)物編碼不對(duì)應(yīng)、錯(cuò)記等情況，在繪制過(guò)程中，有重復(fù)記錄等問(wèn)題?！皠?dòng)物記”WebApp的設(shè)計(jì)與開(kāi)發(fā)，能夠化繁為簡(jiǎn)，降低丟失的風(fēng)險(xiǎn)，同時(shí)時(shí)間、天氣等容易忘記的環(huán)境條件也可以智能填入，減少失誤。此外，使用WebApp進(jìn)行記錄，減少了記錄過(guò)程中紙的使用，有益于環(huán)保。

筆者希望WebApp能夠帶給用戶更好的使用體驗(yàn)。未來(lái)的研究可以完善云庫(kù)，可探索關(guān)于云庫(kù)的更多使用方法，例如增加共同動(dòng)物研究的數(shù)據(jù)查看功能，增加用戶間的學(xué)術(shù)溝通功能，或增加動(dòng)物行為愛(ài)好者對(duì)研究?jī)?nèi)容的共享與查看功能，使得動(dòng)物行為數(shù)據(jù)分享范圍更加廣泛。校園教師和學(xué)生的客戶端可輔助教學(xué)，豐富動(dòng)物行為的數(shù)據(jù)庫(kù)等。隨著互聯(lián)網(wǎng)行業(yè)的不斷發(fā)展，技術(shù)還在飛速發(fā)展，關(guān)于“動(dòng)物記”WebApp的應(yīng)用或許可以結(jié)合硬件和VR等技術(shù)輔助動(dòng)物行為領(lǐng)域的發(fā)展，不斷縮小同國(guó)外相關(guān)領(lǐng)域研究的差距。