Identidade
Navvi
Personagem da AvvanTI nos sistemas: reage às ações da pessoa, acompanha avisos e dá presença a estados vazios e de espera. É decorativo: o recado é sempre do toast, do texto ou do alerta; o Navvi só acompanha.
32 expressões, animadas. Em fundo escuro, o corpo vira marfim. Os arquivos estão em Recursos.
Especificação
Desenho (proporção fixa de 200 × 224): robô de cantos arredondados com cabeça, visor, tronco, braços e pés. A crista é o "A" do logo girado 90°; o peito são os colchetes da seta da marca.
- Corpo monocromático: grafite #212529 em fundo claro, marfim #F8F9FA em fundo escuro.
- Ciano #29ABE2 só em olhos, crista, peito e sinais (pontos, arcos de som, interrogação).
- Arquivos: navvi-<expressão>.svg (grafite) e navvi-<expressão>-marfim.svg, animados, com as animações embutidas.
Expressões (32):
| Grupo | Expressões |
|---|---|
| Base | idle, atento, ouvindo, pensando, aguardando |
| Trabalho | trabalhando, lendo, leu-sucesso, leu-falha, inspecionando, enviando, enviou-sucesso, enviou-falha, conectando, atualizado |
| Sistema | seguranca, backup, notificando, alerta, erro-critico, manutencao, offline, nao-encontrado |
| Emoção | feliz, comemorando, acenando, apresentando, ensinando, ferias, dormindo |
| Transição | auto-descompactando (levanta), auto-compactando (recolhe) |
Mapa ação → expressão (o mesmo nos sistemas que reagem):
| Ação | Durante | Sucesso | Falha |
|---|---|---|---|
| Salvar | trabalhando | feliz | alerta |
| Buscar | lendo | leu-sucesso | leu-falha |
| Enviar (e-mail, WhatsApp) | enviando | enviou-sucesso | enviou-falha |
| Gerar (PDF, boleto, nota) | trabalhando | feliz | alerta |
| Notificação, alarme | — | alerta | — |
Não reagem: excluir, cancelar, rejeitar, salvamento automático, download, interruptor, reordenar.
Tamanho: canto da tela 80 × 90px; estado vazio e 404 até 160px de largura; nunca menor que 48px.
Comportamento
Em repouso fica recolhido (só a cabeça, respirando: ciclo de 4,2s, cubic-bezier(0.22, 0.61, 0.36, 1)). Levanta quando há presença (modal aberto → ouvindo) ou reação; volta a recolher após 20s parado.
Olhos seguem o cursor só nas expressões de base; nas reações, o olho é a expressão e não se mexe.
Onde aparece: canto inferior direito, só a partir de 1280px de largura, acima dos modais e abaixo de toasts e banners; estado vazio de primeiro uso e 404 (padroes/estados.md); faixa de aviso.
Onde não aparece: celular e telas abaixo de 1280px, TV/kiosk, páginas públicas, tela cheia de editor ou canvas, erro grave (soa como deboche), e quando a pessoa desliga nas preferências.
Um Navvi só na tela. Se existe o Navvi solto do app desktop, o do canto some.
Menos movimento (quando a pessoa pede menos animação no aparelho): mostra o quadro final, sem transições; o olhar pode continuar.
A reação nunca altera o resultado da ação nem atrasa a interface; recolhido, o custo de CPU é zero.
Faça
- Preferência por usuário para esconder o Navvi, ligada por padrão.
- Reservar o canto do Navvi: toasts no topo direito, nada fixo no canto inferior direito.
Não faça
- Vermelho, sombra, contorno, degradê ou outra cor no corpo.
- Ciano fora de olhos, crista, peito e sinais.
- Redesenhar ou "melhorar" o desenho: use os arquivos oficiais.
- Rótulo de texto dentro do desenho (o "PDF" do documento já foi removido).
- Card ou toast cobrindo o Navvi; Navvi por cima de app em tela cheia.
- Fala do Navvi como único lugar de uma informação importante.
- Irritar no uso normal.