医疗场景的 AI UI 生成：患者端与医生端的信息架构差异设计

医疗场景的 AI UI 生成：患者端与医生端的信息架构差异设计

一、引言：同一个病例，患者只想看"严重吗"，医生需要看"全部的 27 项指标"

医疗场景的 UI 设计有一个独特的挑战：同一个核心数据（患者的健康信息），需要在两个完全不同的信息架构下呈现。

患者端需要的信息是"降维"的：检查结果是否正常？看哪个指标就行？严重吗？需要做什么？患者不需要也不应该看到那 27 个生化指标——太详细的信息只会制造焦虑。

医生端需要的信息是"升维"的：全部指标、历史对比、异常标记、诊断依据、用药记录、禁忌提示。医生需要在一屏内看到尽可能多的、有临床意义的信息。

AI UI 在医疗场景的核心价值，就是为这两种截然不同的信息架构需求，自动生成各自最优的布局方案。

二、底层机制与原理深度剖析

双端信息优先级矩阵

三、生产级代码实现

/**
* 医疗双端 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: Record<string, 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 设计，本质上是一次"信息的精准投递"。同一份数据，给患者时要做减法——筛掉噪音、消除焦虑、给出行动指引；给医生时要做加法——关联历史、标注异常、自动分析。AI UI 的真正价值是让这个"加减"过程自动化，根据不同角色的信息需求生成各自最优的界面。

作者：李慕杰（Leo / 8limujie）一个在患者焦虑和医生需求之间架桥的前端匠人