基于用戶行為的慢病App前端用戶界面設計

董婷

(榆林學院,信息工程學院,陜西,榆林 719000)

0 引言

慢病的全稱為慢性非傳染性疾病是一種非傳染性疾病的總稱,在沒有明確病因的情況下長期患病,很難治療。慢性非傳染性疾病是我國公共衛生問題中影響人民健康的較大因素,隨著國民年齡增長、國民老齡化加劇。

(1) 互聯網慢病管理

近年來,信息系統建設和病人數據完善是大數據時代醫院管理現代化的必然趨勢,隨著電子病歷系統、醫囑系統、護理系統、購藥系統的開發與應用,不僅優化了臨床工作流程,縮短了咨詢時間,節省了時間和人員,也逐漸形成了互聯網醫療管理的院內基礎[1]。通過“互聯網+技術”的手段,進一步拓展慢病健康管理范圍,構建貫穿慢病管理全過程的健康檔案[2]。

(2) 移動醫療

移動醫療的概念誕生于20世紀60年代和70年代,隨著移動通信技術的發展和應用的智能化,移動醫療應用程序由于便捷、信息數據完善并且成本低等原因,被廣泛應用于健康衛生管理,新的健康管理模式由此誕生。對于患病時間長、治療難、治療成本高的慢性病患者和慢病的高風險人群來說,及時和有效的健康管理對預防疾病和疾病早期的治療至關重要[3]。由于其技術和成本等因素,通過移動醫療對慢病開展管理模式也是一種較好的醫療方式[4]。

2 前端框架

Web前端主要包含HTML、CSS、JavaScript三大部分,其中,HTML負責頁面的整體結構,CSS負責頁面的整體樣式結構、JavaScript負責用戶和頁面的交互行為[5]。隨著Web應用的迅速發展,頁面的邏輯交互和UI效果也逐漸復雜,同時出現了大量的前端框架和庫[6]。最初是由jQuery簡單的DOM(文檔對象模型)操作,封裝Ajax(異步JavaScript和XML)請求進行開發,但是由于交互邏輯和UI設計混雜等原因,代碼難以維護,發展到MVVM(模型-視圖-視圖模型),實現了數據和視圖的相互綁定,舍棄了DOM操作?，F在,前端三大主流框架分別是:Angular.js、React.js、Vue.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.js

Vue.js是目前流行的前端框架,采用的是MVVM的設計模式,支持數據驅動和組件化開發,Vue的數據驅動是通過MVVM模式實現的,在MVVM模式下,數據與視圖之間是分離的,而ViewModel就是鏈接兩者之間關系的監聽者。圖1是MVVM的工作原理;圖2是Vue的基本原理。

圖1 MVVM的工作原理

圖2 Vue的基本原理

Vue.js會對頁面中數據的變化做出同步的響應,通過MVVM思想實現數據的雙向綁定,不再操作DOM對象。Vue通過對DOM進行預操作處理,并沒有真實的操作DOM,相對于其他前端框架來說,同樣是操作虛擬DOM,Vue的性能更高,運行速度更快。

2.3 UI框架Vant UI

UI即“用戶界面”,UI最主要的功能就是建立用戶和系統后臺之間的聯系,系統后臺通過UI把數據轉換成可視化的內容展示給用戶,同時用戶也要通過UI把操作指令和數據傳給系統后臺。UI框架是把具有相同共性的東西抽離出來變成通用的組件,這樣就減少了代碼的冗余,并且具有統一的設計標準,提高了開發效率。常見的UI框架有基于jQuery的layUI、餓了么前端開源的Element UI、移動端組件庫Vant UI、適配IOS和Android的Flutter框架。本次課題設計選取的前端框架是Vant UI。

2.2 前端項目結構

該課題開發平臺項目大體目錄結構如表1所示。

表1 項目目錄結構表

3 總結

在慢病App的實踐過程中,實現的功能相對于其他醫療App來說較少,對于目標用戶來說雖然能夠滿足他們的需求,但是也局限了慢病App的用戶范圍,更多的功能也會吸引更多年齡段的用戶。慢病App界面的情感化設計也有待深入,需要更深層的滿足用戶的心理認知,給用戶帶來更多的滿足感。