Avatar ( C_Avatar)
Components
/
Avatar
Visualização não disponível para mobile
Esse conteúdo foi preparado para ser visualizado exclusivamente em um computador.
O Avatar é um componente visual utilizado para representar usuários ou entidades de forma compacta e reconhecível. Ele é comumente usado em perfis, listas, cabeçalhos e áreas de navegação para indicar identidade de maneira visual.
Príncipios de design
- Identidade Visual: O avatar deve comunicar identidade rapidamente, seja por foto, iniciais ou ícone.
- Consistência: Deve seguir os estilos visuais definidos no Design System, garantindo uniformidade em todos os contextos.
- Acessibilidade: Deve sempre contar com alternativas visuais/textuais quando necessário.
Variações
Variações
- Com Imagem: Exibe a imagem do usuário ou entidade. É a forma preferencial, quando disponível.
- Com Iniciais: Mostra as iniciais do nome. Usado quando não há imagem disponível.
- Com Ícone: Usa um ícone padrão como fallback (ex: ícone de pessoa).
- Com Status: Pequeno indicador visual (Badge) de status (online, ausente etc). Opcional.
- Tamanhos: Pequeno, médio, grande (sm: 24x24, md: 32x32, lg: 48x48 xl: 104x104).
- Formatos: Circular (default).
Exemplos de uso
- Em listas de usuários (como comentários ou resultados de busca).
- Em cabeçalhos de perfil.
- Em cards ou tabelas que exigem identificação visual rápida.
- Em menus de navegação, como foto do usuário logado.
Do's and Don'ts
✅ Priorize o uso de imagem real do usuário sempre que disponível.
✅ Garanta bom contraste entre fundo e iniciais.
✅ Use tamanhos consistentes em contextos similares.
✅ Aplique status apenas quando a informação for útil para o contexto (ex: chat, CRM).
🚫 Usar avatar genérico sem necessidade.
🚫 Exibir iniciais em contexto institucional (ex: empresas ou marcas).
🚫 Usar cores sem contraste ou aleatórias que comprometam a leitura.
Acessibilidade
- Avatares com imagem devem ter texto alternativo (alt) com o nome do usuário.
- Em avatares com iniciais, garantir leitura clara.
- Elementos de status devem ter descrição visual oculta para leitores de tela (ex: online, offline).
Decisões de design
- O formato circular foi adotado como padrão por comunicar humanidade e suavidade visual.
- As cores de fundo das iniciais seguem a paleta semântica, com foco em contraste e reconhecimento.
- O status usa pequenos indicadores (badge) para manter a hierarquia visual.
Avatar ( C_Avatar)
Components
/
Avatar
O Avatar é um componente visual utilizado para representar usuários ou entidades de forma compacta e reconhecível. Ele é comumente usado em perfis, listas, cabeçalhos e áreas de navegação para indicar identidade de maneira visual.
Príncipios de design
- Identidade Visual: O avatar deve comunicar identidade rapidamente, seja por foto, iniciais ou ícone.
- Consistência: Deve seguir os estilos visuais definidos no Design System, garantindo uniformidade em todos os contextos.
- Acessibilidade: Deve sempre contar com alternativas visuais/textuais quando necessário.
Variações
Variações
- Com Imagem: Exibe a imagem do usuário ou entidade. É a forma preferencial, quando disponível.
- Com Iniciais: Mostra as iniciais do nome. Usado quando não há imagem disponível.
- Com Ícone: Usa um ícone padrão como fallback (ex: ícone de pessoa).
- Com Status: Pequeno indicador visual (Badge) de status (online, ausente etc). Opcional.
- Tamanhos: Pequeno, médio, grande (sm: 24x24, md: 32x32, lg: 48x48 xl: 104x104).
- Formatos: Circular (default).
Exemplos de uso
- Em listas de usuários (como comentários ou resultados de busca).
- Em cabeçalhos de perfil.
- Em cards ou tabelas que exigem identificação visual rápida.
- Em menus de navegação, como foto do usuário logado.
Do's and Don'ts
✅ Priorize o uso de imagem real do usuário sempre que disponível.
✅ Garanta bom contraste entre fundo e iniciais.
✅ Use tamanhos consistentes em contextos similares.
✅ Aplique status apenas quando a informação for útil para o contexto (ex: chat, CRM).
🚫 Usar avatar genérico sem necessidade.
🚫 Exibir iniciais em contexto institucional (ex: empresas ou marcas).
🚫 Usar cores sem contraste ou aleatórias que comprometam a leitura.
Acessibilidade
- Avatares com imagem devem ter texto alternativo (alt) com o nome do usuário.
- Em avatares com iniciais, garantir leitura clara.
- Elementos de status devem ter descrição visual oculta para leitores de tela (ex: online, offline).
Decisões de design
- O formato circular foi adotado como padrão por comunicar humanidade e suavidade visual.
- As cores de fundo das iniciais seguem a paleta semântica, com foco em contraste e reconhecimento.
- O status usa pequenos indicadores (badge) para manter a hierarquia visual.