Pantalla: Rachas de Adherencia
Identificador: SCR-GAM-003
Modulo: MTS-GAM-001 - Gamificacion
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Rachas de Adherencia |
| Proposito |
Visualizar racha actual, historico y proteccion de racha |
| Tipo |
Full Screen |
| Acceso |
Centro de Logros > Racha Card / Dashboard > Widget Racha |
| Prioridad |
Alta |
| Tier |
Pro/Perfect |
2. Wireframe ASCII
2.1. Vista Principal
+------------------------------------------+
| [<] Mi Racha |
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | [Fire Icon] | |
| | Grande Animado | |
| | | |
| | 18 | |
| | dias | |
| | | |
| | RACHA ACTUAL | |
| | | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | TU MEJOR RACHA | |
| | | |
| | [Trophy] 23 dias | |
| | Del 1 Sep al 23 Sep 2025 | |
| | | |
| | Te faltan 5 dias para superarla! | |
| +------------------------------------+ |
| |
| CALENDARIO DE ADHERENCIA |
| |
| +------------------------------------+ |
| | DICIEMBRE 2025 [<][>]| |
| | | |
| | Lu Ma Mi Ju Vi Sa Do | |
| | 1 2 3 4 5 6 7 | |
| | [*] [*] [*] [*] [*] [ ] [ ] | |
| | | |
| | 8 9 10 11 12 13 14 | |
| | [*] [*] [*] [*] [*] [*] [*] | |
| | | |
| | 15 16 17 18 19 20 21 | |
| | [*] [*] [*] [*] [*] [.] [.] | |
| | | |
| | 22 23 24 25 26 27 28 | |
| | [.] [.] [.] [.] [.] [.] [.] | |
| | | |
| | 29 30 31 | |
| | [.] [.] [.] | |
| +------------------------------------+ |
| |
| [*] = 100% [X] = <100% [.] = Futuro |
| |
| ESCUDO DE RACHA |
| |
| +------------------------------------+ |
| | [Shield] Proteccion de Racha | |
| | | |
| | Disponible | |
| | 1 uso este mes | |
| | | |
| | Si olvidas una toma, puedes | |
| | usar el escudo para mantener | |
| | tu racha. | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.2. Escudo Usado
+------------------------------------------+
| [<] Mi Racha |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [Fire + Shield] | |
| | | |
| | 18 | |
| | dias | |
| | (protegida) | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [i] Usaste tu escudo el 3 Dic | |
| | | |
| | Tu racha continua gracias | |
| | a la proteccion. | |
| +------------------------------------+ |
| |
| CALENDARIO DE ADHERENCIA |
| |
| +------------------------------------+ |
| | DICIEMBRE 2025 | |
| | | |
| | Lu Ma Mi Ju Vi Sa Do | |
| | 1 2 3 4 5 6 7 | |
| | [*] [*] [S] [*] [*] [ ] [ ] | |
| | | |
| | [S] = Escudo usado | |
| +------------------------------------+ |
| |
| ESCUDO DE RACHA |
| |
| +------------------------------------+ |
| | [Shield] Proteccion de Racha | |
| | (Gris) | |
| | | |
| | Ya utilizado | |
| | Usado el 3 Dic | |
| | | |
| | Proximo escudo disponible: | |
| | 1 de Enero 2026 | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Racha Perdida
+------------------------------------------+
| [<] Mi Racha |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [Fire Icon] | |
| | Gris/Apagado | |
| | | |
| | 0 | |
| | dias | |
| | | |
| | RACHA PERDIDA | |
| | | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [!] Tu racha se reinicio | |
| | | |
| | El 15 de Diciembre no | |
| | completaste todas tus tomas. | |
| | | |
| | No te preocupes, cada dia | |
| | es una nueva oportunidad! | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | TU MEJOR RACHA | |
| | | |
| | [Trophy] 23 dias | |
| | Sigue siendo tu record | |
| +------------------------------------+ |
| |
| RACHAS ANTERIORES |
| |
| +------------------------------------+ |
| | 18 dias 1 Dic - 18 Dic 2025 | |
| +------------------------------------+ |
| | 23 dias 1 Sep - 23 Sep 2025 | |
| | [Trophy] Tu mejor racha | |
| +------------------------------------+ |
| | 15 dias 10 Ago - 24 Ago 2025 | |
| +------------------------------------+ |
| | 7 dias 1 Ago - 7 Ago 2025 | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Empezar nueva racha] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.4. Restaurar Racha (Perfect)
+------------------------------------------+
| |
| +------------------------------------+ |
| | Restaurar Racha? | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | | |
| | Perdiste tu racha de 18 dias | |
| | ayer. | |
| | | |
| | Como usuario Perfect, tienes | |
| | la opcion de restaurarla UNA | |
| | vez. | |
| | | |
| | [Warning] Esta opcion solo | |
| | puede usarse una vez. Despues | |
| | de restaurar, no podras | |
| | hacerlo de nuevo. | |
| | | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Restaurar racha] | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Empezar de nuevo] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.5. Hitos de Racha
+------------------------------------------+
| [<] Hitos de Racha |
+------------------------------------------+
| |
| PROXIMOS HITOS |
| |
| +------------------------------------+ |
| | 18/30 | |
| | [=================------] | |
| | | |
| | [Medal] Mes de Hierro | |
| | 30 dias consecutivos | |
| | +500 pts | |
| | | |
| | Faltan 12 dias | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | 18/90 | |
| | [=====------------------------] | |
| | | |
| | [Medal] Trimestre de Oro | |
| | 90 dias consecutivos | |
| | +1,500 pts | |
| | | |
| | Faltan 72 dias | |
| +------------------------------------+ |
| |
| HITOS OBTENIDOS |
| |
| +------------------------------------+ |
| | [Check] Quincena Dorada | |
| | 15 dias - 15 Nov 2025 | |
| +------------------------------------+ |
| | [Check] Semana Perfecta | |
| | 7 dias - 8 Nov 2025 | |
| +------------------------------------+ |
| | [Check] Primera Racha | |
| | 3 dias - 4 Nov 2025 | |
| +------------------------------------+ |
| |
+------------------------------------------+
+------------------------------------------+
| |
| RACHA |
| |
| +------------------------------------+ |
| | [Fire] 18 dias [>] | |
| | | |
| | Mejor: 23 dias | |
| | Proximo: Mes de Hierro | |
| | (12 dias) | |
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Streak Hero
| Propiedad |
Valor |
| Componente |
CMP-HRO-002 (Streak Hero) |
| Fire icon |
Animado si activa |
| Number |
Dias grandes |
| Label |
"RACHA ACTUAL" |
| State |
Activa, Protegida, Perdida |
3.2. Best Streak Card
| Propiedad |
Valor |
| Componente |
CMP-CRD-050 (Best Streak) |
| Trophy |
Icono dorado |
| Days |
Numero de dias |
| Date range |
Periodo |
| Comparison |
Dias para superar |
3.3. Adherence Calendar
| Propiedad |
Valor |
| Componente |
CMP-CAL-005 (Adherence Calendar) |
| Month view |
Mes completo |
| Day states |
Completo, Incompleto, Escudo, Futuro |
| Navigation |
Mes anterior/siguiente |
| Legend |
Debajo del calendario |
3.4. Shield Card
| Propiedad |
Valor |
| Componente |
CMP-CRD-051 (Shield Card) |
| Icon |
Escudo |
| Status |
Disponible, Usado, No disponible |
| Info |
Fecha de uso / proximo disponible |
3.5. Streak History Item
| Propiedad |
Valor |
| Componente |
CMP-LST-036 (Streak History) |
| Days |
Numero de dias |
| Date range |
Periodo |
| Badge |
"Tu mejor" si aplica |
4. Estados de Racha
| Estado |
Visual |
Mensaje |
| Activa |
Fire animado, color |
"X dias" |
| Protegida |
Fire + Shield |
"X dias (protegida)" |
| Perdida |
Fire gris |
"Racha perdida" |
| Nueva |
Fire pequeno |
"Comienza tu racha!" |
5. Comportamientos
5.1. Calendario
- Scroll horizontal entre meses
- Tap en dia muestra detalle de adherencia
- Dias futuros en gris claro
- Dias con escudo con icono especial
5.2. Escudo de Racha
- Solo disponible Pro/Perfect
- 1 uso por mes calendario
- Se ofrece automaticamente al perder racha si disponible
- Marca el dia protegido en calendario
5.3. Restauracion (Perfect)
- Solo una vez en la vida de la cuenta
- Modal de confirmacion con warning
- No se puede deshacer
6. Datos Requeridos
interface StreakScreenState {
currentStreak: CurrentStreak;
bestStreak: StreakRecord;
calendar: AdherenceCalendar;
shield: ShieldStatus;
history: StreakRecord[];
upcomingMilestones: StreakMilestone[];
}
interface CurrentStreak {
days: number;
startDate: Date;
isProtected: boolean;
protectedDate?: Date;
status: StreakStatus;
}
interface StreakRecord {
days: number;
startDate: Date;
endDate: Date;
isBest: boolean;
endReason?: StreakEndReason;
}
interface AdherenceCalendar {
month: number;
year: number;
days: CalendarDay[];
}
interface CalendarDay {
date: Date;
adherencePercent: number;
isComplete: boolean;
isShieldUsed: boolean;
isFuture: boolean;
}
interface ShieldStatus {
available: boolean;
usedThisMonth: boolean;
usedDate?: Date;
nextAvailable?: Date;
tier: 'pro' | 'perfect';
}
interface StreakMilestone {
name: string;
targetDays: number;
currentDays: number;
points: number;
daysRemaining: number;
}
type StreakStatus =
| 'active'
| 'protected'
| 'lost'
| 'new';
type StreakEndReason =
| 'missed_dose'
| 'no_shield'
| 'user_reset';
7. Reglas de Negocio
| Regla |
Descripcion |
| RN-GAM-003 |
Racha solo se reinicia con dia <100% adherencia |
| RN-GAM-004 |
Medicamentos pausados no afectan racha |
| Escudo |
1 por mes, se renueva el dia 1 |
| Restauracion |
Solo Perfect, solo 1 vez |
8. Accesibilidad
8.1. Labels
| Elemento |
accessibilityLabel |
| Streak hero |
"Racha actual: {N} dias" |
| Best streak |
"Tu mejor racha: {N} dias" |
| Calendar day |
"{fecha}: {completo/incompleto}" |
| Shield |
"Escudo de racha: {disponible/usado}" |
8.2. Anuncios
- Al perder racha: "Tu racha se ha reiniciado"
- Al usar escudo: "Escudo de racha activado"
- Al superar record: "Nueva mejor racha: {N} dias"
9. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)