基于微信小程序的釣魚助手《漁人》App的設計和實現

許玉蘭，王麗君，謝惠珠，蔡鈺佳，張莉娜

（廣州新華學院，廣東 廣州 510000）

0 引言

近幾年，隨著經濟的發展，人們的生活水平逐步得到提高。越來越多人加入了釣魚愛好者的行列，使得釣魚愛好者的構成更加豐富，釣魚標簽不再只屬于中老年人。目前美國的游釣愛好者已超過8000萬人，釣客人數遠超過高爾夫球和網球人數[1]。根據中國釣魚協會2015 年發布的不完全統計數據，中國約有1.2億釣魚人群，可見人們對于垂釣的關注和需求量是非常巨大的。據中國釣魚網調查顯示，休閑垂釣參與者主要消費項目有食宿、交通、餌料窩料、場地、釣具這五個部分，占了釣魚行業六成的銷售額。消費者每年在釣魚上的消費金額（不含交通和其他項目開支）主要集中在千元以上，這也說明了在垂釣運動發展的同時，垂釣者對垂釣的消費熱情也是極高[2]。

目前市場上已有的釣魚App功能強大，但是用戶使用率卻不達真正釣魚者的人數。通過分析可以發現，市面上釣魚類軟件大都處于功能簡單化、基礎化、個性化程度較低的狀態，且普遍缺乏提醒功能，導致用戶粘性偏低[3]。在信息化新時代，移動應用的發明讓人們的生活更加便利，所以本文基于微信小程序設計了一款釣魚助手《漁人》App，為釣魚愛好者帶來新時代不同的釣魚體驗。

1 需求與功能分析

1.1 設計目標

《漁人》小程序的開發需要有Web前端開發經驗，以及JavaScript 語言基礎[4]，總體上包括前端和后臺。后臺主要是處理數據，而前端主要的功能是獲取后臺數據，并加以渲染展示界面。面向用戶使用的功能包括一鍵識魚、地圖查詢、健康監測等，根據用戶選擇休閑的七個動機[5]，同時還有提供釣友、技巧問答、發布原創等功能。該應用程序的設計指在為釣魚愛好者提供便利的同時，能夠為釣魚業注入“新血液”，推動釣魚產業的發展，發揮該平臺的最大價值。

1.2 需求分析

根據問卷調研和與目標用戶進行訪談可知，釣魚愛好者的核心需求是知曉附近各個漁場的位置與氛圍體驗，避免誤入釣魚環境不好的釣魚場；而對于新手而言，更加傾向于借助平臺盡快地打下釣魚基礎和提升自身的釣魚技巧，新手釣魚教程對他們是必不可少的；對于新手和資深的釣魚愛好者而言，社區功能的存在意義是方便釣友之間進行學習和交流分享，用戶信息安全是較為重要的實現模塊。針對用戶需求，“漁人”微信小程序設計了以下功能:

1）一鍵識魚：拍照或直接上傳圖片即可識別該魚的種類、尺寸等信息，如果是保護動物將提醒用戶盡快將其放生[6]。用戶還可以憑此作為漁獲的憑證，在平臺上出售漁獲獲得收益，或者分享漁獲去獲得平臺提供的一些小獎勵。例如積分——可用于后期進行積分兌換魚餌等禮品。

2）健康監測：實時監測用戶身體各項指數，一旦監測到危險會提供一鍵報警提醒；發信息給其家人或附近的釣友，為釣魚者提供安全保障，也為其家人減少擔憂。用戶還可添加自己身體素質情況，為監測準確率提供有利的資料。

3）地圖查詢：方便用戶查詢周圍釣魚場信息，獲取釣場和漁具店的位置，避免非法釣魚。

4）釣點信息：從休閑垂釣組成因素的重要性與垂釣動機相關分析了解到[7]，釣點信息包括該釣點的配套設施、環境、水質、魚的品種、是否合法等。用戶進入釣場便可查詢相關信息，確保前往其喜歡的釣場。

5）社區論壇：用戶可在論壇提出問題或互相分享經驗、今日成果等，也可登錄賬號發布帖子；優質的文章可獲得平臺采用，并推薦給其他用戶；作為釣魚愛好者的關聯家人也可在此吐槽自家釣魚者的瘋狂行為。

6）釣魚商城：提供預訂釣場功能，節約用戶蹲點搶位時間；用戶還可在商城自由租借釣魚用具，或購買二手漁具，且團購更優惠。“團購優惠”只允許用戶添加其家人及釣友進行團購，這是為了確保用戶的利益，只與熟悉的好友家人團購，防止商家虛擬刷單行為。

1.3 功能架構設計

“漁人”小程序共有首頁、社區、商城、我的四大頁面，每個頁面都具有各自相應的功能[8]。“首頁”的核心功能包括健康助手、一鍵識魚；“社區”核心功能包括：技巧問答、社區動態；“商城”核心功能包括：購買或租借漁具、二手商鋪；“我的”頁面中則顯示用戶已發表的動態、簽到等。功能框架如圖1所示：

圖1 功能框架圖

2 系統的交互設計

2.1 視覺設計

《漁人》小程序主色調為藍色，色彩搭配如圖2所示：

圖2 小程序主體色彩搭配

高雅古樸的垂釣活動作為我國古老文明之一伴隨著祖國的歷史延續下來，歷數千年而不衰，日益為廣大人民所喜愛。在內陸淡水水域開展垂釣活動由來已久，它起源于古代先民的生產活動。隨生活環境的安定和生活水平的提高，逐漸從生活活動中分離出來，成為一種充滿趣味、智慧和活力，且格調高雅、有益身心的文體活動。所以《漁人》小程序Logo 以用毛筆筆觸書寫的“漁人”二字為底，以中國風呈現歷史悠久的垂釣活動；加上必備魚竿表示《漁人》會為用戶提供豐富完備的漁具和貼心多樣的服務來滿足其釣魚需求[9]；凌躍而上的魚便是祝愿用戶通過《漁人》的幫助可以“釣到大魚”。Logo圖標如圖3所示：

圖3 小程序Logo圖標

2.2 界面設計

《漁人》App的創作目的就是希望該App能給釣魚者帶來便利，故在界面設計上也遵循簡易的風格。從草圖到低保真模型圖，希望不管什么年齡層使用App時都能一眼就會，簡單上手小程序的各個功能。漁人App的部分低保真模型圖如圖4所示：

圖4 部分低保真原型圖

在低保真模型的基礎上進行高保真界面設計，是以藍色為主色調的簡易風格。漁人App 的部分高保真圖如圖5所示：

3 系統的實現與展示

3.1 系統實現關鍵技術

3.1.1 API接口的調用

API 接口是應用程序編程接口，是已經封裝好的函數。很多功能無需編寫，只需調用API接口就能實現。本設計實現的功能中，地圖、天氣和識魚模塊就依靠調用API實現。其中，地圖和天氣模塊調用了高德地圖的API 接口，識魚模塊調用了百度圖像識別API接口。

API 接口的調用分為三個步驟，首先需要到提供接口服務的平臺注冊申請需要的接口，從而獲取平臺發放的API Key 和Secret Key。然后在微信開發者工具的設置里把域名設為合法域名，最后根據平臺提供的技術文檔進行開發。

3.1.2 地圖模塊

地圖模塊主要功能包括：搜索、規劃路線、返回原點。其中，規劃路線功能需要獲取用戶的起點位置和終點位置。起點位置使用微信提供的getLocation 函數獲取，終點函數使用高德地圖提供的getInputtips函數獲取，并根據用戶選擇的出現方式選擇不同的參數，將起點和終點連接，使用getDataObjec 函數畫線，部分調用代碼編寫如下：

3.1.3 識魚模塊

此模塊分為兩個部分，第一部分是獲取用戶上傳的圖片，可以使用微信提供的chooseMedia 函數實現此功能。

第二部分是調用百度的圖像識別API 接口，并將接口傳回的信息顯示到前端。

3.1.4 視頻模塊

視頻模塊也使用chooseMedia 函數實現，將上傳類型由圖片更改為視頻。然后將用戶上傳的視頻存入數據庫。同時，為了使視頻的互動性更強，增加了彈幕功能，包括獲取彈幕文本、顏色，使用getRandom-Color方法。

3.1.5 論壇模塊

論壇則使用云開發的云數據庫實現。用戶在發布界面輸入帖子的參數后點擊發布，系統檢查參數符合發布要求后，使用微信云數據庫提供的add方法增加數據庫的數據。

當用戶進入社區頁面時，將使用云數據庫的where方法，根據用戶選擇的排列方式，查找符合條件的前十條數據，加入到數據集里并顯示到前端。在用戶拉到界面的底端時，會觸發一個用來獲取更多數據的函數，該函數將跳過已經查找過的數據，將新的數據合并到總的數據集里。

其他用戶可以使用點贊、收藏、發布評論等與其他人進行互動操作，其中點贊和收藏使用微信提供update方法進行數據修改操作。

3.2 系統展示

小程序的卡通形象顯示在引導頁面中，給人以一種親切感。引導頁支持用戶左右滑動切換頁面，且每個頁面有時間限制，用戶沒有進行滑動操作時，會自動跳轉至下一頁面中。引導頁面用戶可選擇感興趣的標簽，幫助我們推送用戶喜愛的信息內容。引導頁面運行展示及交互流程圖如圖6所示。

圖6 引導頁面流程圖

進入首頁面，可看見需求分析中用戶認為會常用到的一鍵識魚、健康監測、天氣等功能。相關系統運行及交互流程展示如圖7和圖8所示。

圖7 健康檢測功能流程圖

圖8 一鍵識魚功能流程圖

在“我的”頁面中，有簽到、日程、會員、設置等功能，可直觀看見自己發布的動態，“我的”頁面系統運行及交互流程展示如圖9所示。

圖9 我的頁面流程圖

表1 測試用例

4 小程序測試

測試是驗收設計與實現的重要途徑，通過測試去了解不足之處，以便完善改進。本測試采用功能模塊測試，按照所設計的測試用例完成小程序的測試。

在完成功能性測試后，邀請用戶試用小程序，了解產品在使用過程中的有效性、效率和滿意度。從用戶的角度上了解小程序的頁面跳轉邏輯是否合理、交互分支是否恰當、按鈕大小是否適中，以及操作是否簡單和具有引導性。根據反饋，小程序應用符合人機交互友好性要求，整體情況良好，最終對小程序的頁面布局數據進行了微調。

5 結束語

基于微信公眾平臺所搭建的釣魚助手小程序，由于小程序占內存小，導致功能實現不夠完善，需要經常升級和維護小程序，這是難點也是產品可持續發展的重點。

通過與同類的小程序及App進行競品分析后，可發現《漁人》小程序功能已經很全面，但由于這幾年疫情的影響，用戶的需求數據會有些偏差。下一階段，需要繼續調研完善用戶需求，拓展其他服務功能。在現有小程序的基礎上，研究智能可穿戴設備對正在釣魚用戶的健康安全進行監測，以便更加智能準確地監測用戶的實時健康指數，為用戶釣魚時提供安全保障。