Sistema de Navegação Inferior

O que Sistema de Navegação Inferior faz?

Propósito

O Sistema de Navegação Inferior fornece um framework de design padronizado e mobile-first para barras de navegação inferior, tab bars e docks de ação persistentes em interfaces web móveis e Progressive Web Apps (PWAs). Dispositivos móveis modernos com grandes proporções de tela colocam cabeçalhos superiores fora do alcance confortável de uma mão (a "zona de polegar"). A navegação inferior ancora os principais destinos do aplicativo e ações críticas de conversão diretamente ao alcance natural do polegar do usuário.

Projetar um sistema de navegação inferior eficaz requer equilibrar densidade de itens (3 a 5 itens), hierarquia visual de estados ativos/inativos, dimensionamento de alvos de toque, posicionamento de indicadores de notificação, insets de área segura da viewport (env(safe-area-inset-bottom)), integrações com botão de ação flutuante (FAB) e regras de adaptação para desktop. Este skill une execução técnica e design de UX móvel em estrita conformidade com os padrões de acessibilidade WCAG AA.

Casos de Uso

• Aplicação Web Móvel de E-Commerce: Fornecer acesso imediato com um toque do polegar para Home, Pesquisar/Navegar, Itens Salvos, Carrinho de Compras (com badge de quantidade) e Conta.
• Aplicações Web Móveis e PWAs de SaaS: Estruturar a navegação principal para aplicativos de produtividade móvel (ex.: Tarefas de Hoje, Feed, Adicionar Rápido [+], Mensagens, Configurações).
• Plataformas Sociais e de Conteúdo: Gerenciar trocas frequentes entre Feed Inicial, Explorar, Criar/Enviar, Notificações de Atividade e Perfil do Usuário.
• Serviços Web de Entrega e Logística: Manter abas de status principais (Pedidos, Mapa de Entrega Ativo, Caixa de Entrada, Perfil) persistentes na parte inferior da viewport durante o rastreamento ativo.
• Formulários de Inspeção e Operações de Campo: Ancora botões de ação persistentes (Salvar Rascunho, Enviar Foto, Enviar Formulário) na parte inferior de formulários móveis longos.

Quando NÃO Usar

• Aplicações Web Corporativas Desktop-First: Para layouts widescreen (>1024px) onde barras laterais verticais ou barras de cabeçalho superior oferecem eficiência espacial superior, utilize sidebar-navigation-system ou site-navigation-system.
• Troca de Conteúdo na Página: Para alternar visualizações ou filtrar conteúdo dentro de uma seção específica da página ou card, utilize tab-ui-system ou segmented-control-system.
• Folhas de Ação Contextuais e Modais: Para painéis sobrepostos temporários e específicos de tarefas que aparecem sobre o conteúdo da página, utilize accessible-bottom-sheet-implementation ou overlay-and-dialog-system.
• Gatilhos de Ação Secundários Flutuantes: Para botões de ajuda flutuantes, botões de voltar ao topo ou bolhas de chat, utilize sticky-and-floating-ui-system.

Entradas

1. Taxonomia da Arquitetura da Informação (IA): Lista dos principais destinos de nível superior (máximo de 3–5 itens) e seus metadados de ícone/rótulo.
2. Requisitos de Notificação e Badge: Especificações para indicadores de não lidos (badges de ponto vs. badges numéricos).
3. Destaque da Ação Principal (Opcional): Indicação se o slot do meio requer um botão de ação flutuante (FAB) elevado para ações primárias de criação.
4. Design Tokens: Paletas de cores, tokens de elevação/sombra, tipografia fluida, conjuntos de ícones e variáveis de espaçamento (de accessible-color-system, elevation-and-depth-system e iconography-system).
5. Estratégia de Desktop Responsiva: Escolha do modo de adaptação para desktop (Ocultar no desktop, Encaixar na barra lateral ou Converter para navegação de cabeçalho).

Saídas

1. Especificação da Anatomia da Barra de Navegação Inferior: Planta detalhada do layout definindo larguras dos itens, empilhamento vertical ícone-rótulo, tokens de tipografia, coordenadas de posicionamento de badges e cálculos de altura incluindo paddings de área segura.
2. Mapa de Tokens de Estado Interativo: Definições de contraste de cores e estados visuais para itens Padrão/Inativo, Ativo/Selecionado, Hover, Focus-Visible e Desabilitado.
3. Mapeamento de Acessibilidade da Zona de Polegar: Regras de posicionamento espacial otimizando as abas de maior frequência para as zonas de alcance central do polegar.
4. Diretrizes de Área Segura e Inset da Viewport: Regras de implementação CSS usando env(safe-area-inset-bottom) para regiões de entalhe de display móvel sem bordas (barra inicial do iOS e barras de gestos do Android).
5. Plano de Transição para Desktop e Breakpoints Responsivos: Media queries responsivas e regras de layout para ocultar ou fazer a transição da barra inferior em telas de tablet e desktop.

---

Fluxo de Trabalho

1. Estabelecer Quantidade de Itens e Grade Espacial

Limite a barra de navegação inferior a 3 a 5 itens de nível superior:

• 3 Itens: Distribuição flex de largura igual (width: 33.33%). Melhor para web apps compactos com visualizações principais distintas.
• 4 Itens: Distribuição flex de largura igual (width: 25%). Equilíbrio ideal para aplicativos móveis de e-commerce e SaaS.
• 5 Itens: Distribuição flex de largura igual (width: 20%). Limite máximo recomendado para larguras de tela móvel (320px–430px).
• Regra dos 5: Nunca exceda 5 itens. Se houver 6+ destinos, agrupe páginas secundárias sob uma aba de menu "Mais" ou "Conta", ou mova links de prioridade mais baixa para uma gaveta lateral.

2. Definir Anatomia Vertical e Tokens de Altura

Construa um contêiner inferior fixo posicionado na parte inferior da viewport:

• Posicionamento do Contêiner: Use position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;.
• Altura Base: Defina uma altura de conteúdo base de 56px a 64px para barras de aba padrão, mais padding-bottom: env(safe-area-inset-bottom, 0px) para evitar oclusão de toque pelos indicadores iniciais do iOS ou alças de gestos do Android.
• Layout de Empilhamento de Itens:
  • Tamanho do Ícone: Padronize em ícones SVG de 24x24px (iconography-system).
  • Tipografia do Rótulo: Use tamanho de fonte de 11px a 12px (font-size: 0.75rem; font-weight: 500; line-height: 1.2).
  • Espaçamento Vertical: Posicione o ícone no topo (4px de padding superior), gap de 2px entre ícone e rótulo, 4px de padding inferior.
  • Piso do Alvo de Toque: Garanta que cada aba forneça uma área de toque de altura e largura completas (min-height: 48px, min-width: 48px).

3. Estabelecer Hierarquia de Estados Ativo e Inativo

Imponha forte contraste visual entre a aba ativa e as abas inativas:

• Estado Inativo:
  • Preenchimento/Contorno do Ícone: Cor secundária sutil (ex.: var(--text-tertiary, #6B7280)).
  • Cor do Rótulo: Cor de texto secundária (var(--text-secondary, #4B5563)).
  • Peso da Fonte: Regular ou Medium (400 ou 500).
• Estado Ativo / Selecionado:
  • Preenchimento/Contorno do Ícone: Primary da marca ou destaque de alto contraste (var(--brand-primary, #2563EB)). Use variante de ícone preenchido se disponível.
  • Cor do Rótulo: Texto primário ou cor da marca (var(--text-primary, #111827) ou var(--brand-primary)).
  • Peso da Fonte: Semi-bold (600).
  • Indicador Ativo (Opcional): Uma borda superior de 3px ou indicador de pílula (background: var(--brand-primary)), ou um preenchimento de cápsula de fundo sutil (var(--brand-subtle, #EFF6FF)).
• Requisito de Contraste: Garanta que o texto inativo e o texto ativo passem a taxa de contraste mínima WCAG AA (4.5:1 contra a cor de fundo da barra).

4. Integrar Badges e Indicadores de Notificação

Badges informam os usuários sobre mensagens não lidas, ações pendentes ou quantidades de itens no carrinho:

• Posicionamento do Badge: Posicione badges relativos ao canto superior direito do contêiner de ícone 24x24px da aba (position: absolute; top: -2px; right: -6px;).
• Badges de Ponto (Indicador de Não Lido): Círculo sólido de 8x8px (background: var(--badge-danger, #EF4444)).
• Badges Numéricos (Indicador de Contagem): Badge em pílula (height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #FFFFFF; background: var(--badge-danger);). Trunque contagens acima de 99 para 99+.
• Texto Acessível: Sempre inclua texto acessível somente para leitores de tela dentro ou ao lado do badge (<span class="sr-only">3 notificações não lidas</span>).

5. Lidar com Áreas Seguras da Viewport e Estilização de Superfície

Garanta que a superfície de navegação inferior permaneça legível sobre o conteúdo de rolagem:

• Desfoque de Fundo & Transparência: Aplique um fundo de superfície translúcido com filtragem de fundo (background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle, #E5E7EB);). Para modo escuro, use (background: rgba(17, 24, 39, 0.85)).
• Regra de Inset 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);
  }
  

• Limpeza Inferior da Página: Adicione padding inferior ao contêiner do corpo scrollável principal igual à altura da barra inferior + inset de área segura (padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px))) para evitar truncamento de conteúdo atrás da barra fixa.

6. Implementar Adaptação Responsiva para Desktop

Barras de navegação inferior são otimizadas para telas sensíveis ao toque e parecem não naturais quando esticadas em viewports largas de desktop (>1024px).

• Estratégia de Breakpoint:
  • Mobile (<768px): Renderize barra de navegação inferior fixa.
  • Tablet (768px – 1023px): Mantenha a barra inferior centralizada/contida (max-width: 480px; margin: 0 auto; border-radius: 16px 16px 0 0;) ou converta para cabeçalho superior.
  • Desktop (≥1024px): Oculte a barra de navegação inferior (display: none). Os destinos primários são transferidos para o cabeçalho superior (site-navigation-system) ou uma barra lateral vertical (sidebar-navigation-system).

---

Regras de Decisão

Escolha do Padrão de Layout da Barra Inferior

Padrão	Estrutura de Itens	Caso de Uso Ideal	Interação Chave
Barra de Aba Padrão	3 a 5 itens de largura igual com ícone + rótulo de texto.	Navegação de e-commerce, SaaS, portais de conteúdo.	Navegação de visualização imediata com 1 toque.
Dock Central FAB	4 abas + 1 botão de ação central elevado (ex.: "+" Criar).	Postagem social, rastreamento de tarefas, apps de criação de mídia.	Botão central abre modal/folha de criação; abas externas navegam pelas visualizações.
Barra de Ícones Rotulados	4–5 itens com ícones persistentes e rótulos de texto visíveis de 11px.	Padrão para a maioria dos apps web móveis; maior usabilidade e clareza.	Reconhecimento imediato sem adivinhar ícones.
Barra Compacta Somente Ícones	4–5 itens apenas com ícones (rótulos aparecem em aria-label).	Apps de consumo altamente familiares (ex.: interfaces estilo Instagram).	Use com cautela: Use apenas quando os ícones forem universalmente reconhecidos.

Seleção de Estilização de Badge

• Badge de Ponto (Ponto Vermelho/Destaque): Use quando o usuário precisa saber "há nova atividade", mas a quantidade exata é irrelevante (ex.: novo post de blog disponível, atualização do sistema).
• Badge Numérico (Contagem): Use quando a contagem exata de itens influencia diretamente a ação do usuário (ex.: "3 itens no Carrinho", "5 mensagens não lidas").

---

Restrições

• Acessibilidade (WCAG 2.1 / 2.2 AA):
  • SC 2.1.1 Acessibilidade por Teclado: As abas de navegação inferior devem ser implementadas usando <nav> semântico com links <a> ou controles <button role="tab"> navegáveis via tecla Tab ou teclas de Seta.
  • SC 2.4.7 Foco Visível: Itens de navegação inferior com foco devem exibir um anel de foco não cortado com taxa de contraste mínima de 3:1 contra o fundo.
  • SC 2.5.8 Tamanho do Alvo (Mínimo): Alvos de toque devem medir pelo menos 48x48px (ou 24x24px com espaçamento ao redor garantindo zona de toque de 48px).
  • SC 1.4.3 Contraste Visual: Rótulos e ícones de abas inativas devem manter pelo menos 4.5:1 de contraste contra o preenchimento de fundo.
• Comportamento de Rolagem: Barras de navegação inferior devem permanecer fixadas de forma confiável (position: fixed) durante a rolagem por impulso de toque, sem oscilação ou tremor vertical.
• Insets de Área Segura: Devem incluir env(safe-area-inset-bottom) para evitar sobreposição de indicadores de hardware iniciais em viewports móveis baseadas em gestos.

---

Padrões Comuns de Falha

• A Lacuna da Área Segura Ausente: Falha ao aplicar env(safe-area-inset-bottom), fazendo com que os rótulos da navegação inferior sejam sobrepostos por barras de gestos do iOS ou recortes de tela.
• Densidade Excessiva de Itens: Forçar 6 ou 7 itens em uma barra inferior, comprimindo alvos de toque abaixo de 40px e causando toques acidentais frequentes.
• A Barra Esticada no Desktop: Permitir que uma barra inferior de 4 itens se estenda por 1920px de largura em um monitor desktop com enormes lacunas vazias entre os ícones.
• Ícones Misteriosos Não Rotulados: Omitir rótulos de texto para ícones ambíguos (ex.: usar um ícone de estrela sem rotular se significa "Favoritos", "Avaliações" ou "Recompensas").
• Truncamento de Conteúdo Atrás da Navegação Fixa: Esquecer de adicionar padding-bottom ao contêiner da página, fazendo com que o conteúdo do rodapé e os botões de envio do formulário principal fiquem permanentemente ocultos atrás da barra inferior fixa.

---

Critérios de Validação

• A navegação inferior contém entre 3 e 5 destinos primários.
• Cada aba fornece uma área de alvo de toque que atinge ou excede 48x48px.
• Os estados ativo e inativo são visualmente distintos e atendem aos requisitos de contraste WCAG AA 4.5:1.
• O CSS inclui padding-bottom: env(safe-area-inset-bottom) para suporte a inset de área segura.
• O contêiner de conteúdo principal da página inclui padding inferior para que o conteúdo da página nunca fique oculto atrás da barra fixa.
• Badges incluem texto acessível somente para leitores de tela (ex.: sr-only).
• A navegação é totalmente acessível via teclado (Tab e Shift+Tab ou teclas de Seta com indicadores :focus-visible claros).
• Em viewports ≥1024px, a barra inferior é ocultada ou transita limpidamente para um cabeçalho ou barra lateral de desktop.