Sistema de Layout em Tela Dividida

O que Sistema de Layout em Tela Dividida faz?

Propósito

O Sistema de Layout em Tela Dividida fornece uma estrutura de design padronizada, responsiva e acessível para estruturar páginas web com dois painéis. Layouts de tela dividida dividem a janela de visualização em duas zonas horizontais ou verticais distintas — geralmente emparelhando um painel visual ou de mídia (ilustração da marca, vídeo, canvas interativo de produto ou destaque de depoimento) com um painel interativo ou de conteúdo (formulário de autenticação, etapa de integração, narrativa de proposta de valor ou configurador de recursos).

Projetar uma interface de tela dividida eficaz requer equilibrar proporções espaciais, garantir hierarquia visual igual ou deliberada entre os dois painéis, manter rolagem independente dos painéis sem bugs de barra de rolagem dupla, gerenciar transições de alto contraste em temas de cor de fundo assimétricos e implementar empilhamento responsivo em dispositivos móveis que preserve a ordem lógica de leitura e o gerenciamento de foco sob WCAG 2.1 AA.

Casos de Uso

• Interfaces de Autenticação e Gateway (Login / Cadastro): Emparelhar um formulário de login ou registro interativo em um painel com arte da marca de alto impacto, depoimentos de clientes ou destaques de recursos do produto no painel adjacente.
• Heróis de Página de Destino de Produto: Apresentar uma narrativa de título de alta conversão e CTA primário no painel esquerdo enquanto exibe um modelo 3D interativo, prévia da interface do aplicativo ou demonstração em vídeo no painel direito.
• Fluxos de Assistente de Integração e Etapas Múltiplas: Combinar orientação de etapa persistente, indicadores de progresso ou visualizações de prévia em um lado com campos de formulário de entrada ativos no outro.
• Vitrines de Comparação e Duplo Recurso: Exibir dois produtos contrastantes, níveis de plano ou transformações "Antes vs. Depois" lado a lado com hierarquia visual independente.
• Páginas de Registro de Eventos e Webinars: Estruturar biografias de palestrantes e agendas ao lado de um formulário de registro fixo.

Quando NÃO Usar

• Painéis de Aplicativos com Múltiplos Registros: Para software de produtividade que requer navegação contínua em lista ao lado de uma área de trabalho de registro ativo (ex.: caixa de entrada de e-mail, helpdesk CRM), use sistema-de-layout-mestre-detalhe.
• Layouts de Aplicativos Complexos com Múltiplas Colunas: Para painéis SaaS que exigem navegação vertical persistente na barra lateral, barras de comando superior e grades de widgets, use sistema-de-layout-de-painel ou sistema-de-navegacao-com-barra-lateral.
• Grades de Dados de Alta Densidade: Para dados tabulares estruturados em várias linhas e colunas, use sistema-de-tabela-de-dados ou sistema-de-grade-responsiva.
• Artigos Editoriais de Coluna Única: Para documentos de texto longo ou postagens de blog destinados à leitura vertical sem impedimentos, use sistema-de-layout-de-artigo ou sistema-de-composicao-de-secao.

Entradas

1. Proporção de Divisão e Intenção Espacial: Proporção preferida (divisão equilibrada 50/50, divisão focada em herói 60/40 ou divisão focada em formulário 40/60).
2. Atribuição de Função do Painel: Definir o propósito do Painel A (Painel Visual/Mídia/Marca) e do Painel B (Painel Interativo/Formulário/Conteúdo).
3. Tokens de Emparelhamento de Superfície e Tema: Cores e temas de superfície (ex.: Painel de arte escuro da marca emparelhado com painel de formulário claro, ou superfícies duplas claras) de sistema-de-cores-acessiveis e sistema-de-design-de-tema-escuro.
4. Ativos de Mídia e Densidade de Conteúdo: Ativos visuais (imagens, SVGs, canvas de vídeo, mockups de produto) e esquemas de formulário/conteúdo a serem incorporados.

Saídas

1. Especificação de Canvas de Dois Painéis: Definições de layout CSS Grid para proporções de divisão em desktop, contenção de altura do contêiner (100vh / 100%) e limites suaves de painéis.
2. Regras de Contenção de Mídia e Contraste de Fundo: Regras CSS para dimensionamento de imagens (object-fit: cover), gradientes de fundo, distribuição de peso visual e sobreposições de legibilidade.
3. Modelo de Empilhamento Responsivo e Fluxo Móvel: Regras de ponto de interrupção responsivo que convertem painéis lado a lado horizontais em linhas empilhadas verticais, preservando a ordem de leitura DOM e a visibilidade do conteúdo prioritário.
4. Blueprint Acessível de ARIA e Foco de Teclado: Definições de região landmark ARIA (role="region" ou <main> / <aside> semânticos), regras de hierarquia de cabeçalho e gerenciamento de indicador de foco WCAG AA.

---

Fluxo de Trabalho

1. Estabelecer Contêiner da Janela de Visualização e Geometria do Painel

Construa o wrapper externo de tela dividida e defina os limites do layout para evitar barras de rolagem indesejadas do navegador:

• Contenção de Altura da Janela de Visualização: Para experiências em tela cheia (como páginas de Autenticação ou heróis de destino), defina o contêiner principal como display: grid; min-height: 100vh; width: 100%; overflow: hidden;.
• Proporções de Coluna em Desktop:
  • Divisão Equilibrada 50/50: grid-template-columns: 1fr 1fr; (Ideal para propostas de valor de peso igual ou páginas de autenticação).
  • Divisão de Recurso 60/40: grid-template-columns: 3fr 2fr; (Dá espaço proeminente para prévias interativas de produto).
  • Divisão Focada em Formulário 40/60: grid-template-columns: 2fr 3fr; (Prioriza a conclusão de formulários com vários campos, mantendo o contexto da marca).
• Contenção Independente do Painel: Garanta que painéis individuais lidem com estouro graciosamente (overflow-y: auto; height: 100%;) para evitar que um painel longo estique toda a janela de visualização ou cause barras de rolagem duplas.

2. Formular o Painel Visual e de Mídia (Painel A)

O painel visual cria engajamento imediato com a marca e ressonância emocional:

• Camadas de Fundo e Contraste: Se o Painel A usar cores escuras da marca ou fotografia, garanta que a tipografia interna atenda ao contraste WCAG AA (≥4,5:1).
• Dimensionamento e Moldura de Mídia: Envolva arte ou mockups de produto em elementos de contêiner com controles de tamanho rigorosos (width: 100%; height: 100%; object-fit: cover; ou object-fit: contain;).
• Visuais Decorativos vs. Informativos:
  • Se a imagem for puramente decorativa, aplique alt="" e aria-hidden="true".
  • Se a imagem contiver texto ou capturas de tela do produto, forneça texto alt descritivo ou tipografia de legenda emparelhada.

3. Formular o Painel Interativo e de Conteúdo (Painel B)

O painel interativo impulsiona ações do usuário (entrada de formulário, cliques de conversão, leitura):

• Alinhamento e Preenchimento de Conteúdo: Centralize o conteúdo verticalmente dentro do Painel B usando display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(2rem, 5vw, 4rem);.
• Bloqueio de Largura do Formulário: Restrinja elementos de formulário a uma medida legível de largura máxima (max-width: 440px; width: 100%;) para que os campos de entrada não se estiquem desconfortavelmente em telas ultra-largas.
• Hierarquia de Alvo de Toque e Entrada: Padronize botões primários, entradas de formulário e links usando sistema-de-botao-e-acao e sistema-de-design-de-formulario com alvos de toque de pelo menos 44x44px em viewports de toque.

4. Configurar Empilhamento Responsivo Móvel e Fluxo de Prioridade

Em viewports móveis (tipicamente < 768px ou < 1024px), painéis lado a lado ficam apertados e ilegíveis:

• Transição de Empilhamento de Ponto de Interrupção: Mude grid-template-columns para um layout de coluna única (grid-template-columns: 1fr; min-height: auto; overflow: visible;).
• Ordem DOM vs. Prioridade de Empilhamento Visual:
  • Páginas de Autenticação e Formulário: O formulário interativo (Painel B) é o objetivo principal do usuário. Coloque o Painel B primeiro no DOM para que usuários móveis vejam os campos de entrada imediatamente sem rolar por longas artes de marketing. Use a ordem order CSS ou posicionamento DOM natural.
  • Páginas de Herói e Vitrine: Coloque o título da narrativa (Painel B) primeiro, seguido pelo visual do produto (Painel A).
• Redução de Altura de Mídia: Em visualizações empilhadas móveis, reduza a altura do painel visual (max-height: 280px ou aspect-ratio: 16/9) para que não domine toda a tela do celular.

5. Implementar Foco de Teclado e Landmarks ARIA

• Estrutura Semântica e Landmarks:
  • Envolva o painel de formulário/conteúdo principal em <main> ou role="main".
  • Envolva o painel de apresentação visual/marca em <aside aria-label="Vitrine do Produto"> ou <section aria-label="Destaques da Marca">.
• Ordem de Leitura e Foco: Garanta que a ordem de tabulação DOM flua naturalmente da esquerda para a direita (ou de cima para baixo em dispositivos móveis) correspondendo ao layout visual sem saltos confusos de tabindex (tabindex="0" ou foco natural).
• Anéis de Foco através dos Limites do Tema: Garanta que os anéis de foco mantenham contraste 3:1 contra painéis visuais escuros e painéis de formulário claros (outline: 2px solid var(--focus-ring); outline-offset: 2px;).

---

Regras de Decisão

Proporções de Divisão de Layout e Mapeamento de Caso de Uso

Tipo de Página	Proporção de Divisão Desktop	Ordem de Empilhamento Móvel	Funções de Painel Recomendadas
Login / Cadastro (Auth)	Divisão 50/50	Formulário em cima, Mídia em baixo	Painel A: Arte da Marca / Depoimento; Painel B: Formulário de Login (<main>)
Seção de Herói de Produto	Divisão 60/40	Cópia em cima, Mídia em baixo	Painel A: Cópia e CTA (<main>); Painel B: Canvas Interativo do App
Assistente de Integração	Divisão 40/60	Etapas em cima, Entradas em baixo	Painel A: Checklist de Etapas / Prévia; Painel B: Campos de Formulário Ativos
Comparação Dupla	Divisão 50/50	Opção A em cima, Opção B em baixo	Painel A: Nível A / Antes; Painel B: Nível B / Depois

Diretrizes de Contraste de Fundo Assimétrico

• Painel Visual Escuro + Painel de Formulário Claro: Defina propriedades personalizadas CSS independentes para cada painel (--pane-bg, --pane-text, --pane-border). Nunca herde cores de texto através do limite da divisão.
• Linha Divisória da Separação: Em divisões duplas claras ou duplas escuras, insira uma borda sutil de 1px (border-right: 1px solid var(--border-subtle)) para estabelecer separação visual entre os painéis.

---

Restrições

• Acessibilidade (WCAG 2.1 AA):
  • SC 1.4.3 Contraste (Mínimo): O texto em ambos os painéis deve atender a uma taxa de contraste de pelo menos 4,5:1 contra seu respectivo fundo.
  • SC 1.3.2 Sequência Significativa: A ordem de tabulação visual e a ordem de leitura do leitor de tela devem corresponder à prioridade lógica da página (Formulário Interativo primeiro em Autenticação; título de Proposta de Valor primeiro em Heróis).
  • SC 2.4.7 Foco Visível: Campos de entrada e botões focados devem apresentar indicadores de foco sem cortes com contraste ≥3:1 contra as cores da superfície do painel.
  • SC 2.5.8 Tamanho do Alvo: Todos os gatilhos interativos devem satisfazer alvos de toque mínimos (24x24px mínimo, 44x44px recomendado para toque).
• Prevenção de Mudança de Layout e Estouro: Layouts de tela dividida em desktop em tela cheia devem usar overflow: hidden no wrapper principal e overflow-y: auto dentro de painéis roláveis individuais para eliminar oscilações de layout em nível de janela e barras de rolagem duplas.
• Comprimento de Linha de Tipografia: As medidas de texto em ambos os painéis devem permanecer entre 45 e 75 caracteres por linha (unidades ch) para manter a legibilidade confortável.

---

Padrões de Falha Comuns

• Armadilha da Barra de Rolagem Dupla: Deixar height: 100vh em elementos filhos sem estouro de contêiner bloqueado, fazendo com que tanto a janela do navegador quanto o painel filho exibam barras de rolagem verticais independentes.
• Oclusão de Conteúdo Primário Móvel: Colocar um painel de arte visual gigante antes do formulário de login na ordem DOM móvel, forçando usuários móveis a rolar por 600px de imagens de marketing para chegar ao campo de nome de usuário.
• Sobrecarga de Texto Não Verificada sobre Arte: Renderizar texto diretamente sobre fotos de fundo detalhadas sem sobreposições de gradiente escuro (rgba(0,0,0,0.6)), tornando o texto ilegível e falhando no contraste WCAG AA.
• Estiramento Ilimitado de Entrada de Formulário: Permitir que campos de formulário em uma visualização de desktop com divisão 50/50 se estendam por 800px de largura, criando alvos de toque estranhos e distorção visual.
• Peso Visual Desigual: Tornar um painel excessivamente escuro e saturado enquanto o painel adjacente é branco simples com texto minúsculo, causando desequilíbrio visual e alto cansaço visual.

---

Critérios de Validação

• A contenção da janela de visualização gerencia a proporção de divisão desktop (50/50 ou 60/40) limpa, sem barras de rolagem duplas na janela.
• O ponto de interrupção responsivo móvel (<768px) empilha os painéis em uma única coluna com restrições de altura apropriadas nos elementos de mídia.
• A ordem de leitura DOM prioriza a tarefa principal (ex.: formulário de Autenticação primeiro em telas de login móveis).
• O contraste do texto em ambos os painéis de divisão escuro e claro satisfaz WCAG AA (taxa ≥4,5:1).
• As entradas e botões interativos apresentam larguras limitadas (max-width: 440px) e alvos de toque ≥44x44px.
• Landmarks ARIA semânticos (<main>, <aside>, role="region") diferenciam adequadamente os dois painéis.