Avatar
- Angular:
mds-avatar - CSS/HTML (mds-styles): disponível
- Figma: ✅ — abrir Design System 2.0 ↗
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Avatar é uma representação visual de um usuário ou entidade. Ele exibe imagens de perfil, iniciais ou ícones genéricos para facilitar a identificação rápida em listas, cabeçalhos e comentários.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Identificação Visual: Priorize o uso de fotos reais para usuários diretos. Caso a imagem não esteja disponível, utilize as iniciais do nome (máximo de duas letras).
- Consistência: Utilize o formato circular como padrão para usuários humanos e formatos alternativos (como quadrados arredondados) se precisar diferenciar entidades, como transportadoras ou filiais.
- Indicadores de Estado: O Avatar pode ser acompanhado de um pequeno selo (badge) para indicar disponibilidade ou status (ex: Online, Em Viagem, Indisponível).
- Acessibilidade: Sempre forneça um texto alternativo (alt text) com o nome da pessoa representada para leitores de tela.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Prolixo) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Identificação | Foto do motorista João Silva | João Silva (como alt text) |
| Iniciais | J.S.P. (três letras) | JS (apenas duas letras) |
| Placeholder | Usuário sem foto definida | Ícone Genérico |