Sistema de Diseño de Layout para Tableros

Sistema de Layout para Tableros (Dashboard)

Propósito

El Sistema de Layout para Tableros proporciona una metodología de diseño sistemática para interfaces web de múltiples paneles bloqueadas al viewport (a menudo denominadas shells de aplicación o espacios de trabajo). A diferencia de las páginas estándar basadas en documentos que fluyen infinitamente en un solo contenedor de desplazamiento, un shell de tablero fija la altura del viewport principal exactamente a 100vh (o 100dvh) y divide el espacio de trabajo en zonas funcionales distintas.

Un enfoque sistemático resuelve los puntos de fricción espacial comunes, como los bloqueos de "scroll dentro de scroll", el efecto de rebote del viewport, los cambios de diseño durante las transiciones de paneles colapsables y las trampas de enfoque de diálogos superpuestos. Cierra la brecha entre el diseño visual estético y la contención técnica de CSS, dando como resultado un espacio de trabajo cohesivo, altamente funcional y accesible.

Casos de Uso

• Espacios de Trabajo Principales de SaaS B2B: Plataformas web que requieren vistas concurrentes de barras laterales, filtros, controles de lista y paneles de detalle de contenido.
• Tableros de Análisis de Datos: Cuadrículas de múltiples paneles de alta densidad que presentan datos en vivo, métricas, gráficos y barras laterales de control en una vista unificada.
• Paneles de Administración y Operaciones: Software operativo pesado que requiere encabezados de acciones fijos y cajones de detalle contextual junto a extensas cuadrículas de datos.
• Interfaces de Edición de Contenido Enriquecido: Diseños con cajones laterales colapsables de formato/propiedades que flanquean un lienzo central o un espacio de trabajo de texto enriquecido (por ejemplo, editores de CMS, creadores de correo electrónico y herramientas de diseño visual).

Cuándo NO Usarlo

• Páginas de Marketing y Aterrizaje: Donde se requieren recorridos lineales de desplazamiento vertical optimizados para narrativa y llamadas a la acción. Utilice sistema-de-diseño-hero y sistema-de-composicion-de-secciones en su lugar.
• Artículos Editoriales y Blogs: Donde los lectores esperan un desplazamiento estándar del navegador nativo con un flujo de texto lineal único. Utilice sistema-de-layout-de-articulos y sistema-de-tabla-de-contenidos.
• Páginas de Listado de Productos de Comercio Electrónico (PLP): Donde el desplazamiento infinito o los diseños paginados estándar funcionan mejor para el escaneo continuo de productos.
• Herramientas de Utilidad Simple: Utilidades de entrada única (por ejemplo, un convertidor de archivos simple o un redimensionador de imágenes) que no se benefician de un shell de diseño de múltiples paneles.

Entradas

1. Inventario de Paneles del Espacio de Trabajo: Lista de las regiones espaciales requeridas por la aplicación (por ejemplo, Barra de Navegación Lateral, Barra Superior de Acciones del Espacio de Trabajo, Espacio de Trabajo de Contenido Central, Cajón Lateral Derecho de Propiedades).
2. Diseño de Control Interactivo: Especificaciones para paneles colapsables, paneles redimensionables y áreas de activación.
3. Tokens de Tipografía y Espaciado: Sistemas de tipografía fluida y espaciado relativo (sistema-de-espaciado-fluido y sistema-de-tipografia-fluida) para establecer cuadrículas de alineación limpias.
4. Puntos de Corte Objetivo: Definiciones de diseño de dispositivos de sistema-de-cuadricula-responsive para determinar el plegado de paneles, la contracción de rieles y las transiciones de cajones en móviles.

Salidas

1. Plano de Contención del Viewport: Especificaciones espaciales de HTML y CSS (grid/flexbox) que bloquean las dimensiones del padre a 100dvh y aíslan el desplazamiento a subcontenedores específicos.
2. Especificación de Composición de Paneles: Definición visual, restricciones de ancho y líneas de borde que particionan la Navegación, los encabezados de Utilidad y los Espacios de Trabajo.
3. Modelo de Transición y Movimiento: Guías de animación CSS aceleradas por hardware (transform, opacity) para transiciones suaves y sin cambios de paneles colapsables.
4. Reglas de Plegado Responsivo: Especificaciones que detallan la adaptación del diseño en los límites de viewport de Escritorio, Tablet y Móvil.
5. Mapa de Puntos de Referencia de Accesibilidad: Regiones de roles ARIA definidas y parámetros de flujo de navegación por teclado.

Flujo de Trabajo

1. Establecer el Bloqueo del Viewport y la Contención del Scroll

Bloquee el viewport principal del navegador para evitar el desplazamiento general de la página y el efecto de rebote. Todos los componentes del diseño deben encajar dentro de este contenedor de viewport rígido, y el desplazamiento debe delegarse estrictamente a paneles de contenido aislados:

• Establezca el contenedor padre (por ejemplo, .app-shell) a width: 100vw y height: 100dvh (altura dinámica del viewport) con overflow: hidden.
• Divida el .app-shell usando una cuadrícula de diseño de 2 niveles:
  • Nivel 1 (Cuadrícula Externa): Separa la barra lateral izquierda del espacio de trabajo de contenido derecho.
  • Nivel 2 (Cuadrícula Interna): Separa la barra superior/encabezado del espacio de trabajo del lienzo de contenido desplazable.
• Para paneles desplazables, aplique overflow-y: auto y -webkit-overflow-scrolling: touch para garantizar un desplazamiento con inercia suave en Safari móvil.

2. Definir Anclajes Visuales y Bordes de los Paneles

Utilice límites visuales claros para organizar los tableros de alta densidad sin agregar ruido visual:

• Separación con Bordes: Evite las elevaciones de sombra pesadas entre paneles adyacentes persistentes. En su lugar, utilice separadores de borde de 1 px limpios y de bajo contraste (por ejemplo, 1px solid var(--border-neutral-muted)) para dividir las secciones.
• Contraste de Fondo: Utilice diferencias sutiles de tono de fondo para distinguir la navegación del contenido activo. Establezca la barra lateral de navegación con un tono ligeramente más oscuro o más claro (por ejemplo, un tinte neutro) mientras que el espacio de trabajo de contenido principal utiliza un lienzo blanco limpio o una superficie oscura profunda.
• Sombras de Scroll: Para áreas de contenido desplazable, implemente superposiciones de degradado lineal sutiles en los límites de los bordes superior e inferior para señalar visualmente al usuario que hay más contenido más allá del pliegue.

3. Diseñar la Mecánica de Paneles Colapsables

Los paneles colapsables (como las barras laterales o los cajones de detalle derecho) deben cambiar de estado suavemente sin introducir Cambio de Diseño Acumulativo (CLS) o movimientos bruscos:

• Evite las Transiciones de Ancho: Animar la propiedad CSS width obliga al navegador a recalcular los diseños de todos los elementos secundarios en cada fotograma, lo que lleva a velocidades de fotogramas bajas.
• Prefiera Transformaciones: Coloque los cajones laterales de forma absoluta o fuera de los límites del lienzo, y anime su visibilidad usando CSS transform: translateX() combinado con transiciones aceleradas por hardware.
• Enmascaramiento de Contenido: Use overflow: hidden en los bloques contenedores para que los paneles deslizantes se recorten limpiamente detrás de las vistas adyacentes.

4. Codificar y Entregar los Puntos de Referencia de Accesibilidad

Las plantillas de diseño de tableros deben entregar jerarquías semánticas de puntos de referencia estructuradas para lectores de pantalla y usuarios de teclado:

• Asignación de Puntos de Referencia: Asegúrese de que cada panel se asigne a una etiqueta semántica HTML5 apropiada:
  • Barra lateral de navegación global: <nav aria-label="Navegación Principal">
  • Barra superior / Encabezado del espacio de trabajo: <header>
  • Espacio de trabajo central: <main>
  • Cajón de Propiedades / Contexto: <aside aria-label="Propiedades y Metadatos">
• Gestión del Enfoque: Cuando se cierra un panel colapsable, mueva programáticamente el enfoque al botón de activación que lo cerró. Cuando se abre un cajón en móvil, atrape el enfoque de tabulación del teclado dentro de ese panel.
• Atributo Inert: Alterne el atributo HTML inert en el panel principal central cuando un panel modal o un cajón lateral móvil esté activo, evitando que los usuarios de teclado tabulen accidentalmente fuera de la superposición de pantalla visible.

5. Planificar las Adaptaciones Responsivas (Reglas de Plegado)

Escale el espacio de trabajo del tablero con gracia en diversos dispositivos:

• Rango de Escritorio (>1200px): Diseño de múltiples paneles completamente expandido. Barra lateral de navegación izquierda fija, encabezado del espacio de trabajo fijo, lienzo central con desplazamiento automático, cajón de propiedades derecho expandido.
• Rango de Tablet (768px-1200px): Contraiga la barra lateral de navegación izquierda en un "Riel" compacto (que muestre solo iconos). Transforme el cajón de propiedades derecho de una columna de cuadrícula persistente a una hoja superpuesta activada mediante un botón de acción.
• Rango Móvil (<768px): Oculte tanto la barra lateral como el cajón de propiedades detrás de cajones superpuestos. El diseño principal se simplifica a una vista de una sola columna que consiste en un encabezado de barra superior móvil que contiene un activador de menú hamburguesa, un botón de acción y el espacio de trabajo de contenido desplazable aislado.

Reglas de Decisión

Grid vs. Flexbox para la Estructura del Shell

Aspecto	Usar CSS Grid	Usar CSS Flexbox
Eje Principal	Bidimensional (tanto filas como columnas son dinámicas/rígidas).	Unidimensional (pilas de filas lineales o pilas de columnas).
Propósito del Diseño	Estructuración del marco externo (Columna de Barra Lateral + Columna de Contenido Principal).	Alineación del contenido del encabezado interno (Logo Izquierda + Acciones Derecha).
Colapso de Paneles	Cuando las columnas de la barra lateral colapsan dinámicamente a un ancho exacto de 0.	Cuando los hijos deben crecer, encogerse y ajustarse naturalmente.

Gestión del Desplazamiento: Scroll Global vs. Scroll Específico del Panel

• Scroll de Página Global (NO usar en tableros): Hace que todo el encabezado, la barra lateral y el marco del tablero se desplacen fuera de la pantalla, obligando al usuario a desplazarse hacia arriba para acceder a la navegación.
• Scroll de Panel Aislado (Patrón estándar de tablero): Mantiene el marco externo (encabezados, rieles, acciones) perfectamente anclado a los bordes de la pantalla mientras solo la tabla de datos, el feed de gráficos o el editor de documentos se desplazan de forma independiente dentro de sus celdas del viewport.

Restricciones

• Altura Dinámica del Viewport: Use siempre unidades dvh (100dvh) en lugar de vh (100vh) para el contenedor padre externo. En navegadores móviles, la unidad estándar vh no tiene en cuenta la expansión/contracción de la interfaz del navegador (barras de direcciones, controles de navegación), lo que provoca que la parte inferior del tablero quede recortada fuera del alcance.
• Indicadores de Enfoque: Asegúrese de que los anillos de enfoque sean altamente visibles en los activadores de paneles interactivos. Deben cumplir con las reglas de contraste WCAG 2.2 y nunca ser recortados por los bordes del contenedor con overflow: hidden.
• Sin Barras de Doble Scroll: Asegúrese de que los márgenes, rellenos y límites de altura del contenedor se calculen exactamente (usando CSS calc() o restricciones automáticas de Flex/Grid) para que un panel con desplazamiento nunca active barras de doble scroll anidadas una al lado de la otra.
• Mínimos de Objetivo Táctil: Los manejadores de paneles redimensionables, botones de expansión de la barra lateral y alternadores de pestañas deben proporcionar un objetivo táctil de al menos 24x24px (WCAG 2.2 SC 2.5.8), siendo 44x44px el preferido.

Patrones de Falla Comunes

• El Recorte de la Barra de Direcciones (Móvil): Usar 100vh en móvil, lo que provoca que el pie de página del perfil del usuario o los botones de envío principales en la parte inferior de la barra lateral se oculten detrás de las barras de acción del navegador móvil.
• La Sacudida del Diseño: Animar la propiedad width en un menú de navegación, causando que las tarjetas, gráficos y cuadrículas dentro del espacio de trabajo principal salten y se rendericen rápidamente durante las transiciones de colapso.
• La Trampa de Scroll / Fuga de Scroll: No aislar los eventos de desplazamiento dentro de un panel superpuesto abierto, causando que el contenido de fondo principal se desplace debajo cuando el usuario desliza en un cajón de navegación móvil.
• Contenedores de Scroll Sin Etiquetar: Agregar overflow: auto a un contenedor de página sin un rol o una ruta de enfoque de teclado acompañante, lo que impide que los usuarios que solo usan teclado puedan desplazar los datos dentro de ese contenedor.
• Caos de Doble Barra de Scroll: Crear envoltorios anidados sin límites de altura estrictos, lo que provoca que tanto la ventana principal del navegador como el contenedor interno muestren barras de scroll dobles, confundiendo la navegación.

Criterios de Validación

• La altura del contenedor de diseño externo está bloqueada a 100dvh (o 100vh como alternativa) con el overflow del documento principal establecido en hidden.
• No hay barras de doble scroll visibles al interactuar con listas de datos o espacios de trabajo desplazables.
• Los estados responsivos están definidos en los rangos de Escritorio, Tablet y Móvil con las transformaciones apropiadas de cajones y rieles.
• Los paneles deslizantes y las barras laterales se animan utilizando propiedades CSS aceleradas por hardware (transform: translateX()).
• El espacio de trabajo utiliza puntos de referencia semánticos HTML5 apropiados (<nav>, <header>, <main>, <aside>).
• Cuando un cajón superpuesto o panel está abierto en móvil, los elementos de fondo se establecen como inert o se ocultan del flujo de enfoque del teclado.
• Los objetivos táctiles en activadores de paneles, alternadores y manejadores cumplen con el requisito de tamaño mínimo de 24x24px (44px preferido).
• Los elementos de panel de fondo inactivos no se desplazan al deslizar/desplazarse dentro de las hojas superpuestas de la capa superior activa (Prevención de Fuga de Scroll).