Design
Pantallas
Para qué

Especificación detallada de cada pantalla: datos mostrados, estados, acciones disponibles y navegación.

Audiencia

Diseño e ingeniería.

Inicio (Dashboard Principal)

Dashboard --> Pantalla 1 de 5

Propósito: El usuario ve su estado de salud de un vistazo y sabe qué hacer hoy.
JTBD: “Quiero ver que estoy progresando”
Ruta: /inicio
Módulo: PAM-6

Features

# Feature Descripción Prioridad
1 Hero: Nivel de Salud Score split-screen con sparkline 30 días P0
2 Plan del dia Checklist de suplementos/hábitos del dia P0
3 Próxima cita Card con fecha, tipo y preparación P0
4 Adherencia semanal Racha y porcentaje de la semana P1
5 Edad biológica Dato motivacional con delta vs cronológica P1
6 Alertas banner Banner si hay alertas nuevas sin leer P1
7 Accesos rápidos Mi Plan, Progreso, Exámenes, Trayectoria, Ajustes P1
8 Header sticky “Buenos días, María” + notificaciones + perfil P0

States

Loading (Primera vez)

  • Visual: Skeleton shimmer completo: header, hero card, cards de soporte (500ms)
  • Duración: <800ms, staggered fadeInUp por card
  • Copy: “Cargando tu salud…”

Loading (Subsecuente)

  • Visual: Skeleton shimmer rápido (200ms)
  • Duración: <300ms

Loaded (Normal)

  • Visual: Bento grid 6 columnas. Hero split-screen (col-span-6, 280px min). Plan del dia + Próxima cita (col-span-3 cada uno). Adherencia + Edad biológica (col-span-3 cada uno). Accesos rápidos (col-span-6).
  • Datos: Health Score, plan activo, cita próxima, adherencia, edad biológica

Empty (Sin datos)

  • Trigger: Onboarding incompleto o labs pendientes
  • Visual: Ilustración + mensaje centrado
  • Copy: “Completa tu onboarding para ver tus datos de salud.”
  • CTA: [Ir a onboarding] --> /onboarding

Error

  • Trigger: Fallo cargando datos del engine
  • Copy: “No pudimos cargar tus datos. Intenta de nuevo.”
  • CTA: [Reintentar]

Health Coach Offline

  • Trigger: Servicio de IA no disponible
  • Visual: Card del coach en gris
  • Copy: “Asistente de salud no disponible”
  • CTA: [Contactar médico en vivo]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Health Score NivelDeSalud score 78
Delta score NivelDeSalud diferencia_inicio +10 vs hace 30 días
Edad biológica NivelDeSalud edad_biologica 34 años
Delta edad NivelDeSalud diferencia_edad 2.4 años más joven
Plan completados Plan completados_hoy 1 de 4
Próxima cita tipo Cita tipo Laboratorio Control
Próxima cita fecha Cita fecha 15 Ene, 8:00 AM
Adherencia semana Plan porcentaje_hoy 87%
Dia del ciclo Ciclo dia_actual Dia 45 de 90

Acciones

Acción Tipo Resultado
Tap hero card Tap Navega a /progreso/nivel-salud
Tap sparkline Tap Navega a gráfico completo 90 días
Marcar item plan Tap checkbox Completa item, actualiza contador
Tap “Ver plan” Tap Navega a /plan
Tap próxima cita Tap Navega a /citas/:id
Tap edad biológica Tap Navega a /progreso/edad-biológica
Tap acceso rápido Tap Navega a la sección correspondiente
Tap notificaciones Tap icono Navega a /notificaciones
Tap perfil Tap avatar Navega a /perfil
  • Viene de: Login exitoso, deep link, tab bar “Inicio”
  • Va a: Nivel de Salud, Plan del Dia, Citas, Progreso, Edad Biológica, Notificaciones, Perfil
  • Back: No aplica (es la pantalla raiz)