专业的设计流程是怎样的?来看腾讯的医学可视化探索案例! - 优设网 - UISDC

专业的设计流程是怎样的?来看腾讯的医学可视化探索案例!

2019/05/07 13155评论 5

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

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

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

实现效果

背景

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

  • 学习探索型:初高中生物课,医学专业大学生,对医学感兴趣的探索者。
  • 内容科普型:医院做患者教育用途,药厂/医疗器械长用于宣传用途的工具,想直观了解病因,药理,手术治疗流程的患者。
  • 专业使用型:用于医疗决策的专业医师,科研工作的过程模拟。

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

我们发现,在疾病患者与专业医疗人士之间,存在信息理解不平等,不透明问题?;颊呤背1г挂缴挥邪盐侍饨馐颓宄?,从而遗留很多疑虑。而医生往往认为没时间,也不愿意解释他们认为的「常识性问题」。这些问题往往是因为缺乏高效直观的信息表达方式,和传播渠道。

同时,在医学生的学习路径上,我们了解到现代医学的学习过程贯穿着解剖学内容,他们认为三维可视化的解剖应用也非常重要,但市场上现存的 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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/tencent-medical-visualization-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里