luizhcrocha/design-engineering

Design engineering

Interfaces boas são feitas de muitos pequenos detalhes que os usuários nunca notam individualmente. Cada detalhe abaixo tem uma razão. Aplique-o onde a razão se aplica e estude por que as interfaces que você admira transmitem a sensação que transmitem.

Escolha a skill para o trabalho

• Uma animação para construir: animate.
• Um diff cujo movimento precisa de um veredito: review-animations.
• Uma base de código cujos movimentos auditar e planejar: improve-animations. Lugares que deveriam começar a se mover: find-animation-opportunities. Movimento para remover: remove-animations.
• Vários elementos se movendo juntos: choreograph. Uma animação que pula frames: animation-performance.
• Arrastar, deslizar e sheets na web: gestures.
• Um componente para testar estresse com dados de pior caso: break-ui.
• Gestos, molas, materiais e tipografia no nível da Apple: apple-design.
• Um app web que parece errado no celular: mobile-native.
• Uma biblioteca de componentes para escolher: pick-ui-library.
• Várias direções para uma mesma peça de UI: prototype.

Esta skill cobre o restante: polimento de componentes e uma revisão de UI que olha além do movimento.

Regras que pegam a maioria dos problemas

1. Decida se deve animar ou não. Uma ação vista 100 ou mais vezes por dia, ou iniciada pelo teclado, não recebe animação.
2. Nomeie propriedades exatas. Nunca transition: all.
3. Entrada e saída com ease-out ou uma curva personalizada forte, como cubic-bezier(0.23, 1, 0.32, 1). Nunca ease-in em UI.
4. Mantenha a animação de UI abaixo de 300 ms. Um dropdown leva de 150 a 250 ms; feedback de pressionamento leva de 100 a 160 ms.
5. Dê a todo elemento pressionável um estado :active, como transform: scale(0.97).
6. Nunca entre de scale(0). Comece de scale(0.95) com opacity: 0.
7. Popovers escalam a partir do seu gatilho (transform-origin: var(--transform-origin) no Base UI). Modais permanecem centralizados.
8. Use transições, não keyframes, para qualquer coisa que o usuário possa acionar novamente durante o movimento. Elas reajustam a partir do valor atual.
9. Anime apenas transform e opacity. No Motion, use a string transform completa em vez dos atalhos x e y.
10. Honre prefers-reduced-motion com movimento mais suave, não nenhum, e coloque efeitos de hover dentro de @media (hover: hover) and (pointer: fine).

Quando a sensação não puder ser julgada pelo código, diga isso. Reproduza a animação em 2 a 5 vezes sua duração ou quadro a quadro no DevTools, teste gestos em um dispositivo real e veja novamente no dia seguinte.

Formato de revisão

Uma revisão de UI é uma tabela markdown com as colunas Antes, Depois e Porquê, uma linha por problema. Nunca escreva "Antes:" e "Depois:" em linhas separadas.

Antes	Depois	Porquê
transition: all 300ms	transition: transform 200ms ease-out	Nomeie as propriedades; all anima o que você não pretendia
transform: scale(0)	transform: scale(0.95); opacity: 0	Nada no mundo real aparece do nada
Sem estado :active em um botão	transform: scale(0.97) em :active	Um pressionamento precisa de feedback instantâneo

A referência

Para uma correção rápida de um sintoma comum (números tremendo, avatar espremido, "1 membros"), consulte primeiro references/ui-cheatsheet.md.

Leia references/craft.md para as razões e o código por trás de cada regra: a estrutura de decisão de animação, molas, princípios de componentes (tooltips, desfoque sobre crossfade, @starting-style), transformações, padrões de clip-path (abas, segurar para deletar, revelações de imagem, controles deslizantes de comparação), manipulação de arrasto e gestos, desempenho, acessibilidade, princípios para componentes que as pessoas amam, escalonamento, depuração e a lista de verificação de revisão.