As gavetas de navegação são componentes essenciais em qualquer app de TV, porque permitem que os usuários acessem diferentes destinos e recursos. As gavetas de navegação são a espinha dorsal da arquitetura de informações do app, oferecendo uma maneira clara e intuitiva de navegar por ele.
Diferente da gaveta de navegação em dispositivos móveis, a gaveta de navegação na TV tem os estados expandido e recolhido visíveis para o usuário.
Recursos
| Tipo | Vincular | Status |
|---|---|---|
| design | Fonte de design (Figma) | Disponível |
| Implementação |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
Disponível |
Destaques
- Os destinos são ordenados de acordo com a importância do usuário, com os destinos frequentes primeiro e os relacionados agrupados.
- Uma coluna de navegação é necessária para as gavetas de navegação padrão e modal quando recolhida.
Variantes
Há dois tipos de estilos de gaveta de navegação:
- Gaveta de navegação padrão: expande-se para criar mais espaço de navegação, empurrando o conteúdo da página para o lado.
- Gaveta de navegação modal: aparece como uma sobreposição sobre o conteúdo do app com um scrim que ajuda a melhorar a legibilidade quando a gaveta é expandida.
Gaveta de navegação padrão
Anatomia
- Seção de cima:mostra o logotipo do app. Serve como um botão para trocar de perfil ou acionar uma ação de pesquisa. No estado recolhido, apenas o ícone permanece visível no contêiner superior.
- Item de navegação:cada item da coluna de navegação tem uma combinação de ícone e texto, ficando apenas com o ícone visível no estado recolhido.
- Coluna de navegação:a coluna de navegação mostra de três a sete destinos de apps, atuando como o menu principal. Cada destino tem um rótulo de texto e um ícone opcional, com a opção de agrupar itens do menu para melhorar a contextualidade.
- Seção de baixo:pode ter de um a três botões de ação, que são ideais para páginas como configurações, ajuda ou perfil.
Comportamento
- Expansão da gaveta de navegação:quando expandidas, as gavetas de navegação padrão empurram o conteúdo da página abrindo espaço para a versão expandida da navegação.
- Atualizações de navegação:ao passar de um item de navegação para outro, a página é atualizada automaticamente para o novo destino.
Gaveta de navegação modal
Anatomia
- Seção de cima:mostra o logotipo do app. Serve como um botão para trocar de perfil ou acionar uma ação de pesquisa. No estado recolhido, apenas o ícone permanece visível no contêiner superior.
- Item de navegação:cada item na coluna de navegação tem uma combinação de ícone e texto, ficando apenas com o ícone visível no estado recolhido.
- Coluna de navegação:coluna que mostra de três a sete destinos de apps, atuando como o menu principal. Cada destino tem um rótulo de texto e um ícone opcional, com a opção de agrupar itens do menu para melhorar a contextualidade.
- Scrim:para facilitar a leitura do texto do item de navegação.
- Seção de baixo:pode ter de um a três botões de ação, que são ideais para páginas como configurações, ajuda ou perfil.
Comportamento
- Expansão de gaveta:aparece como uma sobreposição sobre o conteúdo do app, com um scrim que melhora a legibilidade quando a gaveta é expandida.
- Atualizações de navegação:ocorrem quando o usuário seleciona um item de navegação.
Scrim
Para a gaveta de navegação modal, um scrim atrás da gaveta garante que o conteúdo dela seja legível. Você pode usar um gradiente ou uma superfície sólida atrás da gaveta de navegação para criar diferentes variações da interface.
Gradiente scrim
Scrim sólido
Especificações
Uso
Indicador ativo
O indicador ativo é um sinal visual que destaca o destino da gaveta de navegação exibido. Normalmente, o indicador é representado por uma forma de segundo plano visualmente diferente dos outros itens da gaveta. O indicador ativo ajuda os usuários a entender em que parte do app eles estão e em qual destino estão navegando. O indicador ativo precisa estar claramente visível e ser mais fácil de distinguir de outros itens na gaveta de navegação.
Divisores (opcional)
Os divisores podem ser usados para separar grupos de destinos na gaveta de navegação para melhorar a organização. No entanto, é importante usá-los com moderação, porque o excesso de divisores pode criar ruído visual e adicionar uma sobrecarga cognitiva desnecessária para os usuários.
Selos
Selos são indicações visuais que podem ser adicionadas aos itens de navegação para fornecer mais informações. Por exemplo, um selo pode ser usado para indicar o número de filmes novos disponíveis em um app de streaming. Use os selos com moderação e somente quando necessário, porque eles podem fazer com que a interface pareça ocupada e desorganizada. Ao usar selos, confira se eles são claros e fáceis de entender e que não interfiram na capacidade do usuário de navegar no app.
Selo expandido
Selo recolhido
Etiquetas
Os rótulos na gaveta de navegação precisam ser claros e concisos para facilitar a leitura.
Atenção
O que não fazer
O que não fazer
O que não fazer
As gavetas de navegação são elementos fundamentais que representam a hierarquia do seu app e precisam ser usadas para listar apenas de cinco a seis destinos de navegação principais.
O que fazer
