Pular para o conteúdo

Componentes e Padrões de Interface (B)

Ponto de vista: PRO — Prototipação

Os protótipos deverão observar os padrões de componentes definidos nas histórias HIVC e HUX do ESP. Os padrões abaixo são referência para a IA agêntica que gera os protótipos.


Os botões seguem hierarquia de ação:

VarianteUso
PrimaryAção principal da tela (ex.: Confirmar, Enviar)
SecondaryAlternativa ou ação secundária (ex.: Voltar, Cancelar)
SuccessConfirmação de operação bem-sucedida
DangerAções destrutivas ou irreversíveis (ex.: Excluir)

Campos de formulário devem:

  • Indicar estado de validação — ícone ou cor para campo válido, inválido ou obrigatório não preenchido
  • Suportar editores estruturados — campos YAML/JSON com syntax highlighting quando aplicável
  • Apresentar controles encadeados — quando o valor de um campo condiciona as opções do próximo
  • Exibir mensagens de erro no padrão institucional definido nas HIVC

Mesmo em caráter preliminar, todo protótipo deve respeitar:

  • Contraste mínimo 4.5:1 para texto normal (WCAG 2.1 AA)
  • Labels explícitos em todos os campos de formulário
  • Ordem de foco via teclado lógica e previsível
  • Textos alternativos em imagens informativas

Todo protótipo deve incluir de forma visível:


← Finalidade · Visão Geral PRO →