医疗可视化app的设计流程分析

在数字时代，传统的医疗行业也在互联网科技的发展下飞快转型升级，各种数字科技辅助医疗技术，如慢病管理，医学科普，医疗辅助，Digital Twin 等技术在行业内大放异彩。从包括政府机构，医院，药厂在内的各方都在数字医学领域加大投入。

想象一下，当未来世界上每个公民出生时，可以在医疗机构生成一个 3D 数字双胞胎。公民的每次血液检查，CT 扫描都能被输入到一个 AI 系统当中。结合这些大数据，用户能够通过微信直观地看到检查结果，及基于结果的后续预测。用户还能将数据授权给自己信任的医疗机构，实时联动处理身体各项异常情况。而这样的愿景中的人机交互，需要一个可视化的医疗平台，能够展现医学内容。

在这样的背景下，我们医疗资讯产品中心的设计师们，大胆开展想象，提前探索医疗可视化的未来样式和使用场景。

实现效果

背景

过去一年中，我们的设计团队在制作医学插画和视频上，做了很多 3D 方向的尝试，同时也从潘洛思大数据团队中获得了很多技术实现的知识积累。我们的目标是通过 3D 可视化技术，给医疗行业提供可视化解决方案。对于医疗可视化的想法，通过用户调研，同理心分析，我们大致总结出三种可能的客户动机和场景。

学习探索型：初高中生物课，医学专业大学生，对医学感兴趣的探索者。

内容科普型：医院做患者教育用途，药厂/医疗器械长用于宣传用途的工具，想直观了解病因，药理，手术治疗流程的患者。

专业使用型：用于医疗决策的专业医师，科研工作的过程模拟。

这三种目标动机的用户和使用场景当中，学习探索和内容科普都已经有比较强烈的刚性需求，能够解决医生「没时间」，患者「不理解」的沟通问题。也能解决医学生没有直观简单免费的可视化教材问题。商业上也能给医疗行业带来一些专业解决方案。我们对一些潜在客户进行了简单的访谈。

我们发现，在疾病患者与专业医疗人士之间，存在信息理解不平等，不透明问题。患者时常抱怨医生没有把问题解释清楚，从而遗留很多疑虑。而医生往往认为没时间，也不愿意解释他们认为的「常识性问题」。这些问题往往是因为缺乏高效直观的信息表达方式，和传播渠道。

同时，在医学生的学习路径上，我们了解到现代医学的学习过程贯穿着解剖学内容，他们认为三维可视化的解剖应用也非常重要，但市场上现存的 APP 的价格相对较高，部分内容不够精准完善。

在这三种目标动机的用户及他们的核心诉求当中，我们发现学习探索和内容科普都已经有比较强烈的刚性需求，能够解决医生「没时间」，患者「不理解」的沟通问题。也能解决医学生没有直观，简单，免费的可视化教材问题。商业上也能给医疗行业带来解决方案。我们希望能通过我们的视觉解决方案，在医疗领域带来高效、直观、可视的信息表达方式与传播渠道。

并且，为演讲环境设计的实时渲染 3D 人体可视化，通常展示在 PC 显示屏或电视屏幕上，有很多的操作需要高效完成。除了传统的鼠标键盘操作，我们为了去打造优秀的用户体验，这要求我们创造一个允许在屏幕附近进行远程操控，甚至语音远程操控的体验。对药物和手术原理的动画讲解，结合字幕，使用语音旁白进行解释。

通过上面的案例，我们总结出这样的系统需要的是一个展示 3D 人体的平台。用户有这些需求：

1.3D 人体器官的展示，缩放，查看，器官独立，拆解操作

2.内容支持动画播放，同时能在场景中随时暂停，并随意探索

3.支持多层级的内容表达

4.支持远程触屏操控

5.支持显示字幕和机器朗读

6.基于 VR/AR 技术的手术流程模拟

7.基于医疗影像还原真实人体情况

需求优先级推导

通过上面的用户需求罗列，我们可以发现，如果按需形成产品，产品形态将非常复杂，可预期的成本也非常高。我们通过时间管理优先矩阵（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 手术流程模拟等前沿科技。

原创 : 腾讯CSIG医疗资讯产品中心设计组

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