腾讯医疗3D可视化产品中的探索,展示和原型

在数字时代,传统的医疗行业也在互联网科技的发展下飞快转型升级,各种数字科技辅助医疗技术,如慢病管理,医学科普,医疗辅助,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
本文由 设计开开眼 作者:小开开 发表,其版权均为 设计开开眼 所有,文章内容系作者个人观点,不代表 设计开开眼 对观点赞同或支持。如需转载,请注明文章来源。
4

发表评论