Engenharia de UI/UX e Sistemas de Design de Produto Modernos
Um guia operacional rigoroso e de nível institucional para engenharia de interface do usuário, arquitetura de UX, tokens de design, bibliotecas de componentes e transformações estéticas de produto.
1. Princípios Operacionais Centrais
- Densidade de Informação com Espaço para Respirar: Layouts de alta densidade (Linear, Bloomberg, Stripe, TradingView) apresentam o máximo de sinal por pixel da viewport sem poluição visual. Isso é alcançado através de contraste deliberado, escalas tipográficas compactas, bordas sutis de 1px e grades de espaçamento consistentes (4px / 8px).
- Diretrizes de Design de Alto Nível: Rejeite padrões genéricos e não refinados:
- ❌ Sem gradientes oversaturados roxo/índigo.
- ❌ Sem texto cinza sobre cinza de baixo contraste ilegível (
text-gray-400em branco outext-zinc-600em preto). - ❌ Sem ícones de emoji em vez de SVGs vetoriais nítidos (Lucide / Radix).
- ❌ Sem cartões flutuantes gigantes e vazios com raios enormes (
rounded-3xl) e texto minúsculo desalinhado. - ❌ Sem estados de foco de teclado ausentes ou interações exclusivas de mouse.
- ✔️ Use paletas de cores propositais, bordas sutis de 1px (
border-slate-800), figuras tabulares monoespaçadas (font-mono tabular-nums), micro-badges nítidos e taxas de contraste acessíveis ($>4.5:1$).
- Semântica de Cores Específica de Domínio:
- Em aplicações financeiras / quantitativas, a cor carrega um significado semântico de alto risco.
- Verde (
#10B981/#22C55E): Alpha positivo, lucratividade, sinais de compra, crescimento ascendente. - Vermelho (
#EF4444/#F43F5E): Perdas, rebaixamentos, riscos forenses, sinais de venda, fluxo de caixa negativo. - Âmbar / Amarelo (
#F59E0B): Cautela, triagem necessária, regime neutro, bandeiras de aviso. - Azul / Ciano (
#3B82F6/#06B6D4): Estados informativos, anéis de foco, botões de ação primários, tendências neutras. - Acessibilidade para daltônicos: Nunca dependa apenas da cor. Acompanhe os indicadores de cor com glifos direcionais (
▲,▼,—), badges de status ou tooltips.
- Desempenho Percebido Previsível:
- Zero mudanças de layout (CLS < 0.1): Reserve espaço de esqueleto para gráficos e tabelas carregados lentamente.
- Feedback otimista: Estados ativos instantâneos (feedback <50ms) em cliques de botão e alternâncias de filtro.
- Esqueletos em vez de spinners de página inteira: Mantenha o layout da página e o chrome de navegação enquanto os dados são hidratados.
2. Arquitetura de Token de Design
Um sistema de design robusto é estruturado em três níveis explícitos de token:
graph TD
Primitive["1. Tokens Primitivos<br>(Valores brutos: slate-900, emerald-500, font-size-14, 8px)"]
Semantic["2. Tokens Semânticos<br>(Intenção: surface-background, text-primary, border-subtle, status-success)"]
Component["3. Tokens de Componente<br>(Escopo: table-header-bg, badge-pill-padding, chart-grid-stroke)"]
Primitive --> Semantic --> Component
2.1 Matriz de Token de Cor (Temas Escuro e Claro Institucionais)
| Token Semântico | Valor do Modo Escuro | Valor do Modo Claro | Uso |
|---|---|---|---|
bg-app | #0B0F17 (Obsidiana Profunda) | #F8FAFC (Tom de Ardósia) | Fundo da viewport raiz |
bg-surface | #111827 (Ardósia/Zinco Rico) | #FFFFFF (Branco Puro) | Cartões, painéis, diálogos modais |
bg-surface-hover | #1E293B (Azul-Cinza Suave) | #F1F5F9 (Ardósia Clara) | Hover de linha de tabela, hover de item de menu |
border-subtle | #1E293B (borda limpa de 1px) | #E2E8F0 | Bordas de cartão, divisores de tabela |
border-accent | #334155 | #CBD5E1 | Inputs focados, bordas de aba ativa |
text-primary | #F8FAFC (Alto contraste, 16:1) | #0F172A | Títulos primários, valores de dados de tabela |
text-secondary | #94A3B8 (Ardósia 400, 7:1) | #475569 | Rótulos de métricas, descrições, carimbos de data/hora |
text-muted | #64748B (Ardósia 500, 4.5:1) | #64748B | Rodapés, estados desabilitados, dicas de atalho |
accent-primary | #2563EB (Azul Real) | #2563EB | Botões CTA primários, guias de rádio ativas |
status-bullish | #10B981 (Esmeralda) | #059669 | Ganhos, convicção de compra, CAGR positivo |
status-bearish | #EF4444 (Rosa/Vermelho) | #DC2626 | Rebaixamentos, desqualificações, dívida alta |
status-caution | #F59E0B (Âmbar) | #D97706 | Dados desatualizados, precisa de revisão, sinalizadores moderados |
2.2 Escala Tipográfica e Formatação Numérica
/* Essencial para terminais financeiros e tabelas de alta densidade */
.tabular-numbers {
font-family: var(--font-mono), monospace;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
- Títulos (Display/Título): Semi-negrito / Negrito (600/700), espaçamento apertado (
letter-spacing: -0.03em), altura de linha 1.2. - Corpo e Controles: 13px–14px (
text-sm), médio (500) para rótulos interativos, regular (400) para texto. - Micro Rótulos e Badges: 11px–12px (
text-xs), negrito/seminegrito (600/700), maiúsculo comtracking-wider. - Números e Métricas: Fonte monoespaçada tabular (
JetBrains Mono,Roboto MonoouIntercomtabular-nums), alinhado à direita em todas as tabelas.
3. Terminal Financeiro de Alta Densidade e UX de Tabela
Tabelas de dados são o motor central de fluxos de trabalho financeiros e analíticos. Siga estas regras inegociáveis:
- Regras de Alinhamento:
- Texto, símbolos e nomes de empresas: Alinhados à esquerda.
- Métricas numéricas (Preço, P/L, ROCE, CAGR, Pontuações, Datas): Alinhados à direita.
- Badges de status, sinalizadores acionáveis, ícones: Alinhados ao centro.
- Cabeçalhos de Linha Fixa e Multilinha:
- A linha de cabeçalho deve ficar fixa durante a rolagem vertical (
sticky top-0 bg-surface z-10). - Coluna de identificação fixa (Nome da Empresa / Símbolo) na rolagem horizontal para dispositivos móveis e tabelas ultra largas.
- A linha de cabeçalho deve ficar fixa durante a rolagem vertical (
- Estrutura Visual:
- Altura da linha: Compacta (36px–40px) ou padrão (44px) com listras zebradas sutis ou bordas nítidas de 1px (
border-b border-slate-800/60). - Destaque instantâneo ao passar o mouse na linha (
hover:bg-slate-800/40 cursor-pointer). - Badges em formato de pílula inline diretos (
bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded text-xs font-semibold).
- Altura da linha: Compacta (36px–40px) ou padrão (44px) com listras zebradas sutis ou bordas nítidas de 1px (
- Controles Interativos:
- Setas indicadoras de classificação (
▲ascendente ativo,▼descendente ativo,⇅suave classificável). - Pesquisa instantânea com botão de limpar (
X), chips de contagem de filtro ativo (Filtros (3)) e controles de paginação com contagem total (Exibindo 1–50 de 1.060).
- Setas indicadoras de classificação (
4. Arquitetura de Usabilidade e Interação (Heurísticas de Nielsen Norman)
flowchart LR
A["Reconhecimento em vez de Lembrança<br>(Breadcrumbs, Cabeçalhos Fixos, Filtros Salvos)"] --> B["Controle e Liberdade do Usuário<br>(Limpeza Rápida, Esc para fechar, Desfazer)"]
B --> C["Visibilidade do Status do Sistema<br>(UI Otimista, Esqueletos de Carregamento, Carimbos de Data/Hora)"]
C --> D["Eficiência de Uso<br>(Atalhos de Teclado, Paleta de Comandos Cmd+K)"]
- Visibilidade do Status do Sistema:
- Sempre exiba "A partir de [Data/Hora do Mercado]" em dados financeiros para que o usuário saiba se o mercado está aberto ou fechado.
- Quando as solicitações demorarem >100ms, exiba esqueletos localizados em vez de telas em branco ou spinners bloqueantes.
- Controle e Liberdade do Usuário:
- As barras de filtro devem ter um botão "Redefinir Todos os Filtros" com um clique quando qualquer filtro não padrão estiver ativo.
- Modais e gavetas devem fechar com a tecla
Escapee clique no backdrop.
- Consistência e Hierarquia de Componentes:
- Ação Primária: Preenchimento sólido de alto contraste (
bg-blue-600 hover:bg-blue-500 text-white). Exatamente um CTA primário por visualização. - Ação Secundária: Preenchimento sutil/com borda (
bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700). - Ação Fantasma: Transparente (
hover:bg-slate-800 text-slate-400 hover:text-slate-100). - Ação Destrutiva: Aviso com tom vermelho (
bg-rose-600/10 hover:bg-rose-600/20 text-rose-400 border border-rose-500/30).
- Ação Primária: Preenchimento sólido de alto contraste (
- Acessibilidade (WCAG 2.2 AA / AAA):
- Taxa de contraste texto-fundo $≥ 4.5:1$ para texto corporal normal, $≥ 3:1$ para texto grande e componentes de interface.
- Todos os elementos interativos devem ter anéis de foco
:focus-visiblevisíveis (ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-900). - Alvos de toque clicáveis mínimos: $44 \times 44$px em dispositivos touch.
5. Engenharia e Verificação de Contraste de Cor WCAG 2.2 AA / AAA
Contraste não é preferência estética; é uma especificação matemática de engenharia. Baixo contraste causa fadiga cognitiva severa, falha de legibilidade sob brilho ou baixa luminosidade e violações de conformidade de acessibilidade.
5.1 Especificação Matemática da Taxa de Contraste
A luminância relativa $L$ de qualquer cor sRGB é calculada usando a fórmula CIE: $$L = 0.2126 R_s + 0.7152 G_s + 0.0722 B_s$$ onde cada canal de cor $C \in {R, G, B}$ é linearizado de sRGB de 8 bits ($C_{\text{srgb}} = C_{8\text{bit}} / 255$): $$C_s = \begin{cases} \frac{C_{\text{srgb}}}{12.92} & \text{se } C_{\text{srgb}} \le 0.04045 \ \left(\frac{C_{\text{srgb}} + 0.055}{1.055}\right)^{2.4} & \text{se } C_{\text{srgb}} > 0.04045 \end{cases}$$
A taxa de contraste entre uma cor mais clara ($L_1$) e uma cor mais escura ($L_2$) é: $$\text{Taxa de Contraste} = \frac{L_1 + 0.05}{L_2 + 0.05} : 1$$
5.2 Limites de Conformidade Estritos
| Categoria de Elemento | Mínimo WCAG 2.2 AA | Alvo WCAG 2.2 AAA | Padrão de Verificação |
|---|---|---|---|
| Texto Corporal Normal (< 18pt / 24px regular, < 14pt / 18.5px negrito) | $\ge 4.5:1$ | $\ge 7.0:1$ | Dados primários, rótulos, descrições, linhas de tabela, rótulos de botão |
| Texto Grande e Títulos ($\ge 18\text{pt}$ / $24\text{px}$, ou $\ge 14\text{pt}$ negrito) | $\ge 3.0:1$ | $\ge 4.5:1$ | Títulos de exibição, cabeçalhos de seção, números de métricas proeminentes |
| Componentes de IU e Objetos Gráficos (WCAG 1.4.11) | $\ge 3.0:1$ | $\ge 4.5:1$ | Bordas de input, alternadores, limites de guias segmentadas, contornos de chip ativo, anéis de foco |
| Uso de Cor (WCAG 1.4.1) | Indicador não-cor necessário | Codificação dupla necessária | Nunca transmita seleção ou status apenas pela cor; combine com marcas de verificação, ícones ou peso do texto |
5.3 As 5 Armadilhas Comuns de Contraste e Correções Sistemáticas
1. A Mistura de Guia Segmentada do Modo Escuro
- O Defeito: Uma guia ativa definida como
--card: #111827dentro de um contêiner definido como--tab-bg: #0F172A. A taxa de contraste é 1.02:1 (um delta RGB de 2 unidades). A guia selecionada se mistura completamente ao fundo do contêiner, tornando impossível para o usuário determinar a seleção ativa. - A Correção: Eleve o fundo da guia ativa para
--card-elevated: #1E293B, adicione uma borda semântica ativa de 1px (1px solid var(--accent)/#10B981), um anel de brilho sutil (box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25)) e tingir o ícone SVG da guia ativa para corresponder.
2. A Falha de Contraste de Texto Suave do Modo Claro
- O Defeito: Texto secundário/suave padrão usando Ardósia-400 (
#94A3B8) em branco (#FFFFFF) ou papel claro (#F8FAFC). A taxa de contraste é 2.57:1, falhando gravemente no WCAG SC 1.4.3 ($\ge 4.5:1$). - A Correção: Escureça o texto secundário do modo claro para pelo menos Ardósia-500 (
#64748B), que rende 4.77:1 em#FFFFFFe 4.54:1 em#F8FAFC.
3. A Falha do Badge de Texto Âmbar / Aviso
- O Defeito: Usar âmbar brilhante (
#D97706/ Âmbar-600) em branco puro para pílulas de status. A taxa de contraste é 3.22:1, falhando no limite de 4.5:1 para texto. - A Correção: Escureça para Âmbar-700 (
#B45309) para badges de texto no modo claro, alcançando 4.82:1 enquanto mantém o calor semântico.
4. Limites Invisíveis de Input e Controle no Modo Escuro (WCAG 1.4.11)
- O Defeito: Bordas sutis de 8%–12% de opacidade branca (
rgba(255, 255, 255, 0.08)) em superfícies de ardósia escuras (#111827/#0B0F17) têm uma taxa de contraste de apenas 1.2:1–1.4:1, violando o requisito de limite não-texto de 3:1. - A Correção: Defina as bordas de input padrão do modo escuro para pelo menos 18% de opacidade de branco (
rgba(255, 255, 255, 0.18)/#334155) e estados de hover para 32% (rgba(255, 255, 255, 0.32)/#475569).
5. A Armadilha do FilterChip do Modo Escuro do Android Material 3
- O Defeito: No Material 3, o
FilterChipselecionado padrão usasecondaryContainer(#37474F) contra a superfície escura (#14181E), rendendo apenas 1.83:1 de contraste. Sem um contorno ou glifo, o chip falha tanto no SC 1.4.11 quanto no SC 1.4.1. - A Correção: Especifique explicitamente:
selectedBorderColor = MaterialTheme.colorScheme.primary(que rende 9.88:1 de contraste).selectedBorderWidth = 1.5.dp.leadingIcon = if (selected) { { Icon(Icons.Filled.Done, ...) } } else nullpara que a seleção seja visível independentemente da percepção de cor.
6. Guia de Reformulação de UI/UX (Execução em Fases)
Quando encarregado de refazer ou modernizar a UI/UX de um aplicativo existente, siga esta estratégia de execução em 4 etapas:
Etapa 1: Fundação do Sistema de Design e Extração de Tokens
- Estabeleça a paleta de cores, escala tipográfica, variáveis de espaçamento e hierarquia de raio de borda em CSS/Tailwind (
globals.css/tailwind.config.js). - Introduza tokens de modo escuro institucionais e classes de cores semânticas.
Etapa 2: Modernização de Primitivas de Componentes
- Refatore primitivas de UI reutilizáveis principais:
Button: Primário, secundário, fantasma, destrutivo, com spinners de carregamento.Badge/Tag: Pílulas semânticas coloridas para status, níveis e momentum.Card/Panel: Bordas limpas, cantos arredondados (rounded-lgourounded-xl), fundos sutis.DataTable: Classificação de cabeçalho, números alinhados à direita, cabeçalho fixo, linhas com hover.Modal/Drawer: Desfoque de fundo, armadilha de foco, animações de entrada suaves.Tooltip: Explicações informativas para métricas complexas (ex: EV/EBITDA, pontuação CANSLIM).
Etapa 3: Reformulação de Layout e Navegação
- Modernize a barra de navegação superior / barra lateral com indicadores de rota ativa claros, barra de pesquisa de empresa, indicador de status do sistema (ex: data da sessão de mercado, saúde da API).
- Elimine trepidação de layout e salto de página nas transições de rota.
Etapa 4: Modernização de Página de Alto Valor
- Reformule as visualizações críticas voltadas ao usuário:
- Dashboard: Blocos de resumo executivo, pulso de mercado, maiores ganhos/perdas, mapas de calor de regime.
- Convicção / Triador: Tabela de alta densidade com pesquisa rápida, colunas classificáveis, pílulas de métrica e gaveta de detalhes rápida.
- Espaço de Trabalho / Detalhe da Empresa: Gráficos interativos com pílulas de período (1M, 6M, 1A, 5A, Máx), resumo financeiro, guias de alternância de métricas.
- Relatórios / Alertas Personalizados: Construtor de arrastar e soltar com obtenção de dados ao vivo, edição de fórmula baseada em célula e exportação PDF.
7. Microinterações e Animação
Animação intencional e de alto desempenho deve reforçar a compreensão do usuário, não distrair. Diretrizes de animação para interfaces institucionais:
- Curvas de Easing: Use curvas cúbicas padrão para ações de usuário (
transition-all duration-150 ease-in-out). Loops perpétuos ou easing de mola (bounce) são proibidos em contextos de produtos de dados sérios. - Durações:
- Microinterações de hover/foco: < 100ms, sem atraso ou duração, para feedback instantâneo percebido. Prefira
transitionimplícita de 75ms. - Entrada/Saída de painel/gaveta: 200–250ms. O usuário deve sentir que o sistema é imediato. Qualquer duração > 350ms parece lenta.
- Microinterações de hover/foco: < 100ms, sem atraso ou duração, para feedback instantâneo percebido. Prefira
- Propriedades: Animar apenas
opacityetransform. Nunca animewidth,height,top,leftoubox-shadow— essas propriedades forçam o navegador a refazer o layout. - Transições de Página: Uma única transição rápida de desvanecimento (opacity $0 \to 1$, 150ms) e deslocamento vertical sutil ($+4px \to 0$, 200ms). Transições de página nunca devem causar um flash visual ou trepidação de layout.
8. Otimização para Dispositivos Móveis e Touch
Para campos de equipe de vendas, corretores ou executivos em tablets, o design responsivo não é um complemento — é parte integrante da interface.
- Hierarquia de Layout:
- Visão de Dados (Tablets): Mantenha tabelas de alta densidade, mas com rolagem lateral com snap. Coloque os itens de ação (favoritar, detalhes, alerta) como ícones na borda direita.
- Smartphones: Transição para um layout de cartão empilhado para listas de empresas. Métricas principais e classificação de momentum dentro de cada cartão. Gráficos em tela cheia com toque para expandir.
- Alvos de Toque e Ergonomia:
- Todos os itens tocáveis (botões, chips de guia, abas) devem ser $\ge 44 \times 44$px com espaçamento externo adequado para evitar toques acidentais.
- Gestos de deslizar: Deslize para a esquerda revela "Marcar para Revisão", deslize para a direita revela "Adicionar aos Favoritos" ou "Ignorar".
- Dados Offline e Assíncronos:
- Sempre mostrar a última vez que os dados foram sincronizados ("Atualizado: 3 min atrás", "Dados de fechamento: 12/06/2024").
- Botão "Atualizar" manual ou indicador de sincronização automática.
Resumo: Artefatos de Saída
Ao usar esta skill, você deve produzir as seguintes entregas de design e engenharia:
- Documento de Token de Design (Markdown / JSON): Matriz completa de cores (modo escuro + claro), escala tipográfica, variáveis de espaçamento, raios de borda e base de sombra. Idealmente documentado em um arquivo
tokens.jsonou seçãoglobals.css. - Especificação de Contraste de Acessibilidade: Prova matemática citando fórmulas WCAG e valores de luminância para cada combinação semântica de primeiro plano/fundo. Liste a taxa de contraste calculada ao lado de cada par de token.
- Código de Componente Modernizado: Saída de código (React/Tailwind, SwiftUI, Compose, Vue) com foco em estados, animações, tratamento de erros e feedback ao usuário.
- Plano de Migração de UI/UX: Estratégia de implementação em fases com riscos, dependências e marcos (ex: Semana 1: Tokens e Paleta, Semana 2: Botões e Inputs, etc.).