Barras de guias e navegação inferior: regras de design que se sustentam
Como projetar barras de guias e navegação inferior em iOS e Android: 3 a 5 destinos, navegação e não ações, rótulos, emblemas, visibilidade e estados ativos animados.
Ponto principal
Use uma barra de guias ou navegação inferior para três a cinco destinos de nível superior, não para ações. Dê a cada guia um ícone e um rótulo, mantenha a barra visível enquanto as pessoas se movem entre as seções, evite o excesso de guias "Mais" sempre que possível e use emblemas com moderação. Anime o estado ativo sutilmente para que as pessoas vejam onde estão.
O que dizem as plataformas
Material Design 3 diz que as barras de navegação fornecem acesso a três a cinco destinos, cada um com um ícone e um rótulo, e um destino está sempre ativo. As diretrizes da Apple dizem para usar uma barra de guias para navegação, não para fornecer ações, para mantê-la visível à medida que as pessoas se movem entre as seções (exceto quando um modal a cobre) e para evitar o excesso de guias.
Escolhendo as abas
As guias representam a estrutura do aplicativo:
- Escolha as seções que as pessoas usam com mais frequência, não todas as seções que você possui.
- Use substantivos para destinos (“Biblioteca”), não verbos para ações (“Upload”).
- Coloque ações na própria tela, em uma barra de ferramentas ou em um botão de ação flutuante.
- Se precisar de mais de cinco, reconsidere sua estrutura antes de adicionar uma guia “Mais”.
Etiquetas e emblemas
As guias apenas com ícones economizam espaço, mas forçam as pessoas a adivinhar. Os rótulos tornam a navegação mais clara, especialmente para ícones menos comuns. Os crachás devem sinalizar algo em que as pessoas precisam agir; um crachá que está sempre presente deixa de ser notado.
Preservar o estado por guia
A Apple observa que as barras de guias permitem que as pessoas troquem de seção, preservando o estado de navegação atual dentro de cada seção. Retornar a uma guia deve mostrar onde parou, e não redefinir para o topo.
Movimento
Uma pequena transição no indicador ativo, como um comprimido que desliza ou um ícone que preenche, ajuda as pessoas a rastrear onde estão. Mantenha-o rápido, abaixo de 250 milissegundos, evite saltar todos os ícones a cada toque e simplifique-o quando o movimento reduzido estiver ativado.
Princípios-chave para lembrar
- Três a cinco destinos de alto nível
- Navegação, não ações
- Ícone mais rótulo para cada guia
- Mantenha-o visível e preserve o estado de cada guia
- Movimento de estado ativo sutil e rápido
Perguntas frequentes
Fontes
- Navigation bar guidelines — Material Design 3
- Tab bars — Diretrizes de interface humana da Apple