Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Perfil

Perfil & Ajustes -> Vista Principal

Propósito: Vista de solo lectura con foto, datos básicos, ciclo actual y estadisticas
JTBD: “Quiero ver mi información de un vistazo”
Ruta: /paciente/perfil
Módulo: PAM-9


Features

# Feature Descripción Prioridad
1 Foto de perfil Avatar circular con iniciales si no hay foto P0
2 Datos básicos Nombre, edad, ciudad P0
3 Ciclo actual Fase actual del ciclo preventivo con progreso P1
4 Estadisticas Días activa, check-ins completados, exámenes cargados P1
5 CTA editar Botón para ir a edición de datos P1

States

Perfil Completo

  • Visual: Foto + nombre + todos los datos llenos + stats
  • Ejemplo: María Garcia, 32 años, Medellín. Ciclo 1 - Fase 3. 45 días activa, 38 check-ins.

Perfil Incompleto

  • Trigger: Faltan datos obligatorios (peso, fecha nacimiento, ciudad)
  • Visual: Banner azul (#0f2fc7) arriba: “Completa tu perfil para mejores recomendaciones”
  • CTA: [Completar perfil] navega a datos personales

Cargando

  • Visual: Skeleton shimmer en avatar + 4 líneas de texto + 3 stat cards
  • Copy: “Cargando tu perfil…”

Datos Mostrados

Dato Objeto Propiedad Ejemplo
Nombre Paciente nombre María Garcia
Edad Paciente edad 32 años
Ciudad Paciente ciudad Medellín
Email Paciente email maria@email.com
Ciclo actual Ciclo nombre Ciclo 1 - Fase 3
Días activa Paciente dias_activa 45 días
Check-ins Estadisticas total_checkins 38
Exámenes Estadisticas total_examenes 3

Acciones

Acción Tipo Resultado
Tap “Editar perfil” Navegación Abre datos personales
Tap ciclo actual Navegación Abre detalle del ciclo
Tap “Completar perfil” Navegación Abre datos personales (campos faltantes)

  • Origen: Tab Perfil en navegación principal
  • Destino editar: Datos Personales (/paciente/perfil/datos)
  • Destino ciclo: Detalle de ciclo
  • Back: Dashboard