Pantalla: Niveles y Puntos
Identificador: SCR-GAM-004
Modulo: MTS-GAM-001 - Gamificacion
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Niveles y Puntos |
| Proposito |
Ver progresion de nivel, historial de puntos y personalizacion desbloqueada |
| Tipo |
Full Screen |
| Acceso |
Centro de Logros > Level Card / Perfil > Nivel |
| Prioridad |
Media |
| Tier |
Pro/Perfect |
2. Wireframe ASCII
2.1. Vista Principal
+------------------------------------------+
| [<] Mi Nivel |
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | [Level Badge] | |
| | Nivel 4 | |
| | | |
| | DEDICADO | |
| | | |
| | +------------------------------+ | |
| | ||||||||||||||||||-------------- | |
| | +------------------------------+ | |
| | | |
| | 4,200 / 7,000 | |
| | | |
| | 2,800 puntos para Nivel 5: | |
| | Responsable | |
| | | |
| +------------------------------------+ |
| |
| [Puntos] [Niveles] [Desbloqueos] |
| ------- |
| |
| HISTORIAL DE PUNTOS |
| |
| HOY |
| |
| +------------------------------------+ |
| | +10 Toma confirmada 11:32 AM | |
| | Losartan 50mg | |
| +------------------------------------+ |
| +------------------------------------+ |
| | +5 Toma puntual 11:32 AM | |
| | Dentro de ventana | |
| +------------------------------------+ |
| +------------------------------------+ |
| | +10 Toma confirmada 8:15 AM | |
| | Metformina 850mg | |
| +------------------------------------+ |
| +------------------------------------+ |
| | +5 Primer uso del dia 8:15 AM | |
| | Abriste la app | |
| +------------------------------------+ |
| |
| AYER |
| |
| +------------------------------------+ |
| | +25 Dia completo 11:59 PM | |
| | 100% adherencia | |
| +------------------------------------+ |
| +------------------------------------+ |
| | +45 3 tomas + bonos | |
| | Detalle... | |
| +------------------------------------+ |
| |
| ... (scroll para mas) |
| |
+------------------------------------------+
2.2. Tab Niveles
+------------------------------------------+
| [<] Mi Nivel |
+------------------------------------------+
| |
| +------------------------------------+ |
| | Nivel 4: DEDICADO | |
| | 4,200 pts | |
| +------------------------------------+ |
| |
| [Puntos] [Niveles] [Desbloqueos] |
| ------- |
| |
| TODOS LOS NIVELES |
| |
| +------------------------------------+ |
| | [1] Iniciando 0 pts | |
| | Acceso basico [Check] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [2] Constante 500 pts | |
| | Temas adicionales [Check] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [3] Comprometido 1,500 pts | |
| | Sonidos adicionales [Check] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [4] Dedicado 3,500 pts | |
| | Widgets personalizados [Actual]| |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [5] Responsable 7,000 pts | |
| | Iconos alternativos [Lock] | |
| | Te faltan 2,800 pts | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [6] Admirable 12,000 pts | |
| | Badge especial [Lock] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [7] Ejemplar 20,000 pts | |
| | Stats avanzadas [Lock] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [8] Inspirador 35,000 pts | |
| | Temas premium [Lock] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [9] Extraordinario 55,000 pts | |
| | Personal. completa [Lock] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [10] Leyenda 80,000 pts | |
| | Todo desbloqueado [Lock] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Tab Desbloqueos
+------------------------------------------+
| [<] Mi Nivel |
+------------------------------------------+
| |
| +------------------------------------+ |
| | Nivel 4: DEDICADO | |
| +------------------------------------+ |
| |
| [Puntos] [Niveles] [Desbloqueos] |
| ----------- |
| |
| PERSONALIZACION DISPONIBLE |
| |
| TEMAS DE COLOR |
| |
| +------------------------------------+ |
| | [Blue] Clasico [Check] | |
| | [Dark] Oscuro [Check] | |
| | [Green] Verde Salud [Check] | |
| | [Purple] Lavanda [Check] | |
| | [Coral] Coral [Check] | |
| | [Navy] Medianoche [Check] | |
| | [Gold] Dorado [Lock 6] | |
| | [Crystal] Cristal [Lock 6] | |
| +------------------------------------+ |
| |
| SONIDOS DE NOTIFICACION |
| |
| +------------------------------------+ |
| | Estandar [Check] | |
| | Suave [Check] | |
| | Campana [Check] | |
| | Arpa [Check] | |
| | Gota [Check] | |
| | Melodia [Lock 5] | |
| | Zen [Lock 5] | |
| | Naturaleza [Lock 5] | |
| +------------------------------------+ |
| |
| ICONOS DE APP (iOS) |
| |
| +------------------------------------+ |
| | [Icon] Clasico [Check] | |
| | [Icon] Minimalista [Lock 5] | |
| | [Icon] Oscuro [Lock 5] | |
| | [Icon] Gradiente [Lock 8] | |
| | [Icon] Dorado [Lock 8] | |
| +------------------------------------+ |
| |
| WIDGETS |
| |
| +------------------------------------+ |
| | Widget Basico [Check] | |
| | Widget Detallado [Check] | |
| | Widget Personalizado [Check] | |
| | Widget Premium [Lock 6] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.4. Detalle de Puntos del Dia
+------------------------------------------+
| [<] Puntos del Dia |
+------------------------------------------+
| |
| 5 de Diciembre 2025 |
| |
| +------------------------------------+ |
| | +30 puntos | |
| | Total del dia | |
| +------------------------------------+ |
| |
| DESGLOSE |
| |
| +------------------------------------+ |
| | TOMAS CONFIRMADAS | |
| | | |
| | +10 Losartan 50mg 11:32 AM | |
| | +10 Metformina 850mg 8:15 AM | |
| | +10 Aspirina 100mg 8:15 AM | |
| | | |
| | Subtotal: +30 pts | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | BONOS | |
| | | |
| | +5 Toma puntual (Losartan) | |
| | +5 Primer uso del dia | |
| | | |
| | Subtotal: +10 pts | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | PENDIENTE | |
| | | |
| | +25 Dia completo (si 100%) | |
| | Aun faltan 2 tomas | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.5. Subida de Nivel (Modal)
+------------------------------------------+
| |
| |
| +------------------------------------+ |
| | | |
| | [Confetti] | |
| | | |
| | +----------------+ | |
| | | 5 | | |
| | | LEVEL UP! | | |
| | +----------------+ | |
| | | |
| | RESPONSABLE | |
| | | |
| | Has alcanzado el Nivel 5! | |
| | | |
| | NUEVO DESBLOQUEADO: | |
| | | |
| | [Icon] Iconos alternativos | |
| | de app | |
| | | |
| | +------------------------------+ | |
| | | [Genial!] | | |
| | +------------------------------+ | |
| | | |
| | +------------------------------+ | |
| | | [Ver desbloqueos] | | |
| | +------------------------------+ | |
| | | |
| +------------------------------------+ |
| |
| |
+------------------------------------------+
+------------------------------------------+
| [<] Como Ganar Puntos |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [i] Los puntos solo se acumulan, | |
| | nunca se pierden. Cada accion | |
| | te acerca mas a tu proximo | |
| | nivel. | |
| +------------------------------------+ |
| |
| ACCIONES DIARIAS |
| |
| +------------------------------------+ |
| | Toma confirmada +10 | |
| | Por cada toma registrada | |
| +------------------------------------+ |
| +------------------------------------+ |
| | Toma puntual +5 | |
| | Dentro de ventana de tiempo | |
| +------------------------------------+ |
| +------------------------------------+ |
| | Dia completo +25 | |
| | 100% adherencia del dia | |
| +------------------------------------+ |
| +------------------------------------+ |
| | Semana completa +100 | |
| | 100% adherencia 7 dias | |
| +------------------------------------+ |
| +------------------------------------+ |
| | Primer uso del dia +5 | |
| | Abrir la app cada dia | |
| +------------------------------------+ |
| |
| ACCIONES UNICAS |
| |
| +------------------------------------+ |
| | Completar perfil +50 | |
| | [Check] Obtenido | |
| +------------------------------------+ |
| +------------------------------------+ |
| | Anadir medicamento +20 | |
| | Por cada nuevo | |
| +------------------------------------+ |
| +------------------------------------+ |
| | Configurar cuidador +30 | |
| | [ ] Pendiente | |
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Level Hero Card
| Propiedad |
Valor |
| Componente |
CMP-CRD-052 (Level Hero) |
| Badge |
Numero de nivel con estilo |
| Name |
Nombre del nivel |
| Progress |
Barra + numeros |
| Next level |
Info del siguiente |
3.2. Points History Item
| Propiedad |
Valor |
| Componente |
CMP-LST-037 (Points Item) |
| Amount |
+XX con color verde |
| Action |
Descripcion de la accion |
| Time |
Hora |
| Detail |
Contexto adicional |
3.3. Level Row
| Propiedad |
Valor |
| Componente |
CMP-LST-038 (Level Row) |
| Number |
Numero de nivel |
| Name |
Nombre |
| Points |
Puntos requeridos |
| Benefit |
Beneficio |
| Status |
Check/Actual/Lock |
3.4. Unlock Item
| Propiedad |
Valor |
| Componente |
CMP-LST-039 (Unlock Item) |
| Preview |
Color/Sonido/Icono |
| Name |
Nombre |
| Status |
Desbloqueado / Lock + nivel |
3.5. Level Up Modal
| Propiedad |
Valor |
| Componente |
CMP-MDL-004 (Level Up) |
| Animation |
Confetti + numero animado |
| Level name |
Nombre nuevo nivel |
| Unlock |
Lo que se desbloquea |
| Buttons |
Genial, Ver desbloqueos |
4. Obtencion de Puntos
| Accion |
Puntos |
Frecuencia |
| Toma confirmada |
10 |
Por toma |
| Toma puntual |
+5 |
Por toma en ventana |
| Dia completo |
25 |
Diario (100%) |
| Semana completa |
100 |
Semanal (100%) |
| Primer uso del dia |
5 |
Diario |
| Completar perfil |
50 |
Una vez |
| Anadir medicamento |
20 |
Por medicamento |
| Configurar cuidador |
30 |
Una vez |
5. Comportamientos
5.1. Historial de Puntos
- Agrupado por dia
- Scroll infinito hacia atras
- Tap para ver detalle del dia
- Pull to refresh
5.2. Subida de Nivel
- Modal aparece automaticamente
- Animacion de celebracion
- Muestra nuevo beneficio
- Opcion de ver desbloqueos
5.3. Desbloqueos
- Se pueden aplicar desde la lista
- Preview de cada opcion
- Tap para activar (temas, sonidos)
6. Datos Requeridos
interface LevelScreenState {
currentLevel: LevelInfo;
totalPoints: number;
pointsHistory: PointsHistoryByDay[];
allLevels: Level[];
unlocks: UnlocksByCategory;
selectedTab: LevelTab;
}
interface LevelInfo {
number: number;
name: string;
pointsRequired: number;
pointsForNext: number;
progressPercent: number;
benefit: string;
}
interface PointsHistoryByDay {
date: Date;
totalPoints: number;
items: PointsHistoryItem[];
}
interface PointsHistoryItem {
amount: number;
action: PointsAction;
description: string;
timestamp: Date;
relatedItem?: string; // Nombre medicamento, etc.
}
interface Level {
number: number;
name: string;
pointsRequired: number;
benefit: string;
status: LevelStatus;
pointsToReach?: number; // Si es siguiente nivel
}
interface UnlocksByCategory {
themes: UnlockItem[];
sounds: UnlockItem[];
icons: UnlockItem[];
widgets: UnlockItem[];
}
interface UnlockItem {
id: string;
name: string;
preview: string; // Color hex, sound name, icon
levelRequired: number;
isUnlocked: boolean;
isActive: boolean;
}
type PointsAction =
| 'dose_confirmed'
| 'dose_ontime'
| 'day_complete'
| 'week_complete'
| 'first_use'
| 'profile_complete'
| 'medication_added'
| 'caregiver_added'
| 'achievement';
type LevelStatus = 'completed' | 'current' | 'locked';
type LevelTab = 'puntos' | 'niveles' | 'desbloqueos';
7. Accesibilidad
7.1. Labels
| Elemento |
accessibilityLabel |
| Level hero |
"Nivel {N}: {nombre}, {X} de {Y} puntos" |
| Points item |
"Mas {X} puntos por {accion}" |
| Level row |
"Nivel {N}: {nombre}, {estado}" |
| Unlock |
"{nombre}, {desbloqueado/requiere nivel X}" |
7.2. Anuncios
- Al subir nivel: "Felicidades! Has subido al nivel {N}"
- Al desbloquear: "Nuevo desbloqueado: {item}"
8. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)