2020-5-16 ui设计分享达人
可视化是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，再进行交互处理的理论、方法和技术。面对医疗行业，如何将行业数据，转化为视觉可视化中的点线面，是在这个项目中需要思考的问题。
本文将带来设计师在医疗院感可视化项目中的设计过程及思考，讲述如何在业务场景下对数据进行抽取表达。通过可视化打破传统院感系统的表单呈现，使院感场景具备互动性、观赏性，满足不同角色的使用需求。同时院感医生通过可视化的解决方案能清晰直观的了解到院感发生分布、病例分析，从而控制院感发生和预防。
本项目以浙江省建德市第一人民医院为案例，地理数据以建德医院坐标为准。
项目背景
院感是什么？院感为医院感染，入院48小时内都有可能感染到院感细菌。在医院里有专门的院感医生职位，对医院感染进行有效的预防与控制。而传统院感管理的工作流：医护人员及院感医生 > 院感系统分析疑似病例 > 得出结论预防或治疗。这种偏人工的方式数据获取方式，无法更的获取院感发生的原因、定位、以及未来的院感预测。
P1 因此我们通过对医院数据的整理，抽离出影响院感的数据，将院感发生、发展、管控、治疗、预测全流程进行整合。
P2 通过医院>楼层>人员三个层面，空间和时间两个维度对院感展示。打破传统院感系统的表单呈现，使院感场景具备互动性、观赏性，满足不同角色的使用需求：如院长的展示性需求。院感医生通过可视化的解决方案能清晰直观的了解到院感发生分布、病例分析，从而控制院感发生和预防。
P3 同时在这样的设计场景下，可以覆盖的医疗业务场景和数据单位也会更多元，具有一定的商业化价值。
P4 设计流程
整个项目的设计流程可以分为4个阶段：信息收集、可视化、线上搭建、效果调试。在此项目实践中，重点投入在前三大部分。
P5 Part1信息收集
我们基于项目背景，梳理要展现的数据指标，对整体业务场景进行故事脚本的规划（即如何展现前期的数据收集，并把其串联在整体业务场景中），设定动作摄像机语言，同时也需要了解最终呈现的硬件设备与使用环境。
P6 Part2可视化
1.交互信息框架
首先梳理院感的信息框架和交互方式。
整个大屏分为院楼层，呈现整体院感数据的统计；楼层屏，作为重点病区的监测预测；个人屏，分析病例回溯病程，从而预测院感。三屏之间相互跳转， 交互演示方式从医院的外部跳转内部结构、再到患者的个人维度，三屏都分别展示相关的数据指标。
P7 2.视觉风格
在大屏视效风格探索上，期初的目标是希望可以打造不一样行业视觉语言，所以选择不同于以往的设计大屏风格，选择白色的风格，符合大家对医护行业的认知。但到中期发现，在硬件设备上展示发是过曝的。因此对设计风格进行调整改为X光片的风格，色系上偏冷绿的感觉。这是在这个项目中的试错经验之一。
P8 3.建模设计
在可视化部分中遇到的难点：建筑模型的高还原。下图为建德第一人民医院实拍图。在大屏项目中，必须真实还原地理位置。而在此医院没有清晰的CAD图纸提供的；在Google的卫星地图下也没有的建筑结构的，所以我在建模的过程中，是踩了坑的，先盲画了一版，但是精细度不够，过于粗糙。
P9 因此我反复看得到的资料，通过在确定地理氛围内，去丰富场景。这样的好处是使业务场景更加丰富，包括扩展到院外的车流数据，为业务场景提供更多可能性 当然后期也摇到了建筑内部的消防图，根据消防图绘制内部结构。
P10 4.数据面板
对可视化组件的组件进行设计：时间筛选、数据统计、占比关系、趋势分析。设计之前也参考了很多概念版的可视化设计，希望在院感屏上可以呈现一种科技概念的感觉。
P11 Part3线上搭建
1.获取地理数据
这部分是非常耗时的，datav是数据驱动的可视化产品，在搭建部分，是全程依靠datav平台的。
首先需要明确地理数据，通过高德数据通过点线成面，可以作为场景定位，也就是物理模型的经纬度数据 后面还原数据效果，造虚拟数据，是非常依赖于这个坐标数据的。
119.291724 , 29.472365
这是建德医院的坐标，医院在地图上的数据是很简化的，颗粒度很大，具体位置无法显示。
P12 因此我们需要建立与地理数据绑定的建模，先对位置。
P13 在这个过程中我发现，如果最开始没有对准位置，也不用紧张，可以在DATAV平台增加hook数据过滤器，解决地理数据与世界坐标无法对齐的问题。
2.线上场景还原
根据对确定过位置模型进行烘焙还原。这个过程中遇到了一些不知名的原因烘焙失败，原因可能是命名有中文/位置数据错误/模型块面复杂等，遇到这样的问题就需要重新从头检查烘焙流程每一步。
P14 3.数据维度展示还原
这一步我们需要把前期做好的数据可视化效果，还原到线上模型中。在这一步我遇到的问题是因建德医院内部具体结构的缺失，使一些可视化效果无法精准匹配到模型上。所以设计过程中只能依赖于在对的地理位置上丰富的场景内造数据，这个过程是比较吃力的。
P15 这个问题的解决办法是通过开发工具和导出的结构俯视图，对位置，然后转化出LEGO的数据
P16 在数据效果还原的过程中，也发现我在前期设计的数据效果，不能全部实现，有些是依赖于开发的 。这时可以通过其他组件效果代替尝试，比如热力的效果用粒子放大，通过参数调节得到热力 再比如局部房间的扫管，通过设计部分多次烘焙模型，不断叠加扫光层，得到房间监测的效果
P17 设计小结
综合以上的经验，院感可视化从设计到落地，整体结构应该是这样从物理基础坐标的获取、到场景搭建、再到数据展示的过程。在这个过程中会用到DATAV、C4D、数据库、简单的代码等技术来实现。
P18 这个项目虽然这只是医疗行业中一个小的业务场景，但我们的业务数据提取及可视化设计思路，他不仅限于医疗行业，同时也可以成为场馆类大屏解决方案的一部分，是具有一定商业化价值的。同时在这过程中沉淀下来的人体结构模型，和一些设计经验，是可以复用到对应行业解决方案中，达到提效。
转自：
P12 因此我们需要建立与地理数据绑定的建模，先对位置。
P13 在这个过程中我发现，如果最开始没有对准位置，也不用紧张，可以在DATAV平台增加hook数据过滤器，解决地理数据与世界坐标无法对齐的问题。
P14 3.数据维度展示还原
P17 设计小结
P18 这个项目虽然这只是医疗行业中一个小的业务场景，但我们的业务数据提取及可视化设计思路，他不仅限于医疗行业，同时也可以成为场馆类大屏解决方案的一部分，是具有一定商业化价值的。同时在这过程中沉淀下来的人体结构模型，和一些设计经验，是可以复用到对应行业解决方案中，达到提效。