Pantalla: Compartir Logro
Identificador: SCR-GAM-005
Modulo: MTS-GAM-001 - Gamificacion
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Compartir Logro |
| Proposito |
Generar imagen compartible de logros sin datos de salud |
| Tipo |
Bottom Sheet / Full Screen |
| Acceso |
Detalle Logro > Compartir / Celebracion > Compartir |
| Prioridad |
Media |
| Tier |
Pro/Perfect |
2. Wireframe ASCII
2.1. Selector de Que Compartir
+------------------------------------------+
| |
| +------------------------------------+ |
| | Compartir Logro | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [i] Tu logro se compartira sin | |
| | incluir nombres de | |
| | medicamentos ni datos de salud | |
| +------------------------------------+ |
| |
| QUE COMPARTIR |
| |
| +------------------------------------+ |
| | (*) Solo el logro | |
| | [Medal] Quincena Dorada | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | ( ) Logro + racha actual | |
| | [Medal] + [Fire] 18 dias | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | ( ) Logro + nivel | |
| | [Medal] + Nivel 4: Dedicado | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | ( ) Resumen completo | |
| | Logro + Racha + Nivel | |
| +------------------------------------+ |
| |
| PREVIEW |
| |
| +------------------------------------+ |
| |+----------------------------------+| |
| || || |
| || [Preview de imagen] || |
| || || |
| |+----------------------------------+| |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [Continuar] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.2. Preview de Imagen - Solo Logro
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | +--------------------+ | |
| | | | | |
| | | [Medal] | | |
| | | Dorada | | |
| | | | | |
| | +--------------------+ | |
| | | |
| | QUINCENA DORADA | |
| | | |
| | 15 dias de constancia | |
| | | |
| | +--------------------+ | |
| | | MedTime | | |
| | +--------------------+ | |
| | | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Preview de Imagen - Con Racha
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | +--------------------+ | |
| | | [Medal] | | |
| | | Dorada | | |
| | +--------------------+ | |
| | | |
| | QUINCENA DORADA | |
| | | |
| | +--------------------+ | |
| | | [Fire] 18 dias | | |
| | | racha actual | | |
| | +--------------------+ | |
| | | |
| | +--------------------+ | |
| | | MedTime | | |
| | +--------------------+ | |
| | | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.4. Preview de Imagen - Resumen Completo
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | Mi progreso en MedTime | |
| | | |
| | +--------------------+ | |
| | | [Medal] | | |
| | +--------------------+ | |
| | QUINCENA DORADA | |
| | | |
| | +------------+ +------------+ | |
| | | [Fire] | | [Level] | | |
| | | 18 dias | | Nivel 4 | | |
| | | racha | | Dedicado | | |
| | +------------+ +------------+ | |
| | | |
| | +--------------------+ | |
| | | MedTime | | |
| | +--------------------+ | |
| | | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.5. Opciones de Compartir
+------------------------------------------+
| |
| +------------------------------------+ |
| | Compartir via... | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| |+----------------------------------+| |
| || [Preview imagen generada] || |
| |+----------------------------------+| |
| +------------------------------------+ |
| |
| +------------------+------------------+ |
| | [WhatsApp] | [Instagram] | |
| | Enviar | Stories | |
| +------------------+------------------+ |
| | [Twitter/X] | [Facebook] | |
| | Publicar | Compartir | |
| +------------------+------------------+ |
| | [Mensaje] | [Email] | |
| | SMS/iMessage | Enviar | |
| +------------------+------------------+ |
| | [Guardar] | [Copiar] | |
| | En galeria | Al portapapeles | |
| +------------------+------------------+ |
| |
| +------------------------------------+ |
| | [Cancelar] | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.6. Compartido Exitoso
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | +----------------+ | |
| | | | | |
| | | [Check] | | |
| | | Verde | | |
| | | | | |
| | +----------------+ | |
| | | |
| | Compartido! | |
| | | |
| | Tu logro ha sido compartido | |
| | exitosamente. | |
| | | |
| | +------------------------------+ | |
| | | [Listo] | | |
| | +------------------------------+ | |
| | | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.7. Guardado en Galeria
+------------------------------------------+
| |
| +------------------------------------+ |
| | | |
| | +----------------+ | |
| | | | | |
| | | [Image] | | |
| | | Check | | |
| | | | | |
| | +----------------+ | |
| | | |
| | Guardado en Galeria | |
| | | |
| | La imagen se guardo en tu | |
| | galeria de fotos. | |
| | | |
| | +------------------------------+ | |
| | | [Ver en galeria] | | |
| | +------------------------------+ | |
| | | |
| | +------------------------------+ | |
| | | [Listo] | | |
| | +------------------------------+ | |
| | | |
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Share Option Selector
| Propiedad |
Valor |
| Componente |
CMP-RAD-006 (Share Option) |
| Options |
Solo logro, +Racha, +Nivel, Completo |
| Preview |
Muestra preview en tiempo real |
3.2. Share Image Preview
| Propiedad |
Valor |
| Componente |
CMP-IMG-006 (Share Preview) |
| Size |
Cuadrada 1:1 (Instagram ready) |
| Background |
Gradiente MedTime |
| Logo |
MedTime subtle |
3.3. Share Grid
| Propiedad |
Valor |
| Componente |
CMP-GRD-002 (Share Grid) |
| Columns |
2 |
| Items |
App icons + labels |
| System |
Share sheet nativo |
3.4. Privacy Notice
| Propiedad |
Valor |
| Componente |
CMP-NTC-002 (Privacy Notice) |
| Icon |
Info |
| Text |
Lo que NO se comparte |
| Dismissable |
No |
4. Lo que se Comparte vs NO se Comparte
4.1. SI se Comparte
| Elemento |
Descripcion |
| Nombre del logro |
"Quincena Dorada" |
| Descripcion generica |
"15 dias de constancia" |
| Icono/medalla |
Imagen del logro |
| Racha (opcional) |
Solo numero de dias |
| Nivel (opcional) |
Nombre del nivel |
| Branding MedTime |
Logo sutil |
4.2. NO se Comparte
| Elemento |
Razon |
| Nombres de medicamentos |
Privacidad medica |
| Datos de salud |
HIPAA/Privacidad |
| Horarios de tomas |
Informacion sensible |
| Diagnosticos |
Confidencialidad |
| Nombre completo |
Privacidad |
| Informacion del perfil |
Datos personales |
| Formato |
Dimensiones |
Uso |
| Cuadrado |
1080x1080 |
Instagram, Facebook |
| Story |
1080x1920 |
Instagram Stories |
| Standard |
1200x630 |
Twitter, Links |
6. Comportamientos
6.1. Generacion de Imagen
- Usuario selecciona que incluir
- Preview se actualiza en tiempo real
- Imagen se genera al compartir
- Cache de imagen por 5 minutos
6.2. Share Sheet
- Usa share sheet nativo del OS
- Detecta apps instaladas
- Permite guardar en galeria
- Permite copiar imagen
6.3. Tracking (sin datos personales)
- Log de logro compartido (id)
- Metodo de compartir (canal)
- NO se trackea contenido ni destinatarios
7. Datos Requeridos
interface ShareAchievementState {
achievement: ShareableAchievement;
shareOption: ShareOption;
previewImage?: string; // Base64 or URL
isGenerating: boolean;
}
interface ShareableAchievement {
id: string;
name: string;
description: string; // Generica, sin medicamentos
icon: string;
obtainedAt: Date;
}
interface ShareOption {
includeStreak: boolean;
includeLevel: boolean;
format: ImageFormat;
}
interface ShareContext {
streak?: number;
levelNumber?: number;
levelName?: string;
}
interface GeneratedShareImage {
imageData: string; // Base64
width: number;
height: number;
format: ImageFormat;
}
type ImageFormat =
| 'square' // 1:1
| 'story' // 9:16
| 'standard'; // 1.91:1
8. Validaciones de Privacidad
| Validacion |
Implementacion |
| Sin PHI |
Imagen generada server-side sin datos |
| Sin identificadores |
Solo logro generico |
| Opt-in |
Usuario decide que incluir |
| Preview |
Usuario ve exactamente lo que comparte |
9. Accesibilidad
9.1. Labels
| Elemento |
accessibilityLabel |
| Share option |
"Compartir {opcion seleccionada}" |
| Preview |
"Vista previa de imagen a compartir" |
| Share app |
"Compartir via {app}" |
| Save |
"Guardar imagen en galeria" |
9.2. Anuncios
- Al generar: "Generando imagen..."
- Al compartir: "Abriendo {app}"
- Al guardar: "Imagen guardada en galeria"
10. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)