基于情感化設計原則的移動醫療APP 界面設計比較

謝漪丹，王喜益，黃一卓，宋安泰，趙荷婷，曹婧一，宋夢媛，胡 韻

（1.上海交通大學醫學院護理學院，上海 200025；2.上海交通大學醫學院附屬瑞金醫院手術室，上海 200000；3.上海交通大學醫學院臨床學院，上海 200025；4.上海交通大學醫學院兒科學院，上海 200025）

我國衛生健康委員會于2020年12 月發布《關于深入推進“互聯網+醫療健康”“五個一”服務行動的通知》指出，要持續推動互聯網+醫療健康模式，深化“五個一”服務，并與疫情常態化管理相結合[1]。移動醫療APP 平臺為在線醫療、醫藥電商、慢病管理等健康服務創造了優勢條件，串聯了互聯網+醫療的關鍵環節，對優化醫療服務流程和健康管理模式具有積極作用[2]。為進一步推進衛生信息平臺建設，亟需在情感互動方面優化移動醫療APP 的設計，提升其整體交互效率[3]。目前互聯網+移動醫療模式下移動醫療APP 存在不同程度缺陷，包括界面設計復雜，操作難度大，總體利用率低，服務雜繁，功能重疊，無品牌特點，公信力低，普及率低等。優化并賦能界面設計的情感內涵，將有助于提升移動醫療健康管理效能[2]。為此，本文選擇三款移動醫療APP（微醫、好大夫在線、平安健康），分析其與患者的互動情況和實際效果，為后續移動醫療APP 的開發提供依據和參考。

1 對象與方法

1.1 研究對象 通過對患者及醫護人員進行訪談、推薦，選定包括微醫、京東健康、平安健康、春雨、好大夫在線等移動醫療APP。在萬方、CNKI、PubMed 等數據庫搜集國內外相關移動醫療APP 的研究文獻及相關統計數據資料基礎上[3]，研究小組發現平安健康、好大夫、微醫三款移動醫療APP 的市場占有率相對較高。結合網經社電子商務研究中心的《2021年5 月AppStore 中國免費榜（醫療）TOP100》[4]，選取微醫、好大夫在線、平安健康作為目標APP。

1.2 方法

1.2.1 貝雷迪四步比較法 通過描述、解釋、并置、比較分析三款APP[5]。描述階段通過收集文獻資料和調取專業市場調研數據報告、登錄APP 對其組織框架、產品定位進行了解、描述。解釋則是利用現有相關領域的研究成果對資料進行綜合分析、了解各要素背后的內在聯系。并置則是將資料系統化，構建分析構架。比較階段將3個APP 進行對比，發現異同點及趨勢，并從情感化設計的本能層設計、行為層設計、反思層設計3個維度做出相應的解釋。

1.2.2 描述與解釋 通過瀏覽交互設計和用戶體驗書籍獲得人機界面設計指南等文本資料，并在中國知網和PubMed 等中英文數據庫查詢國內外移動醫療APP 設計的文獻資料。在廣泛收集資料基礎上進行初步的整理及分析，思考各APP 界面設計要素背后的關系，分析確定APP 界面設計主要要素，并從情感化設計原則3個層次進行解釋及闡述。

1.2.3 并置 并置階段，基于本研究核心概念，情感化設計3個層次——本能層、行為層、反思層3個方面作為比較原則建立分析框架，將APP 界面設計元素按上述3個層次進行歸類，依次并置3個APP 資料，進一步進行層次間的比較，分析存在問題的原因并提出改進措施，從情感化設計原則3個層次進行解釋及闡述。

1.2.4 比較 情感化設計在產品設計中所占據的重要地位[6]，符合情感化設計的產品意義在于：①強化產品特色與不同類型的客戶融合，促使客戶獲得認同感；②提高客戶使用的樂趣及易操作性；③提高APP 的使用率，給用戶帶來安全感。基于其理論產品設計可分為3個層次：本能層、行為層、反思層。本能層的設計代表感官交互，包括界面設計的顏色與圖標、字體大小、頁面布局、目錄分級等[7]；行為層的設計包括簡潔文本、視覺呈現、動態的媒體、行為等[8]；反思層的設計代表情感滿足，包括滿足社交需要、滿足安全需要[9]。

2 結果

2.1 本能層的界面設計

2.1.1 APP 圖標及主題色彩 好大夫在線大拇指logo形象的將其與對醫生的認可和贊揚聯系在一起，微醫圖標采用扁平化設計風格，布局簡潔，平安健康logo 圖形即為其名稱，簡單直觀。好大夫在線主題色以藍色為主，微醫主題色是權威藍、健康綠，平安健康APP 則選用橙色為主題色。三款APP 整體設計顏色則均以白色為底色。

2.1.2 字體格式及大小 好大夫在線中文字體統一使用PingFang SC，英語字體統一使用Helvetica；微醫中文字體統一使PingFang SC，英語字體使用Helvetica Neve；平安健康中文字體和英文字體使用PingFang SC；好大夫在線磅值10～24 pt，微醫磅值24～40 pt，平安健康磅值18～45 pt[10]。

2.1.3 界面布局 移動醫療APP 首頁版圖基本可分為搜索框、基礎服務、特色服務、推薦板塊、底部導航模塊[11，12]。三款APP 首頁最上方均為搜索框，這是所有產品的標配，必不可少的功能，可使患者快捷找到所需內容。三款APP 基本服務均囊括“專家問診”“去掛號”“開藥功能”及“健康信息資源”。三款APP基礎服務各有特點，但主打服務不同，好大夫在線主打推薦醫生，微醫主打掛號功能，好大夫在線和微醫都將基礎板塊單獨放置于最醒目、最易觸及的位置；而平安健康界面設計采用平鋪表現得形式，無側重點。

2.2 行為層的交互設計

2.2.1 簡潔文本 以就醫功能界面設計為例，好大夫在線大標題使用的是“專家問診”，輔以小字體進行進一步解釋“平臺優選三甲專家”；微醫大標題為“看專家”右側配以“三甲”的解釋，輔以小字體進行進一步解釋“24 萬醫生在線接診”；平安健康標題則為“名醫專家”，并未對其內容進行輔助修飾。

2.2.2 視覺呈現 三款APP 均在“我的信息”界面中運用的大量具有隱喻的圖形符號圖標+文字形式，三款APP 的“我的醫生”都配有醫生的象形畫，好大夫在線的“已預約用藥”，微醫的“購藥”，平安好大夫的“我的用藥”均采用膠囊和藥瓶的象形畫。

2.2.3 動態的媒體及反饋 動態媒體主要指隨時間變化的動態的媒體（動畫、聲音、視頻等），可幫助患者跟進知曉項目的進度，有利于患者理解并增加患者的愉悅感[13]，但是濫用又可能適得其反。三款APP在動態媒體設計上并未得到體現，主頁界面均是以靜態文字、圖形進行的意像化表達。

2.2.4 行為 在APP 里，操作手勢是1個十分重要的因素[14]。常用的手勢為：點擊、滑動。三款APP 均有以下特點：激活控件或者選擇1個對象均以點擊操作對界面進行整體瀏覽，對單元項目欄進行瀏覽、或是退出程序時均以滑動操作為主。

2.3 反思層的情感需求設計

2.3.1 滿足社交需要 移動醫療APP 在滿足“專家問診”“去掛號”“開藥功能”“健康信息資源”等基本功能后，好大夫在線、微醫、平安健康均在不同程度上設置了包括醫患交流、患者之間互動的模塊、健康號小科普文章后的評論區域、交流社區對于關注度較高的信息進行置頂。其中微醫“一病多問”將醫患之間的溝通信息分享出來，其他患者可以通過搜索或者推薦的方式進行查看。

2.3.2 滿足安全需要 相對于移動醫療APP 給患者帶來便利性、人性化體驗的同時，安全問題也不容小覷，用戶對個人信息的隱私和數據安全相當重視[15]。三款APP 在瀏覽“交流平臺”“醫生介紹”等無需對患者身份進行識別，但是對于“預約掛號”“支付平臺”“檢查查詢”等涉及患者信息的功能時，必須進行注冊登錄，填寫實名信息，綁定身份證號及手機號。

3 討論

本研究基于情感化設計原則提出在設計移動醫療APP 應在以下方面進行考量：①圖標設計、主題色彩；②常規字體及字號；③界面布局主次性；④文本簡潔性；⑤動態媒體和給與患者反饋相結合；⑥手勢操作規則；⑦患者需求的滿足。

3.1 移動醫療APP 的界面特點 本研究觀察到三款APP 整體設計顏色均以白色為底，主題色加以點綴，藍色傳達理性、可靠、專業，權威藍代表安全、信任，健康綠代表整潔、品質，橙色強調溫暖、活力、積極向上。因此，APP 界面設計上主題色彩以體現健康管理安全、信任、整潔、品質的特色；圖標設計特點應是單一元素、清晰簡約，美觀、易識別的圖形；盡量使用同一種字體，避免給患者帶來界面不連續性、隨意的感覺。根據IOS 人機界面指南給予的系統默認磅值參考值11～34 pt[11]，移動醫療APP 界面字號可按設計需求上下浮動，常規字號大于12 pt；界面布局均將重要內容設置在首頁、易發現、易操作位置，降低患者認知，突出重要內容，增加患者使用簡易度；簡潔文本能幫助患者快速理解APP 功能邏輯及APP 內容信息，減輕患者認知負擔[16]；好大夫在線和微醫的視覺呈現均配以小文字的形式，突出想表達的重要內容，“三甲”“24 萬醫生”，突出信息的可靠性以及平臺的權威性和規模；在主界面迅速讓患者理解界面所表達的意思[16]；APP 需使用標準常用、符合患者認知的手勢操作，不用費力去記憶，并且增加了對屏幕的掌控感[17]。此外，在查看他人的就診記錄時，系統可隱藏患者的關鍵信息。患者可以查看他人的就診記錄，同時參考自身癥狀，進行簡單的自診和分析，不僅能獲得專業人員的意見，同時可獲得病友間、醫患間的支持，從而提高APP 的使用率[18]。

3.2 移動醫療APP 界面的不足 界面布局方面，平安健康各界面圖標功能布局呈平鋪顯示狀態，未突出APP 的重要功能，缺少層級感，患者需尋找相應功能，再繼續完成操作，無形中降低了患者的體驗。分析原因：設計者盡可能展示產品功能的多樣性以及防止操作層級的縱深[19]，從而失去了行為層面交互的簡潔性。建議去繁化簡，突出重點，確立APP 的主推功能并將其單獨呈現。本研究中，三款APP 均采取靜態媒體，雖然在行為層面視覺呈現上抓住了簡單通用特點，但是動態媒體設計效果與給予患者反饋效果相對缺乏，未能視覺化呈現患者的操作結果。如在設計點擊交互按鈕時可設計高亮的動效并配以聲音提示，患者執行復雜且重要的操作（掛號）時，設計動態進度條，告知患者操作進度，告知患者此行為是有效果的（掛號成功了）[18]。另外，建議要提前進行用戶測試以保證效果，防止過度的動畫效果給患者帶來雜亂無章的感覺。本能層和行為層的用戶體驗和反思層滿足患者安全感的平衡關系處理也是一個挑戰。用戶體驗的核心是方便、簡潔、快速，用戶信息的免登錄，數據共享化，能避免患者重復輸入個人信息。另一方面，安全需求總是伴隨繁瑣的步驟操作、重復輸入個人信息，逐漸讓患者失去耐心。因此，尋找一種平衡安全和隱私性，提高用戶體驗的方法，是設計移動醫療APP 時需要考慮的因素[19]。

4 總結

通過界面設計比較得出APP 在情感化設計方面的若干共性：①圖標設計應簡約、美觀、易識別；主題色彩應體現出安全、信任、整潔和品質的特點；②APP 常規字體為PingFang SC；字號大于12 pt；③界面布局突出重要內容，增加使用簡易度；④文本簡潔；用圖片形式代替繁瑣文字；⑤動態媒體和給與患者反饋相結合；⑥使用標準的手勢操作規則；⑦滿足患者社交、安全的需求；⑧本能層和行為層與反思層之間平衡關系。

總之，作為APP 的設計者，幫助他人實現健康管理，根據不同目標患者、人群（醫生、護士、管理者）需求，設計出符合其需求的移動醫療APP，其開發者追求的最終目前。本次僅研究了三款移動醫療APP，在數量方面有所欠缺。其次，盡管分析是由研究人員共同商討完成，但難免存在主觀認識的成分。此外，研究主要通過比較研究，缺乏量性研究，應在后續加強探討不同人群對于移動醫療APP 使用體驗與需求，為APP 設計進行補充。