基于用户行为的慢病App前端用户界面设计.pdf

Microcomputer Applications Vol.39,No.9,2023文章编号：10 0 7-7 57 X（2 0 2 3)0 9-0 0 33-0 2摘要：移动医疗也为人们的健康管理和医疗服务提供了更大的平台和可能性，不少中老年人也成为了使用移动App的用户，但是在下载App后出于操作困难、界面复杂、不能满足用户需求等原因难以维持对App的正确使用。因此，为了应对App用户的增长，需要App提供优质的用户使用体验。提出通过对移动端用户的行为设立不同的数据指标分析用户行为，并通过研究移动医疗类App进行竞品分析，将用户需求和行为模式分析结果作为元素设计融入慢病App的前端UI中，设计出能满足用户使用需求的慢病管理服务的App。关键词：慢病；预防；移动App；U I中图分类号：F249.2基金项目基于用户行为的慢病App前端用户界面设计董婷（榆林学院，信息工程学院，陕西，榆林7 190 0 0）文献标志码：A微型电脑应用2 0 2 3年第39 卷第9 期User Interface Design for Chronic Illness App Front-endBased on User BehaviorDONG Ting(School of Information Technology,Yulin University,Yulin 7190o0,China)Abstract:Mobile medical treatment provides a greater platform and possibility for peoples health management and medicalservices.Many middle-aged and elderly people have become users of mobile App.However,many users cannot continuouslyuse App after downloading the App due to difficulties in operation,complex interface,cant meet users needs and other rea-sons.In order to maintain the growth of the App users need,the App should provide quality user experience.Therefore,thisarticle sets up different data index to analyze the user behaviors,and the user requirements and behavior model analysis resultsare used as a design element to put into the slow disease App front end.In user interface,the App of chronic disease manage-ment service is designed while meeting the users use needs.Key words:chronic disease;prevention;mobile App;user interface(UI)由于便捷、信息数据完善并且成本低等原因，被广泛应用于0引言健康卫生管理，新的健康管理模式由此诞生。对于患病时间慢病的全称为慢性非传染性疾病是一种非传染性疾病长、治疗难、治疗成本高的慢性病患者和慢病的高风险人群的总称，在没有明确病因的情况下长期患病，很难治疗。慢来说，及时和有效的健康管理对预防疾病和疾病早期的治疗性非传染性疾病是我国公共卫生问题中影响人民健康的较至关重要 3。由于其技术和成本等因素，通过移动医疗对慢大因素，随着国民年龄增长、国民老龄化加剧。病开展管理模式也是一种较好的医疗方式 1。（1）互联网慢病管理2前端框架近年来，信息系统建设和病人数据完善是大数据时代医院管理现代化的必然趋势，随着电子病历系统、医嘱系统、护理系统、购药系统的开发与应用，不仅优化了临床工作流程，缩短了咨询时间，节省了时间和人员，也逐渐形成了互联网医疗管理的院内基础 1。通过“互联网十技术”的手段，进一步拓展慢病健康管理范围，构建贯穿慢病管理全过程的健康档案 2 1。(2)移动医疗移动医疗的概念诞生于2 0 世纪6 0 年代和7 0 年代，随着移动通信技术的发展和应用的智能化，移动医疗应用程序基金项目：陕西省科技厅项目（2 0 19NY182）；榆林市科技局项目（2 0 19-91-2）作者简介：董婷（198 1一），女，硕士，副教授，研究方向为计算机科学与技术、无线网络安全、智能交通。33Web前端主要包含HTML、CSS、Ja v a Sc r i p t 三大部分，其中,HTML负责页面的整体结构，CSS负责页面的整体样式结构、JavaScript负责用户和页面的交互行为 5。随着Web应用的迅速发展，页面的逻辑交互和UI效果也逐渐复杂，同时出现了大量的前端框架和库 6 。最初是由jQuery简单的DOM(文档对象模型）操作，封装Ajax（异步JavaS-cript和XML)请求进行开发，但是由于交互逻辑和UI设计混杂等原因，代码难以维护，发展到MVVM（模型-视图-视图模型），实现了数据和视图的相互绑定，舍弃了DOM操作。Microcomputer Applications Vol.39,No.9,2023现在，前端三大主流框架分别是：Angular.js、Re a c t.js、V u e.js三大MVVM数据驱动框架。2.1前端架构前端常见的架构模式有3种：MVC架构模式、MVP架构模式和MVVM架构模式。MVC通过把视图的操作交给控制器处理，控制器响应视图的事件于是对数据进行操作，在应用对象发生变化的同时更新视图。MVP模式是模型、视图、展示器，其中M是提供数据、V是界面显示、P是负责逻辑的处理。MVP与MVC都是分层架构设计的，但是MVP是将视图单独形成组件，通过一系列接口供给上层操作。MVVM模式是利用数据绑定、依赖属性、路由属性等创造新结构，MVVM模式通过数据驱动的方式实现了视图和模型之间的同步，其中：V是view层，即视图层，不涉及逻辑和数据等；V是ViewModel层，只负责业务逻辑和业务数据的事情。视图层和模型层相互独立，ViewModel层和View层通过数据绑定的方式联系在一起。2.2前端框架Vue.jsVue.js是目前流行的前端框架，采用的是MVVM的设计模式，支持数据驱动和组件化开发，Vue的数据驱动是通过MVVM模式实现的，在MVVM模式下，数据与视图之间是分离的，而ViewModel就是链接两者之间关系的监听者。图1是MVVM的工作原理；图2 是Vue的基本原理。交互双向数据ViewModel反馈View用页面视图图1MVVM的工作原理ViewViViewModel监听绑定图2 Vue的基本原理Vue.js会对页面中数据的变化做出同步的响应，通过MVVM思想实现数据的双向绑定，不再操作DOM对象。Vue通过对DOM进行预操作处理，并没有真实的操作DOM,相对于其他前端框架来说，同样是操作虚拟DOM,Vue的性能更高，运行速度更快。2.3UI 框架 Vant UIUI即“用户界面”,UI最主要的功能就是建立用户和系统后台之间的联系，系统后台通过UI把数据转换成可视化的内容展示给用户，同时用户也要通过UI把操作指令和数据传给系统后台。UI框架是把具有相同共性的东西抽离出来变成通用的组件，这样就减少了代码的穴余，并且具有统一的设计标准，提高了开发效率。常见的UI框架有基于jQuery的layUI、饿了么前端开源的ElementUI、移动端组件库VantUI、适配IOS和Android的Flutter框架。本次课题设计选取的前端框架是VantUI。基金项目2.2前端项目结构该课题开发平台项目大体目录结构如表1所示。表1项目目录结构表Node_modules项目依赖包Public公共静态资源Api接口assets静态资源Components公共组件Router前端路由Store模块状态管理工具SrcStyleApp.vueMain.jsUtilsViewsPackage.json项目基本信息Dist项目打包后的文件3总结在慢病App的实践过程中，实现的功能相对于其他医Ajax疗App来说较少，对于目标用户来说虽然能够满足他们的Model绑定视图数据模型json和展现模型View微型电脑应用2 0 2 3年第39 卷第9 期工具组件、方法模块前端页面后台业务逻辑需求,但是也局限了慢病App的用户范围，更多的功能也会和数据库吸引更多年龄段的用户。慢病App界面的情感化设计也有待深入，需要更深层的满足用户的心理认知，给用户带来更多的满足感。1胡雅丽.基于Vue.js的“微商城”前端开发设计与实现 J.电子技术与软件工程，2 0 2 0（2 0）：34-35.2 孟瑾.基于情境感知的防儿童走失App设计实践D.重庆：四川美术学院，2 0 2 0.3刘万奇，杨金侠，谢翩翩，等.我国慢病一体化管理的现状与思考J.南京医科大学学报（社会科学版），2019,19(4):303-307.4林基艳，李超，王超超，等.基于RFID和Android的诚信城市交通车辆系统的设计与实现 J.微型电脑应用,2 0 18,3 4(11):3 7-40.5郭旭阳.基于用户行为模型的老年人慢病管理服务设计研究 D.无锡：江南大学，2 0 17.6 温馨.基于Node.js的Web前端框架的研究与实现D.南京：东南大学,2 0 17.（收稿日期：2 0 2 2-0 1-2 5）样式文件根组件人口文件参考文献34