醫(yī)療可視化app的設(shè)計(jì)流程分析

在數(shù)字時(shí)代,傳統(tǒng)的醫(yī)療行業(yè)也在互聯(lián)網(wǎng)科技的發(fā)展下飛快轉(zhuǎn)型升級(jí),各種數(shù)字科技輔助醫(yī)療技術(shù),如慢病管理,醫(yī)學(xué)科普,醫(yī)療輔助,Digital Twin 等技術(shù)在行業(yè)內(nèi)大放異彩。從包括政府機(jī)構(gòu),醫(yī)院,藥廠在內(nèi)的各方都在數(shù)字醫(yī)學(xué)領(lǐng)域加大投入。

想象一下,當(dāng)未來世界上每個(gè)公民出生時(shí),可以在醫(yī)療機(jī)構(gòu)生成一個(gè) 3D 數(shù)字雙胞胎。公民的每次血液檢查,CT 掃描都能被輸入到一個(gè) AI 系統(tǒng)當(dāng)中。結(jié)合這些大數(shù)據(jù),用戶能夠通過微信直觀地看到檢查結(jié)果,及基于結(jié)果的后續(xù)預(yù)測(cè)。用戶還能將數(shù)據(jù)授權(quán)給自己信任的醫(yī)療機(jī)構(gòu),實(shí)時(shí)聯(lián)動(dòng)處理身體各項(xiàng)異常情況。而這樣的愿景中的人機(jī)交互,需要一個(gè)可視化的醫(yī)療平臺(tái),能夠展現(xiàn)醫(yī)學(xué)內(nèi)容。

在這樣的背景下,我們醫(yī)療資訊產(chǎn)品中心的設(shè)計(jì)師們,大膽開展想象,提前探索醫(yī)療可視化的未來樣式和使用場(chǎng)景。

實(shí)現(xiàn)效果

 

背景

過去一年中,我們的設(shè)計(jì)團(tuán)隊(duì)在制作醫(yī)學(xué)插畫和視頻上,做了很多 3D 方向的嘗試,同時(shí)也從潘洛思大數(shù)據(jù)團(tuán)隊(duì)中獲得了很多技術(shù)實(shí)現(xiàn)的知識(shí)積累。我們的目標(biāo)是通過 3D 可視化技術(shù),給醫(yī)療行業(yè)提供可視化解決方案。對(duì)于醫(yī)療可視化的想法,通過用戶調(diào)研,同理心分析,我們大致總結(jié)出三種可能的客戶動(dòng)機(jī)和場(chǎng)景。

學(xué)習(xí)探索型:初高中生物課,醫(yī)學(xué)專業(yè)大學(xué)生,對(duì)醫(yī)學(xué)感興趣的探索者。

內(nèi)容科普型:醫(yī)院做患者教育用途,藥廠/醫(yī)療器械長(zhǎng)用于宣傳用途的工具,想直觀了解病因,藥理,手術(shù)治療流程的患者。

專業(yè)使用型:用于醫(yī)療決策的專業(yè)醫(yī)師,科研工作的過程模擬。

這三種目標(biāo)動(dòng)機(jī)的用戶和使用場(chǎng)景當(dāng)中,學(xué)習(xí)探索和內(nèi)容科普都已經(jīng)有比較強(qiáng)烈的剛性需求,能夠解決醫(yī)生「沒時(shí)間」,患者「不理解」的溝通問題。也能解決醫(yī)學(xué)生沒有直觀簡(jiǎn)單免費(fèi)的可視化教材問題。商業(yè)上也能給醫(yī)療行業(yè)帶來一些專業(yè)解決方案。我們對(duì)一些潛在客戶進(jìn)行了簡(jiǎn)單的訪談。

我們發(fā)現(xiàn),在疾病患者與專業(yè)醫(yī)療人士之間,存在信息理解不平等,不透明問題?;颊邥r(shí)常抱怨醫(yī)生沒有把問題解釋清楚,從而遺留很多疑慮。而醫(yī)生往往認(rèn)為沒時(shí)間,也不愿意解釋他們認(rèn)為的「常識(shí)性問題」。這些問題往往是因?yàn)槿狈Ω咝е庇^的信息表達(dá)方式,和傳播渠道。

同時(shí),在醫(yī)學(xué)生的學(xué)習(xí)路徑上,我們了解到現(xiàn)代醫(yī)學(xué)的學(xué)習(xí)過程貫穿著解剖學(xué)內(nèi)容,他們認(rèn)為三維可視化的解剖應(yīng)用也非常重要,但市場(chǎng)上現(xiàn)存的 APP 的價(jià)格相對(duì)較高,部分內(nèi)容不夠精準(zhǔn)完善。

在這三種目標(biāo)動(dòng)機(jī)的用戶及他們的核心訴求當(dāng)中,我們發(fā)現(xiàn)學(xué)習(xí)探索和內(nèi)容科普都已經(jīng)有比較強(qiáng)烈的剛性需求,能夠解決醫(yī)生「沒時(shí)間」,患者「不理解」的溝通問題。也能解決醫(yī)學(xué)生沒有直觀,簡(jiǎn)單,免費(fèi)的可視化教材問題。商業(yè)上也能給醫(yī)療行業(yè)帶來解決方案。我們希望能通過我們的視覺解決方案,在醫(yī)療領(lǐng)域帶來高效、直觀、可視的信息表達(dá)方式與傳播渠道。

并且,為演講環(huán)境設(shè)計(jì)的實(shí)時(shí)渲染 3D 人體可視化,通常展示在 PC 顯示屏或電視屏幕上,有很多的操作需要高效完成。除了傳統(tǒng)的鼠標(biāo)鍵盤操作,我們?yōu)榱巳ゴ蛟靸?yōu)秀的用戶體驗(yàn),這要求我們創(chuàng)造一個(gè)允許在屏幕附近進(jìn)行遠(yuǎn)程操控,甚至語音遠(yuǎn)程操控的體驗(yàn)。對(duì)藥物和手術(shù)原理的動(dòng)畫講解,結(jié)合字幕,使用語音旁白進(jìn)行解釋。

 

通過上面的案例,我們總結(jié)出這樣的系統(tǒng)需要的是一個(gè)展示 3D 人體的平臺(tái)。用戶有這些需求:

1.3D 人體器官的展示,縮放,查看,器官獨(dú)立,拆解操作

2.內(nèi)容支持動(dòng)畫播放,同時(shí)能在場(chǎng)景中隨時(shí)暫停,并隨意探索

3.支持多層級(jí)的內(nèi)容表達(dá)

4.支持遠(yuǎn)程觸屏操控

5.支持顯示字幕和機(jī)器朗讀

6.基于 VR/AR 技術(shù)的手術(shù)流程模擬

7.基于醫(yī)療影像還原真實(shí)人體情況

需求優(yōu)先級(jí)推導(dǎo)

通過上面的用戶需求羅列,我們可以發(fā)現(xiàn),如果按需形成產(chǎn)品,產(chǎn)品形態(tài)將非常復(fù)雜,可預(yù)期的成本也非常高。我們通過時(shí)間管理優(yōu)先矩陣(Prioritization Matrix)進(jìn)行一個(gè)簡(jiǎn)單的優(yōu)先級(jí)分析和排列。

我們發(fā)現(xiàn)早期階段中,我們需要將精力集中在人體和器官的展示查看,盡量實(shí)現(xiàn)遠(yuǎn)程操控,字幕朗讀等功能,在原型階段暫時(shí)把醫(yī)學(xué)影像與手術(shù)模擬等實(shí)現(xiàn)成本高,專業(yè)下潛深的需求放到一邊。我們追求大膽想象,但一步一個(gè)腳印。

產(chǎn)品架構(gòu)規(guī)劃

由于醫(yī)療內(nèi)容數(shù)據(jù)量大,在可預(yù)知的未來會(huì)處于不斷擴(kuò)充的狀態(tài)。產(chǎn)品應(yīng)做到全程連接云端內(nèi)容數(shù)據(jù)庫(kù),能夠支持動(dòng)態(tài)拉取,動(dòng)態(tài)下載數(shù)據(jù)。移動(dòng)端不需要單獨(dú)配置,僅需使用普通智能手機(jī),掃碼連接云端,即可控制大屏。云端還需要部署 API 中間層,支持機(jī)器生成的語音旁白朗讀。

交互架構(gòu)落地

根據(jù)背景的支持屬性,我們選擇了以治療肺癌藥物:PD-1/PD-L1 藥物藥理作用展示為主題。這個(gè)不僅涵蓋了人體的呼吸系統(tǒng),還涉及生物系統(tǒng)中三個(gè)層級(jí)的展示,分別是宏觀的身體層級(jí)(人體),微觀層級(jí)(器官內(nèi))和微分子層級(jí)(細(xì)胞)的展示。選擇這個(gè)主題進(jìn)行原型化,能夠很好的涵蓋大多數(shù)未來的產(chǎn)品能力和應(yīng)用場(chǎng)景。

通過用戶訪談和對(duì)競(jìng)品的了解,我們可以定義三個(gè)醫(yī)學(xué)模型的基礎(chǔ)交互,分別是獨(dú)立,分解和隱藏。分別做到單獨(dú)查看器官,分解器官,和隱藏器官查看結(jié)構(gòu)關(guān)系的功能。

這三個(gè)能力貫穿產(chǎn)品的整體交互邏輯,對(duì)于場(chǎng)景內(nèi)的 3D 物件均是適用的,符合用戶的探索,學(xué)習(xí)需求。

在這個(gè)典型場(chǎng)景當(dāng)中,我們將用戶的交互流程主要分為五個(gè)階段,分別呈現(xiàn)入口,3D 探索界面,提供導(dǎo)航且交互與 3D 聯(lián)動(dòng)的目錄,內(nèi)容播放界面和出口部分。

由此,我們的交互界面主要以 3D 展示內(nèi)容為中心,2D 內(nèi)容/目錄菜單作輔助的形式。3D 部分根據(jù) 2D 目錄的交互變換相應(yīng)的內(nèi)容。3D 中心區(qū)域占較大空間,作為視覺焦點(diǎn)區(qū)域,保證內(nèi)容的傳達(dá)。2D 輔助區(qū)域置放于 3D 區(qū)域的左側(cè),符合大多數(shù)語言文字從左到右的閱讀順序,既適合大屏閱讀又適合觸控操作。顯示邏輯均為單頁(yè)刷新,沒有大幅度的頁(yè)面跳轉(zhuǎn)動(dòng)畫。

遠(yuǎn)程操控界面沿襲大屏端的界面設(shè)計(jì),因已有大屏展示 3D 內(nèi)容,移動(dòng)端不必要加載 3D 內(nèi)容,而消耗無意義的性能和電池壽命。我們可以將右側(cè) 3D 內(nèi)容區(qū)調(diào)整為觸控區(qū),像 PS4 手柄或一些筆記本觸摸板一樣,用點(diǎn)陣吸引用戶的第一次觸碰行為,教育用戶使用觸控區(qū)域。觸控界面中的左側(cè)主要還原界面的目錄菜單項(xiàng),但不再需要顯示內(nèi)容。

由于初期項(xiàng)目主要以演示為主,我們認(rèn)為有需要在產(chǎn)品引入一個(gè)演示模式。類似電器城電視專柜,在系統(tǒng)一段時(shí)間沒有任何操作輸入時(shí),將自動(dòng)開始從頭到尾播放。這要求事先制作設(shè)定一個(gè)腳本,自動(dòng)點(diǎn)擊指定項(xiàng)并播放。

 

由于可預(yù)期的內(nèi)容更新強(qiáng)度,和內(nèi)容的豐富性。我們也有必要簡(jiǎn)單做一個(gè)數(shù)據(jù)管理端設(shè)計(jì)。

3D視覺設(shè)計(jì)的運(yùn)用

1. 模型制作的前期思考

實(shí)際微觀層級(jí)中的細(xì)胞模型,實(shí)現(xiàn)的細(xì)節(jié)非常繁瑣。醫(yī)療領(lǐng)域是非常嚴(yán)謹(jǐn)?shù)?,我們?cè)谥谱鲿r(shí)首先要考慮到真實(shí)性,還原度。但在真實(shí)的同時(shí),還要考慮到用戶是否可以接受血腥和不適感。以及模型復(fù)雜,高面數(shù)潛在上給引擎帶來的性能負(fù)擔(dān)。

我們簡(jiǎn)單列舉其中一個(gè)癌癥細(xì)胞模型的思考,提煉和制作過程。

我們先從專業(yè)的醫(yī)學(xué)知識(shí)文獻(xiàn),或者醫(yī)藥廠家專業(yè)的文章中,尋求真實(shí)專業(yè)的參考。我們從參考中提取物體的形體,代入用戶觀感,去思考應(yīng)該用怎么樣的材質(zhì)表現(xiàn),讓用戶更好的理解,提供更好的觀影感受。通過這些思考,得出最后的成品。

2. 模型制作的具體實(shí)現(xiàn)

基于 UNREAL 引擎的特點(diǎn),在制作模型的思路上,我們選擇了偏向次時(shí)代的制作流程,在高模中雕刻出細(xì)節(jié),然后拓?fù)涑龅湍?,把高模?xì)節(jié)以各種貼圖的形式賦予到低模上。用到的貼圖有:法線貼圖(NormalMap),顏色貼圖(DiffuseMap),高光貼圖(Specular maps),AO貼圖(Ambient Occlusiont)等。

模型貼圖(以肋骨為例)

在 3D 軟件里將高模和低模做完:

 

在 Substance Painter 里烘焙出相關(guān)的貼圖并貼到低模上:

 

材質(zhì)(以肺為例)

 

具體實(shí)現(xiàn)效果:

3. 場(chǎng)景和鏡頭的運(yùn)用

雖然這個(gè) demo 并不像其他影視和游戲作品那么復(fù)雜,但是在疾病/藥物原理等邏輯性較強(qiáng)的敘述里,少不了分鏡的運(yùn)用。一個(gè)合理初始場(chǎng)景設(shè)計(jì),線性的階梯的切入各個(gè)切分場(chǎng)景,能夠讓用戶感覺更連貫,更容易理解,更有代入感。

落地方案

 

大圖

初次展示

2018 年 7 月份,我們的項(xiàng)目第一次在騰訊用戶開放日 TDay 的騰訊醫(yī)典展臺(tái)上,向公眾開放演示。獲得了很多熱情用戶的關(guān)注,大家問的最多的問題就是,什么時(shí)候可以在家中,醫(yī)療場(chǎng)所中真切的使用到這款產(chǎn)品。

后續(xù)探索

人機(jī)交互和可視化的價(jià)值在于連接,我們能夠運(yùn)行可視的醫(yī)學(xué)內(nèi)容,將患者與醫(yī)生,醫(yī)療機(jī)構(gòu),醫(yī)藥企業(yè)等連接起來,讓復(fù)雜專業(yè)的醫(yī)療信息能被更多人查看,理解,操作和模擬。拉近普通人與「高大上」的醫(yī)學(xué)領(lǐng)域之間的隔閡,拉近基層醫(yī)師和前沿研究之間的隔閡,拉近醫(yī)學(xué)機(jī)構(gòu)與先進(jìn)技術(shù)之間的隔閡,更好的解決專業(yè)信息不透明不對(duì)等的問題。

我們的下一步,也會(huì)努力豐富產(chǎn)品的內(nèi)容,建立一個(gè)完善的基礎(chǔ)內(nèi)容體系。同時(shí)將使我們的產(chǎn)品更容易分享和傳播,結(jié)合騰訊醫(yī)典平臺(tái)傳遞健康與信賴。我們也將繼續(xù)探索 CT/MRI 醫(yī)學(xué)影像還原,VR/AR 手術(shù)流程模擬等前沿科技。

 

 

 

原創(chuàng) : 騰訊CSIG醫(yī)療資訊產(chǎn)品中心設(shè)計(jì)組

原文鏈接:https://docs.qq.com/doc/DU3liYkNuckhLRWFj

每天更新,
全站高品質(zhì)素材免費(fèi)下載!