Patron de Diseno: Cards¶
Identificador: PAT-005 Version: 1.0.0 Fecha: 2025-12-05 Autor: SpecQueen (Consolidacion FASE 5) Estado: Aprobado
1. Proposito¶
Este documento define los patrones estandarizados para cards en MedTime. Las cards son contenedores versatiles que agrupan informacion relacionada y acciones, utilizados extensivamente para medicamentos, alertas, logros, planes y eventos de salud.
2. Anatomia de una Card¶
2.1. Estructura General¶
+------------------------------------------+
| [Media / Header] | <- Opcional
+------------------------------------------+
| |
| [Leading] [Content] [Trail] | <- Primary content
| [Title] |
| [Subtitle] |
| [Supporting text] |
| |
+------------------------------------------+
| [Action Area] | <- Opcional
| [Button 1] [Button 2] [Overflow] |
+------------------------------------------+
Componentes:
- Container: Surface con elevation o outline
- Media: Imagen, icono grande, o header coloreado
- Content: Texto principal
- Actions: Botones o iconos interactivos
2.2. Dimensiones Base¶
| Elemento | Valor |
|---|---|
| Corner radius | 12dp |
| Padding interno | 16dp |
| Elevation (elevated) | 1-2dp |
| Border (outlined) | 1dp, neutral.300 |
| Min height | 72dp |
| Max width | Fill parent - 32dp margin |
3. Variantes de Card¶
3.1. Elevated Card¶
+==========================================+
|| ||
|| Contenido con sombra de elevacion ||
|| ||
+==========================================+
^^^^ Shadow
Uso: Cards interactivas, contenido destacado
Elevation: 1dp default, 2dp on hover/press
Background: surface.main (white/dark)
3.2. Filled Card¶
+------------------------------------------+
| |
| Contenido con fondo solido |
| |
+------------------------------------------+
Uso: Contenido secundario, agrupaciones
Background: surface.variant (neutral.100)
No elevation
3.3. Outlined Card¶
+------------------------------------------+
| | <- 1dp border
| Contenido con borde |
| |
+------------------------------------------+
Uso: Seleccion de opciones, formularios
Border: 1dp, neutral.300
Background: transparent
4. Cards Especializadas MedTime¶
4.1. Medication Card (CMP-CRD-001)¶
+------------------------------------------+
| [Pill] Metformina 850mg [=] | <- Icon + Name + Drag
| 2x diario - Con alimentos | <- Dosage + Instructions
| |
| [COLOR BAR ========================] | <- User color
| |
| Proxima toma: Hoy 14:00 | <- Next dose
| |
| [Editar] [Pausar] [Historial] [...] | <- Actions
+------------------------------------------+
Especificaciones:
- Icon: 40x40dp, forma farmaceutica
- Title: 16sp medium, neutral.900
- Subtitle: 14sp regular, neutral.600
- Color bar: 4dp height, user-customizable
- Actions: Text buttons, 48dp touch target
- Drag handle: Visible en modo edicion
Estados de Medication Card:
| Estado | Visual |
|---|---|
| Active | Normal, color bar visible |
| Paused | Opacity 60%, "PAUSADO" badge |
| Low inventory | Warning icon, orange tint |
| Interaction | Alert icon, red border |
4.2. Alert Card (CMP-CRD-002)¶
+------------------------------------------+
| [!] PENDIENTE 08:00 | <- Status header
+------------------------------------------+
| |
| Medicinas del desayuno | <- Event name
| |
| - Metformina 850mg | <- Medication list
| - Lisinopril 10mg |
| - Gotas oftalmicas |
| |
+------------------------------------------+
| [Tomado] [Posponer 15min] | <- Actions
+------------------------------------------+
Estados visuales:
- PENDIENTE: warning.main header
- VENCIDA: error.main header, pulsing border
- COMPLETADA: success.main header
- OMITIDA: neutral.400 header, strikethrough
Variantes por urgencia:
Normal (> 30 min para vencer):
+------------------------------------------+
| [Clock] PENDIENTE 08:00 |
+------------------------------------------+
Urgente (< 30 min):
+------------------------------------------+
| [!] PROXIMO A VENCER 07:35 |
| Background: warning.100 |
+------------------------------------------+
Vencido:
+------------------------------------------+
| [!!] VENCIDO hace 45 min 08:00 |
| Background: error.100, border pulsing |
+------------------------------------------+
4.3. Interaction Card (CMP-CRD-004)¶
+------------------------------------------+
| [X] CONTRAINDICADO | <- Severity header
+------------------------------------------+
| |
| Warfarina + Aspirina | <- Drug pair
| |
| Aumenta significativamente el riesgo | <- Description
| de sangrado. Evitar uso simultaneo. |
| |
| Recomendacion: Consultar con medico | <- Recommendation
| antes de combinar estos medicamentos. |
| |
| Fuente: DrugBank, actualizado 2025-01 | <- Source
| |
+------------------------------------------+
| [Entiendo el riesgo] [Mas informacion] | <- Actions
+------------------------------------------+
Headers por severidad:
- CONTRAINDICADO: error.main (#D32F2F)
- SERIO: warning.dark (#F57C00)
- MODERADO: warning.light (#FFC107)
- MENOR: success.main (#4CAF50)
4.4. Achievement Card (CMP-CRD-005)¶
+------------------------------------------+
| +-------------+ |
| / \ |
| | [Badge] | | <- Badge icon
| \ / |
| +-------------+ |
| |
| Racha de 7 dias | <- Achievement name
| |
| Tomaste todos tus medicamentos | <- Description
| durante 7 dias seguidos. |
| |
| Desbloqueado: 15 Dic 2025 | <- Date unlocked
| |
+------------------------------------------+
| [Compartir] | <- Action
+------------------------------------------+
Estados:
- Desbloqueado: Full color, glow effect
- En progreso: Partial, progress bar visible
- Bloqueado: Grayscale, lock icon overlay
Card en progreso:
+------------------------------------------+
| [Badge 50%] | <- Partially colored
| |
| Racha de 30 dias |
| |
| [=================----------] | <- Progress bar
| 17/30 dias (57%) |
| |
| 13 dias para desbloquear |
+------------------------------------------+
4.5. Tier Comparison Card (CMP-CRD-007)¶
+------------------------------------------+
| [Crown] | <- Tier icon
| PRO | <- Tier name
| $9.99/mes | <- Price
+------------------------------------------+
| |
| [v] Medicamentos ilimitados |
| [v] Sincronizacion en la nube |
| [v] 1 cuidador con sync |
| [v] Sin anuncios |
| [v] 3 SMS/mes incluidos |
| [x] MFA obligatorio | <- Not included
| [x] Recovery Key |
| |
+------------------------------------------+
| [Seleccionar Pro] | <- CTA
+------------------------------------------+
Colores por tier:
- Free: neutral.600
- Pro: primary.main (#2196F3)
- Perfect: secondary.main (#9C27B0)
Card recomendada (highlight):
+------------------------------------------+
| MAS POPULAR | <- Ribbon
+==========================================+
| [Star] |
| PERFECT |
| $19.99/mes |
+==========================================+ <- Elevated + accent
| |
| [v] Todo lo de Pro + |
| [v] Cuidadores ilimitados |
| [v] MFA obligatorio |
| [v] Recovery Key (24 palabras) |
| [v] Exportacion FHIR |
| [v] Soporte prioritario |
| |
+------------------------------------------+
| [Comenzar con Perfect] |
+------------------------------------------+
4.6. Event Card (Timeline)¶
+------------------------------------------+
| o 08:00 - Toma completada | <- Timeline connector
| | +--------------------------------+ |
| | | [Pill] Metformina 850mg | |
| | | Tomada a las 08:12 | |
| | | "Con el desayuno" | | <- Note
| | +--------------------------------+ |
| | |
| o 09:30 - Medicion registrada |
| | +--------------------------------+ |
| | | [Heart] Presion arterial | |
| | | 120/80 mmHg | |
| | | Normal | | <- Status
| | +--------------------------------+ |
| | |
+------------------------------------------+
Timeline elementos:
- Connector line: 2dp, neutral.300
- Node: 12dp circle, colored by type
- Card: inline, sin elevation
4.7. Appointment Card¶
+------------------------------------------+
| [Calendar] [More] |
| |
| Dr. Garcia - Cardiologo | <- Doctor + specialty
| |
| Lun 15 Dic 2025 | <- Date
| 10:00 AM | <- Time
| |
| Hospital Central | <- Location
| Av. Principal 456, Consultorio 302 |
| |
+------------------------------------------+
| [Preparacion] [Navegar] [Recordar] |
+------------------------------------------+
Indicadores de estado:
- Proxima: Primary border left
- Hoy: Warning background light
- Pasada: Neutral, opacity reducida
- Cancelada: Strikethrough, error text
4.8. Report Card¶
+------------------------------------------+
| [Document] Reporte de Adherencia |
| Diciembre 2025 |
+------------------------------------------+
| |
| Periodo: 01 - 31 Dic 2025 |
| Medicamentos: 5 |
| Tomas registradas: 142 |
| Adherencia promedio: 94% |
| |
| [=================================] | <- Visual summary
| |
+------------------------------------------+
| [Ver detalle] [Exportar PDF] [Share] |
+------------------------------------------+
5. Interacciones de Card¶
5.1. Card Clickeable¶
Toda la card es tappable:
+------------------------------------------+
| |
| [Contenido] [>] | <- Chevron indica navegacion
| |
+------------------------------------------+
- Ripple effect en toda la superficie
- Navigates to detail view
- No actions individuales (o van en detalle)
5.2. Card con Acciones¶
+------------------------------------------+
| |
| [Contenido de la card] |
| |
+------------------------------------------+
| [Action 1] [Action 2] [...] | <- Action area separada
+------------------------------------------+
- Card content: no clickeable
- Actions: botones independientes
- Overflow [...]: mas acciones en menu
5.3. Card Expandible¶
Estado colapsado:
+------------------------------------------+
| [Icon] Titulo [v] | <- Chevron down
| Subtitulo |
+------------------------------------------+
Estado expandido:
+------------------------------------------+
| [Icon] Titulo [^] | <- Chevron up
| Subtitulo |
+------------------------------------------+
| |
| Contenido adicional visible |
| cuando la card esta expandida. |
| |
| [Action 1] [Action 2] |
+------------------------------------------+
Animacion: Height expansion 200ms ease
5.4. Card Swipeable¶
Swipe izquierda (accion secundaria):
+------------------------------------------+
| [Pausar] |
| [Card content...] [Azul] |
+------------------------------------------+
Swipe derecha (accion destructiva):
+------------------------------------------+
| [Eliminar] |
| [Rojo] [Card content...] |
+------------------------------------------+
- Threshold: 30% del ancho para preview
- Threshold: 60% para ejecutar
- Haptic feedback durante swipe
5.5. Card Seleccionable¶
Estado normal:
+------------------------------------------+
| [O] Opcion 1 | <- Radio/checkbox
+------------------------------------------+
Estado seleccionado:
+==========================================+
| [v] Opcion 1 | <- Checked + highlight
| (Border primary.main) |
+==========================================+
6. Agrupacion de Cards¶
6.1. Lista Vertical¶
+------------------------------------------+
| [Card 1] |
+------------------------------------------+
| 12dp spacing
+------------------------------------------+
| [Card 2] |
+------------------------------------------+
|
+------------------------------------------+
| [Card 3] |
+------------------------------------------+
Spacing entre cards: 12dp
Padding horizontal: 16dp
6.2. Grid de Cards¶
+-------------------+ +-------------------+
| [Card 1] | | [Card 2] |
| | | |
+-------------------+ +-------------------+
| |
8dp spacing
| |
+-------------------+ +-------------------+
| [Card 3] | | [Card 4] |
| | | |
+-------------------+ +-------------------+
Uso: Logros, planes, opciones
Columns: 2 (phone), 3-4 (tablet)
6.3. Carousel Horizontal¶
+-------------------+-------------------+---
| [Card 1] | [Card 2] | [C
| | |
+-------------------+-------------------+---
->
Scroll horizontal
Spacing: 12dp
Peek: 16dp del siguiente card visible
Snap: Card se centra al soltar
7. Estados de Card¶
7.1. Loading State¶
+------------------------------------------+
| [Skeleton] [==================] |
| [============] |
| |
| [==========] [==========] |
+------------------------------------------+
- Shimmer animation
- Mantiene layout aproximado
- Respeta reduce motion
7.2. Empty State¶
+------------------------------------------+
| |
| [Ilustracion] |
| |
| No hay medicamentos |
| |
| Agrega tu primer medicamento |
| para comenzar. |
| |
| [+ Agregar medicamento] |
| |
+------------------------------------------+
7.3. Error State¶
+------------------------------------------+
| [!] Error al cargar |
| |
| No pudimos cargar la informacion. |
| |
| [Reintentar] |
+------------------------------------------+
7.4. Disabled State¶
+------------------------------------------+ <- Opacity 60%
| |
| [Contenido no interactivo] |
| |
| [Accion deshabilitada] | <- Button disabled
+------------------------------------------+
8. Accesibilidad¶
8.1. Card como Unidad¶
Screen reader lee la card como unidad:
"Metformina 850mg, 2 veces al dia.
Proxima toma a las 2 de la tarde.
Acciones disponibles: Editar, Pausar, Historial, Mas opciones."
iOS: accessibilityElements agrupa
Android: importantForAccessibility + contentDescription
8.2. Focus y Navegacion¶
Tab order en card:
1. Card container (si es clickeable)
2. Action 1
3. Action 2
4. Overflow menu
Focus visible:
- Outline 2dp, primary.main
- Offset 2dp
8.3. Contraste¶
Todos los textos:
- Title: 4.5:1 minimo
- Subtitle: 4.5:1 minimo
- Supporting: 4.5:1 minimo
Elementos visuales:
- Icons: 3:1 minimo
- Borders: 3:1 minimo
- Color bars: complementados con texto
9. Responsive Behavior¶
9.1. Phone Portrait¶
+------------------------------------------+
| [Full width card] |
+------------------------------------------+
| Margin: 16dp horizontal |
| Max width: screen width - 32dp |
+------------------------------------------+
9.2. Phone Landscape / Tablet¶
+-------------------+ +-------------------+
| [Card] | | [Card] |
+-------------------+ +-------------------+
Grid de 2 columnas
Max card width: 400dp
9.3. Large Tablet / Desktop¶
+-------------+ +-------------+ +-------------+
| [Card] | | [Card] | | [Card] |
+-------------+ +-------------+ +-------------+
Grid de 3-4 columnas
Max card width: 360dp
Centered content area: 1200dp max
10. Modulos que Usan este Patron¶
| Modulo | Cards Principales |
|---|---|
| MTS-MED-001 | Medication Card |
| MTS-ALT-001 | Alert Card |
| MTS-INT-001/002 | Interaction Card |
| MTS-GAM-001 | Achievement Card |
| MTS-PAY-001 | Tier Comparison Card |
| MTS-CIT-001 | Appointment Card |
| MTS-RPT-001 | Report Card |
| MTS-EVT-001 | Event Card |
| MTS-ADH-001 | Adherence Summary Card |
| MTS-ANA-001 | Result Card |
| MTS-USR-001 | Profile Card, Caregiver Card |
| MTS-FAM-001 | Family Member Card |
11. Referencias¶
12. Historial de Cambios¶
| Version | Fecha | Cambios |
|---|---|---|
| 1.0.0 | 2025-12-05 | Version inicial - Consolidacion FASE 5 |
Documento generado por SpecQueen "Una card bien disenada es una historia completa en un vistazo."