Pantalla: Detalle de Logro
Identificador: SCR-GAM-002
Modulo: MTS-GAM-001 - Gamificacion
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Detalle de Logro |
| Proposito |
Mostrar informacion completa de un logro y opciones de compartir |
| Tipo |
Full Screen / Bottom Sheet |
| Acceso |
Centro de Logros > Tap en logro |
| Prioridad |
Alta |
| Tier |
Pro/Perfect |
2. Wireframe ASCII
2.1. Logro Obtenido
+------------------------------------------+
| [<] Detalle del Logro |
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | +----------------+ | |
| | | | | |
| | | [Medal] | | |
| | | Dorada | | |
| | | | | |
| | +----------------+ | |
| | | |
| | QUINCENA DORADA | |
| | | |
| | 15 dias consecutivos al 100% | |
| | de adherencia | |
| | | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Check] LOGRO OBTENIDO | |
| | | |
| | 15 de Noviembre 2025 | |
| | a las 11:32 PM | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | +200 puntos | |
| | | |
| | Este logro te ayudo a subir | |
| | al Nivel 4: Dedicado | |
| +------------------------------------+ |
| |
| CATEGORIA |
| |
| +------------------------------------+ |
| | [Fire] Logros de Rachas | |
| | 4 de 7 obtenidos | |
| +------------------------------------+ |
| |
| SIGUIENTE LOGRO EN ESTA CATEGORIA |
| |
| +------------------------------------+ |
| | [Medal] Mes de Hierro | |
| | 30 dias consecutivos | |
| | +500 pts [18/30 dias] | |
| +------------------------------------+ |
| |
+------------------------------------------+
| [Compartir logro] |
+------------------------------------------+
2.2. Logro En Progreso
+------------------------------------------+
| [<] Detalle del Logro |
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | +----------------+ | |
| | | | | |
| | | [Medal] | | |
| | | Gris 60% | | |
| | | | | |
| | +----------------+ | |
| | | |
| | MES DE HIERRO | |
| | | |
| | 30 dias consecutivos al 100% | |
| | de adherencia | |
| | | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Progress] EN PROGRESO | |
| | | |
| | +------------------------------+ | |
| | ||||||||||||||||||-------------- | |
| | +------------------------------+ | |
| | | |
| | 18 de 30 dias | |
| | | |
| | Te faltan 12 dias para obtenerlo | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | +500 puntos | |
| | | |
| | Al obtenerlo sumaras 500 pts | |
| | (4,200 + 500 = 4,700 pts) | |
| +------------------------------------+ |
| |
| TU RACHA ACTUAL |
| |
| +------------------------------------+ |
| | [Fire] 18 dias | |
| | Sigue asi! | |
| | | |
| | L M M J V S D ... | |
| | * * * * * * * ... | |
| +------------------------------------+ |
| |
| REQUISITOS PREVIOS |
| |
| +------------------------------------+ |
| | [Check] Primera Racha (3 dias) | |
| | [Check] Semana Perfecta (7 dias) | |
| | [Check] Quincena Dorada (15 dias) | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Logro Pendiente
+------------------------------------------+
| [<] Detalle del Logro |
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | +----------------+ | |
| | | | | |
| | | [Lock] | | |
| | | Grande | | |
| | | | | |
| | +----------------+ | |
| | | |
| | ANO DIAMANTE | |
| | | |
| | 365 dias consecutivos al 100% | |
| | de adherencia | |
| | | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Lock] AUN NO DISPONIBLE | |
| | | |
| | Para desbloquear este logro | |
| | primero debes obtener: | |
| | | |
| | [ ] Trimestre de Oro (90 dias) | |
| | [ ] Semestre Platino (180 dias) | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | +10,000 puntos | |
| | | |
| | El logro mas valioso de MedTime | |
| +------------------------------------+ |
| |
| TU PROGRESO ACTUAL |
| |
| +------------------------------------+ |
| | Racha actual: 18 dias | |
| | Mejor racha: 23 dias | |
| | | |
| | Necesitas 365 dias consecutivos | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.4. Logro Especial (Fecha)
+------------------------------------------+
| [<] Detalle del Logro |
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | +----------------+ | |
| | | | | |
| | | [Gift] | | |
| | | Especial | | |
| | | | | |
| | +----------------+ | |
| | | |
| | ANO NUEVO SALUDABLE | |
| | | |
| | Completa todas tus tomas el | |
| | 1 de enero | |
| | | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Calendar] DISPONIBLE EL 1 DE ENE | |
| | | |
| | Este logro solo puede obtenerse | |
| | el 1 de enero de cada ano. | |
| | | |
| | Proximo: 1 de Enero 2026 | |
| | (en 27 dias) | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | +50 puntos | |
| +------------------------------------+ |
| |
| HISTORIAL |
| |
| +------------------------------------+ |
| | 2025: No obtenido | |
| | (Te registraste despues del 1 Ene) | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.5. Celebracion (Modal)
+------------------------------------------+
| |
| |
| +------------------------------------+ |
| | | |
| | [Confetti] | |
| | | |
| | +----------------+ | |
| | | | | |
| | | [Medal] | | |
| | | Animada | | |
| | | | | |
| | +----------------+ | |
| | | |
| | NUEVO LOGRO | |
| | | |
| | QUINCENA DORADA | |
| | | |
| | 15 dias consecutivos al 100% | |
| | | |
| | +200 puntos | |
| | | |
| | +------------------------------+ | |
| | | [Genial!] | | |
| | +------------------------------+ | |
| | | |
| | +------------------------------+ | |
| | | [Compartir] | | |
| | +------------------------------+ | |
| | | |
| +------------------------------------+ |
| |
| |
+------------------------------------------+
3. Componentes UI
3.1. Achievement Medal Large
| Propiedad |
Valor |
| Componente |
CMP-IMG-005 (Achievement Medal Large) |
| Size |
120x120dp |
| States |
Color (obtenido), Gris (progreso), Lock (pendiente) |
| Animation |
Brillo sutil si obtenido |
3.2. Status Badge
| Propiedad |
Valor |
| Componente |
CMP-BDG-003 (Achievement Status) |
| Variants |
Obtenido (verde), Progreso (azul), Pendiente (gris) |
| Icon |
Check, Progress, Lock |
3.3. Progress Section
| Propiedad |
Valor |
| Componente |
CMP-PRG-005 (Achievement Progress) |
| Bar |
Barra de progreso |
| Count |
X de Y |
| Remaining |
Texto de cuantos faltan |
3.4. Points Earned Card
| Propiedad |
Valor |
| Componente |
CMP-CRD-049 (Points Card) |
| Points |
+XXX puntos |
| Context |
Impacto en nivel |
3.5. Celebration Modal
| Propiedad |
Valor |
| Componente |
CMP-MDL-003 (Celebration Modal) |
| Background |
Confetti animado |
| Medal |
Animacion de entrada |
| Buttons |
Genial, Compartir |
| Dismissable |
Tap fuera o boton |
4. Estados del Logro
| Estado |
Visual |
Acciones |
| Obtenido |
Medal color, fecha, puntos |
Ver, Compartir |
| En progreso |
Medal gris, barra progreso |
Ver requisitos |
| Pendiente |
Lock, requisitos previos |
Ver que se necesita |
| Fecha especial |
Calendar icon, countdown |
Ver cuando disponible |
5. Comportamientos
5.1. Celebracion de Logro
- Modal aparece con animacion
- Confetti durante 2 segundos
- Medal hace bounce
- Puntos suben con animacion
- Auto-dismiss despues de 5 segundos o tap
5.2. Compartir Logro
- Genera imagen del logro
- NO incluye datos de salud
- NO incluye nombres de medicamentos
- Solo logro generico + fecha
6. Datos Requeridos
interface AchievementDetailState {
achievement: AchievementDetail;
category: CategoryInfo;
userProgress?: UserAchievementProgress;
nextInCategory?: Achievement;
prerequisites?: Prerequisite[];
}
interface AchievementDetail {
id: string;
name: string;
description: string;
longDescription: string;
icon: string;
iconLarge: string;
category: AchievementCategory;
points: number;
status: AchievementStatus;
obtainedAt?: Date;
rarity: AchievementRarity;
}
interface UserAchievementProgress {
current: number;
target: number;
unit: string;
percentComplete: number;
estimatedCompletion?: Date;
}
interface Prerequisite {
achievementId: string;
name: string;
completed: boolean;
}
interface CategoryInfo {
name: string;
icon: string;
obtained: number;
total: number;
}
type AchievementRarity =
| 'common' // >50% usuarios lo tienen
| 'uncommon' // 20-50%
| 'rare' // 5-20%
| 'epic' // 1-5%
| 'legendary'; // <1%
7. Validaciones
7.1. Compartir
- Verificar que no incluye PHI
- Generar imagen sin datos sensibles
- Confirmar antes de enviar
8. Accesibilidad
8.1. Labels
| Elemento |
accessibilityLabel |
| Medal |
"Medalla de {nombre}, {estado}" |
| Status |
"Estado: {obtenido/en progreso/pendiente}" |
| Progress |
"Progreso: {X} de {Y} {unidad}" |
| Share |
"Compartir logro {nombre}" |
8.2. Anuncios
- Al abrir: "{nombre}, {estado}"
- Celebracion: "Felicidades! Nuevo logro: {nombre}"
9. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)