coastdigitalgroup/coastai-skills

Sistema de Layout de Detalhes do Produto

Propósito

O Sistema de Layout de Detalhes do Produto fornece um framework visual e espacial padronizado e de alto desempenho para estruturar Páginas de Detalhes do Produto (PDPs) de e-commerce. A Página de Detalhes do Produto é o motor de conversão mais crítico de qualquer site de e-commerce ou direto ao consumidor. Ela exige equilibrar mídia rica, configuradores de múltiplas variantes, modelos de preços dinâmicos, sinalização de confiança e chamadas para ação (CTAs) primárias dentro de uma interface coesa, escaneável e completamente acessível.

Uma abordagem sistemática resolve pontos de atrito comuns de design — como grades de compra desalinhadas ("Caixas de Compra"), controles deslizantes de mídia desorientadores, mudança de layout durante a alternância de variantes (CLS), gatilhos de compra móvel ocultos e bloqueios críticos de acessibilidade em seletores personalizados. Este sistema preenche a lacuna entre a apresentação de marketing e a implementação técnica, garantindo que as páginas carreguem de forma estável e gerem máxima conversão, ao mesmo tempo em que cumprem rigorosamente os padrões WCAG AA.

Casos de Uso

• E-commerce B2C e Direto ao Consumidor (DTC): Projetar páginas de produto altamente polidas para bens físicos, vestuário, cosméticos ou eletrônicos.
• Vendas de Produtos Digitais e Assinaturas: Organizar destaques de recursos, seletores de nível e checkouts de pagamento em páginas de destino de software, associações ou serviços.
• Páginas de Catálogo Industrial e B2B: Estruturar páginas de peças de hardware complexas e com muitas especificações, com esquemas para download e construtores de orçamento.
• Visualizações de Detalhes de Marketplace: Padronizar grades de layout para listagens diversificadas de múltiplos vendedores (imóveis, reservas de viagem, vendas peer-to-peer).

Quando NÃO Usar

• Páginas de Comparação de Planos SaaS: Para comparar pacotes de assinatura distintos lado a lado, use sistema-de-ui-de-tabela-de-precos ou sistema-de-matriz-de-comparacao.
• Descoberta Primária de Produtos (PLPs): Para navegar por catálogos ou listas de resultados de pesquisa, use sistema-de-ui-de-cartao e sistema-de-filtro-e-ordenacao.
• Captura Simples de Leads ou Formulários: Para formulários de contato básicos, newsletters ou inscrições de etapa única, use sistema-de-design-de-formularios.
• Conteúdo Editorial e Blogs: Para narrativa de histórias, newsletters e colunas de apenas texto, use sistema-de-layout-de-artigo.

Entradas

1. Inventário de Conteúdo e Ativos: Imagens/vídeos de produto em alta resolução (proporções de aspecto, requisitos de zoom), especificações, avaliações, estruturas de preço e garantias de confiança.
2. Complexidade da Matriz de Variantes: Número de opções (ex., cor, tamanho, material) e a presença de relações de dependência (ex., "Tamanho G disponível apenas em Preto").
3. Escala Tipográfica e de Espaçamento: Escalas de tamanho relativo e tokens de espaçamento fluido (de sistema-de-tipografia-fluida e sistema-de-espacamento-fluido).
4. Tokens de Elevação e Cor: Cores de destaque da marca, tons de status (venda, aviso, fora de estoque), elevações de superfície e estados ativo/foco/hover (de sistema-de-cor-acessivel e sistema-de-elevacao-e-profundidade).
5. Restrições de Viewport Móvel: Limites de viewport e entalhes de dispositivo (notadamente o indicador de início do iOS e barras de menu do navegador).

Saídas

1. Blueprint Espacial de Painel Duplo: Grade estrutural dividindo a tela em um Painel de Mídia de alto impacto à esquerda e um Painel Configurador de Compra (Caixa de Compra) escaneável à direita.
2. Regras de Empilhamento e Fluxo Responsivo: Especificações de transição mostrando como o layout se transforma em uma pilha vertical otimizada para dispositivos móveis.
3. Gaveta de Compra Fixa Móvel: Especificação para uma barra de compra ancorada na viewport que persiste em viewports móveis após a dobra da CTA principal.
4. Anatomia de Amostra Interativa e Seletor: Designs em nível de componente para botões de tamanho, amostras de cor e contadores de quantidade.
5. Especificação Aria live e Teclado: Rotas de tabulação de teclado claras, roving tabindex, retenção de foco e gatilhos de anúncio de status para conformidade com leitores de tela.

---

Fluxo de Trabalho

1. Estabelecer o Layout Espacial de Painel Duplo (Desktop >1024px)

Estruture a visualização de desktop usando um layout de Grade CSS de 2 colunas ou Flexbox, dividido proporcionalmente:

• Coluna Esquerda: O Painel de Mídia (Ocupa 50–55%): Exibe ativos visuais de produto de alta fidelidade. Para evitar que os usuários percam o contexto de compra durante rolagens longas, defina a coluna pai como align-items: start; e torne o container de mídia fixo: position: sticky; top: calc(var(--global-header-height) + var(--space-m));.
• Coluna Direita: O Configurador de Compra / Caixa de Compra (Ocupa 45–50%): Abriga todos os metadados e controles de transação. Mantenha-o em uma única coluna vertical com uma hierarquia clara que seja lida de cima para baixo.
• Espaçamento da Grade: Mantenha um espaçamento visual generoso (ex., gap: clamp(24px, 4vw, 48px)) para manter a mídia e os controles distintos, mas unificados.

2. Projetar a Hierarquia Visual do Configurador de Compra (Caixa de Compra)

Aplique o fluxo de leitura "Padrão-F" na coluna da Caixa de Compra. Ordene os elementos logicamente:

1. Trilha de Navegação e Indicador de Categoria: Texto pequeno e suave no topo (ex., "Shop > Outdoor > Jackets") para contexto.
2. Cabeçalho do Produto: Título principal usando h1 estilizado com font-size: clamp(1.75rem, 3.5vw, 2.5rem) e peso negrito.
3. Resumo de Prova Social: Bloco de classificação por estrelas exibindo a classificação média e um link de texto ativo para rolar diretamente para a seção de avaliações (ex., "★ ★ ★ ★ ☆ (128 avaliações)").
4. Bloco do Mecanismo de Preços: Preços altamente visíveis. Preço ativo em negrito, MSRP menor riscado (se em promoção) e um emblema de venda colorido claro (ex., "Economize $20"). Coloque mensagens de parcelamento (ex., "Ou 4 parcelas de $25 com Klarna") imediatamente abaixo.
5. Configurador de Variantes: Tamanho, amostras de cor ou materiais. Use títulos de rótulo consistentes e espaçamentos (ex., margin-bottom: var(--space-m)).
6. Reasseguramento de Estoque e Envio: Alertas sutis de estoque em tempo real (ex., "● Restam apenas 3 em estoque - envio amanhã") próximos às variantes.
7. CTA de Compra Primária: Botão proeminente e de alto contraste "Adicionar ao Carrinho" ou "Compre Agora" estendendo-se por toda a largura da Caixa de Compra.
8. Selos de Confiança e Políticas de Devolução: Agrupamentos de ícones/texto altamente visíveis (ex., "✓ Frete Grátis", "✓ Devolução em 30 Dias") colocados diretamente abaixo da CTA principal para minimizar o atrito de compra.

3. Estruturar a Galeria de Mídia do Lado Esquerdo

Organize as imagens para garantir que a navegação seja rápida, leve e preserve a estabilidade do layout:

• Container de Exibição Principal: Ancora a imagem ativa em um container com uma proporção de aspecto fixa (tipicamente quadrada 1:1 ou retrato 3:4) usando aspect-ratio: 1 / 1; object-fit: cover;. Isso evita Mudança de Layout Cumulativa (CLS) ao carregar imagens de tamanhos ligeiramente diferentes.
• Navegação por Miniaturas: Empilhe miniaturas de suporte horizontalmente abaixo da imagem principal (ou verticalmente à esquerda). Garanta que as miniaturas ativas tenham uma borda de alto contraste e aria-current="true".
• Gatilho de Ampliação/Zoom: Inclua um ícone de zoom sutil no canto inferior direito da imagem ativa. Acioná-lo abre um lightbox modal em tela cheia e deslizável (sistema-de-galeria-de-imagens-e-lightbox).

4. Criar o Empilhamento Móvel e a Gaveta de Compra Fixa Móvel (<768px)

Em telas móveis, layouts padrão de múltiplas colunas quebram. Aplique estas regras de adaptação:

• Fluxo Vertical Linear: Transforme a página em uma pilha de coluna única. Coloque a Galeria de Mídia no topo (largura total ou ligeiramente recuada), seguida imediatamente pelo Cabeçalho do Produto, Preço, Configurador de Variantes, CTA e, em seguida, especificações detalhadas.
• A Gaveta de Compra Fixa Móvel: Como a CTA principal rola para fora da tela rapidamente em dispositivos móveis, implemente uma gaveta de checkout fixa na parte inferior:
  • Mantenha a gaveta oculta quando a CTA inline estiver visível na tela.
  • Assim que o usuário rolar a CTA inline para fora da vista (Limite > 600px de rolagem), deslize para cima uma barra inferior fixa compacta contendo: [Miniatura do Produto + Título] (opcional/recolhido em viewports pequenos), [Preço] e uma [CTA Primária de Adicionar ao Carrinho] ocupando a metade direita da barra.
  • Utilize padding-bottom: env(safe-area-inset-bottom); para respeitar as zonas de deslize do dispositivo móvel e evitar sobreposições com controles do sistema.

5. Padronizar a Interação do Seletor de Amostras e Variantes Personalizadas

Seletores personalizados (como círculos de cor ou matrizes de botões) devem ter uma aparência polida e interagir de forma limpa:

• Amostras Visuais: Círculos de cor devem ter pelo menos 32x32px em desktop e 40x40px em dispositivos móveis. Amostras ativas são indicadas por um anel de borda concêntrica externa (deixando um espaço branco de 2px entre o círculo de cor e a borda).
• Botões de Tamanho: Use contornos de pílula arredondados para tamanhos (ex., "P", "M", "G"). Riscar e escurecer tamanhos indisponíveis (ex., opacidade 0.4 com uma barra diagonal), mas mantenha-os focalizáveis para que leitores de tela possam anunciar "Tamanho P - Fora de Estoque".
• Feedback Dinâmico: Alternar uma amostra deve atualizar instantaneamente o preço visível, o aviso de estoque e a galeria de imagens principal sem recarregar a página inteira.

6. Projetar para Navegação por Teclado e Acessibilidade para Leitores de Tela

Configuradores personalizados são locais frequentes de falhas de acessibilidade. Aplique estas diretrizes rigorosas:

• Seleção Semântica de Amostras: Implemente amostras usando <input type="radio"> padrão encapsulado em tags <label>, estilizadas para ocultar a entrada nativa visualmente, mantendo-a totalmente acessível. Isso garante navegação nativa por teclas de seta, agrupamento automático de rádio e estados de foco de teclado.
• Anúncios Aria Live: Quando um usuário seleciona uma amostra ou variante, use um div invisível aria-live="polite" para anunciar a atualização aos leitores de tela (ex., "Cor Selecionada: Vermelho Crimson. Preço atualizado para noventa e nove dólares. Em estoque.").
• Links de Pular e Âncoras Contextuais: Garanta que o "link de Avaliação por Estrelas" tenha um anel de foco visível e role suavemente o foco do teclado para a Seção de Avaliações (#reviews) usando tabindex="-1" no destino.

---

Regras de Decisão

Seleção de Estilo de Amostra

Contagem de Opções	Padrão de Seletor de UI Recomendado	Justificativa de Design
2 - 5 Opções (ex., Vermelho, Azul, Verde)	Botões Pílula Visuais ou Amostras	Visibilidade imediata, baixa carga cognitiva, alvos fáceis de toque único.
6 - 15 Opções (ex., 10 tamanhos de sapatos)	Matriz de Grade Flexível Adaptativa	Agrupamento compacto, encaixa perfeitamente na coluna da Caixa de Compra sem rolagem longa.
16+ Opções (ex., 50 modelos de dispositivos)	Menu de Seleção Personalizado com Pesquisa	Evita poluição visual e blocos de layout de "paralisia de escolha" avassaladores.

Divisão de Layout (Desktop vs. Viewport Tablet)

• Desktop (>1024px): Grade de 2 Colunas (Mídia Fixa à Esquerda, Configurador de Rolagem à Direita).
• Tablet (768px - 1023px): Reavalie as larguras das colunas. Mude para uma divisão 50/50 ou transforme o layout antecipadamente em uma pilha de Coluna Única com um container simplificado alinhado à esquerda se o configurador de variantes contiver entradas de matriz densas.
• Móvel (<768px): Pilha estrita de 1 Coluna. A Gaveta de Compra Fixa Móvel Ativa é acionada na rolagem.

Estratégia de Apresentação de Preços

• Apresentação em Promoção: Renderize o preço de venda ativo em vermelho de alto contraste ou negrito da marca (mínimo 24px/1.5rem). Renderize o preço original (MSRP) riscado em cinza suave ao lado, e inclua um emblema de pílula sólida compacta indicando economia (ex., "Economize $30" ou "-25%") para maximizar o valor percebido.
• Apresentação Padrão: Renderize o preço ativo em negrito neutro-escuro/neutro-claro (combinando com a cor do cabeçalho do corpo principal).

---

Restrições

• Acessibilidade (WCAG AA Mínimo):
  • SC 2.4.11 Foco Não Obscurecido: Garanta que pílulas de variante focalizáveis ou botões de quantidade nunca sejam obscurecidos por cabeçalhos fixos ou pela gaveta de compra inferior móvel. Use scroll-margin-top e scroll-margin-bottom globais apropriadamente.
  • SC 2.5.8 Tamanho do Alvo: Cada seletor de variante, bolha de amostra e gatilho de incremento de quantidade (+ / -) deve fornecer um alvo de toque de pelo menos 24x24px com separação clara, e 44x44px em telas sensíveis ao toque.
  • Contraste AA: Texto primário, preços e estados de borda selecionados devem manter uma taxa de contraste de pelo menos 4.5:1. Círculos de amostra de cor devem ter um rótulo de texto acompanhante (adjacente ou como dica de ferramenta acessível/texto de leitor de tela) para evitar depender apenas da cor (SC 1.4.1 Uso de Cor).
• Preservação de Mudança de Layout Cumulativa (CLS):
  • Sempre reserve espaço para o título do produto, container de imagem e caixas de aviso dinâmicas. Um estado de esqueleto (sistema-de-estado-de-esqueleto) ou dimensões explícitas devem evitar que o conteúdo salte quando carregar avaliações dinâmicas ou contadores de estoque.
• Alturas de Viewport Dinâmicas: A gaveta de compra fixa móvel deve respeitar as zonas seguras do ambiente (env(safe-area-inset-bottom)) para garantir que os botões de deslizar para iniciar físicos não entrem em conflito com a CTA de checkout principal.

---

Padrões Comuns de Falha

• A Mudança de "Caixa de Compra Desalinhada" : Botões de variante de tamanho ou cor que quebram as linhas de embrulho de forma diferente dependendo do produto, fazendo com que a CTA "Adicionar ao Carrinho" primária salte para cima e para baixo dinamicamente.
• O Ponto Cego de Apenas Cor: Usar círculos coloridos não rotulados como amostras. Usuários daltônicos não conseguem distinguir entre amostras verdes e marrons, e leitores de tela lerão apenas "Botão de Cor" a menos que um texto de rótulo explícito esteja associado.
• O Bloqueio do Teclado Virtual Móvel: Posicionar uma barra inferior fixa em telas móveis de uma forma que bloqueie ou sobreponha campos de formulário quando o teclado virtual móvel se expande, prendendo o usuário.
• Pulo da Proporção de Aspecto da Imagem: Não declarar proporções de aspecto explícitas na exibição da galeria principal, fazendo com que as colunas do layout inteiro colapsem e expandam à medida que o usuário alterna entre imagens de produto paisagem e retrato.
• Travamento de Dupla Barra de Rolagem: Definir a coluna fixa esquerda muito alta ou deixá-la transbordar, fazendo com que a coluna esquerda role independentemente dentro de uma janela minúscula e criando barras de rolagem duplas adjacentes umas às outras.

---

Critérios de Validação

• Configuração de Painel Duplo: O layout de desktop apresenta uma coluna de mídia fixa à esquerda e uma coluna de Caixa de Compra de rolagem à direita com bordas limpas de 1px ou divisão clara de espaço em branco.
• Cascata Móvel Linear: O viewport móvel transforma a grade em uma pilha de coluna única …

[truncado para tradução]