Se o app tiver vários destinos para os usuários percorrerem, recomendamos o uso de combinações de layout e navegação que são usados com frequência por outros apps. Como muitos usuários já têm os modelos mentais dessas combinações, o app será mais intuitivo para eles.
Combinações de layout e navegação
A barra de navegação e a gaveta de navegação modal são usadas como padrões de navegação principais para visualizações de layout pai e destinos de navegação principais.
A barra de navegação pode conter de três a cinco destinos de navegação no mesmo nível de hierarquia. Esse componente é traduzido para a coluna de navegação em telas grandes.
Embora a gaveta de navegação possa conter mais de cinco destinos de navegação, o padrão não é tão ideal quanto a barra de navegação. Isso ocorre porque os usuários precisam alcançar a barra superior em tamanhos compactos.
As guias do Material 3 e a barra de apps na parte de baixo são padrões de navegação secundários que podem ser usados para complementar a navegação principal ou aparecer em visualizações filhas.
Nesse caso, as guias atuam como uma camada de navegação secundária para agrupar conteúdo irmão.
Ações de layout
Forneça controles para que os usuários possam realizar ações. Os padrões comuns incluem ações da barra superior, botão de ação flutuante (FAB) e menus.
Para ações de maior importância, um FAB oferece um botão grande e proeminente para o usuário. Forneça apenas uma ação por vez nesse nível. Um FAB pode aparecer em vários tamanhos e em um formato expandido, que inclui um rótulo. Use Scaffold para fixar um FAB e garantir que ele esteja sempre visível, mesmo durante a rolagem.
Um botão de ação flutuante (FAB) que permite aos usuários adicionar plantas à galeria de plantas
Você pode colocar ações secundárias na barra superior ou, se estiverem agrupadas perto de conteúdo relacionado, na página.
Para outras ações que não são necessárias com frequência ou imediatamente, adicione-as a um menu flutuante.
Navegação adaptável
Use o layout certo para a classe de tamanho da janela. Evite usar a mesma barra de navegação na parte de baixo em todos os tamanhos.
O que fazer
O que não fazer
Tamanhos médios podem usar a coluna de navegação ou itens de navegação horizontal.
Embora compacta, uma coluna de navegação pode ser mais ergonômica em uma tela de capa.
Capas maiores podem aproveitar qualquer orientação de navegação. Considere como o usuário pode interagir com o conteúdo.