Pantalla: Splash / Welcome

Identificador: SCR-AUTH-001 Modulo: MTS-AUTH-001 - Autenticacion y Seguridad Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado

---

1. Informacion General

Atributo	Valor
Nombre	Splash / Welcome
Proposito	Primera pantalla que ve el usuario, branding y transicion a login
Tipo	Full Screen (sin navegacion)
Acceso	App Cold Start
Prioridad	Critica

---

2. Wireframe ASCII

2.1. Estado: Splash Logo (inicial)

+------------------------------------------+
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|              +----------+                |
|              |          |                |
|              | MEDTIME  |                |
|              |   [Logo] |                |
|              |          |                |
|              +----------+                |
|                                          |
|         Tu salud, tu control             |
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
+------------------------------------------+

2.2. Estado: Carrusel Bienvenida (primera vez)

+------------------------------------------+
|                                 [Saltar] |  <- Link sutil
|                                          |
|          +--------------------+          |
|          |                    |          |
|          |   [Ilustracion     |          |
|          |    animada de      |          |
|          |    persona con     |          |
|          |    app y medicinas]|          |
|          |                    |          |
|          +--------------------+          |
|                                          |
|    Nunca olvides tus medicamentos        |  <- Titulo
|                                          |
|    MedTime te recuerda cada toma         |  <- Subtitulo
|    con alertas inteligentes adaptadas    |
|    a tu rutina diaria.                   |
|                                          |
|             o  o  o                      |  <- Dots (3)
|                                          |
|      +----------------------------+      |
|      |        Comenzar            |      |  <- Primary CTA (slide 3)
|      +----------------------------+      |
|                                          |
+------------------------------------------+

2.3. Slides del Carrusel

SLIDE 1:
+------------------------------------------+
| Ilustracion: Persona feliz con telefono  |
| recibiendo notificacion de medicamento   |
|                                          |
| Titulo: "Nunca olvides tus medicamentos" |
| Subtitulo: "MedTime te recuerda cada     |
| toma con alertas inteligentes adaptadas  |
| a tu rutina diaria."                     |
+------------------------------------------+

SLIDE 2:
+------------------------------------------+
| Ilustracion: Dashboard con graficas de   |
| adherencia, calendario y estadisticas    |
|                                          |
| Titulo: "Control total de tu tratamiento"|
| Subtitulo: "Visualiza tu progreso,       |
| estadisticas de adherencia y mantente    |
| motivado con logros personalizados."     |
+------------------------------------------+

SLIDE 3:
+------------------------------------------+
| Ilustracion: Candado con datos cifrados  |
| y escudo de privacidad                   |
|                                          |
| Titulo: "Tu salud, tu privacidad"        |
| Subtitulo: "Tus datos de salud estan     |
| protegidos con cifrado de grado militar. |
| Tu decides quien ve tu informacion."     |
|                                          |
| [========= Comenzar =========]           |
+------------------------------------------+

2.4. Estado: Verificando Sesion (usuario existente)

+------------------------------------------+
|                                          |
|                                          |
|                                          |
|                                          |
|                                          |
|              +----------+                |
|              |          |                |
|              | MEDTIME  |                |
|              |   [Logo] |                |
|              |          |                |
|              +----------+                |
|                                          |
|           [    Spinner   ]               |
|         Verificando sesion...            |
|                                          |
|                                          |
|                                          |
|                                          |
+------------------------------------------+

---

3. Componentes UI

3.1. Logo MedTime

Propiedad	Valor
Tamano	120x120dp
Animacion entrada	Scale 0.8 -> 1.0, fade in
Duracion	300ms
Posicion	Center, 30% from top

3.2. Tagline

Propiedad	Valor
Texto	"Tu salud, tu control"
Tipografia	xl (20sp), medium, primary
Animacion	Fade in despues de logo
Posicion	Debajo del logo, 16dp margin

3.3. Carrusel Ilustraciones

Propiedad	Valor
Numero de slides	3
Swipe	Horizontal, paginado
Auto-advance	No (usuario controla)
Ilustraciones	Vector/Lottie, max 200dp height

3.4. Dots Indicator

Propiedad	Valor
Componente	CMP-DAT-008 (Page Indicator)
Posicion	Center, debajo de texto
Dot inactivo	8dp, neutral.400
Dot activo	24dp width, primary
Spacing	8dp entre dots

3.5. Link "Saltar"

Propiedad	Valor
Texto	"Saltar"
Tipografia	sm (14sp), regular, neutral.600
Posicion	Top right, 16dp margin
Touch target	44x44dp
Accion	Ir a SCR-AUTH-002

3.6. Boton "Comenzar"

Propiedad	Valor
Componente	CMP-BTN-001 (Primary Button)
Variante	filled
Texto	"Comenzar"
Visibilidad	Solo en slide 3
Accion	Ir a SCR-AUTH-002

---

4. Comportamientos

4.1. Logica de Decision Inicial

flowchart TD
    A[App Open] --> B{Primera vez?}
    B -->|Si| C[Mostrar carrusel bienvenida]
    B -->|No| D{Sesion activa?}
    D -->|Si| E[Ir a biometria/PIN]
    D -->|No| F[Ir a login]
    C -->|Comenzar/Saltar| F

4.2. Gestos

Gesto	Elemento	Accion
Swipe Left	Carrusel	Siguiente slide
Swipe Right	Carrusel	Slide anterior
Tap	Dot indicator	Ir a slide especifico
Tap	"Saltar"	Ir a login
Tap	"Comenzar"	Ir a login

4.3. Animaciones

SECUENCIA DE ENTRADA:

0ms:     Background visible
0-300ms: Logo fade in + scale (0.8 -> 1.0)
300-500ms: Hold
500-800ms: Tagline fade in (si splash puro)
         O: Transicion a carrusel (si primera vez)

CARRUSEL TRANSITIONS:
- Slide: 250ms ease-out
- Dots: 150ms ease
- Ilustracion: Lottie loop o estatica

REDUCED MOTION:
- Todas las animaciones < 100ms
- Sin scale, solo opacity
- Sin auto-advance

---

5. Estados y Transiciones

5.1. Diagrama de Estados

stateDiagram-v2
    [*] --> SplashLogo: App open

    SplashLogo --> CheckingSession: 1.5s
    SplashLogo --> Carousel: Primera vez

    CheckingSession --> Biometric: Sesion valida + bio habilitado
    CheckingSession --> Login: Sesion invalida

    Carousel --> Slide1: Initial
    Slide1 --> Slide2: Swipe left
    Slide2 --> Slide1: Swipe right
    Slide2 --> Slide3: Swipe left
    Slide3 --> Slide2: Swipe right
    Slide3 --> Login: Tap Comenzar

    Carousel --> Login: Tap Saltar (cualquier slide)

5.2. Persistencia de Estado

Dato	Storage	Duracion
onboarding_completed	SharedPrefs/UserDefaults	Permanente
session_token	Keychain/Keystore	Hasta logout
biometric_enabled	SharedPrefs/UserDefaults	Permanente

---

6. Datos Requeridos

6.1. Input Data

interface SplashScreenData {
  isFirstLaunch: boolean;
  hasActiveSession: boolean;
  biometricEnabled: boolean;
  biometricType: 'face' | 'fingerprint' | 'none';
}

6.2. Output Events

Evento	Payload	Destino
onSkipCarousel	-	SCR-AUTH-002
onCompleteCarousel	-	SCR-AUTH-002
onSessionValid	session_token	SCR-AUTH-006 (biometric)
onSessionInvalid	-	SCR-AUTH-002

---

7. Accesibilidad

7.1. Labels y Hints

Elemento	accessibilityLabel	accessibilityHint
Logo	"MedTime"	-
Slide 1	"Pagina 1 de 3: Nunca olvides tus medicamentos"	"Desliza para ver mas"
Slide 2	"Pagina 2 de 3: Control total de tu tratamiento"	"Desliza para ver mas"
Slide 3	"Pagina 3 de 3: Tu salud, tu privacidad"	"Toca Comenzar para continuar"
Dots	"Pagina {n} de 3"	"Toca para ir a pagina"
Saltar	"Saltar introduccion"	"Ir directamente a inicio de sesion"
Comenzar	"Comenzar"	"Continuar al inicio de sesion"

7.2. Orden de Foco

1. Logo (anuncio inicial)
2. Link "Saltar" (si carrusel)
3. Ilustracion actual
4. Titulo y subtitulo del slide
5. Dots indicator
6. Boton "Comenzar" (slide 3)

7.3. Screen Reader Announcements

Evento	Anuncio
Pantalla cargada	"Bienvenido a MedTime"
Cambio de slide	"Pagina {n} de 3: {titulo}"
Slide final	"Ultima pagina. Toca Comenzar para continuar"

7.4. Contraste y Tamanos

Elemento	Min Size	Contraste
Titulo slide	24sp	4.5:1
Subtitulo slide	16sp	4.5:1
Link Saltar	14sp	4.5:1
Touch target Saltar	44x44dp	-
Touch target Comenzar	48dp height	4.5:1
Dots	8dp diameter	3:1

---

8. Responsive Design

8.1. Breakpoints

Ancho	Adaptacion
< 360dp	Ilustracion mas pequena, texto compacto
360-600dp	Layout default
> 600dp (tablet)	Ilustracion lado izquierdo, texto derecho

8.2. Orientacion

Orientacion	Adaptacion
Portrait	Layout vertical default
Landscape	Ilustracion izquierda, contenido derecha (split)

---

9. Metricas

9.1. Performance

Metrica	Objetivo
Cold start to interactive	< 2s
Splash to carrusel	< 500ms
Lottie animation start	< 200ms
Session check	< 1s

9.2. Analytics Events

Evento	Parametros
screen_view	screen_name: "splash"
carousel_view	slide_number
carousel_skip	from_slide
carousel_complete	time_spent_ms
session_check	result: "valid"/"invalid"

---

10. Ilustraciones Especificadas

10.1. Requerimientos de Ilustraciones

Slide	Tema	Elementos Clave	Estilo
1	Recordatorios	Persona + telefono + notificacion + medicinas	Friendly, inclusivo
2	Control	Dashboard + graficas + calendario	Moderno, profesional
3	Privacidad	Candado + escudo + datos cifrados	Confiable, seguro

10.2. Especificaciones Tecnicas

Propiedad	Valor
Formato	SVG (estatico) o Lottie (animado)
Tamano max	200x200dp
Colores	Paleta MedTime (primary, secondary, neutral)
Estilo	Flat design, ilustraciones vectoriales
Accesibilidad	Roles decorativos (no requieren alt text)

---

11. Referencias

• UIF-AUTH-001 - Flujo de Navegacion
• MTS-AUTH-001 - Especificacion Funcional
• 02-component-library.md
• 03-accessibility-guidelines.md

---

Documento generado por MobileUxUiDrone (Eight of Eight)