Modelo de guia

O modelo de guia atua como um contêiner para outros modelos listados abaixo, fornecendo guias na parte de cima (como mostrado em Anatomia do modelo de guia).

As guias permitem alternar entre visualizações. Esse recurso é muito útil para organizar conteúdo ou visualizações em que os usuários vão querer navegar ou pesquisar.

Inclui:

  • Barra de guias com ícone do app e até quatro guias (sem o botão "Voltar")
  • Modelo incorporado, que pode ser de qualquer um dos seguintes tipos:

Cada visualização de guia corresponde a um modelo incorporado, e somente uma visualização de guia pode estar ativa por vez.

Wireframes do modelo de guia

Anatomia do modelo de guia

Wireframes do modelo de guia, incluindo todos os modelos incorporados possíveis

O modelo de guia consiste nos seguintes elementos:

  1. Barra de guias, que pode mostrar até quatro guias
  2. Modelo incorporado usando um dos seguintes modelos: lista, grade, pesquisa, painel ou mensagem

Exemplos de modelos de guia

Modelo de guia com modelo de lista incorporado
A visualização da guia "Todos os dispositivos" é criada usando um modelo de guia que contém um modelo de lista (exemplo do Android Auto)
Modelo de guia com modelo de grade incorporado
A visualização da guia "Dispositivos de casa" é criada usando um modelo de guia que contém um modelo em grade (exemplo do Android Auto)

Requisitos de UX do modelo de guia

Desenvolvedores de apps:

DEVE Inclua uma barra de guias com um rótulo e um ícone vetorial monocromático para cada guia.
DEVE Inclua de duas a quatro guias no cabeçalho do app.
DEVE Inclua um modelo incorporado e que não esteja em branco em cada visualização de guia.
NÃO É POSSÍVEL Permita que mais de uma guia fique ativa por vez.
NÃO É POSSÍVEL Crie uma navegação secundária adicionando um segundo nível de guias.
DEVE Use rótulos de tabulação curtos para evitar truncamentos.
NÃO DEVE Inclua um cabeçalho ou uma faixa de ações em modelos incorporados.