Design de UI Web Readiz
Os usuários odeiam configurações onde botões e descrições ocupam a tela. Crie controles compactos e hierarquia clara para que o conteúdo real seja lido e explorado rapidamente. Aplique este padrão ao criar novas UIs web ou modificar as existentes. Se houver requisitos de marca, plataforma ou acessibilidade especificados pelo usuário, siga-os primeiro.
Densidade Base
A seguir estão os valores iniciais para ferramentas web sem design específico. Reduza margens e controles desnecessários, em vez de apertar o texto.
| Elemento | Valor Padrão |
|---|---|
| Botões comuns, filtros, select | altura 28px, fonte 12px, padding horizontal 6~8px |
| Botões de ícone | 26×26px, ícone 14~16px |
| Controles auxiliares/dentro de tabela | 24~26px |
| Espaçamento entre botões | 4~6px |
| Espaçamento interno do cartão | 12~16px |
| Células de tabela | vertical 5 |
| Texto do corpo | 13 |
- Ajuste botões curtos à largura do conteúdo. Não crie botões grandes ou largos apenas porque são a ação principal.
- Mantenha o tamanho visual compacto também em dispositivos móveis. Não use uma media query comum para aumentar todos os botões para 38~48px. Se erros de toque forem confirmados, ajuste o espaçamento e a área de toque do controle e verifique se não sobrepõe controles adjacentes. Siga as especificações explícitas da plataforma separadamente.
- Linhas longas de múltipla escolha ou lista se expandem naturalmente conforme o comprimento do texto. Não corte conteúdo legível com altura fixa ou reticências. Se puder mostrar o título atual separadamente (como navegação numérica), separe os pequenos controles de navegação do título do conteúdo.
- Prefira tons de azul como cor de destaque base. Use fundos claros e calmos, bordas finas e cantos pequenos. Mantenha a marca existente especificada e a distinção de cores por significado nos gráficos.
Composição da Tela
- Coloque gráficos reais, tabelas e conteúdo essencial na área visível inicial. Não empurre a área de trabalho para baixo com títulos grandes introdutórios, subtítulos longos ou badges redundantes.
- Use tabelas para repetir números e comparações, listas ordenadas/abas curtas para navegação de itens e pequenas barras de ferramentas para operações em gráficos. Não liste botões individuais como cartões grandes.
- Ações familiares devem usar o sistema de ícones/SVG existente do projeto. Forneça nomes acessíveis, tooltips ou rótulos curtos necessários para ícones. Não diferencie seleção, sucesso ou erro apenas por cor.
- Mantenha resumos essenciais e ações frequentes; coloque descrições detalhadas, fontes, instruções de uso e critérios de salvamento em ⓘ ou detalhes recolhidos por padrão. Exiba erros, falhas de salvamento, resultados de execução e condições de julgamento importantes no momento necessário.
- Não repita o mesmo estado em título, cartão, badge e descrição. Não force o usuário a ler textos longos para encontrar uma função.
- Alinhe espaçamento e alinhamento de botões de ação, tabelas e gráficos. Um índice de desktop estreito e um índice móvel dobrável que mostra a posição atual são adequados.
Verifique na Tela Real
- Verifique a altura computada, padding, line-height e a posição do primeiro conteúdo dos botões reais antes da modificação. Não conclua que está menor apenas com base nas declarações CSS alteradas.
- Modifique primeiro as variantes e tokens de componentes existentes. Verifique se CSS comum, especificidade alta, override móvel ou estilos dinâmicos aumentam novamente o tamanho. Em vez de acumular regras de sobrescrita, corrija a causa do tamanho.
- Veja diretamente em PC, tablet e mobile 360~390px representativos. Verifique se os controles comuns mantêm os valores padrão acima, se textos longos não são cortados, se não há transbordo horizontal e se ferramentas/gráficos não se sobrepõem.
- Verifique expansão, seleção, foco de teclado, toque e salvamento/restauração necessários. Não altere dados existentes, chaves de armazenamento ou coordenadas de gráfico devido a mudanças de design.
- Implemente e valide os resultados do escopo solicitado e, para trabalhos que incluem implantação, verifique também a tela real implantada. Esta skill em si não adiciona permissões de publicação ou envio de mensagens.