Navegação Móvel

As barras de navegação inferiores permitem o movimento entre os destinos principais em um aplicativo.

Os itens da barra de guias sempre devem ter uma etiqueta;
Em casos raros em que o contexto é suficiente e um especialista em acessibilidade revisou o design, as etiquetas podem ser indefinidos para criar uma barra de guias apenas com ícones.

Os itens de navegação inferior têm uma opção para etiquetas laterais no modo paisagem ou em um tablet;
Isso ajuda a utilizar o espaço horizontal disponível de forma mais eficaz. Ao usar esta opção, os itens da navegação são distribuídos horizontalmente.

Os itens da barra de guias sempre devem ter ícones;
Os ícones fornecem metáforas para referência visual rápida e ajudam a reforçar a navegação de um produto;
Os ícones também ajudam a complementar os rótulos, para uma melhor compreensão.

Uma barra de guias pode receber uma cor de fundo primária ou secundária. O plano de fundo principal é uma cor de fundo mais clara para a barra de guias em todos os temas;
Ele deve ser usado quando o plano de fundo padrão de um aplicativo for cinza-100, cinza-75 ou cinza-300 em temas claros ou cinza-75 ou cinza-50 em temas escuros;
O plano de fundo secundário é uma cor de fundo ligeiramente mais escura em todos os temas. Ele deve ser usado quando o plano de fundo padrão de um aplicativo for cinza-75, cinza-50 ou cinza-300 em temas claros ou cinza-100 ou cinza-50 em temas escuros.

Os itens da barra de guias podem receber distintivos de notificação para indicar status ou informações importantes;
Esteja atento à frequência com que você notifica os usuários e que tipo de conteúdo deve acionar um selo de notificação, para evitar que os usuários ignorem os selos completamente.

Um item da barra de guias em um estado desabilitado mostra que um item existe, mas não está disponível nessa circunstância;
Esse estado pode ser usado para manter a continuidade do layout e para comunicar que o item pode ficar disponível posteriormente;
Não desative um item da barra de guias, a menos que seja absolutamente necessário.

No modo retrato, as etiquetas são colocados abaixo do ícone de cada item da barra de guias por padrão. No modo paisagem e em tablets, a posição da etiqueta muda para uma posição lateral;
Quando muitos itens da guia são exibidos no modo paisagem ou em tablets, as etiquetas serão colocados automaticamente abaixo dos ícones em uma exibição compacta. Esse comportamento é tratado automaticamente e é o comportamento padrão.

A barra de guias ajustará automaticamente a largura e distribuição do item com base na largura e orientação do dispositivo, por padrão;
Em ambientes horizontalmente compactos (por exemplo, modo retrato), a barra de guias distribuirá os itens uniformemente pelo espaço horizontal;
Em ambientes não compactos (por exemplo, modo paisagem), os itens da barra de guias serão alinhados ao centro e os itens aumentarão em largura.

As barras de guias devem ser usadas como a navegação mais alta ou de nível superior;
Não use uma barra de guias para segmentar subconteúdo ou subseções de seu aplicativo.

Use etiquetas concisas para itens da barra de guias;
Ter etiquetas concisas garante que o layout seja utilizável em vários tamanhos de dispositivos, orientações e localidades.

Evite usar muitos itens da barra de guias para seu aplicativo;
Ter mais itens adiciona complexidade desnecessária e compromete a área de toque de cada item;
O número recomendado de itens de guia é de 3 a 5;

Os significados dos ícones e itens de navegação variam de acordo com o produto;
Para garantir que seus usuários entendam totalmente a navegação do seu produto, é altamente recomendável usar etiquetas com ícones em uma barra de guias.