Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Nivel de Salud Preview

Dashboard --> Componente Hero (Pantalla 2 de 5)

Propósito: Mostrar el Health Score del usuario como elemento dominante del dashboard con sparkline de tendencia.
JTBD: “Quiero ver que estoy progresando”
Ruta: /inicio (componente dentro del dashboard)
Módulo: PAM-6

Features

# Feature Descripción Prioridad
1 Score prominente Número grande (78) en lado izquierdo, bg-[#0f2fc7] P0
2 Sparkline 30 días Gráfico de tendencia en lado derecho, bg-[#0A0F1E] P0
3 Delta vs inicio “+10 vs hace 30 días” debajo del sparkline P0
4 Edad biológica Dato secundario: “34 años” en el lado derecho P1
5 Tappable Tap izquierdo: detalle score. Tap sparkline: gráfico 90 días P0

States

Loading

  • Visual: Skeleton shimmer en card completa, shape de número + línea (500ms)
  • Duración: <800ms
  • Copy: ninguno

Loaded (Normal)

  • Visual: Split-screen card (col-span-6, min-height 280px). Lado izquierdo (40%): bg-[#0f2fc7], radial glow, número ~120pt. Lado derecho (60%): bg-[#0A0F1E], sparkline en #3B82F6, glow dot, datos secundarios.
  • Datos: Score actual, histórico 30 días, edad biológica, delta

Sin Datos

  • Trigger: Labs pendientes, score no calculado aun
  • Visual: Card con “–” en lugar de número, sparkline vacia
  • Copy: “Tu Nivel de Salud estara listo cuando tengamos tus exámenes.”
  • CTA: [Ver estado] --> /perfil-pendiente

Error

  • Trigger: Engine no responde
  • Copy: “No pudimos calcular tu nivel de salud.”
  • CTA: [Reintentar]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Score NivelDeSalud score 78
Tendencia NivelDeSalud histórico [68, 70, 72, 74, 76, 78]
Delta NivelDeSalud diferencia_inicio +10
Edad biológica NivelDeSalud edad_biologica 34
Diferencia edad NivelDeSalud diferencia_edad -2.4 años

Acciones

Acción Tipo Resultado
Tap lado izquierdo Tap Navega a /progreso/nivel-salud (breakdown 6 dominios)
Tap sparkline Tap Navega a gráfico completo 90 días
Hover sparkline Hover (desktop) Tooltip con fecha + valor
  • Viene de: Carga del dashboard
  • Va a: Nivel de Salud detalle, Gráfico histórico
  • Back: Dashboard (es un componente inline)