0%

IceBox冰盒食记(获奖作品)——基于云开发CloudBase的微信小程序(二)

front

IceBox冰盒食记(获奖作品)——基于云开发CloudBase的微信小程序(二)

二:概要设计 Outline design

总体功能介绍 General Function

围绕着反对食品浪费为主题和目的,冰盒食记分为冰箱管理、购物清单、识别功能、资讯推送、食物科普、个人中心、卡牌收集七个模块。主要内容以及对应的功能如图所示:

Focusing on the theme and purpose of fighting food waste, Icebox is divided into seven modules: fridge management, shopping list, identification function, information push, food science, personal center and card collection. The main contents and the corresponding functions are shown in the diagram.

1

用例分析 Analysis of use cases

1

描述了小程序的各个功能模块,其中包括:用户的备忘录、识别果蔬、冰箱管理、卡牌收集、科普功能。

Describes the various functional modules of the applet, which include: user’s memo, identification of fruits and vegetables, fridge management, card collection, and science functions.

顺序分析 Analysis of sequence

1

1

1

1

1

1

1

三:详细设计 Detailed design

产品设计 Product design

首页 Index page

首页提供进入备忘录和进入冰箱的入口,采用冰箱门设计的样式,更加贴近生活。

The index page provides access to the memo and entry to the refrigerator in the style of a refrigerator door design, which is closer to life.

1

备忘录界面 Memo page

备忘录界面用于记录要购买的食品,食品条目与冰箱直接挂钩,可以通过备忘录导入冰箱中。备忘录记录提供划线、单条删除和清空功能。

1

冰箱内部界面 Inside the Icebox page

冰箱内部界面用于展示冰箱中的食物情况,显示食物名称和距离过期的日期,同时共用户编辑食物、添加食物、删除食物、清空食物等功能。

The memo page is used to record the food items to be purchased. The food items are directly linked to the refrigerator and can be imported into the refrigerator via memo. The memo record provides cross out, single entry deletion and emptying functions.

1

识别界面 Recognition page

果蔬识别界面用于识别不认识的果蔬,帮助用户知道果蔬名称,方便更进一步查询。包括上传果蔬图片和开始识别两部分。

The fruit and vegetable recognition page is used to identify fruits and vegetables that you do not know and help users know the names of fruits and vegetables for further inquiries. It includes two parts: uploading pictures of fruits and vegetables and starting recognition.

1

科普界面 Science page

科普界面主要包含两部分,一是节约粮食资讯部分,二是食物科普部分。默认显示节约粮食资讯,可通过选择跳转到食物科普部分。两部分均可通过点击相关条目跳转到详情界面。同时在界面上方设置有搜索框,可通过搜索框输入食物名称进行搜索,展示具体食物科普界面或找不到界面。

The science page mainly contains two parts, one is the food saving information part and the other is the food science part. By default, the food saving information is displayed, and you can jump to the food science section by selecting it. Both sections can be redirected to the detail interface by clicking the relevant items. Meanwhile, there is a search box at the top of the interface, which can be used to search by entering the name of food to show the specific food science interface or the interface that cannot be found.

1

”我的“界面 “Me” page

“我的”界面即用户中心界面,提供的功能有:通过“过期食品”展示当前冰箱内过期食品数量,提醒用户尽快清理;通过“我的节约粮食水平”展示统计饼图,计算水平分数;通过“卡牌盒子”跳转到卡牌收集界面,展示卡牌解锁进度;通过小妙招提示用户如何减少粮食浪费。

The “Me” page, which is the user center page, provides the following functions: displaying the number of expired food in the current refrigerator through “Expired Food” to remind users to clean up as soon as possible; displaying a statistical pie chart through “My Food Saving Level Through “My Food Saving Level”, we can show the statistical pie chart and calculate the level score; through “Card Box”, we can jump to the card collection interface and show the progress of card unlocking; through the tips and tricks, we can remind users how to reduce food waste.

1

卡牌界面 Card page

卡牌界面用于查看已解锁的卡牌,包括查看攻略和点击卡牌两个部分。

The deck page is used to view the unlocked cards and includes two sections for viewing the cheats and clicking on the cards.

1

界面设计 Page design

由于冰盒食记是一款管理类工具,旨在促进反食品浪费,又有冰箱元素,故整体采用蓝色调,表示食物的存储。其中,过期食品以红色为提示,形成鲜明的对比,于无形催促用户尽快处理过期食物,减少损失浪费。

同时,所有页面均遵循清晰易用、灵活高效、简洁务实的原则。在用户第一次使用时设有导航功能,帮助用户快速上手。

Since Icebox is a management tool that aims to promote anti-food waste and has a refrigerator element, the overall blue tone is used to indicate the storage of food. Among them, expired food is prompted by red color to form a sharp contrast, which invisibly urges users to dispose expired food as soon as possible to reduce loss and waste.

At the same time, all pages follow the principles of clarity and ease of use, flexibility and efficiency, simplicity and pragmatism. There is a navigation function when users use it for the first time to help them get started quickly.

1

1

1

通过导航页面来到冰箱门界面,通过冰箱门可以进入贴在门上的备忘录界面也可以通过门把进入冰箱内部,加强抽象存储和现实中的区别。点击门把进入空冰箱,点击加号进行食物添加。

1

1

通过选择食物的大类小类,冰盒食记给出推荐保存日期,用户也可以进行修改和上传实物图片,点击保存后将物品添加到冰箱中。冰箱中按四个大类进行分堆,按食物保质期升序排序,使更加紧急的食品优先展示在用户面前。同时会以弹窗的方式显示冰箱中已过期和快要过期的食物,提示用户及时清理冰箱。

1

1

用户可以通过备忘录进行添加要购买的食品,购买完食品可将食品导入到冰箱中。除此以外冰盒食记还提供果蔬识别功能,上传一张果蔬图片,即可以得到识别结果。

1

1

科普主要分为两个模块,一是节约粮食的资讯热点,二是食物科普。点击热点资讯或点击科普卡片都可以进入详情界面。食物科普还支持通过搜索食物名称进入搜索词条的详细界面功能。

1

1

个人中心中包含三点,一个是当前冰箱内过期食品数量统计;二是根据从使用至今的已处理食品的统计,通过饼图的方式,同时计算用户的节约粮食水平;三是卡牌功能,连续十次处理不过期食物,可解锁相关卡牌。点击已解锁的卡牌可查看卡牌的大图详情。

1

1

-------------本文结束感谢您的阅读-------------