Efeitos de orientação e interatividade

1) Rol de guia para UX

• «É interativo?» (guia/cursor/realce),
• «Onde estou eu?» (estilo de foco),
• «O que vai acontecer ao click?» (estado e afordance),
• «A ação deu certo?» (ativo/pressed e feedback posterior).

O princípio é que os efeitos aumentam o sentido em vez de substituí-lo. Informações-chave e acesso à ação não devem ser ocultas apenas após a orientação.

2) Modelo de estado e semântica

Conjunto básico: 'default' 'hover' 'focus' 'ativo/pressed' 'disabled' n' loading '(opcional).
Para links, adicione 'visited' e para 'checked'.

• Entre os estados, a diferença visual é a forma/espessura/ícone, não apenas a cor.
• Contraste texto/ícone ao fundo: ≥ 4. 5:1 (texto normal), ≥ 3:1 (grande/grosso).
• O foco não é visível (teclado/tela).

3) Dispositivos e consultas de mídia

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• Os efeitos de orientação não são críticos para detectar a ação - use afordance explícitos: cor/ícone/moldura/dica.
• Não esconda a navegação/controle apenas «sob hover».

4) Duração e curvas

• Hover: 120-180 ms
• Focus: 120-180 ms
• Active/Pressed: 80–120 мс
• Ripple/ink (se usado): ≤ 240 ms, 1 ciclo

A curva padrão é 'cubic-bezier (0. 2, 0, 0. 2, 1)`

Ativo - mais rápido ('cubic-bezier (0. 4, 0, 1, 1) '), saída mais suave (' cubic-bezier (0, 0, 0. 2, 1)`).

5) Sistema de design de tokens (exemplo)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) Botões: pattern de referência

Default: texto lido ≥ 4. 5:1 para o preenchimento.
Hover: - L fundo 0. 02–0. 04, sombra leve, cursor 'ponto'.
Ativo: Mais --DeL 0. 02–0. 04, sombra reduzida/apropriação (scale 0. 98), por favor. 80-100 mc.
Focus: anel de contraste 2-3 px sem blur.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, nada de efeitos hover.

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) Links e ações de texto

A diferença não é apenas cor, sublinhar por omissão ou em hover/focus.
Para guiar: aumento do realce (espessura/offset), leve alteração de tom.
'Visited' é um tom diferente do mesmo painel, e o contraste está salvo.

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) Cartões, listas, tabelas

• Hover: sombra macia/quadro de realce, cursor 'point' apenas se o cartão estiver clicado.
• Ativo: captação curta, realce o cabeçalho.
• Focus: um anel visível em torno do cartão, não só dentro.

• Fundo Hover com o L 0. 02–0. 04; a linha ativa é um quadro claro.
• Os cliques de linha só são válidos se a afordance estiver explícita (ícone «→», dica).

• Restrinja a «madeireira» a partir de atrasos em cascata - no máximo 6-8 elementos (stagger 20-30 ms).

9) Formulários e campos de entrada

Hover junto aos campos: moldura fina realçada ( L £0. 05), sem alterar o tamanho do bloco.
Focus: anel de contraste + alterar a cor da moldura; o placeholder permanece diferente (≥ 3:1).
Erro: cor + ícone/texto; «shake» curto é permitido ≤ 6 px, ≤ 140 ms, uma vez.

10) Ícones e pequenos objetivos

Aumente a área do clique para 32 x 32 (desktop )/40 x 40 (mobile), mesmo que o ícone seja 20-24 px.
Hover: mudança de opacidade/preenchimento/espessura, no máximo 1 ou 2 propriedades.
Ative: um «snap» breve por scale 0. 98.
Focus: anel por contêiner de área de clique.

11) Disponibilidade (A11y) e teclado

Suporte ': focus-visível' (para o mouse, os estilos de foco não são exibidos; para o teclado, exibe).
Os itens que criam dicas hover são obrigados a ter o equivalente a um foco (o mesmo conteúdo aparece pela tecla Tab/Enter).
Ária-atributos: as interações têm 'role', 'aria-pressed '/' aria-expanded '/' aria-current' sobre a situação.
Prefers-reduced-motion: Substituindo zoom/mudança por mínimo (opacity/fill), desativando pulsações.

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) Desempenho

Anime apenas «opacity» e «transform»; evite 'width/height/left/top', blur pesado/sombras em vários elementos.
Use moderadamente 'will-mudança'; remova quando a transição terminar.
Em listas/tabelas, efeitos mínimos, sem repaint «global».

13) Hover-intent e «pegajoso»

• Limite de atraso 80-120 ms antes de exibir tooltip/menu complexo.
• «Pegajosidade» do cursor: Se o usuário se mover de um item para o menu em um ângulo, dê 200-300 ms de corredor (triângulo Fits).
• Por uma máquina, substituímos o hover por press ou o botão explícito «mais».

14) Tooltip/menu/dropdown

Abertura: hover-intent/press, encerramento por cuidados/blur/ESC.
A posição é para a origem, a seta está alinhada; max-width e transposições estão incluídas.
Disponibilidade: 'role =' tooltip ', vinculando' ária-describedy '; para o menu - 'role =' menu '+ controle de seta.

15) Especificidades iGaming

Coeficientes/liderbords: hover realça a linha/célula, mas não altera a métrica de posicionamento (sem «salto»).
Cartões de torneio/bónus: hover pode «reviver» o quadro/ícone, mas CTA de texto e condições permanecem legíveis (≥ 4. 5:1).
Notificações responsáveis (18 +, limites): sem efeitos de distração; apenas o realçamento de links e o foco nítido são permitidos.
Botões de apostas/compras: ativo-feedback obrigatório (clique visual/captação) e disable inequívoco após envio.

16) Exemplos de receitas de interface

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

17) Anti-pattern

Ocultar ações/menus críticos apenas por hover.
Redimensionar/redimensionar (saltos layout).
Suporte apenas de cor para a variabilidade de estados.
Acção, pulsações infinitas, glow «ácido» nos textos.
Não há estilos focus ou são invisíveis em temas escuros.
Colocar o cursor 'ponto' em itens não interativos.

18) QA-folha de cheque

Disponibilidade

• Todas as interações são acessíveis pelo teclado; Estamos a ver o foco.
• Conteúdo hover disponível por 'focus '/' aria'.
• O contraste entre texto e ícone corresponde ao WCAG.

Comportamento

• Hover/ativo/disabled/visited são diferentes pela forma e pelo tom.
• Não há atraso na resposta> 120 ms.
• Há uma alternativa hover para o tanque.

Performance

• Só se está animando 'transform '/' opacity'.
• Não há blur/sombras pesadas em vários elementos.
• Em listas longas, os efeitos são minimizados.

19) Documentação em design

Tabela de estado para componentes básicos (botões, links, cartões, campos, linhas de tabela).
Tocos de longa duração/curvas/sombras e um exemplo de código para light/dark.
Seção «Hover vs Touch»: regras alternativas e exemplos.
«Do/Don 't», com clipes curtos e indicadores de contraste.

Resumo curto

Os efeitos de guia são uma parte auxiliar, mas crítica da linguagem da interface. Tornem-nas breves e previsíveis, mantenham o teclado e o tanque, garantam o contraste e o foco visível e animem apenas propriedades baratas. Então a interatividade aumenta a clareza e a velocidade das ações, em vez de atrapalhá-las.