2020-5-16 ui設(shè)計(jì)分享達(dá)人
可視化是利用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù),將數(shù)據(jù)轉(zhuǎn)換成圖形或圖像在屏幕上顯示出來(lái),再進(jìn)行交互處理的理論、方法和技術(shù)。面對(duì)醫(yī)療行業(yè),如何將行業(yè)數(shù)據(jù),轉(zhuǎn)化為視覺(jué)可視化中的點(diǎn)線面,是在這個(gè)項(xiàng)目中需要思考的問(wèn)題。
本文將帶來(lái)設(shè)計(jì)師在醫(yī)療院感可視化項(xiàng)目中的設(shè)計(jì)過(guò)程及思考,講述如何在業(yè)務(wù)場(chǎng)景下對(duì)數(shù)據(jù)進(jìn)行抽取表達(dá)。通過(guò)可視化打破傳統(tǒng)院感系統(tǒng)的表單呈現(xiàn),使院感場(chǎng)景具備互動(dòng)性、觀賞性,滿足不同角色的使用需求。同時(shí)院感醫(yī)生通過(guò)可視化的解決方案能清晰直觀的了解到院感發(fā)生分布、病例分析,從而控制院感發(fā)生和預(yù)防。
本項(xiàng)目以浙江省建德市第一人民醫(yī)院為案例,地理數(shù)據(jù)以建德醫(yī)院坐標(biāo)為準(zhǔn)。
項(xiàng)目背景
院感是什么?院感為醫(yī)院感染,入院48小時(shí)內(nèi)都有可能感染到院感細(xì)菌。在醫(yī)院里有專門的院感醫(yī)生職位,對(duì)醫(yī)院感染進(jìn)行有效的預(yù)防與控制。而傳統(tǒng)院感管理的工作流:醫(yī)護(hù)人員及院感醫(yī)生 > 院感系統(tǒng)分析疑似病例 > 得出結(jié)論預(yù)防或治療。這種偏人工的方式數(shù)據(jù)獲取方式,無(wú)法更的獲取院感發(fā)生的原因、定位、以及未來(lái)的院感預(yù)測(cè)。
P1 因此我們通過(guò)對(duì)醫(yī)院數(shù)據(jù)的整理,抽離出影響院感的數(shù)據(jù),將院感發(fā)生、發(fā)展、管控、治療、預(yù)測(cè)全流程進(jìn)行整合。
P2 通過(guò)醫(yī)院>樓層>人員三個(gè)層面,空間和時(shí)間兩個(gè)維度對(duì)院感展示。打破傳統(tǒng)院感系統(tǒng)的表單呈現(xiàn),使院感場(chǎng)景具備互動(dòng)性、觀賞性,滿足不同角色的使用需求:如院長(zhǎng)的展示性需求。院感醫(yī)生通過(guò)可視化的解決方案能清晰直觀的了解到院感發(fā)生分布、病例分析,從而控制院感發(fā)生和預(yù)防。
P3 同時(shí)在這樣的設(shè)計(jì)場(chǎng)景下,可以覆蓋的醫(yī)療業(yè)務(wù)場(chǎng)景和數(shù)據(jù)單位也會(huì)更多元,具有一定的商業(yè)化價(jià)值。
P4 設(shè)計(jì)流程
整個(gè)項(xiàng)目的設(shè)計(jì)流程可以分為4個(gè)階段:信息收集、可視化、線上搭建、效果調(diào)試。在此項(xiàng)目實(shí)踐中,重點(diǎn)投入在前三大部分。
P5 Part1信息收集
我們基于項(xiàng)目背景,梳理要展現(xiàn)的數(shù)據(jù)指標(biāo),對(duì)整體業(yè)務(wù)場(chǎng)景進(jìn)行故事腳本的規(guī)劃(即如何展現(xiàn)前期的數(shù)據(jù)收集,并把其串聯(lián)在整體業(yè)務(wù)場(chǎng)景中),設(shè)定動(dòng)作攝像機(jī)語(yǔ)言,同時(shí)也需要了解最終呈現(xiàn)的硬件設(shè)備與使用環(huán)境。
P6 Part2可視化
1.交互信息框架
首先梳理院感的信息框架和交互方式。
整個(gè)大屏分為院樓層,呈現(xiàn)整體院感數(shù)據(jù)的統(tǒng)計(jì);樓層屏,作為重點(diǎn)病區(qū)的監(jiān)測(cè)預(yù)測(cè);個(gè)人屏,分析病例回溯病程,從而預(yù)測(cè)院感。三屏之間相互跳轉(zhuǎn), 交互演示方式從醫(yī)院的外部跳轉(zhuǎn)內(nèi)部結(jié)構(gòu)、再到患者的個(gè)人維度,三屏都分別展示相關(guān)的數(shù)據(jù)指標(biāo)。
P7 2.視覺(jué)風(fēng)格
在大屏視效風(fēng)格探索上,期初的目標(biāo)是希望可以打造不一樣行業(yè)視覺(jué)語(yǔ)言,所以選擇不同于以往的設(shè)計(jì)大屏風(fēng)格,選擇白色的風(fēng)格,符合大家對(duì)醫(yī)護(hù)行業(yè)的認(rèn)知。但到中期發(fā)現(xiàn),在硬件設(shè)備上展示發(fā)是過(guò)曝的。因此對(duì)設(shè)計(jì)風(fēng)格進(jìn)行調(diào)整改為X光片的風(fēng)格,色系上偏冷綠的感覺(jué)。這是在這個(gè)項(xiàng)目中的試錯(cuò)經(jīng)驗(yàn)之一。
P8 3.建模設(shè)計(jì)
在可視化部分中遇到的難點(diǎn):建筑模型的高還原。下圖為建德第一人民醫(yī)院實(shí)拍圖。在大屏項(xiàng)目中,必須真實(shí)還原地理位置。而在此醫(yī)院沒(méi)有清晰的CAD圖紙?zhí)峁┑?;在Google的衛(wèi)星地圖下也沒(méi)有的建筑結(jié)構(gòu)的,所以我在建模的過(guò)程中,是踩了坑的,先盲畫(huà)了一版,但是精細(xì)度不夠,過(guò)于粗糙。
P9 因此我反復(fù)看得到的資料,通過(guò)在確定地理氛圍內(nèi),去豐富場(chǎng)景。這樣的好處是使業(yè)務(wù)場(chǎng)景更加豐富,包括擴(kuò)展到院外的車流數(shù)據(jù),為業(yè)務(wù)場(chǎng)景提供更多可能性 當(dāng)然后期也搖到了建筑內(nèi)部的消防圖,根據(jù)消防圖繪制內(nèi)部結(jié)構(gòu)。
P10 4.數(shù)據(jù)面板
對(duì)可視化組件的組件進(jìn)行設(shè)計(jì):時(shí)間篩選、數(shù)據(jù)統(tǒng)計(jì)、占比關(guān)系、趨勢(shì)分析。設(shè)計(jì)之前也參考了很多概念版的可視化設(shè)計(jì),希望在院感屏上可以呈現(xiàn)一種科技概念的感覺(jué)。
P11 Part3線上搭建
1.獲取地理數(shù)據(jù)
這部分是非常耗時(shí)的,datav是數(shù)據(jù)驅(qū)動(dòng)的可視化產(chǎn)品,在搭建部分,是全程依靠datav平臺(tái)的。
首先需要明確地理數(shù)據(jù),通過(guò)高德數(shù)據(jù)通過(guò)點(diǎn)線成面,可以作為場(chǎng)景定位,也就是物理模型的經(jīng)緯度數(shù)據(jù) 后面還原數(shù)據(jù)效果,造虛擬數(shù)據(jù),是非常依賴于這個(gè)坐標(biāo)數(shù)據(jù)的。
119.291724 , 29.472365
這是建德醫(yī)院的坐標(biāo),醫(yī)院在地圖上的數(shù)據(jù)是很簡(jiǎn)化的,顆粒度很大,具體位置無(wú)法顯示。
P12 因此我們需要建立與地理數(shù)據(jù)綁定的建模,先對(duì)位置。
P13 在這個(gè)過(guò)程中我發(fā)現(xiàn),如果最開(kāi)始沒(méi)有對(duì)準(zhǔn)位置,也不用緊張,可以在DATAV平臺(tái)增加hook數(shù)據(jù)過(guò)濾器,解決地理數(shù)據(jù)與世界坐標(biāo)無(wú)法對(duì)齊的問(wèn)題。
2.線上場(chǎng)景還原
根據(jù)對(duì)確定過(guò)位置模型進(jìn)行烘焙還原。這個(gè)過(guò)程中遇到了一些不知名的原因烘焙失敗,原因可能是命名有中文/位置數(shù)據(jù)錯(cuò)誤/模型塊面復(fù)雜等,遇到這樣的問(wèn)題就需要重新從頭檢查烘焙流程每一步。
P14 3.數(shù)據(jù)維度展示還原
這一步我們需要把前期做好的數(shù)據(jù)可視化效果,還原到線上模型中。在這一步我遇到的問(wèn)題是因建德醫(yī)院內(nèi)部具體結(jié)構(gòu)的缺失,使一些可視化效果無(wú)法精準(zhǔn)匹配到模型上。所以設(shè)計(jì)過(guò)程中只能依賴于在對(duì)的地理位置上豐富的場(chǎng)景內(nèi)造數(shù)據(jù),這個(gè)過(guò)程是比較吃力的。
P15 這個(gè)問(wèn)題的解決辦法是通過(guò)開(kāi)發(fā)工具和導(dǎo)出的結(jié)構(gòu)俯視圖,對(duì)位置,然后轉(zhuǎn)化出LEGO的數(shù)據(jù)
P16 在數(shù)據(jù)效果還原的過(guò)程中,也發(fā)現(xiàn)我在前期設(shè)計(jì)的數(shù)據(jù)效果,不能全部實(shí)現(xiàn),有些是依賴于開(kāi)發(fā)的 。這時(shí)可以通過(guò)其他組件效果代替嘗試,比如熱力的效果用粒子放大,通過(guò)參數(shù)調(diào)節(jié)得到熱力 再比如局部房間的掃管,通過(guò)設(shè)計(jì)部分多次烘焙模型,不斷疊加掃光層,得到房間監(jiān)測(cè)的效果
P17 設(shè)計(jì)小結(jié)
綜合以上的經(jīng)驗(yàn),院感可視化從設(shè)計(jì)到落地,整體結(jié)構(gòu)應(yīng)該是這樣從物理基礎(chǔ)坐標(biāo)的獲取、到場(chǎng)景搭建、再到數(shù)據(jù)展示的過(guò)程。在這個(gè)過(guò)程中會(huì)用到DATAV、C4D、數(shù)據(jù)庫(kù)、簡(jiǎn)單的代碼等技術(shù)來(lái)實(shí)現(xiàn)。
P18 這個(gè)項(xiàng)目雖然這只是醫(yī)療行業(yè)中一個(gè)小的業(yè)務(wù)場(chǎng)景,但我們的業(yè)務(wù)數(shù)據(jù)提取及可視化設(shè)計(jì)思路,他不僅限于醫(yī)療行業(yè),同時(shí)也可以成為場(chǎng)館類大屏解決方案的一部分,是具有一定商業(yè)化價(jià)值的。同時(shí)在這過(guò)程中沉淀下來(lái)的人體結(jié)構(gòu)模型,和一些設(shè)計(jì)經(jīng)驗(yàn),是可以復(fù)用到對(duì)應(yīng)行業(yè)解決方案中,達(dá)到提效。
轉(zhuǎn)自:
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com