專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

在數字時代,傳統的醫療行業也在互聯網科技的發展下飛快轉型升級,各種數字科技輔助醫療技術,如慢病管理,醫學科普,醫療輔助,Digital Twin 等技術在行業內大放異彩。從包括政府機構,醫院,藥廠在內的各方都在數字醫學領域加大投入。

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

在這樣的背景下,我們醫療資訊產品中心的設計師們,大膽開展想象,提前探索醫療可視化的未來樣式和使用場景。

實現效果

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

背景

過去一年中,我們的設計團隊在制作醫學插畫和視頻上,做了很多 3D 方向的嘗試,同時也從潘洛思大數據團隊中獲得了很多技術實現的知識積累。我們的目標是通過 3D 可視化技術,給醫療行業提供可視化解決方案。對于醫療可視化的想法,通過用戶調研,同理心分析,我們大致總結出三種可能的客戶動機和場景。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

  • 學習探索型:初高中生物課,醫學專業大學生,對醫學感興趣的探索者。
  • 內容科普型:醫院做患者教育用途,藥廠/醫療器械長用于宣傳用途的工具,想直觀了解病因,藥理,手術治療流程的患者。
  • 專業使用型:用于醫療決策的專業醫師,科研工作的過程模擬。

這三種目標動機的用戶和使用場景當中,學習探索和內容科普都已經有比較強烈的剛性需求,能夠解決醫生「沒時間」,患者「不理解」的溝通問題。也能解決醫學生沒有直觀簡單免費的可視化教材問題。商業上也能給醫療行業帶來一些專業解決方案。我們對一些潛在客戶進行了簡單的訪談。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

我們發現,在疾病患者與專業醫療人士之間,存在信息理解不平等,不透明問題。患者時常抱怨醫生沒有把問題解釋清楚,從而遺留很多疑慮。而醫生往往認為沒時間,也不愿意解釋他們認為的「常識性問題」。這些問題往往是因為缺乏高效直觀的信息表達方式,和傳播渠道。

同時,在醫學生的學習路徑上,我們了解到現代醫學的學習過程貫穿著解剖學內容,他們認為三維可視化的解剖應用也非常重要,但市場上現存的 APP 的價格相對較高,部分內容不夠精準完善。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

在這三種目標動機的用戶及他們的核心訴求當中,我們發現學習探索和內容科普都已經有比較強烈的剛性需求,能夠解決醫生「沒時間」,患者「不理解」的溝通問題。也能解決醫學生沒有直觀,簡單,免費的可視化教材問題。商業上也能給醫療行業帶來解決方案。我們希望能通過我們的視覺解決方案,在醫療領域帶來高效、直觀、可視的信息表達方式與傳播渠道。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

并且,為演講環境設計的實時渲染 3D 人體可視化,通常展示在 PC 顯示屏或電視屏幕上,有很多的操作需要高效完成。除了傳統的鼠標鍵盤操作,我們為了去打造優秀的用戶體驗,這要求我們創造一個允許在屏幕附近進行遠程操控,甚至語音遠程操控的體驗。對藥物和手術原理的動畫講解,結合字幕,使用語音旁白進行解釋。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

通過上面的案例,我們總結出這樣的系統需要的是一個展示 3D 人體的平臺。用戶有這些需求:

  • 3D 人體器官的展示,縮放,查看,器官獨立,拆解操作
  • 內容支持動畫播放,同時能在場景中隨時暫停,并隨意探索
  • 支持多層級的內容表達
  • 支持遠程觸屏操控
  • 支持顯示字幕和機器朗讀
  • 基于 VR/AR 技術的手術流程模擬
  • 基于醫療影像還原真實人體情況

需求優先級推導

通過上面的用戶需求羅列,我們可以發現,如果按需形成產品,產品形態將非常復雜,可預期的成本也非常高。我們通過時間管理優先矩陣(Prioritization Matrix)進行一個簡單的優先級分析和排列。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

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

產品架構規劃

由于醫療內容數據量大,在可預知的未來會處于不斷擴充的狀態。產品應做到全程連接云端內容數據庫,能夠支持動態拉取,動態下載數據。移動端不需要單獨配置,僅需使用普通智能手機,掃碼連接云端,即可控制大屏。云端還需要部署 API 中間層,支持機器生成的語音旁白朗讀。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

交互架構落地

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

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

通過用戶訪談和對競品的了解,我們可以定義三個醫學模型的基礎交互,分別是獨立,分解和隱藏。分別做到單獨查看器官,分解器官,和隱藏器官查看結構關系的功能。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

這三個能力貫穿產品的整體交互邏輯,對于場景內的 3D 物件均是適用的,符合用戶的探索,學習需求。

在這個典型場景當中,我們將用戶的交互流程主要分為五個階段,分別呈現入口,3D 探索界面,提供導航且交互與 3D 聯動的目錄,內容播放界面和出口部分。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

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

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

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

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

由于初期項目主要以演示為主,我們認為有需要在產品引入一個演示模式。類似電器城電視專柜,在系統一段時間沒有任何操作輸入時,將自動開始從頭到尾播放。這要求事先制作設定一個腳本,自動點擊指定項并播放。

由于可預期的內容更新強度,和內容的豐富性。我們也有必要簡單做一個數據管理端設計。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

3D視覺設計的運用

1. 模型制作的前期思考

實際微觀層級中的細胞模型,實現的細節非常繁瑣。醫療領域是非常嚴謹的,我們在制作時首先要考慮到真實性,還原度。但在真實的同時,還要考慮到用戶是否可以接受血腥和不適感。以及模型復雜,高面數潛在上給引擎帶來的性能負擔。

我們簡單列舉其中一個癌癥細胞模型的思考,提煉和制作過程。

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

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

2. 模型制作的具體實現

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

模型貼圖(以肋骨為例)

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

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

在 Substance Painter 里烘焙出相關的貼圖并貼到低模上:

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

材質(以肺為例)

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

具體實現效果:

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

3. 場景和鏡頭的運用

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

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

落地方案

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

大圖:

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

初次展示

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

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

專業的設計流程是怎樣的?來看騰訊的醫學可視化探索案例!

后續探索

人機交互和可視化的價值在于連接,我們能夠運行可視的醫學內容,將患者與醫生,醫療機構,醫藥企業等連接起來,讓復雜專業的醫療信息能被更多人查看,理解,操作和模擬。拉近普通人與「高大上」的醫學領域之間的隔閡,拉近基層醫師和前沿研究之間的隔閡,拉近醫學機構與先進技術之間的隔閡,更好的解決專業信息不透明不對等的問題。

我們的下一步,也會努力豐富產品的內容,建立一個完善的基礎內容體系。同時將使我們的產品更容易分享和傳播,結合騰訊醫典平臺傳遞健康與信賴。我們也將繼續探索 CT/MRI 醫學影像還原,VR/AR 手術流程模擬等前沿科技。

Leader: 鄭桂春
交互/UI開發:吳健鋒
3D美術:李慧, 梁詩平, 史潞丹
技術美術:Nadir Whitelaw
收藏 84
點贊 10

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。