飲食搭配科普微信小程序的交互設(shè)計(jì)與探索

尹鯤龍 劉 雨 朱雅文 彭以建 陳望甲

（江蘇大學(xué)京江學(xué)院，江蘇 鎮(zhèn)江 212002）

1 飲食搭配科普微信小程序的設(shè)計(jì)背景

1.1 時(shí)代背景

1.1.1 外界環(huán)境的變化

現(xiàn)如今5G基站的快速建設(shè)和5G網(wǎng)絡(luò)的快速普及為用戶使用智能手機(jī)提供了基礎(chǔ)的條件。

1.1.2 小程序的優(yōu)勢

微信小程序以簡潔、方便的特點(diǎn)深受大眾的喜愛，已經(jīng)成為人們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠帧?jù)統(tǒng)計(jì)，截至2020年7月14日，微信小程序的日活躍賬戶數(shù)已突破4億。

1.1.3 國民現(xiàn)狀

相關(guān)問卷調(diào)查數(shù)據(jù)表明，有超過一半的受調(diào)查者認(rèn)為自己每天的飲食搭配不均衡，更有80%的受調(diào)查者表示自己并沒有用過飲食搭配科普類的小程序，但是有超過90%的受調(diào)查者表明自己未來將會(huì)使用此類小程序，因此此類項(xiàng)目的研究擁有著極大的發(fā)展前景。

1.2 社會(huì)背景

1.2.1 國內(nèi)研究現(xiàn)狀

2008年，趙昕通過對家用、餐館電子食譜及其應(yīng)用載體進(jìn)行交互性設(shè)計(jì)，致力于研究出1個(gè)在實(shí)際生活中方便實(shí)用的可操作性強(qiáng)的養(yǎng)生食譜應(yīng)用系統(tǒng)，該系統(tǒng)可以指導(dǎo)人們科學(xué)飲食[1]。

2018年，張志杰、楊自榮等人基于目前膳食分析系統(tǒng)存在需要通過手動(dòng)輸入1 d的飲食才能進(jìn)行分析的問題，設(shè)計(jì)開發(fā)出一款以大數(shù)據(jù)為基礎(chǔ)的膳食分析系統(tǒng)，該系統(tǒng)可以滿足現(xiàn)代人對飲食的高要求以及特定人群對飲食的需求[2]。

2019年，王丹、王亞文等人基于現(xiàn)代人的健康問題，致力于開發(fā)1個(gè)名為“吃了么”的微信小程序，旨在向用戶傳播與食物營養(yǎng)有關(guān)知識以及向用戶介紹人體的營養(yǎng)需求，并幫助用戶合理制定飲食方案[3]。

1.2.2 國外研究現(xiàn)狀

2003年，Abdus Salam Khan等人超越傳統(tǒng)的基于案例的推理方法，提出了1種可以有效開發(fā)菜單、構(gòu)建系統(tǒng)的新方法。該方法允許系統(tǒng)自動(dòng)構(gòu)建1個(gè)根據(jù)客戶的個(gè)人要求和食物偏好而定制的菜單，當(dāng)用戶不滿意系統(tǒng)推薦的菜譜時(shí)，將由專家為用戶手動(dòng)修改推薦菜譜[4]。

2012年，Petot 等人通過對專家設(shè)計(jì)的菜單進(jìn)行建模，設(shè)計(jì)出了既能夠滿足營養(yǎng)需求，又能夠滿足用戶飲食需求的專家系統(tǒng)[5]。

2 飲食搭配科普微信小程序開發(fā)的意義

目前有關(guān)飲食搭配以及介紹哪些搭配會(huì)減少營養(yǎng)的吸收甚至致病的文獻(xiàn)不是很多并且比較分散，不利于人們系統(tǒng)地獲取飲食搭配的相關(guān)知識。此外，雖然目前有許多關(guān)于對飲食營養(yǎng)分析以及搭配的微信小程序和App，但是它們都缺少糾正人們錯(cuò)誤飲食搭配的功能，并且搜索得出的結(jié)果比較單一，即搜索內(nèi)容即結(jié)果，并沒有為用戶提供目標(biāo)搜索內(nèi)容以外的飲食資訊。因此，筆者想開發(fā)一款科普飲食搭配知識的微信小程序來幫助人們更好地了解各種健康的飲食搭配，同時(shí)使人們也能熟知哪些飲食搭配對身體有危害。

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

飲食搭配科普微信小程序旨在為各個(gè)年齡段的人群提供服務(wù)，進(jìn)而設(shè)計(jì)出一款以為用戶提供飲食搭配為基礎(chǔ)，科普飲食知識功能的小程序，在提升生活質(zhì)量、避免疾病發(fā)生的同時(shí)，能夠均衡個(gè)人的膳食結(jié)構(gòu)，養(yǎng)成健康正確的飲食搭配意識。

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

雖然隨著經(jīng)濟(jì)結(jié)構(gòu)的改變，人們的生活水平有所提升，但是人們?nèi)狈︼嬍炒钆湟约帮嬍吵煞值恼J(rèn)識，因此與飲食有關(guān)的慢性非傳染病，例如腸胃不適、血脂指數(shù)異常以及心臟功能受損等疾病的發(fā)病率越來越高，這已漸漸成為威脅國民健康的突出問題[6]。 筆者希望用戶可以通過該微信小程序了解食物本身的營養(yǎng)與禁忌，在適應(yīng)快節(jié)奏生活、減少外賣食用次數(shù)的同時(shí)，更加注重飲食搭配的健康性，從而達(dá)到營養(yǎng)均衡的目的。

3 飲食搭配科普微信小程序的設(shè)計(jì)過程及功能介紹

3.1 小程序的開發(fā)流程

3.1.1 前期準(zhǔn)備

在開發(fā)小程序之前，需要對系統(tǒng)進(jìn)行分析與規(guī)劃，確定用戶需求以及系統(tǒng)應(yīng)該具備的功能，從而設(shè)計(jì)出E-R圖，并對關(guān)系模式進(jìn)行設(shè)計(jì)。

3.1.2 開發(fā)工具

3.1.2.1 微信開發(fā)者工具

通過微信開發(fā)者工具并使用WXML、JS等語言對小程序的整體布局以及系統(tǒng)功能進(jìn)行開發(fā)，再對小程序進(jìn)行調(diào)試、運(yùn)行和維護(hù)，最終完成對小程序的設(shè)計(jì)。

3.1.2.2 Eclipse

Eclipse平臺的主要作用是為工具提供者提供使用機(jī)制和遵循的規(guī)則，從而實(shí)現(xiàn)無縫集成工具。該平臺可以提供有助于開發(fā)新工具的構(gòu)建塊和框架。

3.1.3 前端顯示

3.1.3.1 注冊登錄界面

該模塊是登錄小程序的注冊登錄界面，基于Eclipse開發(fā)環(huán)境對用戶注冊登錄界面進(jìn)行編寫。用戶需要輸入姓名和密碼才可以進(jìn)入小程序。

該模塊的主要代碼如下。

3.1.3.2 首頁界面

該模塊是系統(tǒng)登錄后的首頁界面，基于Eclipse開發(fā)環(huán)境對小程序的首頁界面進(jìn)行編寫，通過表單標(biāo)記＜form＞屬性設(shè)置搜索欄目，從而收集用戶搜索的信息，最終實(shí)現(xiàn)系統(tǒng)與用戶之間的交互功能。用戶在搜索框內(nèi)輸入食品名稱及搭配，就可以得到目標(biāo)食物的相關(guān)信息，小程序的運(yùn)行效果如圖1所示。

該模塊的主要代碼如下。

3.1.3.3 搜索詳情頁面

該模塊是小程序的搜索詳情界面（以搜索牛奶為例），該編碼程序可以實(shí)現(xiàn)搜索界面與信息查詢結(jié)果界面之間的跳轉(zhuǎn)，從而顯示某食品（以牛奶為例）相關(guān)搭配的具體信息。同時(shí)，用戶搜索所得到的界面信息是由不同平臺匯總所得出的。

該模塊的主要代碼如下。

3.1.3.4 CSS樣式界面代碼

該模塊可以優(yōu)化設(shè)計(jì)小程序的界面，通過層疊樣式表單CSS技術(shù)實(shí)現(xiàn)對小程序界面樣式的設(shè)計(jì)，達(dá)到簡化頁面排版、保持多個(gè)頁面樣式協(xié)調(diào)統(tǒng)一的效果。

該模塊的主要代碼如下。

3.2 小程序的構(gòu)成

總體上小程序可以分為首頁、飲食搭配、飲食知識以及食友交流4個(gè)版塊。其中首頁包括所有功能的鏈接入口，能夠方便用戶快速地搜索到目標(biāo)內(nèi)容。當(dāng)然，用戶也可以進(jìn)入不同的版塊，對各版塊進(jìn)行點(diǎn)對點(diǎn)的了解；其中，第二版塊（飲食搭配）是該小程序最有創(chuàng)意、也是最重要的內(nèi)容，它可以幫助用戶了解并糾正日常最容易被忽略的錯(cuò)誤飲食搭配；第三版塊（飲食知識）主要具備查詢飲食的熱量以及成分的功能；第四版塊（食友交流）可以為食友提供交流與信息互享的平臺，如圖1所示。

圖1 飲食搭配科普小程序頁面圖

3.3 小程序的核心功能

3.3.1 自動(dòng)生成目標(biāo)飲食搭配，并指出相關(guān)且有害的飲食搭配

在小程序的飲食搭配頁面，用戶可以在最頂層的搜索欄搜索自己的目標(biāo)飲食，隨后小程序會(huì)根據(jù)用戶的搜索內(nèi)容在數(shù)據(jù)庫中檢索出不同的飲食搭配，并將搜索結(jié)果細(xì)分為以下2類：1） 正確的飲食搭配。2） 錯(cuò)誤的飲食搭配。搜索結(jié)果也會(huì)附帶相應(yīng)的醫(yī)學(xué)知識，明確地指出各類搭配的利弊所在，從而達(dá)到向用戶科普飲食知識的目的（如圖2所示）。另外，用戶也可以選擇搜索框中的早、午、晚、一天以及每周的綜合搭配按鈕，進(jìn)而尋求更全面、更綜合的搭配。

3.3.2 對查詢結(jié)果的精細(xì)化分類處理

現(xiàn)在頁面顯示的查詢結(jié)果會(huì)進(jìn)一步對內(nèi)容進(jìn)行細(xì)分，其中每一條搜索結(jié)果后面有標(biāo)注為常見與不常見的字樣，用戶可以很直觀地查看自己的搜索結(jié)果，如圖2所示。

圖2 飲食搭配頁面

3.3.3 查詢食品的熱量以及營養(yǎng)成分

在熱量查詢窗口，用戶可以對食物的熱量以及營養(yǎng)成分結(jié)構(gòu)進(jìn)行查詢。

3.3.4 飲食該文每日推送

在進(jìn)入小程序后，單擊項(xiàng)目一覽下的每日推送功能按鈕，頁面就會(huì)跳轉(zhuǎn)至飲食知識版塊的飲食文章區(qū)域，用戶可以根據(jù)該文左下角的日期來選取最新的飲食資訊。

3.3.5 專家24 h在線免費(fèi)咨詢

用戶進(jìn)入小程序首頁后，單擊快速問專家右側(cè)的按鈕，就可以進(jìn)入詢問專家的頁面，這里將有許多醫(yī)院專家以及在高校食品和營養(yǎng)學(xué)專業(yè)任教的老師為用戶提供24 h的在線咨詢服務(wù)。

3.3.6 默契匹配，食友交流

用戶可以在食友交流頁面分享、上傳自己的飲食體會(huì)，經(jīng)過專家審核后，就可以在首頁的底端查看自己發(fā)布的內(nèi)容，該功能充分調(diào)動(dòng)大家對健康飲食的興趣。

3.4 小程序的后臺基礎(chǔ)

3.4.1 數(shù)據(jù)的支持

筆者將通過微信開發(fā)者工具平臺，利用WXML、JS等語言對小程序的前端進(jìn)行創(chuàng)建，在后端用Java語言對服務(wù)器端程序進(jìn)行編寫；同時(shí)引用2016版《中國居民膳食指南》以及中國飲食網(wǎng)等權(quán)威網(wǎng)站的相關(guān)數(shù)據(jù)，從而確保數(shù)據(jù)來源的可靠性。

3.4.2 醫(yī)院專家以及高校教師的支持

該小程序?qū)?huì)招募許多在一線的醫(yī)學(xué)工作者以及在高校食品、營養(yǎng)學(xué)專業(yè)任教的老師，進(jìn)而在最大程度上提高信息內(nèi)容的準(zhǔn)確性。

3.4.3 后臺維護(hù)

當(dāng)出現(xiàn)異常運(yùn)行時(shí)，小程序就會(huì)自動(dòng)報(bào)錯(cuò)，并將相關(guān)信息上傳至系統(tǒng)，由后臺維護(hù)者在后臺對漏洞、程序進(jìn)行統(tǒng)一修復(fù)和更新，盡可能地確保用戶在正常使用小程序的同時(shí)擁有更加舒適的體驗(yàn)。

4 結(jié)語

現(xiàn)在微信小程序逐漸走入人們的日常生活，據(jù)統(tǒng)計(jì)，截至2020年7月14日，微信小程序的日活躍賬戶數(shù)已突破4億，但是手機(jī)里關(guān)于飲食搭配的信息魚龍混雜，朋友圈、微信群里充斥著大量未經(jīng)證實(shí)的飲食搭配，這些信息具有很強(qiáng)的誤導(dǎo)性。因此，為了給人們提供健康飲食的有效信息、避免偽科學(xué)給人們帶來危害，該程序致力于建設(shè)1個(gè)服務(wù)大眾的公用平臺，科學(xué)地甄別各種飲食搭配信息，在幫助用戶糾正錯(cuò)誤飲食搭配，避免患病的同時(shí)，也能夠形成健康正確的飲食搭配意識，保證人們的健康。除此之外，研究人員還會(huì)對該程序進(jìn)行不斷地更新，進(jìn)而增強(qiáng)小程序的實(shí)用性。