Modelo de guia

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

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

Inclui:

Cada visualização de guia corresponde a um modelo incorporado, e apenas 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, mensagem ou navegação

Exemplos de modelo 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:

PRECISA Fornecer ícones vetoriais monocromáticos para cada guia.
PRECISA Inclua pelo menos duas e no máximo quatro guias no cabeçalho do app.
NÃO Permita que mais de uma guia fique ativa por vez.
NÃO 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 Use um cabeçalho ou uma faixa de ação nos modelos incorporados.