Pantalla: Vista de Interacciones
Identificador: SCR-MED-009
Modulo: MTS-MED-001 - Gestion de Medicamentos
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Vista de Interacciones |
| Proposito |
Mostrar todas las interacciones detectadas entre medicamentos |
| Tipo |
Full Screen |
| Acceso |
Lista > Menu > Interacciones / Badge de alerta |
| Prioridad |
Alta |
2. Wireframe ASCII
2.1. Vista Principal - Con Interacciones
+------------------------------------------+
| [<] Interacciones [Info] |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [i] Esta informacion es orientativa. ||
| | Consulta siempre con tu medico. || <- Disclaimer
| +------------------------------------+ |
| |
| 2 interacciones detectadas |
| |
| +------------------------------------+ |
| | [!!] SERIO || <- Severity badge
| | ||
| | Metformina + Losartan ||
| | ||
| | Puede potenciar el efecto ||
| | hipoglucemiante. Monitorear niveles ||
| | de glucosa. ||
| | ||
| | [Ver detalles >] ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [!] MODERADO ||
| | ||
| | Omeprazol + Metformina ||
| | ||
| | Puede aumentar la absorcion de ||
| | metformina ligeramente. ||
| | ||
| | [Ver detalles >] ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [?] No estas seguro? ||
| | Comparte esta informacion con ||
| | tu medico o farmaceutico. ||
| | ||
| | [Compartir resumen] ||
| +------------------------------------+ |
| |
+------------------------------------------+
2.2. Vista: Sin Interacciones
+------------------------------------------+
| [<] Interacciones [Info] |
+------------------------------------------+
| |
| |
| |
| +----------------+ |
| | | |
| | [Ilustracion | |
| | Check mark] | |
| | | |
| +----------------+ |
| |
| Todo en orden |
| |
| No se detectaron interacciones |
| entre tus medicamentos actuales. |
| |
| +--------------------------------+ |
| | [i] Verificamos automaticamente| |
| | cada vez que agregas un | |
| | nuevo medicamento. | |
| +--------------------------------+ |
| |
| |
| |
+------------------------------------------+
2.3. Detalle de Interaccion
+------------------------------------------+
| [<] Interaccion [Share] |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [!!] SERIO ||
| +------------------------------------+ | <- Severity banner
| |
| Medicamentos involucrados |
| +------------------------------------+ |
| | [Pill] Metformina 850mg ||
| | 2x dia ||
| +------------------------------------+ |
| +------------------------------------+ |
| | [Cap] Losartan 50mg ||
| | 1x dia ||
| +------------------------------------+ |
| |
| Que significa esta interaccion? |
| +------------------------------------+ |
| | El losartan puede aumentar el ||
| | efecto de la metformina para bajar ||
| | el azucar en sangre. ||
| | ||
| | Esto podria causar hipoglucemia ||
| | (azucar baja) en algunos casos. ||
| +------------------------------------+ |
| |
| Que puedes hacer? |
| +------------------------------------+ |
| | * Monitorea tus niveles de glucosa ||
| | mas frecuentemente ||
| | * Presta atencion a sintomas como ||
| | mareos, sudoracion o debilidad ||
| | * Consulta con tu medico si tienes ||
| | dudas ||
| +------------------------------------+ |
| |
| Fuente |
| +------------------------------------+ |
| | DrugBank | Actualizado: Nov 2025 ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [i] Esta informacion NO reemplaza ||
| | el consejo de tu medico. ||
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Severity Banner/Badge
| Severidad |
Color |
Icono |
Texto |
| CONTRAINDICADO |
error.main |
[!!!] |
"CONTRAINDICADO" |
| SERIO |
error.light |
[!!] |
"SERIO" |
| MODERADO |
warning.main |
[!] |
"MODERADO" |
| MENOR |
info.main |
[i] |
"MENOR" |
3.2. Interaction Card
| Elemento |
Especificacion |
| Severity badge |
Chip con color e icono |
| Medication pair |
Texto "{med1} + {med2}" |
| Description |
Texto resumido (max 3 lineas) |
| CTA |
"Ver detalles >" link |
| Touch target |
Full card, 80dp min height |
3.3. Disclaimer Banner
| Propiedad |
Valor |
| Background |
neutral.100 |
| Icono |
Info |
| Texto |
Disclaimer legal |
| Posicion |
Top, siempre visible |
3.4. Share Action
| Formato |
Contenido |
| Texto |
Resumen de interacciones |
| PDF |
Documento formateado |
| Screenshot |
Captura de pantalla |
4. Niveles de Severidad
4.1. CONTRAINDICADO
+------------------------------------+
| [!!!] CONTRAINDICADO | <- Rojo intenso
| |
| {Med A} + {Med B} |
| |
| Esta combinacion esta |
| CONTRAINDICADA. Estos medicamentos |
| NO deben usarse juntos. |
| |
| CONSULTA CON TU MEDICO |
| INMEDIATAMENTE. |
| |
| [Llamar a emergencias] | <- Si aplica
| [Ver detalles] |
+------------------------------------+
4.2. Acciones por Severidad
| Severidad |
Accion UI |
| CONTRAINDICADO |
Modal bloqueante, CTA a contactar medico |
| SERIO |
Card prominente, sugerir consulta |
| MODERADO |
Card informativa, monitoreo sugerido |
| MENOR |
Card sutil, solo informativo |
5. Datos Requeridos
interface InteractionsScreenData {
interactions: DrugInteraction[];
lastUpdated: Date;
medications: PatientMedication[];
}
interface DrugInteraction {
id: string;
medicationA: {
id: string;
name: string;
dosage: string;
};
medicationB: {
id: string;
name: string;
dosage: string;
};
severity: 'CONTRAINDICATED' | 'SERIOUS' | 'MODERATE' | 'MINOR';
description: string;
effect: string;
recommendation: string;
source: string;
sourceDate: Date;
}
5.2. Output Events
| Evento |
Payload |
Destino |
| onInteractionTap |
interaction_id |
Detail view |
| onShare |
interaction_id, format |
Share sheet |
| onMedicationTap |
medication_id |
SCR-MED-002 |
| onContactDoctor |
- |
Phone/message intent |
6. Accesibilidad
6.1. Prioridades de Anuncio
| Severidad |
aria-live |
Prioridad |
| CONTRAINDICADO |
assertive |
Inmediato |
| SERIO |
assertive |
Alto |
| MODERADO |
polite |
Normal |
| MENOR |
polite |
Bajo |
6.2. Labels
| Elemento |
accessibilityLabel |
| Severity badge |
"Severidad: {nivel}. {descripcion nivel}" |
| Interaction card |
"Interaccion {severidad} entre {medA} y {medB}. {descripcion}" |
| Share button |
"Compartir informacion de interaccion" |
| Detail CTA |
"Ver detalles de esta interaccion" |
6.3. Anuncios
| Evento |
Anuncio |
| Pantalla cargada |
"{n} interacciones detectadas. La mas seria es {severidad}" |
| Sin interacciones |
"No se detectaron interacciones entre tus medicamentos" |
| Detalle abierto |
"Interaccion {severidad}: {descripcion corta}" |
6.4. Color + Iconos
- Severidad NUNCA indicada solo por color
- Siempre icono + texto + color
- Contraste minimo 4.5:1 para texto sobre banners
7. Disclaimer Legal
7.1. Texto Requerido
"La informacion sobre interacciones medicamentosas presentada en esta aplicacion tiene caracter exclusivamente informativo y orientativo. No constituye consejo medico ni sustituye la consulta con profesionales de la salud. Siempre consulte con su medico o farmaceutico antes de tomar decisiones sobre su tratamiento."
7.2. Ubicacion
- Banner persistente en parte superior
- Repetido en cada detalle de interaccion
- Incluido en cualquier exportacion/compartir
8. Integraciones
8.1. Con MTS-INT-001 (Interacciones Med-Med)
- Obtiene datos de interacciones
- Actualiza automaticamente al agregar medicamentos
8.2. Con MTS-NTF-001 (Notificaciones)
- Notificacion push si se detecta nueva interaccion SERIA o CONTRAINDICADA
8.3. Con MTS-RPT-001 (Reportes)
- Incluir interacciones en reportes para medico
9. Metricas
| Evento |
Parametros |
| interactions_view |
count, max_severity |
| interaction_detail_view |
interaction_id, severity |
| interaction_share |
interaction_id, format |
| interaction_medication_tap |
medication_id |
| no_interactions_view |
medications_count |
10. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)