飲食搭配科普微信小程序的交互設計與探索

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

（江蘇大學京江學院，江蘇 鎮江 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個服務大眾的公用平臺，科學地甄別各種飲食搭配信息，在幫助用戶糾正錯誤飲食搭配，避免患病的同時，也能夠形成健康正確的飲食搭配意識，保證人們的健康。除此之外，研究人員還會對該程序進行不斷地更新，進而增強小程序的實用性。