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

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

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

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

1 對象與方法

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

1.2 方法

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

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

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

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

2 結(jié)果

2.1 本能層的界面設計

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

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

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

2.2 行為層的交互設計

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

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

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

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

2.3 反思層的情感需求設計

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

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

3 討論

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

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

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

4 總結(jié)

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

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