医疗场景的 AI UI 生成患者端与医生端的信息架构差异设计一、引言同一个病例患者只想看严重吗医生需要看全部的 27 项指标医疗场景的 UI 设计有一个独特的挑战同一个核心数据患者的健康信息需要在两个完全不同的信息架构下呈现。患者端需要的信息是降维的检查结果是否正常看哪个指标就行严重吗需要做什么患者不需要也不应该看到那 27 个生化指标——太详细的信息只会制造焦虑。医生端需要的信息是升维的全部指标、历史对比、异常标记、诊断依据、用药记录、禁忌提示。医生需要在一屏内看到尽可能多的、有临床意义的信息。AI UI 在医疗场景的核心价值就是为这两种截然不同的信息架构需求自动生成各自最优的布局方案。二、底层机制与原理深度剖析双端信息优先级矩阵信息类别患者端优先级医生端优先级核心诊断结论P0必须简化为通俗语言P0异常指标P0仅 3-5 个关键指标P0全部异常标注正常指标P2隐藏P1需要查看历史趋势P1仅总体趋势P0每个指标详细趋势诊断依据P2不需要P0必须关联药物交互P3不显示P0自动检查三、生产级代码实现/** * 医疗双端 UI 生成引擎 * * 从同一份患者数据生成患者端和医生端两种 UI Schema */ /** 患者医疗数据 */ interface PatientRecord { patientId: string; /** 检查项目列表 */ labResults: LabResult[]; /** 医嘱 */ prescriptions: Prescription[]; /** 诊断 */ diagnoses: Diagnosis[]; } interface LabResult { name: string; value: number; unit: string; normalRange: [number, number]; // [下限, 上限] isAbnormal: boolean; severity: normal | borderline | abnormal | critical; /** 历史值用于趋势图 */ history: Array{ date: string; value: number }; } /** * 患者端 UI 生成器 * * 核心原则降维 通俗化 消除焦虑 */ class PatientViewGenerator { generate(record: PatientRecord): PatientViewUI { // 第一步只筛选异常或有临床意义的指标 const keyResults record.labResults.filter( r r.isAbnormal || r.severity borderline ).slice(0, 5); // 限制最多展示 5 项 // 第二步生成通俗语言描述 const summary this.generatePlainLanguageSummary(keyResults); // 第三步构建简化的 UI schema return { summary, keyIndicators: keyResults.map(r ({ name: this.translateToPlainName(r.name), value: r.value, unit: r.unit, status: r.isAbnormal ? attention : normal, statusText: this.getStatusText(r) })), suggestions: this.generateSuggestions(record), // 不展示详细历史趋势、所有正常指标、诊断依据 hideHistoryCharts: true, hideNormalResults: true }; } /** 把医学术语翻译成通俗语言 */ private translateToPlainName(medicalName: string): string { const translations: Recordstring, string { GLU: 血糖, ALT: 肝功能转氨酶, CREA: 肾功能肌酐, WBC: 白细胞, HGB: 血红蛋白, TC: 总胆固醇, TG: 甘油三酯 }; return translations[medicalName] || medicalName; } /** 生成通俗状态文字 */ private getStatusText(result: LabResult): string { if (result.severity critical) return 需要关注; if (result.severity abnormal) return 略微偏高; if (result.severity borderline) return 接近上限; return 正常; } /** 生成通俗摘要 */ private generatePlainLanguageSummary(results: LabResult[]): string { const criticalOnes results.filter(r r.severity critical); const abnormalOnes results.filter(r r.severity abnormal); if (criticalOnes.length 0) { return 您有 ${criticalOnes.length} 项指标需要特别关注建议尽快咨询医生; } if (abnormalOnes.length 0) { return 您有 ${abnormalOnes.length} 项指标略有异常建议定期复查; } return 您的各项指标基本正常请继续保持; } private generateSuggestions(record: PatientRecord): string[] { // AI 根据异常指标自动生成生活建议 const suggestions: string[] []; const results record.labResults; if (results.find(r r.name TC r.isAbnormal)) { suggestions.push(建议减少高脂食物摄入增加蔬菜比例); } if (results.find(r r.name GLU r.isAbnormal)) { suggestions.push(建议控制甜食和碳水化合物的摄入量); } return suggestions; } } /** * 医生端 UI 生成器 * * 核心原则全量 分析增强 效率优化 */ class DoctorViewGenerator { generate(record: PatientRecord): DoctorViewUI { return { // 所有指标含异常标注 allResults: record.labResults.map(r ({ ...r, // 异常值用红色标记 highlight: r.isAbnormal, // 严重程度 priority: r.severity })), // 历史趋势图每个指标都有 trendCharts: record.labResults.map(r ({ name: r.name, data: r.history, chartType: line, // 标注正常范围 normalBand: r.normalRange })), // 异常值汇总区 abnormalSummary: record.labResults .filter(r r.isAbnormal) .sort((a, b) { const order { critical: 0, abnormal: 1, borderline: 2 }; return order[a.severity] - order[b.severity]; }), // 药物禁忌检查 drugInteractions: this.checkDrugInteractions(record), // 完整信息展示 hideHistoryCharts: false, hideNormalResults: false }; } private checkDrugInteractions(record: PatientRecord): DrugInteraction[] { // AI 检查药物间的相互作用 // 简化示例 return []; } } interface PatientViewUI { summary: string; keyIndicators: any[]; suggestions: string[]; hideHistoryCharts: boolean; hideNormalResults: boolean; } interface DoctorViewUI { allResults: any[]; trendCharts: any[]; abnormalSummary: LabResult[]; drugInteractions: DrugInteraction[]; hideHistoryCharts: boolean; hideNormalResults: boolean; } interface DrugInteraction { drug1: string; drug2: string; severity: contraindicated | caution | monitor; description: string; }四、边界分析与架构权衡关键缺点患者端过度简化可能导致信息缺失——某个不关键的指标可能对某些患者很关键通俗化翻译可能引入语义偏差——医学上偏高和异常增高是不同的法律风险——生成UI的建议被患者理解为医疗建议患者端和医生端的UI必须同步更新——医生修改了诊断患者端要立即更新五、总结医疗场景的双端 UI 设计本质上是一次信息的精准投递。同一份数据给患者时要做减法——筛掉噪音、消除焦虑、给出行动指引给医生时要做加法——关联历史、标注异常、自动分析。AI UI 的真正价值是让这个加减过程自动化根据不同角色的信息需求生成各自最优的界面。作者李慕杰Leo / 8limujie一个在患者焦虑和医生需求之间架桥的前端匠人
