Deixe Interfaces Mais Agradáveis

Use esta habilidade para os pequenos detalhes de design e engenharia que se somam para criar uma interface mais polida.

Fonte: recuperado do PR comunitário desatualizado #1659 por linus707.

Quando Usar

• O usuário diz que a UI parece estranha, plana, genérica, apertada, instável ou inacabada.
• Você está construindo controles, cartões, 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 Fundamentais

Raio Concêntrico

Para superfícies arredondadas aninhadas próximas:

outer radius = inner radius + padding

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

Alinhamento Óptico

O centralismo geométrico nem sempre é centralismo visual. Botões de ícone, triângulos de play, setas, estrelas e ícones assimétricos frequentemente precisam de um pequeno deslocamento. Corrija o SVG quando possível; caso contrário, ajuste com uma margem em nível de pixel ou alteração de preenchimento.

Sombras e Bordas

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

Quebra de Linha de Texto

• Use text-wrap: balance em títulos e títulos curtos.
• Use text-wrap: pretty em textos curtos a médios, legendas, descrições e itens de lista.
• Evite ambos em textos longos, código e conteúdo pré-formatado.
• Use font-variant-numeric: tabular-nums para contadores, cronômetros, preços, tabelas e outros números em atualização.

Suavização de Fonte

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

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

Contornos de Imagem

Imagens frequentemente precisam de um contorno sutil inserido para que suas bordas não se misturem à 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 de alfa neutros, pretos ou brancos. Não tinja os contornos de imagem com a paleta da marca.

Movimento

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

Padrões de movimento bons:

• Entrada: combine opacidade, um 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 desativá-lo quando o movimento distrai.
• Trocas de ícones: fade cruzado com opacidade, escala e desfoque em vez de alternância instantânea de visibilidade.

Escopo de 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 compatíveis com o compositor, como transform, opacity e filter. Nunca use will-change: all.

Áreas de Clique

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

Revisar Saída

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

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

Checklist

• Elementos arredondados aninhados são opticamente coerentes.
• Ícones são visualmente centralizados.
• Botões, cartões e popovers usam bordas ou sombras pelo motivo certo.
• Títulos e textos curtos evitam quebras de linha estranhas.
• Números dinâmicos usam numerais tabulares.
• Imagens têm contornos neutros onde necessário.
• Animações de entrada e saída são divididas, 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 clique utilizáveis.