Modelo de navegação

O modelo de navegação apresenta um mapa básico e informações de trajeto opcionais.

Quando um usuário está dirigindo sem instruções passo a passo baseadas em texto, os apps podem mostrar um mapa em tela cheia que é atualizado em tempo real. Durante a navegação ativa, os apps podem mostrar cards opcionais com manobras e detalhes da via, além de alertas de navegação.

O modelo de navegação inclui o seguinte:

  • Mapa de base em tela cheia desenhado pelo app
  • Card de roteamento (opcional) com manobras futuras
  • Card de estimativa de viagem (opcional) com horário previsto de chegada (ETA), tempo até o destino e distância restante (ou uma exibição de informações alternativa com opções de texto e ícone personalizados)
  • Tira de ações com até quatro ações no app, visível apenas conforme descrito em Visibilidade das tiras de ações
  • Faixa de ações do mapa opcional com até quatro botões para interatividade
Wireframes do modelo de navegação

Exibição do mapa no cluster

Durante a navegação ativa, os apps podem mostrar um mapa no cluster de instrumentos usando o modelo de navegação. O cluster é a área do painel atrás do volante.

Os mapas no cluster precisam ser:

  • Renderizado de forma independente, mas pode copiar a tela principal, se necessário.
  • Não interativo. Elementos interativos, como botões, são removidos.
  • Tema escuro. É altamente recomendável desenhar uma versão com tema escuro do mapa de cluster para reduzir a possibilidade de desviar a atenção do motorista da via.

O mapa do app no cluster só vai aparecer em determinados momentos, dependendo de fatores como estado de navegação, preferência do OEM do veículo (no AAOS) e o que está sendo mostrado na tela principal (no AAP).

Para um exemplo de fluxo de usuário envolvendo o cluster, consulte Ver um mapa no cluster.

Exemplos de tela de cluster e central

Wireframe de um cluster de mapa com um mapa de visão geral de rota
Aqui, o app mostra um mapa em close-up no cluster e um mapa de visão geral do trajeto na tela central.
Wireframe de um cluster de mapa com configurações
Aqui, o mapa do app continua aparecendo no cluster enquanto o usuário ajusta as configurações do carro na tela central.

Detalhes do cartão de roteamento

Modelos de detalhes do card de roteamento no estado de roteamento

Quando o card de rotas está no estado de roteamento (em vez de estado de mensagem), ele mostra as seguintes informações:

  1. Etapa atual: inclui ícone (normalmente uma seta de direção), distância e texto de indicação (que pode incluir intervalos de imagem, como marcadores de rota)
  2. Indicação de faixa (opcional): mostrada como imagens simples de assistência de faixa ou como uma imagem maior de cruzamento (tamanho flexível com altura máxima de 200 dp)
  3. Próxima etapa (opcional): inclui ícone e dica e pode aparecer apenas na parte de baixo de um card de rota que não inclui uma imagem de cruzamento

Outra opção no estado de roteamento é mostrar uma animação de spinner (não mostrada aqui) para indicar estados transitórios, como carregamento, cálculo ou redirecionamento.

Em algumas circunstâncias, as informações de trajeto podem ser mostradas em uma barra de navegação flutuante, conforme mostrado em Adicionar uma parada durante o trajeto.

Estado da mensagem do card de roteamento

Quando o card de rotas está no estado mensagem, ele mostra uma mensagem em vez de rotas. A mensagem pode ser usada para transmitir situações como chegada a um destino ou falhas de rota.

No estado da mensagem, o card de roteamento pode incluir:

  • Uma mensagem não vazia relacionada ao roteamento com até duas linhas de comprimento
  • Uma imagem ou um ícone (opcional)
Mockup do estado da mensagem do card de roteamento

Notificações de navegação: guiada (TBT) e regular

Cartão de rotas com notificação de navegação guiada
Card de rotas com notificação regular

Notificações de navegação guiada: quando um app fornece rotas de navegação guiada baseadas em texto, ele também precisa acionar notificações de navegação guiada. Essas notificações são usadas para mostrar instruções de navegação guiada fora do modelo de navegação. Os apps podem personalizar a cor do plano de fundo da notificação de TBT para aumentar a visibilidade.

Notificações regulares: para comunicar outras mensagens relacionadas à navegação, como mudanças nas configurações de rota, os apps de navegação também podem enviar notificações regulares (não de navegação guiada), como mostrado aqui, ou usar alertas de navegação. Eles podem aparecer mesmo quando o card de rotas está sendo mostrado.

Alertas de navegação

Os alertas de navegação fornecem uma mensagem breve e temporária e ações opcionais em um formato que não bloqueia o trajeto. O conteúdo precisa ser simples e relevante para a tarefa de navegação. Por exemplo, o alerta pode descrever uma mudança nas condições de trânsito ou perguntar se o motorista pode buscar um cliente.

Cada alerta inclui:

  • Título e subtítulo opcional
  • Ícone (opcional)
  • Indicador de progresso: uma barra ou (opcionalmente) integrado a um botão cronometrado
  • Até dois botões, em que um pode ser designado como principal ou como um botão com tempo (com um indicador de progresso, como mostrado na figura anterior)

Os alertas podem ser dispensados de qualquer uma das seguintes maneiras:

  • Seleção de qualquer ação pelo usuário
  • Tempo limite após X segundos (configurável)
  • Descartar o app sem ação do usuário
Um alerta de navegação mostrando um radar móvel à frente

Exemplos de modelos de navegação

Modelo de navegação, sem interação
Mapa em tela cheia quando a navegação e a interatividade do mapa não estão ocorrendo (exemplo do Android Auto)
Modelo de navegação, sem interação
Card de rotas com estimativa de viagem, faixa de ações (na parte de cima) e FAB (na parte de baixo à direita) durante a navegação ativa.

Requisitos de UX do modelo de navegação

Desenvolvedores de apps:

OBRIGATÓRIO Mostrar pelo menos uma manobra em um card de rota.
OBRIGATÓRIO Inclua pelo menos um botão de ação na faixa de ações para ativar os fluxos de usuário.
OBRIGATÓRIO Inclua um botão de movimento na faixa de ações do mapa se o app for compatível com gestos de movimento.
SHOULD Usar um tema escuro nos mapas mostrados no cluster.
SHOULD Inclua apenas botões relacionados à interatividade do mapa na faixa de ações do mapa (por exemplo, bússola, recentralização ou modo 3D).
SHOULD Inclua um botão para encerrar a navegação ao fornecer rotas guiadas.
SHOULD Use símbolos padronizados ou consistentes com símbolos internacionais ou específicos de um país.
SHOULD Use a imagem de junção apenas para mostrar conteúdo relevante para a navegação, abrangendo a largura do card com a imagem.
SHOULD Forneça imagens de vias com planos de fundo transparentes para combinar com o plano de fundo do card de rotas.
SHOULD Use alertas apenas para informações não distrativas relevantes para a tarefa de navegação atual.
MAIO Mostre um texto de apoio curto abaixo de uma faixa (Roboto 24 recomendado) e reduza a taxa de contraste para faixas não destacadas.
MAIO Mostrar duas manobras em um card de trajeto quando elas ocorrem em rápida sucessão.
MAIO Inclua imagens, como marcadores de rota, no texto do card de rotas (etapa atual e próxima etapa).
MAIO Mostrar um mapa completo quando o usuário estiver dirigindo sem instruções detalhadas por texto ou no modo de direção livre.
MAIO Escolha mostrar ou ocultar o card de rotas e os componentes de estimativa de viagem conforme necessário.
MAIO Desenhe detalhes e alertas relacionados à direção no mapa, como velocidade atual, limite de velocidade e radar à frente.
MAIO Personalize a cor do plano de fundo do card de rotas e mude-a durante a sessão de navegação para refletir o tipo de via ou outras condições relevantes.

Recursos

Tipo Link
Referência da API NavigationTemplate, NavigationTemplate.Builder
Guia do desenvolvedor Acessar os modelos de navegação