Pantalla: Bienvenida¶

Identificador: SCR-ONB-001 Modulo: MTS-ONB-001 - Onboarding Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado

1. Informacion General¶

Atributo	Valor
Nombre	Bienvenida
Proposito	Primera pantalla post-auth, presentar propuesta de valor
Tipo	Full Screen (paso 1 de onboarding)
Acceso	Automatico despues de auth exitoso (usuario nuevo)
Prioridad	Critica

2. Wireframe ASCII¶

2.1. Estado: Bienvenida con Nombre¶

+------------------------------------------+
|  Paso 1 de 8  ====--------------  12%    |  <- Progress bar
+------------------------------------------+
|                                          |
|                                          |
|          +--------------------+          |
|          |                    |          |
|          |   [Ilustracion     |          |
|          |    celebracion     |          |
|          |    con confetti]   |          |
|          |                    |          |
|          +--------------------+          |
|                                          |
|        Bienvenido/a, Maria!              |  <- Nombre de OAuth
|                                          |
|   Estas a punto de tomar el control      |
|   de tu salud como nunca antes.          |
|                                          |
|                                          |
|   MedTime te ayudara a:                  |
|                                          |
|   [check] Nunca olvidar tus medicamentos |
|   [check] Llevar un historial completo   |
|   [check] Compartir con tu medico        |
|   [check] Proteger tu privacidad         |
|                                          |
|                                          |
|  +------------------------------------+  |
|  |           Comenzar                 |  |  <- Primary CTA
|  +------------------------------------+  |
|                                          |
+------------------------------------------+

2.2. Estado: Bienvenida Sin Nombre (fallback)¶

+------------------------------------------+
|  Paso 1 de 8  ====--------------  12%    |
+------------------------------------------+
|                                          |
|          +--------------------+          |
|          |   [Ilustracion]    |          |
|          +--------------------+          |
|                                          |
|          Bienvenido/a a MedTime!         |  <- Sin nombre
|                                          |
|   Estas a punto de tomar el control      |
|   de tu salud como nunca antes.          |
|                                          |
|   ...                                    |
|                                          |
|  +------------------------------------+  |
|  |           Comenzar                 |  |
|  +------------------------------------+  |
|                                          |
+------------------------------------------+

3. Componentes UI¶

3.1. Progress Bar¶

Propiedad	Valor
Componente	CMP-DAT-009 (Progress Bar)
Posicion	Top, debajo de status bar
Height	4dp
Color filled	primary
Color empty	neutral.200
Texto	"Paso 1 de 8"

3.2. Ilustracion¶

Propiedad	Valor
Tipo	Vector/Lottie animada
Tema	Celebracion, persona feliz
Tamano	180x180dp
Animacion	Loop suave de confetti
Posicion	Center, 20% from top

3.3. Titulo de Bienvenida¶

Propiedad	Valor
Texto	"Bienvenido/a, {nombre}!" o "Bienvenido/a a MedTime!"
Tipografia	2xl (24sp), bold, neutral.900
Alineacion	Center

3.4. Subtitulo¶

Propiedad	Valor
Texto	"Estas a punto de tomar el control de tu salud como nunca antes."
Tipografia	md (16sp), regular, neutral.700
Alineacion	Center
Max width	300dp

3.5. Lista de Beneficios¶

Propiedad	Valor
Items	4 beneficios con checkmarks
Icono	Check circle, success color
Texto	md (16sp), regular, neutral.800
Spacing	12dp entre items

3.6. Boton Comenzar¶

Propiedad	Valor
Componente	CMP-BTN-001 (Primary Button)
Texto	"Comenzar"
Height	56dp
Width	Full width - 32dp margins
Posicion	Bottom, 32dp margin

4. Comportamientos¶

4.1. Logica de Personalizacion¶

function getWelcomeTitle(user: User): string {
  if (user.name && user.name.length > 0) {
    return `Bienvenido/a, ${user.name}!`;
  }
  return "Bienvenido/a a MedTime!";
}

4.2. Gestos¶

Gesto	Elemento	Accion
Tap	Boton Comenzar	Navegar a SCR-ONB-002

4.3. Animacion de Entrada¶

SECUENCIA DE ENTRADA:

0-200ms: Ilustracion fade in + scale (0.9 -> 1.0)
200-400ms: Titulo fade in + slide up
400-600ms: Subtitulo fade in
600-900ms: Beneficios stagger fade in (50ms delay cada uno)
900-1100ms: Boton fade in + slide up

REDUCED MOTION:
- Todos elementos visible inmediatamente
- Sin slide, solo opacity

5. Accesibilidad¶

5.1. Labels y Hints¶

Elemento	accessibilityLabel	accessibilityHint
Progress	"Paso 1 de 8, 12% completado"	-
Ilustracion	"Ilustracion de bienvenida"	-
Titulo	"{titulo completo}"	-
Beneficio 1	"Beneficio: Nunca olvidar tus medicamentos"	-
Comenzar	"Comenzar"	"Continua al siguiente paso del registro"

5.2. Orden de Foco¶

Progress indicator
Titulo
Subtitulo
Lista de beneficios (como grupo)
Boton Comenzar

Evento	Anuncio
Pantalla cargada	"Bienvenida a MedTime. Paso 1 de 8."
Focus en beneficios	"Lista de 4 beneficios"

6. Datos Requeridos¶

6.1. Input Data¶

interface WelcomeScreenData {
  user_name?: string;  // From OAuth
  user_email?: string;
  provider: 'google' | 'apple';
}

6.2. Output Events¶

Evento	Payload	Destino
onContinue	-	SCR-ONB-002

7. Metricas¶

7.1. Analytics Events¶

Evento	Parametros
screen_view	screen_name: "onboarding_welcome"
onboarding_started	-
welcome_continue	time_on_screen_ms

8. Referencias¶

Documento generado por MobileUxUiDrone (Eight of Eight)