Patron de Diseno: Navegacion
Identificador: PAT-003
Version: 1.0.0
Fecha: 2025-12-05
Autor: SpecQueen (Consolidacion FASE 5)
Estado: Aprobado
1. Proposito
Este documento define los patrones estandarizados de navegacion para MedTime. Incluye tabs, drawer, bottom sheet, modales y navegacion jerarquica para garantizar una experiencia consistente y predecible.
2. Arquitectura de Navegacion
2.1. Jerarquia de Pantallas
[Splash]
|
[Login/Register]
|
[Onboarding] (primera vez)
|
+-------+-------+
| |
[Main Navigator] [Settings Flow]
|
+----------+----------+
| | |
[Home] [Meds] [Calendar]
| | |
[Details] [Details] [Details]
2.2. Tipos de Navegacion
| Tipo |
Uso |
Ejemplo |
| Tab/Bottom Nav |
Secciones principales |
Home, Meds, Calendar, More |
| Stack |
Profundidad jerarquica |
Lista > Detalle > Editar |
| Modal |
Tareas aisladas |
Agregar medicamento |
| Bottom Sheet |
Acciones contextuales |
Opciones de medicamento |
| Drawer |
Navegacion secundaria |
Perfil, Configuracion |
3. Bottom Navigation Bar
3.1. Estructura
+-----------------------------------------------+
| |
| [Home] [Meds] [+] [Calendar] [More] |
| o o FAB o o |
| Inicio Medicinas + Calendario Mas |
| |
+-----------------------------------------------+
^ ^ ^
Active FAB Inactive
3.2. Especificaciones
| Atributo |
Valor |
| Height |
80dp (incluyendo safe area) |
| Items |
4-5 maximo |
| Touch target |
48x48dp por item |
| Icono |
24x24dp |
| Label |
12sp |
| Contraste |
4.5:1 minimo |
3.3. Estados
| Estado |
Icono |
Label |
Indicador |
| Inactive |
Outlined, neutral.500 |
neutral.500 |
- |
| Active |
Filled, primary.main |
primary.main |
Pill background |
| Pressed |
Ripple effect |
- |
- |
| Badge |
Dot o numero |
- |
error.main circle |
3.4. FAB Central
+-----------------------------------------------+
| +---+ |
| | | | <- FAB elevado
| [Home] [Meds] | + | [Cal] [More] |
| +---+ |
+-----------------------------------------------+
Especificaciones FAB:
- Size: 56x56dp
- Elevation: 6dp
- Position: Centrado, sobresale 28dp
- Accion: Agregar medicamento (accion principal)
3.5. Comportamiento
Scroll behavior:
- Lista corta: Bottom nav siempre visible
- Lista larga: Opcion hide on scroll
- FAB: Siempre visible (accion critica)
Al cambiar tab:
- Resetea stack de navegacion del tab
- Mantiene estado del tab anterior
- Animacion: crossfade 300ms
4. Top App Bar
4.1. Variantes
Regular (56dp):
+-----------------------------------------------+
| [<] Mis Medicamentos [?] [...] |
+-----------------------------------------------+
- Back button: 24dp icon, 48dp touch
- Title: 20sp medium, centered o left
- Actions: max 3 iconos
Large (112dp):
+-----------------------------------------------+
| [<] [?] [...] |
| |
| Mis Medicamentos | <- Titulo grande
+-----------------------------------------------+
Collapses to Regular on scroll
Title: 28sp bold cuando expandido
With Search:
+-----------------------------------------------+
| [<] [Q] Buscar medicamentos... [X] |
+-----------------------------------------------+
Search se expande al tap
Clear button [X] cuando hay texto
Estado inicial (expanded):
+-----------------------------------------------+
| [<] [...] |
| |
| Titulo Grande |
+-----------------------------------------------+
Despues de scroll (collapsed):
+-----------------------------------------------+
| [<] Titulo Grande [...] |
+-----------------------------------------------+
- Transicion suave (parallax)
- Threshold: 56dp de scroll
- Respeta "reduce motion"
5. Tab Bar
5.1. Estructura
+-----------------------------------------------+
| [Activos] | [Pausados] | [Historial] |
| ==== |
+-----------------------------------------------+
- Height: 48dp
- Indicador: 2dp, full width del tab
- Touch target: 48dp height, min 90dp width
5.2. Variantes
Fixed Tabs (3-4 opciones):
| [Tab 1] | [Tab 2] | [Tab 3] | [Tab 4] |
^-- Ancho igual distribuido
Scrollable Tabs (5+ opciones):
| [Tab 1] | [Tab 2] | [Tab 3] | [Tab 4] | ->
^-- Ancho segun contenido, scrolleable
5.3. Con Badges
| [Activos] | [Pendientes (3)] | [Historial] |
^-- Badge numerico
6. Navigation Drawer
6.1. Estructura
+------------------------------------------+
| +------------------------------------+ |
| | [Avatar] | |
| | Juan Perez | |
| | juanperez@email.com | |
| | Plan: Pro [Upgrade]| |
| +------------------------------------+ |
| |
| [Home] Inicio |
| [Meds] Mis Medicamentos |
| [Calendar] Calendario |
| [Stats] Estadisticas |
| ----------------------------------------|
| [Settings] Configuracion |
| [Help] Ayuda |
| [Info] Acerca de |
| ----------------------------------------|
| [Logout] Cerrar Sesion |
| |
+------------------------------------------+
Width: 280dp (standard) o 360dp (permanent)
6.2. Tipos de Drawer
| Tipo |
Uso |
Trigger |
| Standard |
Mobile principal |
Hamburger o swipe |
| Modal |
Overlay sobre contenido |
Hamburger |
| Permanent |
Tablets landscape |
Siempre visible |
6.3. Gestos
Abrir:
- Tap en hamburger menu
- Swipe desde edge izquierdo (20dp zone)
Cerrar:
- Tap fuera del drawer
- Swipe hacia la izquierda
- Back button/gesture
- Seleccionar item
7. Bottom Sheet
7.1. Modal Bottom Sheet
[Contenido principal oscurecido]
+------------------------------------------+
| ---- <- Drag handle (32x4dp) |
+------------------------------------------+
| |
| Opciones de Medicamento |
| |
| +------------------------------------+ |
| | [Edit] Editar | |
| +------------------------------------+ |
| +------------------------------------+ |
| | [Pause] Pausar | |
| +------------------------------------+ |
| +------------------------------------+ |
| | [History] Ver historial | |
| +------------------------------------+ |
| +------------------------------------+ |
| | [Delete] Eliminar [!] | |
| +------------------------------------+ |
| |
+------------------------------------------+
- Scrim: #000000 @ 32% opacity
- Corner radius: 16dp top
- Max height: 90% de pantalla
- Swipe down para cerrar
7.2. Persistent Bottom Sheet
+------------------------------------------+
| |
| [Contenido principal] |
| |
+------------------------------------------+
| ---- |
+------------------------------------------+
| Preview colapsado (peek height: 64dp) |
+------------------------------------------+
Al expandir:
+------------------------------------------+
| [Contenido se comprime] |
+------------------------------------------+
| ---- |
+------------------------------------------+
| |
| Contenido expandido |
| (hasta half-expanded o full) |
| |
+------------------------------------------+
7.3. Estados
| Estado |
Height |
Uso |
| Hidden |
0 |
No visible |
| Collapsed |
64-80dp |
Preview, peek |
| Half-expanded |
50% |
Contenido parcial |
| Expanded |
90% max |
Contenido completo |
8. Modales y Dialogos
8.1. Alert Dialog
+------------------------------------------+
| |
| [Contenido oscurecido] |
| |
| +------------------------------+ |
| | | |
| | Eliminar Metformina? | |
| | | |
| | Esta accion no se puede | |
| | deshacer. | |
| | | |
| | [Cancelar] [Eliminar] | |
| | | |
| +------------------------------+ |
| |
+------------------------------------------+
- Width: 280-560dp
- Max height: 70% pantalla
- Corner radius: 24dp
- Scrim: igual que bottom sheet
8.2. Full Screen Dialog
+------------------------------------------+
| [X] Agregar Medicamento [Guardar]|
+------------------------------------------+
| |
| [Contenido del formulario] |
| |
| |
+------------------------------------------+
Uso:
- Formularios largos
- Wizards multi-paso
- Contenido que requiere focus total
Transicion: slide up desde bottom
8.3. Snackbar
+------------------------------------------+
| |
| [Contenido principal] |
| |
+------------------------------------------+
| |
| +------------------------------------+ |
| | Medicamento guardado [Deshacer]| | <- Snackbar
| +------------------------------------+ |
| |
+------------------------------------------+
| [Bottom Navigation] |
+------------------------------------------+
- Position: arriba de bottom nav
- Duration: 4-10 segundos
- Swipe to dismiss
- Max 2 lineas de texto
9. Navegacion por Gestos
9.1. Gestos Estandar
| Gesto |
Accion |
Contexto |
| Tap |
Seleccionar |
Universal |
| Long press |
Menu contextual |
Items de lista |
| Swipe left |
Accion secundaria |
Lista (pausar) |
| Swipe right |
Accion primaria |
Lista (eliminar) |
| Swipe down |
Refresh / Dismiss |
Listas, modales |
| Swipe from edge |
Back |
iOS, Android gesture nav |
| Pinch |
Zoom |
Imagenes, graficos |
9.2. iOS Specific
Swipe back:
- Desde edge izquierdo
- Preview de pantalla anterior
- Cancelable si no completa
- Threshold: 50% del ancho
Interactive dismiss:
- Modales pueden arrastrar hacia abajo
- Cards pueden deslizar para ver detras
9.3. Android Specific
Gesture navigation:
- Swipe from left/right edge: Back
- Swipe up from bottom: Home
- Swipe up and hold: Recent apps
Predictive back:
- Preview de destino durante gesto
- Animacion de preview
10. Deep Linking
10.1. Estructura de URLs
medtime://
├── /medication/:id -> SCR-MED-002
├── /medication/:id/edit -> SCR-MED-003
├── /alert/:id -> SCR-ALT-002
├── /calendar/:date -> SCR-CAL-003
├── /profile -> SCR-USR-001
├── /settings -> Settings stack
└── /onboarding -> Onboarding flow
10.2. Universal Links
https://app.medtime.com/
├── /med/:id -> Abre app o web
├── /share/:profile_id -> Perfil compartido
├── /invite/:code -> Invitacion cuidador
└── /verify/:token -> Verificacion email
10.3. Manejo de Estado
App cerrada:
1. User taps deep link
2. App launches
3. Auth check
4. Navigate to destination
5. Load content
App en background:
1. User taps deep link
2. App comes to foreground
3. Navigate preserving stack
4. Load content
11. Transiciones y Animaciones
11.1. Transiciones de Pantalla
| Tipo |
Animacion |
Duracion |
| Push |
Slide right-to-left |
300ms |
| Pop |
Slide left-to-right |
300ms |
| Modal present |
Slide up |
300ms |
| Modal dismiss |
Slide down |
250ms |
| Fade |
Crossfade |
200ms |
| Shared element |
Match geometry |
350ms |
11.2. Reduce Motion
Cuando esta activo:
- Todas las transiciones: crossfade 150ms
- Sin slides ni bounces
- Sin parallax
- Haptics se mantienen
11.3. Shared Element Transitions
Lista de medicamentos:
+------------------------+
| [Pill] Metformina | <- Elemento compartido
+------------------------+
| tap |
v
Detalle de medicamento:
+------------------------------------------+
| +--------------------------------------+ |
| | | |
| | [Pill] | | <- Mismo elemento,
| | | | animado a nueva
| | Metformina 850mg | | posicion
| | | |
| +--------------------------------------+ |
12. Navegacion por Rol
12.1. Paciente Independiente (PI)
Bottom Nav:
[Inicio] [Medicinas] [+] [Calendario] [Mas]
^-- Full access a todas las secciones
12.2. Cuidador Responsable (CR)
Bottom Nav:
[Dashboard] [Perfiles] [+] [Alertas] [Mas]
^-- Dashboard muestra todos los dependientes
^-- Selector de perfil disponible
12.3. Cuidador Solidario (CS)
Bottom Nav:
[Dashboard] [Alertas] [Calendario] [Mas]
^-- Sin acceso a edicion de medicamentos
^-- Vista read-only segun permisos
13. Accesibilidad
13.1. Focus Management
Al abrir modal:
1. Focus se mueve al titulo del modal
2. Tab navega dentro del modal
3. Focus trap activo
4. Al cerrar, focus vuelve al trigger
Screen reader:
- Anuncia cambio de contexto
- Lee titulo de nueva pantalla
- Anuncia numero de items en lista
13.2. Skip Navigation
Para usuarios de teclado/switch:
- Skip to main content
- Skip to navigation
- Skip to search
13.3. Touch Targets
Todos los elementos de navegacion:
- Minimo 44x44dp
- 8dp de separacion minima
- Labels descriptivos para screen readers
14. Modulos que Usan este Patron
| Patron |
Modulos |
| Bottom Navigation |
Todos (shell principal) |
| Top App Bar |
Todos (pantallas de detalle) |
| Tab Bar |
MTS-MED-001, MTS-ALT-001, MTS-ADH-001 |
| Bottom Sheet |
MTS-MED-001, MTS-USR-001, MTS-CIT-001 |
| Modal Dialog |
MTS-AUTH-001, MTS-PAY-001, MTS-USR-001 |
| Drawer |
Settings, Profile |
15. Referencias
16. Historial de Cambios
| Version |
Fecha |
Cambios |
| 1.0.0 |
2025-12-05 |
Version inicial - Consolidacion FASE 5 |
Documento generado por SpecQueen
"La mejor navegacion es aquella que el usuario nunca nota."