avatares

docs/ux_avatares_bloqueados.md

@@ -0,0 +1,206 @@
+# UX — Selección de avatares bloqueados y desbloqueo por anuncios
+
+## Objetivo
+
+Definir cómo debe verse y comportarse la pantalla de selección de avatar cuando la mayoría de avatares estén bloqueados por defecto y puedan desbloquearse mediante logros o anuncios.
+
+Este documento complementa `Monetización publicidad y gamificación.md` y sirve como referencia para implementar la UI cuando se acometa el cambio.
+
+---
+
+## Principios de diseño
+
+- El usuario debe percibir colección y progreso, no castigo.
+- Los avatares bloqueados deben tentar, no frustrar.
+- Los desbloqueados deben destacar inmediatamente.
+- El desbloqueo debe sentirse como una recompensa.
+- La pantalla debe seguir siendo limpia y usable aunque existan muchos avatares bloqueados.
+
+---
+
+## Estados de avatar
+
+Cada avatar debe tener uno de estos estados:
+
+### 1. Desbloqueado
+
+- Se muestra normalmente.
+- Se puede seleccionar.
+- Al tocarlo, se elige como avatar activo.
+- Puede mostrar una pequeña marca de “desbloqueado” si ayuda visualmente.
+
+### 2. Bloqueado
+
+- Se muestra con un filtro suave.
+- El dibujo se intuye ligeramente, sin revelar demasiado.
+- No se puede seleccionar.
+- Puede mostrar un pequeño indicador discreto de bloqueo o un botón contextual de desbloqueo.
+
+### 3. Desbloqueable por logro
+
+- Igual que bloqueado, pero al tocarlo se muestra una sugerencia del tipo:
+  - “Desbloquea este avatar con un logro”
+  - o “Ver anuncio corto para desbloquear”
+- Nunca debe obligar; siempre debe ser opcional.
+
+### 4. Desbloqueable por anuncio
+
+- Se muestra la opción de ver un video corto o largo, según la regla de monetización definida.
+- Si el usuario acepta y el anuncio termina correctamente, el avatar cambia a desbloqueado.
+
+---
+
+## Orden de listado
+
+El orden visual de la lista debe ser:
+
+1. **Avatares desbloqueados**
+2. **Avatares bloqueados** mezclados en orden aleatorio
+
+Reglas adicionales:
+
+- El orden aleatorio de bloqueados debe recalcularse al cargar la pantalla o al cambiar el conjunto de desbloqueados.
+- No debe ser el mismo orden rígido siempre, para que la pantalla se sienta viva.
+- Los desbloqueados no deben mezclarse con los bloqueados.
+
+---
+
+## Apariencia visual de los bloqueados
+
+### Filtro recomendado
+
+El filtro debe ser sutil. La idea es que el usuario “adivine” el avatar, pero no lo vea claramente.
+
+Opciones visuales permitidas:
+
+- blur suave,
+- desaturación parcial,
+- oscurecimiento leve,
+- reducción de contraste,
+- ligero velo translúcido.
+
+### Evitar
+
+- candados gigantes,
+- overlays agresivos,
+- textos largos encima del avatar,
+- ocultar por completo la imagen,
+- una estética demasiado fea o punitiva.
+
+La intención es que el avatar siga siendo tentador.
+
+---
+
+## Interacción al tocar un avatar bloqueado
+
+Al pulsarlo:
+
+1. No se selecciona.
+2. Se abre un panel o modal pequeño con:
+   - nombre del avatar,
+   - motivo de bloqueo o condición de desbloqueo,
+   - acción disponible:
+     - `Ver anuncio corto para desbloquear`,
+     - `Ver anuncio largo para liberar`,
+     - o `Consigue este logro para desbloquearlo`.
+3. Si el avatar no tiene desbloqueo disponible todavía, se muestra solo la condición de logro.
+
+---
+
+## Interacción al tocar un avatar desbloqueado
+
+Al pulsarlo:
+
+- se selecciona como avatar activo,
+- se resalta con animación breve,
+- puede sonar un feedback corto si está activado el sonido,
+- opcionalmente puede mostrar una etiqueta tipo “Seleccionado”.
+
+---
+
+## Flujo de desbloqueo por anuncio
+
+### Video corto
+
+Uso típico:
+
+- el usuario consigue un logro,
+- ve que un avatar especial está bloqueado,
+- la app ofrece un video corto para desbloquearlo.
+
+Regla:
+
+- el desbloqueo puede ser temporal o permanente según la monetización definida;
+- si luego se define permanente, documentarlo explícitamente.
+
+### Video largo
+
+Uso típico:
+
+- el usuario quiere desbloquear un avatar concreto sin esperar al logro,
+- puede ver un anuncio más largo,
+- el avatar queda desbloqueado.
+
+Regla UX:
+
+- el video largo debe sentirse como una elección del usuario, no como una imposición.
+
+---
+
+## Animaciones recomendadas
+
+Al desbloquear un avatar:
+
+- zoom in suave,
+- brillo breve,
+- transición de filtro bloqueado a estado normal,
+- pequeño destello de recompensa,
+- confetti muy moderado si encaja con la pantalla.
+
+No usar demasiada pirotecnia. La recompensa debe sentirse elegante, no infantil.
+
+---
+
+## Texto sugerido en UI
+
+### Bloqueado por logro
+
+- `Desbloquéalo consiguiendo este logro`
+- `Completa el requisito para usarlo`
+
+### Desbloqueo por anuncio corto
+
+- `Ver anuncio corto y desbloquear`
+- `Desbloqueo rápido`
+
+### Desbloqueo por anuncio largo
+
+- `Ver anuncio largo y liberar avatar`
+- `Desbloqueo especial`
+
+### Estado desbloqueado
+
+- `Disponible`
+- `Desbloqueado`
+
+---
+
+## Reglas de compatibilidad con la app
+
+- No romper la selección actual de avatar del perfil.
+- No dejar que un avatar bloqueado se guarde como avatar principal.
+- Si el avatar activo pasa a bloquearse por cambios futuros, la app debe migrar al avatar por defecto.
+- El sistema debe funcionar sin backend al principio.
+- Si más adelante hay cuenta online, la regla de desbloqueo debe seguir siendo cosmética/local salvo que se decida sincronizarla.
+
+---
+
+## Criterio de aceptación
+
+Se considerará bien implementado cuando:
+
+- los desbloqueados se vean claramente primero,
+- los bloqueados se intuyan pero no se puedan seleccionar,
+- el desbloqueo por anuncio tenga sentido visual y narrativo,
+- la pantalla siga siendo atractiva aunque el 80% de los avatares estén bloqueados,
+- el usuario entienda en un segundo qué está desbloqueado y qué no.