Pantalla: Centro de Logros
Identificador: SCR-GAM-001
Modulo: MTS-GAM-001 - Gamificacion
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Centro de Logros |
| Proposito |
Hub principal para ver progreso, logros, nivel y puntos |
| Tipo |
Full Screen |
| Acceso |
Tab Navigation > Logros / Perfil > Mis Logros |
| Prioridad |
Alta |
| Tier |
Pro/Perfect (No disponible en Free) |
2. Wireframe ASCII
2.1. Vista Principal
+------------------------------------------+
| [<] Mis Logros [Gear]|
+------------------------------------------+
| |
| +------------------------------------+ |
| | [Avatar Circle] | |
| | | |
| | Nivel 4: Dedicado | |
| | 4,200 / 7,000 puntos | |
| | | |
| | [==============================] | |
| | ||||||||||||||||||-------------- | |
| | | |
| | 2,800 pts para Nivel 5 | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Fire] RACHA ACTUAL | |
| | | |
| | 12 dias | |
| | Tu mejor: 23 dias | |
| | | |
| | L M M J V S D L M M J V | |
| | * * * * * * * * * * * * | |
| +------------------------------------+ |
| |
| [Rachas] [Hitos] [Explor.] [Especiales] |
| ------- |
| |
| LOGROS DE RACHAS (4/7) |
| |
| +------------------------------------+ |
| | [Medal] Primera Racha [>]| |
| | 3 dias consecutivos | |
| | +50 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Medal] Semana Perfecta [>]| |
| | 7 dias consecutivos | |
| | +100 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Medal] Quincena Dorada [>]| |
| | 15 dias consecutivos | |
| | +200 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Lock] Mes de Hierro [>]| |
| | 30 dias consecutivos | |
| | +500 pts [18/30 dias] | |
| +------------------------------------+ |
| |
+------------------------------------------+
| [Home] [Cal] [Logros] [Perfil] |
+------------------------------------------+
2.2. Tab Hitos
+------------------------------------------+
| [<] Mis Logros [Gear]|
+------------------------------------------+
| |
| +------------------------------------+ |
| | Nivel 4: Dedicado | |
| | [==============================] | |
| +------------------------------------+ |
| |
| [Rachas] [Hitos] [Explor.] [Especiales] |
| ------ |
| |
| HITOS DE PROGRESO (4/7) |
| |
| +------------------------------------+ |
| | [Star] Primera Toma [>]| |
| | Registra tu primera toma | |
| | +10 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Star] Cien Tomas [>]| |
| | 100 tomas registradas | |
| | +100 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Star] Mil Tomas [>]| |
| | 1,000 tomas registradas | |
| | +500 pts [456/1000] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Star] Un Mes Contigo [>]| |
| | 30 dias usando la app | |
| | +100 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Lock] Medio Ano [>]| |
| | 180 dias usando la app | |
| | +500 pts [45/180 dias] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Tab Exploracion
+------------------------------------------+
| [<] Mis Logros [Gear]|
+------------------------------------------+
| |
| +------------------------------------+ |
| | Nivel 4: Dedicado | |
| | [==============================] | |
| +------------------------------------+ |
| |
| [Rachas] [Hitos] [Explor.] [Especiales] |
| ------- |
| |
| LOGROS DE EXPLORACION (4/6) |
| |
| +------------------------------------+ |
| | [Compass] Perfil Completo [>]| |
| | Completa todos los datos | |
| | +50 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Compass] Primera Receta [>]| |
| | Digitaliza una receta | |
| | +30 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Compass] Previsor [>]| |
| | Configura inventario | |
| | +30 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Compass] En Compania [>]| |
| | Anade primer cuidador | |
| | +50 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Lock] Reportero [>]| |
| | Genera primer reporte | |
| | +30 pts [Pendiente] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Lock] Explorador [>]| |
| | Usa todas las funciones | |
| | +100 pts [4/5 funciones] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.4. Tab Especiales
+------------------------------------------+
| [<] Mis Logros [Gear]|
+------------------------------------------+
| |
| +------------------------------------+ |
| | Nivel 4: Dedicado | |
| | [==============================] | |
| +------------------------------------+ |
| |
| [Rachas] [Hitos] [Explor.] [Especiales] |
| ---------- |
| |
| LOGROS ESPECIALES (2/6) |
| |
| +------------------------------------+ |
| | [Trophy] Early Adopter [>]| |
| | Registrarse en mes 1 | |
| | +100 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Trophy] Mi Cumpleanos [>]| |
| | Toma completa el 15 Mar | |
| | +50 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Lock] Ano Nuevo Saludable [>]| |
| | Toma completa el 1 Ene | |
| | +50 pts [Proximo 1 Ene] | |
| +------------------------------------+ |
| |
| LOGROS DE EVENTOS DE SALUD |
| |
| +------------------------------------+ |
| | [Heart] Primera Medicion [>]| |
| | Registra 1 medicion | |
| | +10 pts [Obtenido] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Lock] Medidor Consistente [>]| |
| | 7 dias midiendo | |
| | +50 pts [3/7 dias] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.5. Usuario Free (Upsell)
+------------------------------------------+
| [<] Logros |
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | [Trophy Icon Large] | |
| | | |
| | Sistema de Gamificacion | |
| | | |
| | Motiva tu adherencia con: | |
| | | |
| | [Check] Puntos y niveles | |
| | [Check] Logros y medallas | |
| | [Check] Rachas de adherencia | |
| | [Check] Personalizacion | |
| | | |
| | Disponible en Pro y Perfect | |
| | | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Actualizar a Pro] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Ver planes] | |
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Level Progress Card
| Propiedad |
Valor |
| Componente |
CMP-CRD-045 (Level Card) |
| Avatar |
Foto usuario + badge nivel |
| Level name |
Nombre del nivel actual |
| Points |
X / Y puntos |
| Progress bar |
Barra con porcentaje |
| Next level |
Puntos restantes |
3.2. Streak Card
| Propiedad |
Valor |
| Componente |
CMP-CRD-046 (Streak Card) |
| Icon |
Fuego animado |
| Current |
Dias actuales |
| Best |
Mejor racha |
| Calendar |
Ultimos 12-14 dias |
| Dot states |
Completado, Pendiente |
3.3. Achievement Tabs
| Propiedad |
Valor |
| Componente |
CMP-TAB-005 (Achievement Tabs) |
| Options |
Rachas, Hitos, Exploracion, Especiales |
| Count |
(X/Y) por categoria |
| Scroll |
Horizontal |
3.4. Achievement Card
| Propiedad |
Valor |
| Componente |
CMP-CRD-047 (Achievement Card) |
| Icon |
Medalla/Estrella/etc |
| Title |
Nombre del logro |
| Description |
Que se requiere |
| Points |
+XX pts |
| Status |
Obtenido / Progreso / Pendiente |
| Progress |
X/Y si aplica |
3.5. Locked Achievement Card
| Propiedad |
Valor |
| Componente |
CMP-CRD-048 (Locked Achievement) |
| Icon |
Lock |
| Title |
Nombre (visible) |
| Description |
Requisito |
| Progress |
Progreso actual |
| Opacity |
60% |
4. Estados de Logros
| Estado |
Visual |
Interaccion |
| Obtenido |
Medalla color + check |
Tap para detalle/compartir |
| En progreso |
Medalla gris + barra |
Tap para ver detalle |
| Pendiente |
Lock + texto |
Tap para ver requisito |
| Bloqueado tier |
Lock + "Pro" badge |
Tap para upsell |
5. Comportamientos
5.1. Carga Inicial
- Obtener progreso del usuario
- Calcular nivel y puntos
- Obtener logros obtenidos
- Calcular progreso de logros en curso
- Mostrar tab Rachas por defecto
5.2. Cambio de Tab
- Transicion suave entre categorias
- Mantener scroll position por tab
- Actualizar contador de categoria
5.3. Pull to Refresh
- Actualizar puntos y progreso
- Verificar nuevos logros
- Animar cambios si hay
6. Datos Requeridos
interface AchievementCenterState {
progress: GamificationProgress;
achievements: AchievementsByCategory;
selectedTab: AchievementCategory;
streak: StreakInfo;
}
interface GamificationProgress {
currentLevel: number;
levelName: string;
totalPoints: number;
pointsForNextLevel: number;
progressPercent: number;
}
interface StreakInfo {
currentStreak: number;
bestStreak: number;
streakStartDate: Date;
lastDays: DayStatus[]; // Last 12-14 days
hasShield: boolean; // Pro/Perfect
shieldUsedThisMonth: boolean;
}
interface AchievementsByCategory {
rachas: Achievement[];
hitos: Achievement[];
exploracion: Achievement[];
especiales: Achievement[];
}
interface Achievement {
id: string;
category: AchievementCategory;
name: string;
description: string;
icon: string;
points: number;
status: AchievementStatus;
obtainedAt?: Date;
progress?: AchievementProgress;
}
interface AchievementProgress {
current: number;
target: number;
unit: string; // "dias", "tomas", "funciones"
}
type AchievementCategory =
| 'rachas'
| 'hitos'
| 'exploracion'
| 'especiales';
type AchievementStatus =
| 'obtained'
| 'in_progress'
| 'pending'
| 'locked_tier';
type DayStatus = 'complete' | 'incomplete' | 'pending';
7. Accesibilidad
7.1. Labels
| Elemento |
accessibilityLabel |
| Level card |
"Nivel {N}: {nombre}, {X} de {Y} puntos" |
| Streak card |
"Racha actual: {N} dias, mejor racha: {M} dias" |
| Achievement obtained |
"{nombre}: logro obtenido, {puntos} puntos" |
| Achievement progress |
"{nombre}: {X} de {Y} {unidad}" |
| Locked |
"{nombre}: bloqueado, requiere {requisito}" |
7.2. Anuncios
- Al cambiar de tab: "Mostrando logros de {categoria}"
- Al obtener logro: "Nuevo logro obtenido: {nombre}"
8. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)