Sistema de Layout para Dashboards

O que Sistema de Layout para Dashboards faz?

Propósito

O Sistema de Layout para Dashboards fornece uma metodologia de design sistemática para interfaces web multi-painel com viewport fixa (frequentemente chamadas de application shells ou workspaces). Diferente de páginas baseadas em documentos que fluem infinitamente em um único contêiner de rolagem, um shell de dashboard trava a altura da viewport principal exatamente em 100vh (ou 100dvh) e particiona o espaço de trabalho em zonas funcionais distintas.

Uma abordagem sistemática resolve pontos de atrito espacial comuns — como travamentos de "rolagem dentro de rolagem", efeito sanfona do viewport, deslocamento de layout durante transições de recolhimento de painéis e armadilhas de foco de sobreposição. Ela preenche a lacuna entre o design visual estético e a contenção técnica de CSS, resultando em um espaço de trabalho coeso, altamente funcional e acessível.

Casos de Uso

• Workspaces Centrais de SaaS B2B: Plataformas web que exigem visualizações simultâneas de barras laterais, filtros, controles de lista e painéis de detalhes de conteúdo.
• Dashboards de Análise de Dados: Grids multi-painel de alta densidade apresentando dados ao vivo, métricas, gráficos e barras laterais de controle em uma visão unificada.
• Painéis de Administração e Operações: Software operacional pesado que requer cabeçalhos de ações fixos e gavetas de detalhes contextuais ao lado de grids de dados extensos.
• Interfaces de Edição de Conteúdo Rico: Layouts com gavetas laterais recolhíveis de formatação/propriedades ladeando uma tela central ou espaço de trabalho de texto rico (ex.: editores de CMS, criadores de e-mail e ferramentas de tela de design).

Quando NÃO Usar

• Páginas de Marketing e Landing Pages: Onde jornadas de rolagem vertical linear otimizadas para storytelling e chamadas para ação são necessárias. Use hero-design-system e section-composition-system.
• Artigos Editoriais e de Blog: Onde os leitores esperam rolagem nativa padrão do navegador com um fluxo de texto linear único. Use article-layout-system e table-of-contents-system.
• Páginas de Listagem de Produtos de E-Commerce (PLP): Onde rolagem infinita ou layouts paginados padrão funcionam melhor para varredura contínua de produtos.
• Ferramentas Utilitárias Simples: Utilitários de entrada única (ex.: um conversor de arquivos simples ou redimensionador de imagens) que não se beneficiam de um shell de layout multi-painel.

Entradas

1. Inventário de Painéis do Workspace: Lista das regiões espaciais necessárias para a aplicação (ex.: Navegação Lateral, Barra Superior de Ações do Workspace, Espaço de Trabalho de Conteúdo Central, Gaveta de Propriedades à Direita).
2. Layout de Controles Interativos: Especificações para painéis recolhíveis, painéis redimensionáveis e áreas de acionamento.
3. Tokens de Tipografia e Espaçamento: Tipografia fluida e sistemas de espaçamento relativo (fluid-spacing-system e fluid-typography-system) para estabelecer grades de alinhamento limpas.
4. Breakpoints Alvo: Definições de layout de dispositivo do responsive-grid-system para determinar o recolhimento de painéis, compactação de trilhos e transições de gaveta em dispositivos móveis.

Saídas

1. Blueprint de Contenção do Viewport: Especificações espaciais de HTML e CSS grid/flexbox travando as dimensões do pai em 100dvh e isolando a rolagem para subcontêineres específicos.
2. Especificação de Composição de Painéis: Definição visual, restrições de largura e linhas de borda particionando Navegação, Cabeçalhos Utilitários e Espaços de Trabalho.
3. Modelo de Transição e Movimento: Diretrizes de animação CSS aceleradas por hardware (transform, opacity) para transições suaves de painéis recolhíveis, sem deslocamento.
4. Regras de Adaptação Responsiva: Especificações detalhando a adaptação do layout nos limites de viewport Desktop, Tablet e Mobile.
5. Mapa de Landmarks de Acessibilidade: Regiões de papel ARIA definidas e parâmetros de fluxo de navegação por teclado.

Fluxo de Trabalho

1. Estabelecer Travamento do Viewport e Contenção de Rolagem

Trave a viewport principal do navegador para evitar rolagem geral da página e efeito sanfona. Todos os componentes de layout devem caber dentro deste contêiner de viewport rígido, e a rolagem deve ser delegada estritamente a painéis de conteúdo isolados:

• Defina o contêiner pai (ex.: .app-shell) para width: 100vw e height: 100dvh (altura dinâmica do viewport) com overflow: hidden.
• Particione o .app-shell usando uma grade de layout de 2 níveis:
  • Nível 1 (Grade Externa): Separa a barra lateral esquerda do espaço de trabalho de conteúdo direito.
  • Nível 2 (Grade Interna): Separa a barra superior/cabeçalho do espaço de trabalho da tela de conteúdo com rolagem.
• Para painéis com rolagem, aplique overflow-y: auto e -webkit-overflow-scrolling: touch para garantir rolagem por inércia suave no Safari mobile.

2. Definir Âncoras Visuais dos Painéis e Bordas

Use limites visuais claros para organizar dashboards de alta densidade sem adicionar ruído visual:

• Separação por Bordas: Evite sombras elevadas entre painéis adjacentes persistentes. Em vez disso, use separadores de borda limpos e de baixo contraste de 1px (ex.: 1px solid var(--border-neutral-muted)) para particionar seções.
• Contraste de Fundo: Use diferenças sutis de tom de fundo para distinguir a navegação do conteúdo ativo. Defina a barra lateral de navegação para um tom ligeiramente mais escuro ou mais claro (ex.: um tom neutro) enquanto o espaço de trabalho de conteúdo principal utiliza uma tela branca limpa ou superfície escura profunda.
• Sombras de Rolagem: Para áreas de conteúdo com rolagem, implemente sobreposições sutis de gradiente linear nas bordas superior e inferior para sinalizar visualmente ao usuário que mais conteúdo existe além da dobra.

3. Projetar a Mecânica dos Painéis Recolhíveis

Painéis recolhíveis (como barras laterais ou gavetas de detalhes à direita) devem mudar de estado suavemente sem introduzir Mudança Cumulativa de Layout (CLS) ou solavancos visuais:

• Evite Transições de Largura: Animar a propriedade CSS width força o navegador a recalcular layouts de todos os elementos filhos a cada quadro, levando a baixas taxas de quadros.
• Prefira Transformações: Posicione gavetas laterais de forma absoluta ou fora dos limites da tela e anime sua visibilidade usando CSS transform: translateX() combinado com transições aceleradas por hardware.
• Mascaramento de Conteúdo: Use overflow: hidden em blocos wrappers para que painéis deslizantes sejam recortados ordenadamente atrás de visualizações adjacentes.

4. Codificar e Entregar Landmarks de Acessibilidade

Os modelos de layout de dashboard devem fornecer hierarquias de landmarks semânticas estruturadas para leitores de tela e usuários de teclado:

• Atribuição de Landmark: Garanta que cada painel corresponda a uma tag semântica HTML5 apropriada:
  • Barra Lateral de Navegação Global: <nav aria-label="Navegação Principal">
  • Barra Superior / Cabeçalho do Workspace: <header>
  • Espaço de Trabalho Central: <main>
  • Gaveta de Propriedades / Contexto: <aside aria-label="Propriedades e Metadados">
• Gerenciamento de Foco: Quando um painel recolhível é fechado, mova programaticamente o foco para o botão que o fechou. Quando uma gaveta mobile é aberta, prenda o foco de tabulação do teclado dentro desse painel.
• Atributo Inert: Alterne o atributo HTML inert no painel central principal quando um painel modal ou gaveta lateral mobile estiver ativo, impedindo que usuários de teclado saiam acidentalmente da sobreposição visível da tela.

5. Planejar Adaptações Responsivas (Regras de Dobra)

Dimensione o espaço de trabalho do dashboard graciosamente em diversos dispositivos:

• Faixa Desktop (>1200px): Layout multi-painel totalmente expandido. Barra lateral de navegação esquerda fixa, cabeçalho do workspace fixo, tela central com rolagem automática, gaveta de propriedades direita expandida.
• Faixa Tablet (768px-1200px): Recolha a barra lateral de navegação esquerda em um "Trilho" compacto (exibindo apenas ícones). Transforme a gaveta de propriedades direita de uma coluna de grade persistente em uma folha de sobreposição acionada por um botão.
• Faixa Mobile (<768px): Oculte tanto a barra lateral quanto a gaveta de propriedades completamente atrás de gavetas de sobreposição. O layout principal simplifica para uma visualização de coluna única consistindo em um cabeçalho de barra superior mobile contendo um botão de menu hambúrguer, um botão de ação e o espaço de trabalho de conteúdo com rolagem isolada.

Regras de Decisão

Grid vs. Flexbox para Estrutura do Shell

Aspecto	Use CSS Grid	Use CSS Flexbox
Eixo Principal	Bidimensional (linhas e colunas são dinâmicas/rígidas).	Unidimensional (pilhas lineares de linhas ou colunas).
Propósito do Layout	Estruturação do quadro externo (Coluna da Barra Lateral + Coluna de Conteúdo Principal).	Alinhamento de conteúdo do cabeçalho interno (Logotipo à Esquerda + Ações à Direita).
Recolhimento de Painéis	Quando colunas da barra lateral recolhem dinamicamente para exatamente 0 de largura.	Quando filhos devem crescer, encolher e quebrar naturalmente.

Gerenciamento de Rolagem: Rolagem Global vs. Rolagem Específica de Painel

• Rolagem Global da Página (NÃO usar em dashboards): Faz com que todo o cabeçalho, barra lateral e quadro do dashboard rolem para fora da tela, forçando o usuário a rolar de volta para acessar a navegação.
• Rolagem Isolada de Painel (Padrão de dashboard): Mantém o quadro externo (cabeçalhos, trilhos, ações) perfeitamente ancorado nas bordas da tela, enquanto apenas a tabela de dados, feed de gráficos ou editor de documentos rolam independentemente dentro de suas células de viewport.

Restrições

• Altura Dinâmica do Viewport: Sempre use unidades dvh (100dvh) em vez de vh (100vh) para o contêiner pai externo. Em navegadores mobile, a unidade vh padrão não considera a expansão/recolhimento do chrome do navegador (barras de endereço, controles de navegação), fazendo com que a parte inferior do dashboard fique cortada e inacessível.
• Indicadores de Foco: Garanta que os anéis de foco sejam altamente visíveis em acionadores de painéis interativos. Eles devem atender às regras de contraste WCAG 2.2 e nunca ser cortados por bordas de contêiner com overflow: hidden.
• Sem Barras de Rolagem Duplas: Garanta que margens, preenchimentos e limites de altura do contêiner sejam calculados exatamente (usando CSS calc() ou restrições automáticas de Flex/Grid) para que um painel com rolagem nunca acione barras de rolagem duplas aninhadas lado a lado.
• Tamanhos Mínimos de Toque: Manipuladores para painéis redimensionáveis, botões de expandir barra lateral e alternadores de guia devem fornecer um alvo de toque de pelo menos 24x24px (WCAG 2.2 SC 2.5.8), com 44x44px preferido.

Padrões de Falha Comuns

• O Corte da Barra de Endereço (Mobile): Usar 100vh no mobile, fazendo com que o rodapé do perfil do usuário ou botões de envio primários na parte inferior da barra lateral fiquem ocultos atrás das barras de ação do navegador mobile.
• A Trepidação do Layout: Animar a propriedade width em um menu de navegação, fazendo com que cartões, gráficos e grids dentro do espaço de trabalho principal saltem e renderizem rapidamente durante transições de recolhimento.
• A Armadilha de Rolagem / Vazamento de Rolagem: Falha ao isolar eventos de rolagem dentro de um painel de sobreposição aberto, fazendo com que o conteúdo de fundo principal role por baixo quando o usuário desliza em uma gaveta de navegação mobile.
• Contêineres de Rolagem Não Rotulados: Adicionar overflow: auto a um contêiner de página sem um papel ou caminho de foco de teclado acompanhante, o que impede usuários somente de teclado de rolarem os dados dentro desse contêiner.
• Caos de Barra de Rolagem Dupla: Criar wrappers aninhados sem limites de altura estritos, fazendo com que tanto a janela principal do navegador quanto o contêiner interno mostrem barras de rolagem duplas, confundindo a navegação.

Critérios de Validação

• A altura do contêiner de layout externo está travada em 100dvh (ou fallback 100vh) com overflow do documento principal definido como hidden.
• Nenhuma barra de rolagem dupla é visível ao interagir com listas de dados ou espaços de trabalho com rolagem.
• Estados responsivos são definidos para as faixas Desktop, Tablet e Mobile com transformações apropriadas de gaveta e trilho.
• Painéis deslizantes e barras laterais animam usando propriedades CSS aceleradas por hardware (transform: translateX()).
• O espaço de trabalho utiliza landmarks semânticos HTML5 apropriados (<nav>, <header>, <main>, <aside>).
• Quando uma gaveta ou painel de sobreposição está aberto no mobile, os elementos de fundo são definidos como inert ou ocultos do fluxo de foco do teclado.
• Alvos de toque em acionadores de painéis, alternadores e manipuladores atendem ao requisito de tamanho mínimo de 24x24px (44px preferido).
• Elementos de painel de fundo inativos não rolam ao deslizar/rolar dentro de folhas de sobreposição ativas na camada superior (Prevenção de Vazamento de Rolagem).