基于微信小程序的钓鱼助手《渔人》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进行竞品分析后，可发现《渔人》小程序功能已经很全面，但由于这几年疫情的影响，用户的需求数据会有些偏差。下一阶段，需要继续调研完善用户需求，拓展其他服务功能。在现有小程序的基础上，研究智能可穿戴设备对正在钓鱼用户的健康安全进行监测，以便更加智能准确地监测用户的实时健康指数，为用户钓鱼时提供安全保障。