Polimento de Interface
Torne a interface mais fácil de ler, mirar e navegar. Comece pelo produto existente: sua tipografia, ícones, cores, densidade, componentes e framework. Melhore as relações entre essas escolhas. Altere uma convenção visual apenas quando um problema observado ou a solicitação do usuário a justificar.
Encontre o atrito no uso
Trace uma tarefa representativa pela tela real. Abra um menu, selecione uma linha, reduza um painel, aplique um filtro e retorne ao conteúdo. Leia as definições de componentes e tokens por trás dos problemas visíveis. Capturas de tela revelam hierarquia e espaçamento; a interação revela foco cortado, controles inacessíveis e movimentos bruscos.
Priorize falhas que bloqueiam leitura ou ação antes de inconsistências cosméticas. Vincule cada mudança proposta a um sintoma concreto: metadados que desaparecem, uma ação final empurrada para fora da vista, um número que trepida ou um menu cuja escala salta enquanto sua opacidade desvanece. Para uma solicitação ampla, escolha uma passagem coerente e implemente-a. Para uma solicitação apenas de revisão, forneça descobertas com locais e evidências.
Inspecione as instruções do repositório, a toolchain suportada e as verificações existentes antes de editar. Leia a cascata atual e quaisquer mudanças sobrepostas. Uma substituição de token que parece idêntica em um branch pode alterar a geometria após outro branch atualizar aquele token.
Dê a textos e ícones funções distintas
Estabeleça um conjunto pequeno de papéis para o texto. Deixe o título da linha liderar, o metadado explicar e a ação permanecer reconhecível. Uma interface desktop densa pode usar títulos 14px/600, metadados 12px/400 e rótulos de seção 16px. Trate estes como pontos de partida; um app com foco em leitura ou toque pode precisar de texto maior. Mantenha a fonte estabelecida se ela puder expressar os pesos necessários.
Use espaçamento e peso para separar papéis antes de adicionar mais caixas ou cores. Mantenha metadados relacionados abaixo de seu título com um espaçamento intencional. Use números tabulares para contagens em atualização e reserve largura suficiente para o maior valor esperado. Equilibre títulos curtos ou use quebra de parágrafo melhor onde suportado, sem depender de regras de quebra para corrigir um painel subdimensionado.
Meça o texto secundário contra seu fundo real em cada tema suportado. Texto comum precisa de pelo menos 4,5:1 de contraste. Opacidade se combina com cores de superfície, então um valor de token plausível por si só prova pouco. Preserve a paleta do produto e os papéis de cor semântica; nenhuma fonte, cor de destaque, biblioteca de ícones ou tema apenas neutro é exigido.
Mantenha o tamanho dos ícones e o peso óptico consistentes dentro de um papel. Inspecione o conjunto existente antes de alterar a espessura do traço, porque bibliotecas usam geometria diferente. Um glifo pequeno pode estar em um botão maior. Dê a controles apenas de ícone nomes acessíveis e oculte duplicatas decorativas da tecnologia assistiva.
Faça a geometria apoiar a ação
Use a escala de raio existente consistentemente. Se a própria escala precisar de trabalho, mapeie tamanhos para papéis como chips pequenos, controles e painéis flutuantes, em vez de substituir cada canto por um raio. Para formas aninhadas, derive o raio interno do raio externo menos a margem interna real, incluindo borda e padding. Prenda-o em zero quando necessário.
Dimensione o alvo interativo separadamente do ícone ou texto visível. Mire em pelo menos 24 por 24 pixels CSS em controles compactos e alvos de toque mais generosos onde o espaço permitir. WCAG tem exceções de espaçamento e outras; verifique-as explicitamente antes de confiar nelas. Prefira padding de botão ou um rótulo envolvente. Extensões invisíveis de área de clique precisam de verificações de clipping, sobreposição e ativação acidental de controles vizinhos.
Use bordas e sombras para agrupamento, estado ou elevação quando ajudarem. Outro plano de sombra raramente é a primeira correção para hierarquia fraca. Preserve o foco visível dentro de listas cortadas, usando um tratamento interno quando apropriado. Mantenha ações essenciais descobertíveis sem hover, inclusive em dispositivos de toque.
Responda ao espaço que o componente tem
Uma janela larga pode conter uma área de trabalho estreita após uma barra lateral ou inspetor abrir. Dimensione cabeçalhos, linhas e compositores reutilizáveis a partir da largura do painel disponível. Coloque container queries no ancestral relevante e adapte seus descendentes; uma consulta de tamanho não pode redimensionar seu próprio contêiner de consulta. Verifique o posicionamento e empilhamento de sobreposições após introduzir contenção.
Decida o que cede primeiro. Deixe rótulos encolherem com min-width: 0, reserve uma faixa estável para a ação final, depois rebaixe o chrome secundário antes de comprimir a tarefa principal. Um rótulo oculto ainda precisa de um nome acessível. Remover uma revelação decorativa é diferente de remover a única maneira de ativar uma linha.
Teste títulos longos, contagens grandes, metadados reais, listas vazias e resultados filtrados. Explique por que uma vista está vazia e ofereça uma recuperação apropriada, como limpar um filtro ou criar um item. Mantenha conteúdo existente durante a atualização em segundo plano quando ele permanecer válido. Não substitua linhas carregadas por um esqueleto só porque uma solicitação começou.
Leia as armadilhas de implementação ao alterar a responsividade de painéis, controles aninhados ou sobreposições.
Faça o movimento corresponder à mudança de estado
Use o sistema de animação e tokens de easing já presentes. Inspecione os estilos computados antes de afirmar que uma substituição de classe ou token altera o movimento. Faça a transição explícita das propriedades que realmente mudam: scale e translate CSS individuais são separados de transform.
Prefira deslocamento pequeno e resolução rápida para controles rotineiros. Uma entrada em torno de 150–250ms e uma saída mais curta podem ser úteis, mas frequência e propósito decidem o tempo. Evite escalar linhas do nada, chegadas escalonadas lentas em listas de trabalho e animação em cada atualização em streaming. Anime apenas o que ajuda alguém a acompanhar uma mudança.
Mantenha o movimento hover atrás de condições de ponteiro fino capazes de hover. Controles essenciais permanecem disponíveis para usuários de teclado e toque. Um fechamento durante uma abertura deve reverter do estado visível, e um elemento saindo deve parar de aceitar entrada. Quando um diálogo ou menu primitivo já gerencia presença e foco, use seu ciclo de vida de saída suportado. Não adicione um segundo timer de desmontagem ou manipulador de foco concorrente. O descarte lógico e a restauração de foco devem seguir o comportamento da primitiva sem esperar pelo movimento decorativo de saída.
Movimento reduzido atinge o mesmo estado final utilizável sem deslocamento espacial. Verifique a lógica de conclusão quando as transições são removidas. Use uma skill de movimento dedicada para molas complexas, coreografia ou arquitetura de animação; esta passagem não requer instalar outro pacote de skill.
Verifique o resultado que as pessoas usarão
Inspecione o resultado combinado após todas as mudanças, com os mesmos dados antes e depois. Inclua uma tela larga com um painel estreito, um viewport de tamanho de celular, temas suportados, navegação por teclado e acesso ao estilo toque. Verifique a reversão no meio da transição e o movimento reduzido para edições de movimento. Uma captura de tela estática não pode estabelecer que uma saída anima corretamente.
Execute os testes aplicáveis do repositório, lint, typecheck e build usando seu runtime suportado. Investigue as falhas antes de culpar o patch. Quando uma comparação de linha de base for necessária, reproduza-a com o mesmo runtime e configuração. Prefira verificações comportamentais para o caminho alterado; asserções de string CSS por si só não podem estabelecer contraste, geometria, visibilidade de foco ou continuidade de animação.
Relate o que mudou e por quê, as verificações realmente realizadas e qualquer incerteza restante. Separe melhorias observadas de limpeza de token sem efeito visível. Mantenha descrições e evidências atualizadas após a integração. Para inspiração upstream, inspecione a fonte atual, adapte o princípio a este produto e credite fontes públicas. Diga quando uma fonte estava inacessível em vez de inventar uma citação ou endosso.