Patron de Diseno: Listas¶
Identificador: PAT-002 Version: 1.0.0 Fecha: 2025-12-05 Autor: SpecQueen (Consolidacion FASE 5) Estado: Aprobado
1. Proposito¶
Este documento define los patrones estandarizados para listas en MedTime. Abarca listas de medicamentos, alertas, historial, citas y otros elementos recurrentes en la aplicacion.
2. Tipos de Lista¶
2.1. Lista Simple (Single Line)¶
+------------------------------------------+
| [Icon] Titulo del item [>] |
+------------------------------------------+
| [Icon] Titulo del item [>] |
+------------------------------------------+
| [Icon] Titulo del item [>] |
+------------------------------------------+
Uso: Configuraciones, opciones de menu
Height: 56dp minimo
2.2. Lista de Dos Lineas¶
+------------------------------------------+
| [Icon] Titulo principal |
| Subtitulo o descripcion [>] |
+------------------------------------------+
Uso: Medicamentos, contactos, cuidadores
Height: 72dp
2.3. Lista de Tres Lineas¶
+------------------------------------------+
| [Avatar] Titulo principal |
| Linea secundaria |
| Linea terciaria o metadata [>] |
+------------------------------------------+
Uso: Alertas detalladas, historial con notas
Height: 88dp
2.4. Lista con Cards¶
+------------------------------------------+
| +--------------------------------------+ |
| | [Icon] Titulo | |
| | Descripcion | |
| | [Action1] [Action2] | |
| +--------------------------------------+ |
| |
| +--------------------------------------+ |
| | [Icon] Titulo | |
| | Descripcion | |
| | [Action1] [Action2] | |
| +--------------------------------------+ |
+------------------------------------------+
Uso: Medicamentos activos, alertas pendientes
Spacing: 12dp entre cards
3. Anatomia del Item de Lista¶
3.1. Estructura Estandar¶
+----------------------------------------------------------+
| [Leading] [Content Area] [Trailing] |
+----------------------------------------------------------+
Leading (opcional):
- Icon: 24x24dp
- Avatar: 40x40dp
- Thumbnail: 56x56dp
- Checkbox: 24x24dp (touch 48x48dp)
- Radio: 24x24dp (touch 48x48dp)
Content Area:
- Title: 16sp, neutral.900
- Subtitle: 14sp, neutral.600
- Supporting text: 12sp, neutral.500
Trailing (opcional):
- Chevron: 24x24dp
- Switch: 48x24dp
- Icon button: 24x24dp
- Badge: variable
- Metadata: 12sp
3.2. Espaciado¶
+------------------------------------------+
| 16dp | Content | 16dp | Trail |16dp|
+------------------------------------------+
| |
| Vertical padding: 12dp top/bottom |
| Entre lineas de texto: 4dp |
| |
+------------------------------------------+
4. Listas Especializadas MedTime¶
4.1. Lista de Medicamentos (SCR-MED-001)¶
+------------------------------------------+
| +--------------------------------------+ |
| | [Pill] Metformina [=] | |
| | 850mg - 2x diario | |
| | [COLOR BAR ==================] | |
| | Proxima toma: 14:00 | |
| | [Editar] [Pausar] [...] | |
| +--------------------------------------+ |
| |
| +--------------------------------------+ |
| | [Cap] Lisinopril [=] | |
| | 10mg - 1x diario | |
| | [COLOR BAR ==================] | |
| | Proxima toma: 08:00 manana | |
| | [Editar] [Pausar] [...] | |
| +--------------------------------------+ |
+------------------------------------------+
Elementos:
- Icono de forma farmaceutica
- Nombre + concentracion
- Dosis + frecuencia
- Color bar personalizable por usuario
- Proxima toma
- Acciones contextuales
- Drag handle [=] para reordenar
Touch targets: 48dp altura minima
Swipe actions: Pausar (izq), Eliminar (der)
4.2. Lista de Alertas (SCR-ALT-003)¶
+------------------------------------------+
| Hoy | <- Section header
+------------------------------------------+
| +--------------------------------------+ |
| | [!] PENDIENTE 08:00 | | <- Status + hora
| | Medicinas del desayuno | |
| | Metformina, Lisinopril | |
| | [Tomar ahora] [Ver detalles] | |
| +--------------------------------------+ |
| |
| +--------------------------------------+ |
| | [v] COMPLETADA 07:30 | |
| | Presion arterial | |
| | 120/80 mmHg | |
| +--------------------------------------+ |
+------------------------------------------+
| Ayer |
+------------------------------------------+
| [Items agrupados por fecha...] |
+------------------------------------------+
Estados visuales:
- PENDIENTE: warning.main background
- COMPLETADA: success.main icon + neutral background
- OMITIDA: neutral.400 strikethrough
- EMERGENCIA: error.main pulsing border
4.3. Lista de Historial (Timeline)¶
+------------------------------------------+
| o 08:00 - Toma completada |
| | Metformina 850mg |
| | |
| o 08:05 - Nota agregada |
| | "Tome con jugo de naranja" |
| | |
| o 09:30 - Medicion registrada |
| | Glucosa: 115 mg/dL |
| | |
| o 12:00 - Recordatorio pospuesto |
| +15 minutos |
+------------------------------------------+
Elementos:
- Timeline connector (linea vertical 2dp)
- Nodos de evento (circulo 12dp)
- Hora del evento
- Tipo de evento (icono + texto)
- Detalles del evento
- Colores segun tipo de evento
4.4. Lista de Citas (SCR-CIT-001)¶
+------------------------------------------+
| Proximas |
+------------------------------------------+
| +--------------------------------------+ |
| | [Calendar] Dr. Garcia | |
| | Cardiologo | |
| | Lun 15 Dic - 10:00 | |
| | Hospital Central | |
| | [Preparacion] [Navegar] | |
| +--------------------------------------+ |
+------------------------------------------+
| Pasadas |
+------------------------------------------+
| +--------------------------------------+ |
| | [Calendar] Dra. Martinez | |
| | Laboratorio | |
| | Vie 10 Dic - 08:00 | |
| | [Ver notas] [Repetir] | |
| +--------------------------------------+ |
+------------------------------------------+
Acciones contextuales:
- Preparacion: Ver instrucciones pre-cita
- Navegar: Abrir en Maps
- Ver notas: Notas post-cita
- Repetir: Crear nueva cita similar
4.5. Lista de Logros (Gamificacion)¶
+------------------------------------------+
| Desbloqueados (12) |
+------------------------------------------+
| [Badge] [Badge] [Badge] [Badge] |
| 7 dias 14 dias 30 dias 100 dias |
| |
| [Badge] [Badge] [Badge] [Badge] |
| 1er med 5 meds Puntual Notas |
+------------------------------------------+
| En progreso (3) |
+------------------------------------------+
| +--------------------------------------+ |
| | [Badge-50%] Racha de 60 dias | |
| | 32/60 dias - 53% | |
| | [========-------] | |
| +--------------------------------------+ |
+------------------------------------------+
| Bloqueados (8) |
+------------------------------------------+
| [Locked] [Locked] [Locked] [Locked] |
| ? ? ? ? |
+------------------------------------------+
Estados de badge:
- Desbloqueado: Full color, glow opcional
- En progreso: Parcialmente visible, progress bar
- Bloqueado: Grayscale, icono candado
5. Estados de Lista¶
5.1. Estado Vacio¶
+------------------------------------------+
| |
| |
| [Ilustracion] |
| |
| No tienes medicamentos |
| |
| Agrega tu primer medicamento para |
| comenzar a usar MedTime. |
| |
| [+ Agregar medicamento] |
| |
| |
+------------------------------------------+
Elementos:
- Ilustracion contextual (no generica)
- Titulo descriptivo
- Texto explicativo breve
- CTA principal
5.2. Estado de Carga¶
+------------------------------------------+
| +--------------------------------------+ |
| | [Skeleton] [================] | |
| | [========] | |
| +--------------------------------------+ |
| +--------------------------------------+ |
| | [Skeleton] [================] | |
| | [========] | |
| +--------------------------------------+ |
| +--------------------------------------+ |
| | [Skeleton] [================] | |
| | [========] | |
| +--------------------------------------+ |
+------------------------------------------+
- Mostrar 3-5 skeleton items
- Animacion shimmer de izquierda a derecha
- Mantener layout esperado
- Respeta "reduce motion" del sistema
5.3. Estado de Error¶
+------------------------------------------+
| |
| [Error Icon] |
| |
| No pudimos cargar tus medicamentos |
| |
| Revisa tu conexion a internet e |
| intenta de nuevo. |
| |
| [Reintentar] |
| |
+------------------------------------------+
6. Interacciones¶
6.1. Swipe Actions¶
Swipe izquierda:
+------------------------------------------+
| [Pausar] |
| [Item de lista...] [Azul] |
+------------------------------------------+
Swipe derecha:
+------------------------------------------+
| [Eliminar] |
| [Rojo] [Item de lista...] |
+------------------------------------------+
Reglas:
- Swipe parcial: muestra preview de accion
- Swipe completo: ejecuta accion
- Acciones destructivas: confirmar
- Touch target de accion: 80dp minimo
6.2. Long Press¶
Long press en item:
+------------------------------------------+
| +--------------------------------------+ |
| | [Check] Item seleccionado | |
| +--------------------------------------+ |
| |
| +--------------------------------------+ |
| | [O] Item no seleccionado | |
| +--------------------------------------+ |
+------------------------------------------+
| |
| Seleccionados: 2 [Eliminar] [Mas] |
+------------------------------------------+
- Activa modo seleccion multiple
- Barra de acciones aparece abajo
- Tap para seleccionar/deseleccionar
- "Seleccionar todo" disponible
6.3. Pull to Refresh¶
[Usuario arrastra hacia abajo]
+------------------------------------------+
| [Spinner girando] |
| Actualizando... |
+------------------------------------------+
| |
| [Lista de items...] |
| |
+------------------------------------------+
- Indicator aparece arriba de la lista
- Animacion bounce al soltar
- Timeout: 30 segundos maximo
- Mensaje de exito/error despues
6.4. Drag and Drop (Reordenar)¶
+------------------------------------------+
| [=] Item 1 | <- Drag handle visible
+------------------------------------------+
| [=] [Item 2 - siendo arrastrado] | <- Elevacion + shadow
+------------------------------------------+
| [Espacio de drop] | <- Indicador de posicion
+------------------------------------------+
| [=] Item 3 |
+------------------------------------------+
| [=] Item 4 |
+------------------------------------------+
- Solo en modo edicion o siempre con handle
- Haptic feedback durante drag
- Animacion de reordenamiento fluida
- Persiste orden al soltar
7. Agrupacion y Filtrado¶
7.1. Section Headers¶
+------------------------------------------+
| ACTIVOS (5) | <- Section header
+------------------------------------------+
| [Item 1] |
| [Item 2] |
| [Item 3] |
+------------------------------------------+
| PAUSADOS (2) |
+------------------------------------------+
| [Item 4] |
| [Item 5] |
+------------------------------------------+
Estilo:
- Background: neutral.100
- Text: 12sp uppercase, neutral.600
- Height: 32dp
- Sticky: se fija al hacer scroll
7.2. Tabs de Filtro¶
+------------------------------------------+
| [Todos] | [Activos] | [Pausados] |
| === |
+------------------------------------------+
- Tab activo: indicador 2dp, primary.main
- Contenido cambia con animacion fade
- Badge en tab si hay items importantes
7.3. Filtros Avanzados¶
+------------------------------------------+
| [Q] Buscar... [Filtros] |
+------------------------------------------+
| |
| Filtros activos: |
| [x Diarios] [x Desayuno] [Limpiar todo] |
| |
+------------------------------------------+
8. Paginacion e Infinite Scroll¶
8.1. Infinite Scroll¶
+------------------------------------------+
| [Item 1] |
| [Item 2] |
| [...] |
| [Item 20] |
+------------------------------------------+
| [Spinner] |
| Cargando mas... | <- Al llegar al final
+------------------------------------------+
- Trigger: 200dp antes del final
- Batch size: 20 items
- Indicador de carga sutil
- Mensaje si no hay mas items
8.2. Paginacion Manual¶
+------------------------------------------+
| [Lista de items 1-20] |
+------------------------------------------+
| |
| [< Anterior] 1 2 3 ... 10 [Sig >] |
| |
+------------------------------------------+
Uso: Cuando el usuario necesita control
- Historial de varios meses
- Reportes con muchas paginas
9. Accesibilidad¶
9.1. Navegacion con Screen Reader¶
VoiceOver/TalkBack lee:
"Metformina 850mg, 2 veces al dia.
Proxima toma a las 2 de la tarde.
Boton. Desliza hacia arriba o abajo para
mas opciones."
Swipe actions anunciadas:
"Acciones disponibles: Editar, Pausar, Eliminar"
9.2. Roles y Labels¶
Lista:
- role="list"
- aria-label="Lista de medicamentos activos"
Item:
- role="listitem"
- aria-describedby para acciones
- Interactive elements focusables
9.3. Touch Targets¶
+------------------------------------------+
| |
| 48dp | <- Altura minima clickeable
| |
+------------------------------------------+
| |
| 48dp |
| |
+------------------------------------------+
- Items siempre de 48dp minimo
- Acciones inline: 44x44dp
- Separacion entre acciones: 8dp minimo
10. Rendimiento¶
10.1. Virtualizacion¶
Para listas largas (>50 items):
- iOS: UICollectionView con diffable data source
- Android: RecyclerView con DiffUtil
Solo renderiza items visibles + buffer
Buffer: 5 items arriba y abajo
10.2. Optimizacion de Imagenes¶
- Lazy loading de thumbnails
- Placeholder mientras carga
- Cachear imagenes cargadas
- Tamano maximo: 56x56dp @3x = 168x168px
10.3. Metricas de Rendimiento¶
| Metrica | Target |
|---|---|
| First render | < 100ms |
| Scroll FPS | 60fps |
| Time to interactive | < 200ms |
| Memory per item | < 1KB |
11. Modulos que Usan este Patron¶
| Modulo | Tipo de Lista |
|---|---|
| MTS-MED-001 | Lista de medicamentos con cards |
| MTS-ALT-001 | Lista de alertas agrupadas |
| MTS-CIT-001 | Lista de citas timeline |
| MTS-USR-001 | Lista de cuidadores |
| MTS-FAM-001 | Lista de perfiles familiares |
| MTS-ADH-001 | Lista de historial timeline |
| MTS-GAM-001 | Grid de logros |
| MTS-RX-001 | Lista de recetas |
| MTS-EST-001 | Lista de estudios |
| MTS-ANA-001 | Lista de resultados |
| MTS-EVT-001 | Timeline de eventos |
| MTS-RPT-001 | Lista de reportes |
12. Referencias¶
- 02-component-library.md - CMP-CRD-, CMP-LST-
- Material Design 3 - Lists
- Apple HIG - Lists and Tables
13. Historial de Cambios¶
| Version | Fecha | Cambios |
|---|---|---|
| 1.0.0 | 2025-12-05 | Version inicial - Consolidacion FASE 5 |
Documento generado por SpecQueen "Una lista bien organizada reduce la carga cognitiva y aumenta la eficiencia."