Sistema de Navegación Inferior (coastdigitalgroup/coastai-skill…

Sistema de Navegación Inferior

Propósito

El Sistema de Navegación Inferior proporciona un marco de diseño estandarizado, móvil primero, para barras de navegación inferior, barras de pestañas y acoplamientos de acciones persistentes en interfaces web móviles y aplicaciones web progresivas (PWAs). Los dispositivos móviles modernos con relaciones de aspecto grandes colocan los encabezados superiores fuera del alcance cómodo de una mano ("la zona del pulgar"). La navegación inferior ancla los destinos principales de la aplicación y las acciones de conversión críticas directamente dentro del alcance natural del pulgar del usuario.

Diseñar un sistema de navegación inferior efectivo requiere equilibrar la densidad de elementos (3 a 5 elementos), la jerarquía visual de estados activos/inactivos, el tamaño de los objetivos táctiles, la colocación de insignias, las inserciones de áreas seguras del viewport (env(safe-area-inset-bottom)), las integraciones de botones de acción flotantes (FAB) y las reglas de adaptación para escritorio sin interrupciones. Este skill une la experiencia de diseño UX móvil y la ejecución técnica en estricto cumplimiento con los estándares de accesibilidad WCAG AA.

Casos de Uso

• Aplicación Web Móvil de Comercio Electrónico: Proporcionar acceso inmediato con un toque del pulgar a Inicio, Búsqueda/Explorar, Elementos Guardados, Carrito de Compras (con insignia de recuento de artículos) y Cuenta.
• Aplicaciones Web Móviles SaaS y PWAs: Estructurar la navegación principal para aplicaciones de productividad móvil (por ejemplo, Tareas de Hoy, Fuentes, Añadir Rápido [+], Mensajes, Configuración).
• Plataformas Sociales y de Contenido: Gestionar el cambio de alta frecuencia entre la Fuente de Inicio, Explorar, Crear/Subir, Notificaciones de Actividad y Perfil de Usuario.
• Servicios Web de Entrega y Logística: Mantener pestañas de estado principales (Pedidos, Mapa de Entrega Activo, Bandeja de Entrada, Perfil) persistentes en la parte inferior de las vistas durante el seguimiento activo.
• Operaciones de Campo y Formularios de Inspección: Anclar botones de acción persistentes (Guardar Borrador, Subir Foto, Enviar Formulario) en la parte inferior de formularios móviles largos.

Cuándo NO Usar

• Aplicaciones Web Empresariales Prioritarias para Escritorio: Para diseños de pantalla ancha (>1024px) donde las barras laterales verticales o las barras de encabezado superiores proporcionan una eficiencia espacial superior, use sidebar-navigation-system o site-navigation-system.
• Cambio de Contenido Dentro de la Página: Para cambiar vistas o filtrar contenido dentro de una sección o tarjeta de página específica, use tab-ui-system o segmented-control-system.
• Hojas de Acción y Modales Contextuales: Para paneles superpuestos temporales y específicos de tareas que aparecen sobre el contenido de la página, use accessible-bottom-sheet-implementation o overlay-and-dialog-system.
• Desencadenantes de Acciones Secundarias Flotantes: Para botones de ayuda flotantes individuales, botones de volver al inicio o burbujas de chat, use sticky-and-floating-ui-system.

Entradas

1. Taxonomía de Arquitectura de la Información (IA): Lista de los principales destinos de nivel superior (3–5 elementos como máximo) y sus metadatos de icono/etiqueta.
2. Requisitos de Notificaciones e Insignias: Especificaciones para indicadores no leídos (insignias de punto vs. insignias de contador numérico).
3. Destacado de Acción Principal (Opcional): Indicación de si la ranura central requiere un botón de acción flotante (FAB) elevado para acciones de creación principales.
4. Tokens de Diseño: Paletas de colores, tokens de elevación/sombra, tipografía fluida, conjuntos de iconos y variables de espaciado (de accessible-color-system, elevation-and-depth-system y iconography-system).
5. Estrategia de Escritorio Responsiva: Elección del modo de adaptación para escritorio (Ocultar en escritorio, Acoplar en la barra lateral o Convertir a navegación de encabezado).

Salidas

1. Especificación de Anatomía de la Barra de Navegación Inferior: Plano de diseño detallado que define anchos de elementos, apilamiento vertical de icono a etiqueta, tokens de tipografía, coordenadas de colocación de insignias y cálculos de altura, incluidos los rellenos de área segura.
2. Mapa de Tokens de Estado Interactivo: Definiciones de contraste de color y estados visuales para elementos Predeterminado/Inactivo, Activo/Seleccionado, Hover, Foco-Visible y Deshabilitado.
3. Mapeo de Accesibilidad de la Zona del Pulgar: Reglas de colocación espacial que optimizan las pestañas de mayor frecuencia hacia las zonas de alcance central del pulgar.
4. Directrices de Área Segura e Inserción del Viewport: Reglas de implementación CSS que utilizan env(safe-area-inset-bottom) para regiones de muesca en pantallas móviles sin bordes (indicador de inicio de iOS y barras de gestos de Android).
5. Plano de Transición a Escritorio y Punto de Corte Responsivo: Consultas de medios responsivas y reglas de diseño para ocultar o hacer la transición de la barra inferior en pantallas de tableta y escritorio.

---

Flujo de Trabajo

1. Establecer la Cantidad de Elementos y la Cuadrícula Espacial

Limite la barra de navegación inferior a 3 a 5 elementos de nivel superior:

• 3 Elementos: Distribución flexible de igual ancho (width: 33.33%). Mejor para aplicaciones web compactas con vistas principales distintas.
• 4 Elementos: Distribución flexible de igual ancho (width: 25%). Equilibrio ideal para aplicaciones móviles de comercio electrónico y SaaS.
• 5 Elementos: Distribución flexible de igual ancho (width: 20%). Límite máximo recomendado para anchos de pantalla móvil (320px–430px).
• Regla de 5: Nunca exceda los 5 elementos. Si hay 6 o más destinos, agrupe las páginas secundarias en una pestaña de menú "Más" o "Cuenta", o mueva los enlaces de menor prioridad a un cajón lateral.

2. Definir la Anatomía Vertical y los Tokens de Altura

Construya un contenedor inferior fijo en la parte inferior del viewport:

• Posicionamiento del Contenedor: Use position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;.
• Altura Base: Establezca una altura de contenido base de 56px a 64px para barras de pestañas estándar, más padding-bottom: env(safe-area-inset-bottom, 0px) para evitar la oclusión táctil por los indicadores de inicio de iOS o los mangos de gestos de Android.
• Diseño de Apilamiento de Elementos:
  • Tamaño del Icono: Estandarice a iconos SVG de 24x24px (iconography-system).
  • Tipografía de la Etiqueta: Use un tamaño de fuente de 11px a 12px (font-size: 0.75rem; font-weight: 500; line-height: 1.2).
  • Espaciado Vertical: Coloque el icono en la parte superior (4px de relleno superior), espacio de 2px entre el icono y la etiqueta, 4px de relleno inferior.
  • Suelo del Objetivo Táctil: Asegúrese de que cada elemento de pestaña proporcione un área táctil de altura y anchura completas (min-height: 48px, min-width: 48px).

3. Establecer la Jerarquía de Estados Activos e Inactivos

Aplique un fuerte contraste visual entre la pestaña activa y las pestañas inactivas:

• Estado Inactivo:
  • Relleno/Trazado del Icono: Color secundario sutil (por ejemplo, var(--text-tertiary, #6B7280)).
  • Color de la Etiqueta: Color de texto secundario (var(--text-secondary, #4B5563)).
  • Grosor de Fuente: Regular o Medio (400 o 500).
• Estado Activo / Seleccionado:
  • Relleno/Trazado del Icono: Color primario de la marca o acento de alto contraste (var(--brand-primary, #2563EB)). Use la variante de icono relleno si está disponible.
  • Color de la Etiqueta: Color de texto primario o de la marca (var(--text-primary, #111827) o var(--brand-primary)).
  • Grosor de Fuente: Semi-negrita (600).
  • Indicador Activo (Opcional): Un borde superior de 3px o un indicador de píldora (background: var(--brand-primary)), o un relleno de cápsula de fondo sutil (var(--brand-subtle, #EFF6FF)).
• Requisito de Contraste: Asegúrese de que tanto el texto inactivo como el activo cumplan con la relación de contraste mínima WCAG AA (4.5:1 contra el color de fondo de la barra).

4. Integrar Insignias e Indicadores de Notificación

Las insignias informan a los usuarios sobre mensajes no leídos, acciones pendientes o cantidades de artículos en el carrito:

• Posicionamiento de la Insignia: Coloque las insignias en relación con la esquina superior derecha del contenedor de iconos de 24x24px de la pestaña (position: absolute; top: -2px; right: -6px;).
• Insignias de Punto (Indicador No Leído): Círculo sólido de 8x8px (background: var(--badge-danger, #EF4444)).
• Insignias Numéricas (Indicador de Recuento): Insignia de píldora (height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #FFFFFF; background: var(--badge-danger);). Trunque los recuentos superiores a 99 a 99+.
• Texto Accesible: Incluya siempre texto accesible solo para lectores de pantalla dentro o junto a la insignia (<span class="sr-only">3 notificaciones no leídas</span>).

5. Manejar las Áreas Seguras del Viewport y el Estilo de la Superficie

Asegúrese de que la superficie de navegación inferior permanezca legible sobre el contenido desplazable:

• Desenfoque de Fondo y Translucidez: Aplique un fondo de superficie translúcido con filtrado de fondo (background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle, #E5E7EB);). Para el modo oscuro, use (background: rgba(17, 24, 39, 0.85)).
• Regla de Inserción de Área Segura: Use CSS:

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
  }
  

• Espacio Libre Inferior de la Página: Agregue relleno inferior al contenedor del cuerpo desplazable principal igual a la altura de la barra inferior + la inserción del área segura (padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px))) para evitar la truncación del contenido detrás de la barra fija.

6. Implementar la Adaptación Responsiva para Escritorio

Las barras de navegación inferior están optimizadas para pantallas táctiles y se ven poco naturales estiradas a lo ancho de viewports de escritorio grandes (>1024px).

• Estrategia de Puntos de Corte:
  • Móvil (<768px): Renderice la barra de navegación inferior fija.
  • Tableta (768px – 1023px): Mantenga la barra inferior centrada/restringida (max-width: 480px; margin: 0 auto; border-radius: 16px 16px 0 0;) o conviértala en un encabezado superior.
  • Escritorio (≥1024px): Oculte la barra de navegación inferior (display: none). Los destinos principales hacen la transición al encabezado superior (site-navigation-system) o a una barra lateral vertical (sidebar-navigation-system).

---

Reglas de Decisión

Elección del Patrón de Diseño de la Barra Inferior

Patrón	Estructura de Elementos	Caso de Uso Ideal	Interacción Clave
Barra de Pestañas Estándar	3 a 5 elementos de igual ancho con icono + etiqueta de texto.	Comercio electrónico, navegación SaaS, portales de contenido.	Navegación inmediata de vistas con 1 toque.
Acoplamiento FAB Central	4 pestañas + 1 botón de acción central elevado (por ejemplo, "+ Crear").	Publicaciones sociales, seguimiento de tareas, aplicaciones de creación de medios.	El botón central abre una hoja/modal de creación; las pestañas exteriores navegan por las vistas.
Barra de Iconos Etiquetados	4–5 elementos con iconos persistentes y etiquetas de texto visibles de 11px.	Predeterminado para la mayoría de las aplicaciones web móviles; la mayor usabilidad y claridad.	Reconocimiento inmediato sin adivinar el icono.
Barra Compacta Solo Iconos	4–5 elementos solo con iconos (las etiquetas aparecen en aria-label).	Aplicaciones de consumo altamente familiares (por ejemplo, interfaces tipo Instagram).	Use con precaución: Solo use cuando los iconos sean universalmente reconocidos.

Selección de Estilo de Insignia

• Insignia de Punto (Punto Rojo/Acento): Use cuando el usuario necesite saber "hay nueva actividad", pero la cantidad exacta sea irrelevante (por ejemplo, nueva publicación de blog disponible, actualización del sistema).
• Insignia Numérica (Recuento): Use cuando el recuento exacto de elementos influya directamente en la acción del usuario (por ejemplo, "3 artículos en el Carrito", "5 mensajes no leídos").

---

Restricciones

• Accesibilidad (WCAG 2.1 / 2.2 AA):
  • SC 2.1.1 Accesibilidad del Teclado: Las pestañas de navegación inferior deben implementarse utilizando un <nav> estándar con enlaces <a> semánticos o controles <button role="tab"> navegables mediante la tecla Tab o las teclas de Flecha.
  • SC 2.4.7 Foco Visible: Los elementos de navegación inferior enfocados deben mostrar un anillo de foco sin recortar con una relación de contraste mínima de 3:1 contra el fondo.
  • SC 2.5.8 Tamaño del Objetivo (Mínimo): Los objetivos táctiles deben medir al menos 48x48px (o 24x24px con espacio circundante que garantice una zona táctil de 48px).
  • SC 1.4.3 Contraste Visual: Las etiquetas e iconos de pestañas inactivas deben mantener al menos 4.5:1 de contraste contra el relleno de fondo.
• Comportamiento de Desplazamiento: Las barras de navegación inferior deben permanecer fijadas de forma fiable (position: fixed) durante el desplazamiento por impulso táctil sin parpadeo ni vibración vertical.
• Inserciones de Área Segura: Debe incluir env(safe-area-inset-bottom) para evitar la superposición de los indicadores de hardware de inicio en viewports móviles basados en gestos.

---

Patrones de Falla Comunes

• La Brecha de Área Segura Faltante: No aplicar env(safe-area-inset-bottom), lo que provoca que las etiquetas de navegación inferior sean superpuestas por las barras de gestos de iOS o los recortes de pantalla.
• Densidad Excesiva de Elementos: Forzar 6 o 7 elementos en una barra inferior, comprimiendo los objetivos táctiles por debajo de 40px y causando toques incorrectos accidentales frecuentes.
• La Barra de Escritorio Estirada: Permitir que una barra inferior de 4 elementos se extienda a 1920px de ancho en un monitor de escritorio con grandes espacios vacíos entre los iconos.
• Iconos Misteriosos Sin Etiqueta: Omitir etiquetas de texto para iconos ambiguos (por ejemplo, usar un icono de estrella sin etiquetar si significa "Favoritos", "Reseñas" o "Recompensas").
• Truncación de Contenido Detrás de la Navegación Fija: Olvidar agregar padding-bottom al contenedor de la página, lo que provoca que el contenido del pie de página y los botones de envío de formularios principales queden permanentemente ocultos detrás de la barra inferior fija.

---

Criterios de Validación

• La navegación inferior contiene entre 3 y 5 destinos principales.
• Cada pestaña proporciona un área de objetivo táctil que cumple o supera los 48x48px.
• Los estados activo e inactivo son visualmente distintos y cumplen con los requisitos de contraste WCAG AA 4.5:1.
• CSS incluye padding-bottom: env(safe-area-inset-bottom) para soporte de inserción de área segura.
• El contenedor de contenido principal de la página incluye relleno inferior para que el contenido de la página nunca quede oculto detrás de la barra fija.
• Las insignias incluyen texto accesible solo para lectores de pantalla (por ejemplo, sr-only).
• La navegación es totalmente accesible mediante teclado (teclas Tab y Shift+Tab o Flecha con indicadores :focus-visible claros).
• En viewports ≥1024px, la barra inferior se oculta limpiamente o se transforma en un encabezado o barra lateral de escritorio.