Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Datos Personales

Perfil & Ajustes -> Editar Datos

Propósito: Editar nombre, peso, fecha de nacimiento y ciudad del usuario
JTBD: “Quiero actualizar mis datos para que mis recomendaciones sean precisas”
Ruta: /paciente/perfil/datos
Módulo: PAM-9


Features

# Feature Descripción Prioridad
1 Campo nombre Input de texto editable P0
2 Campo peso Input numerico con unidad (kg) P0
3 Fecha nacimiento Date picker nativo P0
4 Ciudad Selector o input con autocompletado P1
5 Foto de perfil Cambiar desde camara o galeria P2
6 Botón guardar Válida y persiste cambios P0

States

Editando

  • Visual: Formulario con campos pre-llenados y editables
  • CTA: [Guardar cambios] habilitado cuando hay cambios

Guardando

  • Visual: Botón “Guardar” en estado loading (spinner dentro del botón)
  • Inputs: Deshabilitados durante el guardado

Error de Validación

  • Trigger: Peso fuera de rango (30-250 kg), nombre vacio, fecha futura
  • Visual: Borde rojo en campo inválido + mensaje inline
  • Ejemplo: “El peso debe estar entre 30 y 250 kg”
  • CTA: [Guardar] deshabilitado hasta corregir

Datos Mostrados

Dato Objeto Propiedad Ejemplo
Nombre Paciente nombre María Garcia
Peso Paciente peso 62 kg
Fecha nacimiento Paciente fecha_nacimiento 15 Mar, 1994
Ciudad Paciente ciudad Medellín
Foto Paciente avatar_url maria_avatar.jpg

Acciones

Acción Tipo Resultado
Editar campo Interacción Habilita botón guardar
Guardar cambios Primaria Válida, persiste, toast “Datos actualizados”
Cancelar Secundaria Descarta cambios, vuelve a perfil
Cambiar foto Secundaria Abre camara o galeria

  • Origen: Perfil > “Editar perfil” o “Completar perfil”
  • Destino guardar: Perfil (con datos frescos) + toast de confirmación
  • Back: Perfil (sin cambios)