Visão geral
Os chips são elementos compactos e interativos que permitem aos usuários filtrar o conteúdo abaixo deles ou acionar ações rápidas. Os componentes compactos ajudam a simplificar a conclusão de tarefas na estrada, apresentando opções contextuais relevantes para o conteúdo e encurtando o tempo de navegação.
Para manter a clareza visual, os layouts precisam ser limitados a um máximo de sete chips por linha. Os chips são altamente flexíveis para corresponder à linguagem visual da sua marca. É possível personalizar a forma, a cor do plano de fundo e a cor da borda de acordo com o tema da interface escolhido.
Os chips podem conter:
- Apenas um ícone
- Apenas um rótulo de texto
- Um ícone e um rótulo (em qualquer direção)
Composição
1. Ícone ou imagem principal
2. Texto do rótulo
Requisitos de UX
Para garantir uma experiência segura e consistente em todos os apps, siga estes requisitos de design:
Nível do requisito |
Conteúdo |
|---|---|
OBRIGATÓRIO |
Incluir um ícone ou um rótulo. |
RECOMENDADO |
Usar um estilo visual exclusivo, como uma cor ou forma distinta, para comunicar diferentes estados de chip. |
RECOMENDADO |
Implementar um estilo consistente em todos os chips do app. |
RECOMENDADO |
Evitar misturar chips com e sem estado no mesmo grupo de componentes. |
RECOMENDADO |
Posicionar chips críticos ou recomendados na borda principal do contêiner. |
RECOMENDADO |
Manter o texto do rótulo breve e descritivo. Evitar textos longos que acionam o truncamento e aumentam a carga cognitiva. |