Sistema de UI Fixa e Flutuante

O que Sistema de UI Fixa e Flutuante faz?

Propósito

O Sistema de UI Fixa e Flutuante fornece uma metodologia para projetar componentes de interface persistentes, ancorados na viewport e responsivos à rolagem. Ele garante que controles críticos — como navegação principal, chamadas para ação (CTAs) que impulsionam conversão, widgets utilitários contextuais e botões de ação rápida — permaneçam facilmente acessíveis durante estados de rolagem ativa.

Um sistema fixo e flutuante bem projetado resolve a tensão espacial entre disponibilidade imediata de ação e consumo de conteúdo primário. Ele previne fadiga de layout, protege a viewport de poluição visual excessiva, respeita áreas seguras físicas de dispositivos móveis (como entalhes e indicadores de início do sistema) e mitiga estritamente falhas de obscurecimento de foco por teclado (WCAG 2.2 SC 2.4.11).

Casos de Uso

• Cabeçalhos de Navegação Progressivos: Cabeçalhos que ocultam ao rolar para baixo (maximizando a área de leitura) e revelam ao rolar para cima (tornando a navegação imediatamente disponível).
• Docks Inferiores Persistentes para Mobile: Barras inferiores flutuantes ou ancoradas contendo ações de conversão primárias (ex.: "Adicionar ao Carrinho", "Reserve Agora", "Inscreva-se") para layouts móveis.
• Widgets de Sidebar Fixos: Sub-navegação contextual, barras de compartilhamento ou configurações de compra de produto que rolam junto com a área de conteúdo principal, mas travam antes de atingir limites estruturais.
• Botões de Ação Flutuantes (FABs): Gatilhos ancorados na viewport para ações rápidas de alta frequência, como navegação "Voltar ao Topo", chats de suporte direto ou gavetas de carrinho.
• Barras de Âncora e Progresso de Leitura: Elementos fixos que rastreiam taxas de conclusão da viewport ou oferecem links diretos para subseções do corpo da página.

Quando NÃO Usar

• Dashboards SaaS Densos em Dados: Onde o espaço da tela é fortemente limitado por dados tabulares, telas de trabalho ou painéis bloqueados na viewport; use sistema-de-layout-de-dashboard.
• Páginas Curtas/Única Viewport: Onde todo o conteúdo da página cabe em uma única visualização de tela e pode ser acessado sem rolagem.
• Sites Experimentais Centrados em Narrativa: Onde a desorientação visual intencional ou fluxo espacial 3D imersivo é escolhido em vez da utilidade de navegação padrão.
• Formulários Focados em Teclado: Sobrecarregar páginas com formulários de múltiplos campos com botões fixos que se sobrepõem e cobrem campos de entrada ativos em teclados virtuais móveis.

Entradas

1. Estrutura de Conteúdo e Narrativa: A sequência de wireframe da página (do sistema-de-composicao-de-secoes) para entender quando e onde os elementos fixos devem ser ativados.
2. Restrições de Viewport do Dispositivo: Breakpoints alvo para mobile, tablet e desktop para adaptar layouts entre barras ancoradas e contêineres laterais flutuantes.
3. CTAs Primários e Secundários: Identificação das metas de conversão que exigem visibilidade persistente.
4. Estratégia de Empilhamento Z-Index: Relações de empilhamento e níveis estabelecidos em sistema-de-elevacao-e-profundidade para evitar conflitos visuais de sobreposição.
5. Métricas de Área Segura do Sistema: Insetos de área segura de hardware (env(safe-area-inset-bottom), entalhes) necessários para evitar sobreposições com elementos do sistema do dispositivo.

Saídas

1. Especificação de Comportamento Fixo: Definições explícitas de gatilhos de rolagem, limites de animação e fórmulas de transição de entrada/saída.
2. Layout do Dock Inferior Mobile: Blueprints de layout espacialmente otimizados para telas móveis, detalhando tamanhos alvo, deslocamentos de área segura e requisitos de contraste.
3. Mapa de Mitigação de Obscurecimento: Definições de design mostrando como manter sobreposições fixas sem bloquear elementos focados (WCAG 2.2 SC 2.4.11).
4. Especificação de Travamento de Sidebar/Widget no Desktop: Regras de limite (cabeçalhos, rodapés, pontos finais de seção) onde elementos laterais de rolagem devem travar.

Fluxo de Trabalho

1. Estabelecer Zoneamento da Viewport e Orçamentos Espaciais

Antes de posicionar camadas persistentes, defina a "Zona Segura Visual" para garantir que a legibilidade do conteúdo seja preservada.

• A Regra do Orçamento de 15%: Elementos fixos nunca devem consumir mais de 15% da viewport vertical total em qualquer tela de dispositivo.
• Atribuição Z-Index: Atribua valores de empilhamento claros usando os níveis do sistema-de-elevacao-e-profundidade.
  • Cabeçalhos Progressivos: z-index: 100 (Nível 3: Fixo)
  • Docks Inferiores Mobile: z-index: 150 (Nível 3: Fixo / Flutuante)
  • Botões de Ação Flutuantes: z-index: 200 (Nível 3: Gatilhos Flutuantes)
• Evitar Sobreposição Empilhada: Nunca permita que um cabeçalho fixo e uma barra inferior fixa permaneçam estáticos se eles apertarem a tela; garanta que tenham espaço suficiente ou ocultem sob estados específicos.

2. Projetar o Comportamento do Cabeçalho Progressivo

Um cabeçalho fixo estático ocupa pixels verticais valiosos. Implemente um modelo "Progressivo":

• Estado Padrão: Cabeçalho transparente ou integrado combinando com o fundo da página.
• Rolagem para Baixo (Limite >100px): Transladar suavemente o cabeçalho para fora da vista (transform: translateY(-100%)) para maximizar a área de escaneamento de conteúdo.
• Rolagem para Cima (Delta >15px): Transladar o cabeçalho instantânea ou suavemente de volta à vista, aplicando um fundo sólido ou com desfoque (backdrop-filter: blur(8px)) com uma sombra sutil para indicar separação do texto do corpo da página.
• Parada no Limite: Desabilitar a transição de rolagem para cima quando a barra de rolagem retornar ao topo da viewport (scrollY < 50px), retornando o cabeçalho ao seu layout estático original.

3. Projetar o Dock Inferior Persistente para Mobile

Barras inferiores persistentes são grandes impulsionadoras de conversão mobile, mas são altamente propensas a interferências físicas e visuais.

• Áreas Seguras Físicas: Sempre ancore a borda inferior do dock usando variáveis de ambiente CSS: padding-bottom: calc(var(--base-padding) + env(safe-area-inset-bottom)). Isso garante que fique limpo acima do Indicador de Início do iOS e das barras de navegação do Android sem sobrepor gatilhos interativos.
• Gatilho de Entrada na Rolagem: Não mostre o dock inferior mobile na viewport inicial do Hero. Espere até que o usuário tenha rolado além do CTA inline principal da seção Hero (Limite > 100% VH) antes de deslizar o dock de baixo para cima (transform: translateY(0) a partir de translateY(100%)).
• Divisão de Layout: Limite o dock a um único botão de ação primário (ex.: "Adicionar ao Carrinho") e um botão/emblema utilitário secundário (ex.: "Preço" ou "Salvar") para manter os alvos de toque extremamente limpos.

4. Estruturar Sidebars e Widgets Fixos no Desktop

Um widget de sidebar deve permanecer travado no foco da viewport enquanto rola junto com colunas profundas de conteúdo principal:

• Isolamento do Contêiner: A sidebar deve residir dentro de um contêiner de coluna com altura correspondente à área de conteúdo principal.
• Especificação de Posição Fixa: Estilize o widget com position: sticky; top: calc(var(--header-height) + var(--space-l));. Isso impede que o widget deslize para trás ou sobreponha a barra de navegação principal.
• Travamento no Limite do Rodapé: Garanta que a coluna pai do widget fixo tenha overflow: visible (ou esteja devidamente contida em um wrapper flexível Grid), permitindo que o navegador pare naturalmente o widget de sobrepor o rodapé global ou seções inferiores.

5. Prevenir Obscurecimento de Foco por Teclado (Núcleo de Acessibilidade)

Uma das falhas de acessibilidade de design web mais frequentes ocorre quando um usuário de teclado foca em um link, mas esse link está oculto sob um cabeçalho fixo ou dock inferior (violando WCAG 2.2 SC 2.4.11 Foco Não Obscurecido).

• Margem de Rolagem no Topo: Aplique um scroll-margin-top global a todas as seções alvo, cabeçalhos (h2, h3) e alvos interativos chave:

  :target, [id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-m));
  }
  

• Padding de Foco: Se um elemento interativo receber foco por teclado, a viewport do navegador deve rolar para que o elemento fique totalmente visível fora do limite de qualquer sobreposição fixa persistente.
• Válvula de Escape: Se um modal ou dropdown for aberto a partir de um elemento fixo, aprisione o foco (usando implementacao-de-armadilha-de-foco) e torne o conteúdo da página de fundo inert.

6. Projetar Botões de Ação Flutuantes (FABs) e Gatilhos de Voltar ao Topo

FABs ficam nos cantos inferiores da viewport para oferecer utilitários globais secundários rápidos.

• Entrada Baseada em Limite: Oculte o gatilho "Voltar ao Topo" até que o usuário tenha rolado por pelo menos duas viewports completas (scrollY > 200% VH). Uma vez acionado, faça aparecer com fade e escala (transform: scale(1); opacity: 1; a partir de scale(0.8); opacity: 0;).
• Deslocamentos da Viewport: Mantenha os FABs a pelo menos 24px da borda direita da viewport no desktop e 16px no mobile.
• Evitar Bloqueio de Alvos: Posicione os FABs horizontalmente opostos às linhas de leitura do conteúdo primário. Garanta que eles não bloqueiem links, ícones sociais ou navegação inline no rodapé ao rolar para o final da página.

Regras de Decisão

• Cabeçalho Estático vs. Progressivo: Use um Cabeçalho Fixo Estático se o site for um portal web com muitas tarefas ou uma loja de e-commerce onde pesquisa e filtragem são constantemente usadas. Use um Cabeçalho Fixo Progressivo para layouts de artigo, marketing de conteúdo ou landing pages de vendas onde a área de leitura vertical é uma prioridade.
• Dock Inferior vs. CTA Inline: No mobile, use um CTA Ancorado no Dock Inferior se a página contém um único objetivo de conversão de alto valor (como inscrever-se ou comprar). Não use um dock inferior se a página tiver múltiplas ações concorrentes de igual prioridade.
• Dimensionamento do FAB e Área de Toque: Garanta que os gatilhos flutuantes sejam cartões circulares ou arredondados. O elemento visual deve ter pelo menos 48px de diâmetro, e o contêiner de toque interativo real deve atender a uma pegada mínima de 44x44px (preferido pelo WCAG 2.2) para permitir fácil acesso com o polegar.
• Desfoque Progressivo vs. Cores Sólidas: Use backdrop-filter: blur(8px) com uma cor ligeiramente transparente (ex.: rgba(255, 255, 255, 0.8)) em vez de fundos totalmente opacos. Isso mantém uma sensação de profundidade visual e permite que o usuário perceba o progresso da rolagem por trás do quadro fixo.

Restrições

• Acessibilidade (WCAG AA Mínimo):
  • SC 2.4.11 Foco Não Obscurecido (Mínimo): Anéis de foco de alto contraste nunca devem ser escondidos atrás de elementos fixos. Garanta que os elementos possam ser percorridos com tabulação sem serem bloqueados por cabeçalhos ou rodapés.
  • SC 2.5.8 Tamanho do Alvo (Mínimo): Todos os alvos interativos em barras fixas e FABs devem ter pelo menos 24x24px, com 44x44px preferido para gatilhos primários de polegar em docks inferiores móveis.
  • Sem Armadilha de Tabulação: Usuários de teclado devem poder navegar para dentro e para fora dos controles de barra fixa usando Tab / Shift+Tab padrão.
• Responsividade (Estabilidade de Layout):
  • Camadas fixas nunca devem causar estouro horizontal da viewport. Use larguras baseadas em porcentagem ou layouts left: 0; right: 0; com restrições precisas de box-sizing.
  • No mobile, transforme sidebars fixas do desktop em painéis inline simples ou consolide-as na gaveta inferior.
• Mitigação de Mudança de Layout (CLS):
  • Nunca mude dinamicamente um elemento de position: static para position: fixed sem reservar seu volume espacial original. Mudar para fixed colapsa instantaneamente a altura do seu contêiner original, causando uma enorme Mudança Cumulativa de Layout (CLS). Em vez disso, use position: sticky (que reserva volume de layout) ou alterne estilos dentro de um contêiner pré-reservado.

Padrões Comuns de Falha

• O Véu de Bloqueio de Foco: Um usuário de teclado percorre a página com tabulação, mas o anel de foco pousa em links que estão completamente ocultos sob o cabeçalho fixo, tornando-os impossíveis de ver.
• A Sobreposição do Indicador de Início do iOS: Ancorar uma barra inferior móvel sem adicionar env(safe-area-inset-bottom), o que resulta na barra de deslize nativa do sistema operacional ficando diretamente sobre o botão "Compre Agora".
• O Loop de Rolagem Trêmula: Configurar uma transição de rolagem usando JavaScript que aciona precisamente em uma linha limite, fazendo com que a barra fixa ciclo entre estados visíveis e ocultos em uma vibração visual rápida.
• O Sanduíche da Viewport: Ter um cabeçalho fixo espesso e uma barra inferior fixa espessa ativos simultaneamente em um dispositivo móvel pequeno, reduzindo o espaço de tela legível a uma pequena janela de 40%.
• O Colapso de Estalo CLS: Alternar um cabeçalho para fixed ao rolar, o que instantaneamente puxa o conteúdo principal da página para cima por 80px e desorienta o usuário.

Critérios de Validação

• Verificação de Área da Viewport: Elementos fixos nunca ocupam mais de 15% da viewport vertical no desktop ou mobile.
• Proteção de Foco (SC 2.4.11): Todos os elementos focados por teclado permanecem totalmente visíveis fora dos limites de elementos fixos persistentes. scroll-margin-top global está configurado.
• Alinhamento de Área Segura Mobile: O dock inferior móvel utiliza explicitamente env(safe-area-inset-bottom) para evitar sobreposições de controles do dispositivo.
• Lógica de Limite do Gatilho: O dock inferior móvel permanece oculto na viewport inicial do Hero, aparecendo com fade/translado somente após passar o CTA do Hero.
• Prevenção de Mudança de Layout: Cabeçalhos progressivos e widgets de sidebar fixos são estilizados usando position: sticky ou são colocados dentro de contêineres pré-medidos para garantir zero Mudança Cumulativa de Layout (CLS).
• Sem Conflito de Sobreposição: Os z-index de contexto de empilhamento são claramente mapeados e documentados para prevenir erros visuais de sobreposição.
• Pegadas de Alvo: Gatilhos ancorados no dock móvel e FABs atendem à preferência de alvo de toque de 44x44px.