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.
![Gaveta de navegação padrão](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/gradient-scrim.webp?authuser=9&hl=pt-br)
Gradiente scrim
![Gaveta de navegação modal](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/solid-scrim.webp?authuser=9&hl=pt-br)
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.
![Indicador ativo](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/modal-drawer-selected.webp?authuser=9&hl=pt-br)
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.
![Indicador ativo](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/dividers.webp?authuser=9&hl=pt-br)
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](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/badge-expand.webp?authuser=9&hl=pt-br)
Selo expandido
![Selo fechado](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/badge-collapse.webp?authuser=9&hl=pt-br)
Selo recolhido
Etiquetas
Os rótulos na gaveta de navegação precisam ser claros e concisos para facilitar a leitura.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/labels-do.webp?authuser=9&hl=pt-br)
Atenção
![](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/label-dont.webp?authuser=9&hl=pt-br)
O que não fazer
![](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/no-icons.webp?authuser=9&hl=pt-br)
O que não fazer
![](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/no-mixing-icons.webp?authuser=9&hl=pt-br)
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.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/navigation-count-do.webp?authuser=9&hl=pt-br)
O que fazer
![](https://developer.android.com/static/design/ui/tv/guides/components/images/navigation-drawer/navigation-count-dont.webp?authuser=9&hl=pt-br)