Fazer Interfaces Parecerem Melhores

Faça as Interfaces Parecerem Melhores

Use esta skill para os pequenos detalhes de design-engenharia que se acumulam em uma interface mais polida.

Fonte: resgatado de um PR antigo da comunidade #1659 por linus707.

Quando Usar

• O usuário diz que a UI parece estranha, plana, genérica, apertada, saltitante ou inacabada.
• Você está construindo controles, cards, listas, dashboards, navegação, formulários ou barras de ferramentas.
• Um componente precisa de estados de hover, ativo, foco, entrada, saída, carregamento ou vazio.
• Uma revisão de frontend precisa de recomendações específicas de antes/depois.

Princípios Centrais

Raio Concêntrico

Para superfícies arredondadas aninhadas próximas:

raio externo = raio interno + padding

Se o padding for grande, trate as camadas como superfícies separadas em vez de forçar a conta. O objetivo é coerência óptica, não adoração a fórmulas.

Alinhamento Óptico

O centralização geométrica nem sempre é o alinhamento visual. Botões de ícone, triângulos de reprodução, setas, estrelas e ícones assimétricos muitas vezes precisam de um pequeno deslocamento. Corrija o SVG quando possível; caso contrário, ajuste com uma margem ou padding no nível do pixel.

Sombras e Bordas

Use bordas para separação e anéis de foco. Use sombras em camadas quando um card, botão, dropdown ou popover precisar de profundidade. As sombras devem ser transparentes e sutis o suficiente para funcionar em diferentes fundos.

Quebra de Texto

• Use text-wrap: balance em títulos e textos curtos.
• Use text-wrap: pretty em textos de corpo médio a curto, legendas, descrições e itens de lista.
• Evite ambos em prosa longa, código e conteúdo pré-formatado.
• Use font-variant-numeric: tabular-nums para contadores, temporizadores, preços, tabelas e outros números que atualizam.

Suavização de Fonte

No macOS, aplique suavização de fonte antialiased no layout raiz quando o projeto ainda não o fizer:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Contornos de Imagem

Imagens geralmente precisam de um contorno sutil interno para que suas bordas não se diluam na superfície.

img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

Use contornos alfa pretos ou brancos neutros. Não tingir contornos de imagem com a paleta da marca.

Movimento

Use transições CSS para mudanças de estado interativas porque elas podem redirecionar quando o usuário muda de intenção no meio do movimento. Reserve keyframes para entradas únicas encenadas ou sequências de carregamento.

Bons padrões de movimento:

• Entrada: combine opacidade, pequeno translateY e, opcionalmente, desfoque.
• Saída: mais curta e silenciosa que a entrada, geralmente 150ms.
• Pressionar: scale(0.96) para botões táteis, com uma forma de desabilitá-lo quando o movimento distrai.
• Troca de ícones: cross-fade com opacidade, escala e desfoque em vez de alternâncias instantâneas de visibilidade.

Escopo da Transição

Nunca use transition: all. Especifique as propriedades alteradas:

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

Use will-change apenas para gagueira no primeiro quadro em propriedades amigáveis ao compositor, como transform, opacity e filter. Nunca use will-change: all.

Áreas de Toque

Controles interativos devem ter pelo menos uma área de toque de 40x40px, idealmente 44x44px onde o layout permitir. Expanda com um pseudo-elemento quando o ícone visível for menor, mas não deixe áreas de toque expandidas se sobreporem.

Saída da Revisão

Ao revisar uma passagem de polimento de UI, relate mudanças concretas em linhas de antes/depois:

Princípio	Antes	Depois
Raio concêntrico	Mesmo raio no pai e no filho	Raio do pai considera o padding
Números tabulares	Contador se move conforme os dígitos mudam	Contador usa tabular-nums
Escopo da transição	transition: all	Propriedades de transição explícitas

Inclua caminhos de arquivo e propriedades quando não forem óbvios pelos trechos. Omita princípios que você verificou mas não alterou.

Lista de Verificação

• Elementos arredondados aninhados são opticamente coerentes.
• Ícones estão visualmente centralizados.
• Botões, cards e popovers usam bordas ou sombras pelo motivo certo.
• Títulos e textos curtos evitam quebra estranha.
• Números dinâmicos usam numerais tabulares.
• Imagens têm contornos neutros onde necessário.
• Animações de entrada e saída são separadas, sutis e interrompíveis quando apropriado.
• Botões têm estados ativos táteis sem movimento exagerado.
• transition: all e will-change: all estão ausentes.
• Controles pequenos ainda têm áreas de toque utilizáveis.