Sistema de Controle Deslizante de Comparação de Imagens

O que Sistema de Controle Deslizante de Comparação de Imagens faz?

Propósito

O Sistema de Controle Deslizante de Comparação de Imagens fornece uma metodologia sistemática de design e espacial para construir componentes interativos de comparação visual "Antes e Depois". Este sistema aborda o desafio de design de apresentar dois estados sobrepostos de uma imagem (por exemplo, restauração de fotos, gradação de cor, maquetes de design, mudanças ambientais ou resultados médicos) de uma forma que permite aos usuários deslizar, revelar e contrastar detalhes dinamicamente. Ele previne a desorientação visual, preserva a estabilidade do layout, garante que os alvos de toque sejam otimizados para dispositivos móveis e atende aos padrões de acessibilidade WCAG AA por meio de interações estruturadas de teclado e anúncios de leitores de tela.

---

Casos de Uso

• Vitrines de Software Criativo e de Edição: Comparar arquivos RAW não editados com fotografias finais editadas, predefinições de gradação de cor ou trabalhos de retoque.
• Portfólios de Arquitetura e Design: Exibir fases de construção antes e depois, projetos de reforma, cenografia de interiores ou revisões de sistemas de design de sites.
• E-commerce e Demonstrações de Produtos: Apresentar produtos sob diferentes condições (por exemplo, teste de tecido impermeável, protetores de tela, produtos de limpeza ou comparações de desgaste).
• Visualizações Ambientais e Científicas: Apresentar mudanças ao longo do tempo, como mapeamento por satélite de recuo de geleiras, expansão urbana ou projetos de reflorestamento.
• Estudos de Caso de Cosméticos e Médicos: Apresentar resultados de tratamento de alta fidelidade sob condições idênticas de iluminação e espaço.

---

Quando NÃO Usar

• Descoberta de Múltiplos Itens: Se você precisa comparar atributos discretos de 2 a 5 produtos distintos, use o sistema-de-matriz-de-comparacao.
• Grades de Imagens Gerais: Para exibição padrão de imagens, carrosséis de mídia ou galerias, use sistema-de-imagens-e-midia ou sistema-de-carrossel-e-slider.
• Comparações com Muito Texto: Se o conteúdo principal é texto ou dados tabulares (por exemplo, recursos de versões de software), use sistema-de-tabela-de-dados-ui ou elementos de lista <dl>.
• Mudanças Sútis de Baixo Contraste: Se as diferenças visuais entre as duas imagens são mínimas e não podem ser facilmente percebidas, um layout lado a lado ou empilhado com legendas claras é mais útil.

---

Entradas

1. Ativos de Núcleo Duplo: Duas imagens de alta qualidade ("Antes" e "Depois") tiradas da mesma perspectiva espacial, quadro e resolução.
2. Dimensões do Componente: Proporções de aspecto (por exemplo, 16:9, 4:3 ou 1:1) e limites da janela de visualização (do sistema-de-imagens-e-midia).
3. Tokens de Tipografia e Marca: Tamanhos e cores de tipografia para rótulos, alças e textos instrutivos (do sistema-de-tipografia-fluida).
4. Preferências de Toque e Movimento: Escolhas do usuário em relação a gestos de toque e estados de movimento reduzido do sistema.

---

Saídas

1. Diagrama da Anatomia do Controle Deslizante: Definição do layout especificando o contêiner, trilha de fundo, sobreposição de clip-path, barra de alça, polegar de agarre e rótulos de estado.
2. Especificação de Controle por Teclado: Rastreamento de coordenadas acessível mapeando teclas como SetaEsquerda, SetaDireita, Início e Fim para porcentagens relativas de clip-path.
3. Guia de Comportamento Móvel e Toque: Especificações precisas para dimensões de alvos de toque, limites de arrasto de gestos e espaçamento do polegar.
4. Regras de Preservação de Layout: Regras estruturais (por exemplo, preservação da proporção de aspecto e dimensionamento absoluto) para evitar mudança de layout (CLS).

---

Fluxo de Trabalho

1. Estabelecer a Trilha Espacial e o Contêiner

Preserve a proporção de aspecto e o alinhamento estrutural:

• Bloqueio de Proporção de Aspecto: O contêiner deve ter uma proporção de aspecto explícita (por exemplo, aspect-ratio: 16 / 9 ou aspect-ratio: 1 / 1) para reservar espaço de layout e evitar Mudança de Layout Cumulativa (CLS).
• Sobreposição de Posicionamento Absoluto: Defina o contêiner como position: relative; overflow: hidden;. Coloque a imagem "Depois" como um bloco de imagem de fundo padrão (width: 100%; height: 100%; object-fit: cover;).
• Bloco de Sobreposição de Recorte: Posicione a imagem "Antes" dentro de um wrapper de sobreposição com posicionamento absoluto (position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;).
• Sincronização de Imagem: Garanta que tanto a imagem de fundo quanto a de sobreposição tenham dimensões idênticas, propriedades de escala (object-fit: cover) e alinhamentos (object-position: center) para que se sobreponham precisamente.

2. Implementar o Clip-Path de Revelação

Use recorte CSS moderno em vez de redimensionamento de imagem dupla para evitar distorção visual:

• Valor do Clip-Path: Aplique clip-path: inset(0 calc(100% - var(--exposure-ratio)) 0 0); ao wrapper de sobreposição, onde --exposure-ratio é uma propriedade personalizada CSS (por exemplo, 50%) representando a posição do controle deslizante.
• Vinculação Dinâmica de Variável: Atualize --exposure-ratio dinamicamente por meio de entradas de mouse, toque ou teclado.
• Evite Distorção de Imagem: Não redimensione as imagens durante a interação de arrasto; apenas recorte o wrapper do contêiner. As imagens devem permanecer estacionárias umas em relação às outras.

3. Projetar a Alça e o Polegar de Toque

A alça serve como a principal affordance visual para a interação:

• Linha Divisória Vertical: Estilize uma barra vertical posicionada absolutamente em left: var(--exposure-ratio);. Defina a largura para uma linha fina de alto contraste (por exemplo, 2px a 4px) com uma sombra projetada para se destacar contra diversos fundos de imagem.
• Alvo do Polegar de Agarre: Posicione um polegar de agarre circular ou arredondado centralizado na linha vertical.
• Indicadores Visuais: Incorpore setas horizontais bidirecionais (← →) ou texturas contrastantes dentro do polegar de agarre para sinalizar capacidades de arrasto horizontal.
• Tamanho do Alvo de Toque (WCAG 2.2 SC 2.5.8): O polegar de agarre interativo deve ter um alvo de toque físico de pelo menos 44px x 44px em interfaces móveis/de toque, independentemente de seu tamanho visual. Consiga isso usando pseudo-elementos transparentes (::after) ou preenchimento.

4. Construir Rótulos de Texto Acessíveis

Mantenha o contexto e a orientação do usuário:

• Posicionamento do Rótulo de Texto: Posicione os rótulos (por exemplo, "ANTES" e "DEPOIS") em cantos opostos do contêiner (por exemplo, "Antes" no canto superior esquerdo, "Depois" no canto superior direito).
• Design de Alto Contraste: Use fundos escuros semitransparentes (scrims) atrás dos rótulos de texto branco para garantir uma taxa de contraste mínima de 4.5:1 (WCAG AA), independentemente do conteúdo da imagem.
• Feedback de Estado Interativo: Opcionalmente, esmaeça os rótulos de texto quando o controle deslizante estiver ativo para minimizar a distração visual, restaurando-os quando a interação terminar.

5. Definir Navegação por Teclado e Integração ARIA

A interface deve ser totalmente navegável apenas pelo teclado:

• Suporte de Controle Deslizante de Faixa: Dê suporte à comparação visual com um elemento <input type="range"> nativo e visualmente oculto. Isso fornece manipulação de faixa nativa, estados de foco e papéis aria.
• Associação de Atributos ARIA: Atribua aria-label (por exemplo, "Comparação de imagem antes e depois"), aria-valuemin="0", aria-valuemax="100" e aria-valuenow dinâmico representando a porcentagem.
• Mapeamento de Eventos de Teclado:
  • SetaEsquerda / SetaAbaixo: Decrementa a posição em 1% (ou 5% para movimento mais rápido).
  • SetaDireita / SetaAcima: Incrementa a posição em 1% (ou 5%).
  • PageUp / PageDown: Move a posição do controle deslizante em incrementos de 10%.
  • Início: Move imediatamente para 0% (revelando totalmente a imagem "Depois").
  • Fim: Move imediatamente para 100% (revelando totalmente a imagem "Antes").
• Indicadores de Foco: Quando o controle deslizante estiver focado, exiba um anel de foco distinto e de alto contraste ao redor do polegar de agarre. Nunca oculte estilos de foco.

---

Regras de Decisão

Seleção do Modo de Movimento do Controle Deslizante

Modo de Interação	Critério de Caso de Uso	Método de Implementação
Clique Ativo/Toque e Arraste (Padrão)	Comparação de alta precisão; melhor para análise detalhada.	Atualize --exposure-ratio em pointermove apenas quando o mouse/toque estiver pressionado no polegar.
Seguir por Passar o Mouse	Comparações casuais/exploratórias; recursos de landing page de baixa fricção.	Atualize --exposure-ratio diretamente conforme o cursor se move sobre qualquer parte do contêiner. Não adequado como método único; fallback para clique/arraste é necessário para dispositivos móveis.
Alternância de Imagem Dupla (Clique em Qualquer Lugar)	Comparações simples e rápidas; melhor em telas pequenas com mudanças visuais muito distintas.	Clique em qualquer lugar do contêiner aciona uma transição entre 0% e 100% de exposição com uma suavização suave de 0.3s.

---

Restrições

• Acessibilidade (WCAG AA): Os rótulos de texto devem satisfazer a taxa de contraste 4.5:1. O controlador interativo deve suportar foco total do teclado, indicadores visíveis (:focus-visible) e alvos de toque de 44px x 44px no mínimo.
• Mudança de Layout Cumulativa (CLS): Ambas as imagens e seu contêiner devem compartilhar a mesma proporção de aspecto predefinida. Nunca deixe o contêiner colapsar para 0px de altura enquanto as imagens estão carregando. Use aspect-ratio CSS ou porcentagens de preenchimento inline.
• Fluidez Responsiva: O componente deve dimensionar dinamicamente para viewports móveis. Em telas < 480px, dimensione os rótulos proporcionalmente ou mova-os diretamente para baixo da imagem para evitar sobreposição de outros recursos visuais principais.
• Movimento Reduzido: Se um usuário preferir movimento reduzido (@media (prefers-reduced-motion: reduce)), desabilite transições suaves quando a navegação por teclado for usada e evite acionadores de seguir por passar o mouse em favor de ações explícitas de clique/toque.

---

Padrões Comuns de Falha

• A "Armadilha de Achatamento de Imagem": Redimensionar ou esticar as imagens durante a interação de arrasto, em vez de recortá-las, resultando em visuais deformados.
• O "Colapso CLS Zero": Não definir as dimensões do contêiner, fazendo com que o layout salte dramaticamente quando as imagens finalmente baixarem.
• Exclusão de Teclado: Criar um controle deslizante que só pode ser arrastado com um mouse, tornando-o completamente inutilizável para usuários de teclado, leitores de tela e alguns usuários de switches assistivos.
• O "Polegar Invisível" em Imagens Claras: Não adicionar sombra projetada, borda ou sobreposição de alto contraste à alça e ao polegar, fazendo com que eles se misturem completamente em imagens claras/ocupadas.
• Armadilhas de Alvo de Toque: Tornar o polegar de agarre minúsculo (por exemplo, 10px de largura) sem preenchimento de toque, causando enorme frustração do usuário em dispositivos móveis.

---

Critérios de Validação

• Alinhamento Preciso da Sobreposição: As imagens "Antes" e "Depois" estão perfeitamente alinhadas, sem deslocamento horizontal, achatamento ou distorção durante o deslizamento.
• Mudança de Layout Cumulativa Zero: O contêiner reserva espaço de layout usando uma proporção de aspecto consistente ou dimensões explícitas antes do carregamento das imagens.
• Segurança de Toque em Dispositivos Móveis: O alvo de toque da alça/polegar de agarre tem pelo menos 44px x 44px em viewports móveis/de toque.
• Navegabilidade Total por Teclado: Os usuários podem navegar, focar e ajustar a posição do controle deslizante usando teclas de teclado padrão (Setas, Início, Fim).
• Conformidade com Padrões ARIA: O controlador interativo usa elementos semânticos (como <input type="range">) ou papéis ARIA corretos (role="slider", aria-valuenow, aria-label).
• Conformidade de Contraste AA: Rótulos de texto ("Antes" e "Depois") e indicadores de foco atendem à taxa de contraste WCAG 4.5:1 contra superfícies adjacentes.
• Sensibilidade a Movimento: O comportamento de interação honra as preferências do usuário para movimento reduzido (prefers-reduced-motion: reduce).