饮食搭配科普微信小程序的交互设计与探索

尹鲲龙 刘 雨 朱雅文 彭以建 陈望甲

（江苏大学京江学院，江苏 镇江 212002）

1 饮食搭配科普微信小程序的设计背景

1.1 时代背景

1.1.1 外界环境的变化

现如今5G基站的快速建设和5G网络的快速普及为用户使用智能手机提供了基础的条件。

1.1.2 小程序的优势

微信小程序以简洁、方便的特点深受大众的喜爱，已经成为人们日常生活中不可或缺的一部分。据统计，截至2020年7月14日，微信小程序的日活跃账户数已突破4亿。

1.1.3 国民现状

相关问卷调查数据表明，有超过一半的受调查者认为自己每天的饮食搭配不均衡，更有80%的受调查者表示自己并没有用过饮食搭配科普类的小程序，但是有超过90%的受调查者表明自己未来将会使用此类小程序，因此此类项目的研究拥有着极大的发展前景。

1.2 社会背景

1.2.1 国内研究现状

2008年，赵昕通过对家用、餐馆电子食谱及其应用载体进行交互性设计，致力于研究出1个在实际生活中方便实用的可操作性强的养生食谱应用系统，该系统可以指导人们科学饮食[1]。

2018年，张志杰、杨自荣等人基于目前膳食分析系统存在需要通过手动输入1 d的饮食才能进行分析的问题，设计开发出一款以大数据为基础的膳食分析系统，该系统可以满足现代人对饮食的高要求以及特定人群对饮食的需求[2]。

2019年，王丹、王亚文等人基于现代人的健康问题，致力于开发1个名为“吃了么”的微信小程序，旨在向用户传播与食物营养有关知识以及向用户介绍人体的营养需求，并帮助用户合理制定饮食方案[3]。

1.2.2 国外研究现状

2003年，Abdus Salam Khan等人超越传统的基于案例的推理方法，提出了1种可以有效开发菜单、构建系统的新方法。该方法允许系统自动构建1个根据客户的个人要求和食物偏好而定制的菜单，当用户不满意系统推荐的菜谱时，将由专家为用户手动修改推荐菜谱[4]。

2012年，Petot 等人通过对专家设计的菜单进行建模，设计出了既能够满足营养需求，又能够满足用户饮食需求的专家系统[5]。

2 饮食搭配科普微信小程序开发的意义

目前有关饮食搭配以及介绍哪些搭配会减少营养的吸收甚至致病的文献不是很多并且比较分散，不利于人们系统地获取饮食搭配的相关知识。此外，虽然目前有许多关于对饮食营养分析以及搭配的微信小程序和App，但是它们都缺少纠正人们错误饮食搭配的功能，并且搜索得出的结果比较单一，即搜索内容即结果，并没有为用户提供目标搜索内容以外的饮食资讯。因此，笔者想开发一款科普饮食搭配知识的微信小程序来帮助人们更好地了解各种健康的饮食搭配，同时使人们也能熟知哪些饮食搭配对身体有危害。

2.1 饮食搭配科普微信小程序的目的

饮食搭配科普微信小程序旨在为各个年龄段的人群提供服务，进而设计出一款以为用户提供饮食搭配为基础，科普饮食知识功能的小程序，在提升生活质量、避免疾病发生的同时，能够均衡个人的膳食结构，养成健康正确的饮食搭配意识。

2.2 饮食搭配科普微信小程序的作用

虽然随着经济结构的改变，人们的生活水平有所提升，但是人们缺乏对饮食搭配以及饮食成分的认识，因此与饮食有关的慢性非传染病，例如肠胃不适、血脂指数异常以及心脏功能受损等疾病的发病率越来越高，这已渐渐成为威胁国民健康的突出问题[6]。 笔者希望用户可以通过该微信小程序了解食物本身的营养与禁忌，在适应快节奏生活、减少外卖食用次数的同时，更加注重饮食搭配的健康性，从而达到营养均衡的目的。

3 饮食搭配科普微信小程序的设计过程及功能介绍

3.1 小程序的开发流程

3.1.1 前期准备

在开发小程序之前，需要对系统进行分析与规划，确定用户需求以及系统应该具备的功能，从而设计出E-R图，并对关系模式进行设计。

3.1.2 开发工具

3.1.2.1 微信开发者工具

通过微信开发者工具并使用WXML、JS等语言对小程序的整体布局以及系统功能进行开发，再对小程序进行调试、运行和维护，最终完成对小程序的设计。

3.1.2.2 Eclipse

Eclipse平台的主要作用是为工具提供者提供使用机制和遵循的规则，从而实现无缝集成工具。该平台可以提供有助于开发新工具的构建块和框架。

3.1.3 前端显示

3.1.3.1 注册登录界面

该模块是登录小程序的注册登录界面，基于Eclipse开发环境对用户注册登录界面进行编写。用户需要输入姓名和密码才可以进入小程序。

该模块的主要代码如下。

3.1.3.2 首页界面

该模块是系统登录后的首页界面，基于Eclipse开发环境对小程序的首页界面进行编写，通过表单标记＜form＞属性设置搜索栏目，从而收集用户搜索的信息，最终实现系统与用户之间的交互功能。用户在搜索框内输入食品名称及搭配，就可以得到目标食物的相关信息，小程序的运行效果如图1所示。

该模块的主要代码如下。

3.1.3.3 搜索详情页面

该模块是小程序的搜索详情界面（以搜索牛奶为例），该编码程序可以实现搜索界面与信息查询结果界面之间的跳转，从而显示某食品（以牛奶为例）相关搭配的具体信息。同时，用户搜索所得到的界面信息是由不同平台汇总所得出的。

该模块的主要代码如下。

3.1.3.4 CSS样式界面代码

该模块可以优化设计小程序的界面，通过层叠样式表单CSS技术实现对小程序界面样式的设计，达到简化页面排版、保持多个页面样式协调统一的效果。

该模块的主要代码如下。

3.2 小程序的构成

总体上小程序可以分为首页、饮食搭配、饮食知识以及食友交流4个版块。其中首页包括所有功能的链接入口，能够方便用户快速地搜索到目标内容。当然，用户也可以进入不同的版块，对各版块进行点对点的了解；其中，第二版块（饮食搭配）是该小程序最有创意、也是最重要的内容，它可以帮助用户了解并纠正日常最容易被忽略的错误饮食搭配；第三版块（饮食知识）主要具备查询饮食的热量以及成分的功能；第四版块（食友交流）可以为食友提供交流与信息互享的平台，如图1所示。

图1 饮食搭配科普小程序页面图

3.3 小程序的核心功能

3.3.1 自动生成目标饮食搭配，并指出相关且有害的饮食搭配

在小程序的饮食搭配页面，用户可以在最顶层的搜索栏搜索自己的目标饮食，随后小程序会根据用户的搜索内容在数据库中检索出不同的饮食搭配，并将搜索结果细分为以下2类：1） 正确的饮食搭配。2） 错误的饮食搭配。搜索结果也会附带相应的医学知识，明确地指出各类搭配的利弊所在，从而达到向用户科普饮食知识的目的（如图2所示）。另外，用户也可以选择搜索框中的早、午、晚、一天以及每周的综合搭配按钮，进而寻求更全面、更综合的搭配。

3.3.2 对查询结果的精细化分类处理

现在页面显示的查询结果会进一步对内容进行细分，其中每一条搜索结果后面有标注为常见与不常见的字样，用户可以很直观地查看自己的搜索结果，如图2所示。

图2 饮食搭配页面

3.3.3 查询食品的热量以及营养成分

在热量查询窗口，用户可以对食物的热量以及营养成分结构进行查询。

3.3.4 饮食该文每日推送

在进入小程序后，单击项目一览下的每日推送功能按钮，页面就会跳转至饮食知识版块的饮食文章区域，用户可以根据该文左下角的日期来选取最新的饮食资讯。

3.3.5 专家24 h在线免费咨询

用户进入小程序首页后，单击快速问专家右侧的按钮，就可以进入询问专家的页面，这里将有许多医院专家以及在高校食品和营养学专业任教的老师为用户提供24 h的在线咨询服务。

3.3.6 默契匹配，食友交流

用户可以在食友交流页面分享、上传自己的饮食体会，经过专家审核后，就可以在首页的底端查看自己发布的内容，该功能充分调动大家对健康饮食的兴趣。

3.4 小程序的后台基础

3.4.1 数据的支持

笔者将通过微信开发者工具平台，利用WXML、JS等语言对小程序的前端进行创建，在后端用Java语言对服务器端程序进行编写；同时引用2016版《中国居民膳食指南》以及中国饮食网等权威网站的相关数据，从而确保数据来源的可靠性。

3.4.2 医院专家以及高校教师的支持

该小程序将会招募许多在一线的医学工作者以及在高校食品、营养学专业任教的老师，进而在最大程度上提高信息内容的准确性。

3.4.3 后台维护

当出现异常运行时，小程序就会自动报错，并将相关信息上传至系统，由后台维护者在后台对漏洞、程序进行统一修复和更新，尽可能地确保用户在正常使用小程序的同时拥有更加舒适的体验。

4 结语

现在微信小程序逐渐走入人们的日常生活，据统计，截至2020年7月14日，微信小程序的日活跃账户数已突破4亿，但是手机里关于饮食搭配的信息鱼龙混杂，朋友圈、微信群里充斥着大量未经证实的饮食搭配，这些信息具有很强的误导性。因此，为了给人们提供健康饮食的有效信息、避免伪科学给人们带来危害，该程序致力于建设1个服务大众的公用平台，科学地甄别各种饮食搭配信息，在帮助用户纠正错误饮食搭配，避免患病的同时，也能够形成健康正确的饮食搭配意识，保证人们的健康。除此之外，研究人员还会对该程序进行不断地更新，进而增强小程序的实用性。