前言

本项目研发面向医学教育的医患沟通模拟与评价系统,基于大模型实现智能交互、个性化病例模拟和评分,为医学生提供沉浸式医患沟通实训场景,解决线下标准化病人资源稀缺的问题,提升医学生医患沟通实操能力。本人负责UE5前端工作,语音输入、语音输出功能的制作、UI面板的搭建(主场景、SEGUE评分面板、聊天框等)。本周进行的工作为完善对话界面左侧的滑动菜单功能,包括查看病历和询问AI两个功能的实现,以及优化菜单滑动的效果。

对话界面左侧滑动菜单的整体设计

在原有对话界面(包含聊天框、SEGUE评分面板)的基础上,于屏幕左侧增加了一个可收展的滑动菜单。菜单默认处于半隐藏状态,不遮挡主要对话区域。本周主要对滑动菜单的交互进行了优化,实现鼠标悬停后平滑滑出,鼠标移开之后平滑隐藏。

在优化这个效果的过程中遇到了一些难题:

1.解决UI重叠导致的“高频闪烁(Hover Conflict)”问题

难点: 弹出面板遮挡主按钮时,会导致系统的Hover判定在两个控件间无限循环:鼠标离开主按钮 → 面板开始消失 → 主按钮重新获得Hover → 面板再次弹出 → 反复触发,引发UI剧烈抽搐,用户根本无法正常操作。

优化工作:重构了面板的碰撞响应链,不再依赖默认的自动命中检测。精确配置了容器的 Self Hit Test Invisible(自身命中测试不可见)属性,同时保持其子控件的 Visible 交互状态。
这样一来,面板本身对鼠标事件“透明”,不参与任何命中判定,但内部的子按钮依然能够正常接收点击与悬停。既保证了弹出动画的正常显示,又彻底中断了主按钮与面板间的无限循环。优化后,面板弹出与收回一气呵成,不再出现任何闪烁。

2.重写全局边界事件,实现“无缝悬停”交互流

难点: 原生按钮的 OnUnhovered 事件是“离开即触发”。当玩家鼠标从主按钮移向弹出面板时,鼠标物理上会先离开按钮的热区,此时 OnUnhovered 立即执行,面板瞬间收回。等到鼠标再进入面板时,面板已经消失,形成“死亡断层”——用户永远无法把鼠标挪进面板里。

优化工作:

摒弃了基础的按钮级触发(OnHovered / OnUnhovered),采用 “混合触发流” 设计:

  • 主按钮仅负责正放动画:鼠标进入按钮 → 播放面板弹出动画。

  • 重写整个独立蓝图的 On Mouse Leave 全局事件:只有当鼠标完全离开“按钮 + 面板”整体包围盒时,才触发倒放动画(面板收回)。

通过将按钮和面板视为一个逻辑上的联合热区,利用包围盒的特性,完美实现了鼠标在按钮与面板之间任意滑动的无缝过渡。用户操作手感连贯自然,不再有任何“途中收回”的打断感。

3.实施UI组件化封装

难点: 若在主界面强行实现感应,必须铺设全局透明遮罩,这将导致底层UI(如聊天列表的滑动、其他按钮的点击)被全面拦截死锁。

优化工作: 将悬浮菜单整体剥离,封装为高度独立的 User Widget 控件蓝图。内部自包含全部动画、碰撞逻辑及子按钮响应,对外只暴露极少的控制接口。主界面仅需持有该控件的一个引用,并控制其可见性与位置即可。
该方案不仅彻底根除了透明底板截胡事件的恶性Bug,还极大地降低了主界面的蓝图耦合度。更重要的是,HoverMenu 现在可以在其他界面(如背包悬停、角色面板悬停等)中直接复用,做到“一次封装,多处使用”。

4.实现HoverMenu与聊天界面的通信

难点:
HoverMenu 已完成组件化封装,与主界面解耦。而聊天界面是一个动态、可滚动的独立模块。当玩家在 HoverMenu 上点击某个功能时,需要将指令和数据传递给聊天界面。
如果直接在 HoverMenu 里硬引用聊天界面控件,将破坏组件化成果,导致两个模块强耦合,且在多界面复用时会引发引用空指针或错误绑定。同时,聊天界面中的消息列表可能实时变化,如何确保通信的实时性与准确性也是一个挑战。

优化工作:
引入 事件驱动 的低耦合通信模式,具体实现如下:

  • 定义一个 蓝图接口(Blueprint Interface),其中包含一系列自定义事件节点。

  • 聊天界面的根控件实现该接口,并根据指令类型执行对应的业务逻辑。

  • HoverMenu 不持有任何具体的聊天控件引用,而是在需要通信时,通过 向上查找(Get Owning Player Controller → 获取当前屏幕上的聊天界面实例) 或 全局事件分发器(Event Dispatcher) 来广播指令。

总结:

经过上述优化,本周成功完成了对话界面左侧滑动菜单的核心功能开发与交互体验升级。具体成果如下:

  • 交互优化:彻底解决了菜单弹出/收回过程中的高频闪烁与“死亡断层”问题,实现了鼠标在按钮与面板间的无缝悬停过渡,操作手感顺滑自然。

  • 架构解耦:将滑动菜单封装为高内聚、低耦合的独立控件 HoverMenu,并基于事件驱动机制实现了与聊天界面的安全通信,确保了模块的可复用性与扩展性。

  • 系统稳定:消除了透明遮罩对底层UI事件拦截的隐患,主界面的聊天列表滚动、SEGUE评分等其他交互均未受任何影响。

目前,滑动菜单已能够稳定支撑后续功能扩展(如接入真实病历数据、对接大模型AI问答接口)。下一步计划:

  1. 联调后端接口,完成病历数据的动态绑定与展示。

  2. 接入“询问AI”的实际对话逻辑,并优化聊天界面中的消息格式。

  3. 实现病历查看与“询问AI”两项功能。

整体而言,本周工作为医患沟通模拟系统的沉浸式交互体验奠定了坚实基础,后续将逐步填充业务内容,确保系统按期高质量交付。

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐