Arquivos UX e padrões de interface

1) Princípios

Claridade antes da beleza. O significado e a ação são evidentes em 1-2 segundos.
Um alvo para o ecrã. Tudo o resto é secundário ou oculto.
Sequência. Os mesmos patterns = as mesmas expectativas.
Disponibilidade padrão. Contraste, foco, teclado, voz.
Contextualidade. Dicas e textos, exactamente onde precisamos.
Localização-first. Comprimento de linha, formatos, cultura - no design original.
Reversível. Qualquer ação de risco pode ser cancelada ou confirmada.
Dimensibilidade. Cada regra é com uma métrica (conversão de passo, tempo, erro).

2) Malha, recuos e ritmo

Grade: passo 4/8-pt; colunas: 12 (desktop), 6 (tablet), 4 (mobile).
Recuos internos de componentes: múltiplos 4; externas - 8/ 12/16/24.
Ritmo vertical: cabeçalho → subtítulo → conteúdo → ação (CTA).
Limites e divisores: econômico; preferir «ar» e a hierarquia do tipográfico.

3) Tipografia

Escala de barras 12/14/ 16/20/24/32/40 (body 16).
Altura da linha: 1. 4–1. 6 para texto, 1. 2–1. 3 para cabeçalhos.
Comprimento de linha: 45-75 caracteres (desktop), 35-55 (mobile).
Seleção: gorduroso para acertos de sentido; caps, apenas em marcas.
Leitura em voz alta: Os textos devem soar naturalmente.

4) Cor e contraste

Semântica: 'sucess/info/warning/erro/neutral'.
Contraste: Mínimo WCAG 2. 1 AA (texto/fundo ≥ 4. 5:1; grande ≥ 3:1).
A cor ≠ o único sinal. Adicione um ícone/texto/formulário.
Anel de foco: sempre visível (não desligar no CSS).

5) Navegação e arquitetura de informação

O caminho do usuário é: "Onde estou? O que está aqui? E depois?" é óbvio.
Hierarquia do menu: ≤ 2 níveis na navegação principal.
Migalhas de pão para seções profundas.
Pesquisa: disponível globalmente em diretórios complexos; tecla quente '/'.
Estados de navegação: página/guia ativa realçada com tokens.

6) Componentes e pattern

Usamos componentes do sistema de design (sem os «carros»).
Um primary-CTA para a tela; os outros são segundary/tertiary.
Os estados default/hover/focus/ativo/disabled/loading são obrigatórios em cada interatividade.
Estados em branco: contexto + valor + CTA (+ link secundário).
Alertas gerais: um page-alert para a tela + dicas inline locais.

7) Formulários, validações e erros

A editora é obrigatória. O Placeholder é um exemplo de formato, não de substituição.
Inline-validação em blur, erros de sumary em submit.
Mensagem de erro: o que não é + como corrigir + limite/formato.
O scroll automático e o foco para o primeiro erro; 'aria-invalid', 'aria-describedy'.
Máscaras e formatos: sugerem, mas não quebram a digitação (pode ser um paist).
Preservação de dados: Não perdemos nada com o reinício/erro.

8) Estados e Fidback

Sucesso: brinde 2-4 c, tom neutro positivo, CTA «o que é que vai acontecer».
Informação/notice: banner suave/tultipo, não bloqueia o fluxo.
Warning/Erro/Critical: hierarquia visual/semântica; crítico - modal/banner com ação explícita.
Download: skeleton> spinner; estimativa de tempo de espera> 3 s.

9) Conteúdo e microcopy

A regra de três respostas, o que se passa → o porquê → o que fazer.
CTA: verbo de ação + objeto («Salvar alterações», «Passar a verificação»).
Números/datas/divisas: formatos locais.
Tom: amigável; em estresse (pagamento/segurança) - neutro.

10) Disponibilidade (A11y)

Navegação completa do teclado; ordem lógica das tabelas.
Papéis e 'aria-' para interações, regiões Live para brindes/estatais.
Contrastes, anéis de foco, tamanhos de interatividade ≥ 44 x 44 px.
Alternativas de texto em ícones/imagens; tabelas com 'th '/' scope'.
Verificações: automático (linter/scanner) + cenários de tela manual.

11) Localização e internacionalização

Todas as linhas estão em chaves i18n com contexto.
Teste de Linguagens Longas (DE/TR), Modos de TV.
Números/divisas/tempos - utilitários de formatação.
Tone-map: grau de formalidade/emoção em cenários (onboarding/pagamentos/segurança).

12) Respeitabilidade e adaptabilidade

Breakpoints: 360 / 768 / 1024/1280 +.
Mobile-first: caminho crítico disponível com uma mão, CTA na área do polegar.
Gestas e teclados: Os gestos são duplicados por botões; em desktop - hotkees.
Densidade: Em desktop - «ar», em mobile - economia vertical sem comprometer a clicabilidade.

13) Tema escuro

O contraste WCAG é mantido; evitar «preto puro» para fundo (cinza escuro).
Brilho/sombras - enfraquecidos; O anel de foco é contrastante.
Ilustrações e logos - com versões invertidas.
Política de transição: preserve a seleção do usuário (system/light/dark).

14) Animações e movimento

Duração: 120-200 ms (pequenos), 200-300 ms (transições).
As funções de aceleração são naturais (cubic-bezier com leve desaceleração).
As animações não devem bloquear o fluxo nem piorar a leitura.
Respeitar 'preferers-reduced-motion'.

15) Performance

LCP ≤ 2. 5 c, TTI/TBT na área verde; código-spliting; carregamento preguiçoso de mídia.
Virtualização de listas longas; Cajagem de dados.
Skeleton para a percepção da velocidade; Minimizar o «jank» do layout.

16) Segurança e privacidade em UI

Explicações claras para os pedidos (câmera, KYC, geo).
Prazos transparentes/comissões/limites; sem «instantaneamente», se houver atrasos.
Dados confidenciais - camuflagem explícita «mostrar/ocultar».
Confirmações para ações irreversíveis; registro de ação/notificação de logon.

17) Métricas de qualidade UX

Conversão do passo e tempo até a conclusão.
Error rate por campo/passo e Time-to-Fix.
CTR por CTA e recorrência de cenários.
Drop-off após erro/após carregar> N segundos.
Mensagens de apoio por tópico (antes/depois das alterações).
Defeitos A11y para lançamento (objetivo: 0 crítico).

18) Folhas de cheque

Tela antes do lançamento

• Um alvo principal e um primary-CTA.
• Navegação e status «onde eu estou» são evidentes.
• O conteúdo é breve: 1-2 frases por bloco.
• Estados: loading/empty/erro/sucess cobertos.
• A11y: contraste AA, foco visível, 'aria-' nas interações.
• Localização: Comprimento de linha/formatos/RENAULT testados.
• Performance: não há blocos «pesados» sem necessidade.

Formulário antes do lançamento

• Editoras e exemplos de formatos estão presentes.
• Inline-validação + sumary em submit.
• Scroll para o primeiro erro, foco no campo.
• Mensagens: o que/como/porquê; sem códigos 500/400 para o usuário.
• Os dados não são perdidos com erros/reinício.

19) Anti-pattern

«OK» como CTA em passos de sentido.
Playsholder em vez de editora.
A cor é o único sinal de status.
Spinners sem estimativas de tempo e sem alternativas.
Janelas modais sem trap de foco ou encerramento ESC.
Mistura de estilos/ícones, duplicação de componentes fora do sistema de design.
Humor/emoji em cenários críticos (pagamento/segurança).

20) Exemplos de antes/depois

Erro de formulário

Até: «Erro 400»

Depois de "Formato de data inválido. Use DD. MM. «GGG»

Estado vazio

Até: «Aqui está vazio»

Depois de: "Há um histórico de operações após a primeira reposição. [Reabastecer a conta]"

Mensagem de sucesso

Até: «Pronto»

Após: "Pagamento aceito. O balanço foi atualizado. [Ver a história]"

Navegação

Até: não está claro onde o usuário está

Depois: ficha ativa + migalhas de pão + cabeçalho explícito da página

21) Modelos de design-revezamento

Esqueleto de tela

O título → uma breve descrição → conteúdo/lista de → fidbeck/estatais → ação.

Esqueleto do formulário

Cabeçalho → dica de → de campo (editora + helper + erro) → CTA → ações secundárias → notas (comissão/data limite).

Modelo microcopy

Título (opz)

1-2 frases: contexto + próximo passo

CTA: ação + objeto

Linho secundário: ajuda/regras

22) Processos e manutenção de padrões

Definition of Done (UX): layout + texto + estados + A11y + i18n + métricas.
Réu UX em PR, folha de cheque das seções 18-21.
Documentação: Cada fichinha adiciona/atualiza o hyde no wiki/Storybook.
Auditoria de conteúdo, A11y, performance, consistência.

Barra final

Um alvo, um CTA principal.
Estados e Fidbeck projetados com antecedência.
A11y e localização, do zero, não «depois».
Menos cores - mais semântica e ritmo.
Mede conversão, erros, tempo, conversão.
Tudo através de um sistema de design, as mesmas regras → as mesmas expectativas → um UX previsível.

Pode complementar este hyde com modelos prontos para seus cenários-chave (inscrição/CUS, depósito/retirada, bónus/torneios) e recolher as folhas de cheque sob seu processo de revezamento.