Plantilla de navegación

La plantilla de Navigation presenta un mapa base e información de enrutamiento opcional.

Cuando un usuario conduce sin instrucciones paso a paso basadas en texto, las apps pueden mostrar un mapa de pantalla completa actualizado en tiempo real. Durante la navegación activa, las apps pueden mostrar tarjetas opcionales con detalles de maniobras y superficies, así como alertas de navegación.

Esta plantilla se puede incorporar en la plantilla de pestaña para ofrecer navegación con pestañas.

Incluye lo siguiente:

  • Mapa base de pantalla completa dibujado por la app
  • Tarjeta de ruta (opcional) con maniobras futuras
  • Tarjeta de estimación de viaje (opcional) con la hora estimada de llegada (ETA), el tiempo hasta el destino y la distancia restante (o una pantalla de información alternativa con opciones de íconos y texto personalizados)
  • Barra de acciones con hasta 4 acciones en la app, visible solo como se describe en Visibilidad de las barras de acción
  • Barra de acciones del mapa opcional con hasta 4 botones para interactuar en los mapas
Esquemas de página de la plantilla de Navigation

Visualización del mapa en el clúster

Durante la navegación activa, las apps pueden mostrar un mapa en el clúster de instrumentos usando la plantilla de Navigation. El clúster es el área del panel detrás del volante. Actualmente, esta opción solo está disponible para los socios con acceso anticipado.

Esquema de página del clúster de mapas

Los mapas del clúster se diseñaron para lo siguiente:

  • Se renderiza de forma independiente, pero puedes copiar la pantalla principal si lo deseas.
  • No interactiva. Se quitan los elementos interactivos, como los botones.
  • Tema oscuro Se recomienda dibujar una versión con tema oscuro del mapa de clústeres para reducir las posibilidades de atraer la atención del conductor fuera de la ruta.

El mapa de la app en el clúster se mostrará solo en determinados momentos, según factores como el estado de navegación, la preferencia del OEM del vehículo (en AAOS) y lo que se muestra en la pantalla principal (en AAP).

Para ver un flujo de usuarios de muestra que involucre el clúster, consulta cómo ver un mapa en el clúster.

Ejemplos de pantalla central y de clústeres

Esquema de página de un clúster de mapas con un mapa de descripción general de la ruta
Aquí, la app muestra un mapa en primer plano en el clúster, a la vez que se muestra un mapa de descripción general de la ruta en la pantalla central.
Esquema de página de un clúster de mapas con configuración
Aquí, se sigue mostrando el mapa de la app en el clúster mientras el usuario ajusta la configuración del vehículo en la pantalla central.

Detalles de la tarjeta de enrutamiento

Maquetas de los detalles de la tarjeta de enrutamiento en el estado de ruta

Cuando la tarjeta de enrutamiento está en estado de enrutamiento (a diferencia del estado del mensaje), muestra la siguiente información:

  1. Paso actual: Incluye el ícono (por lo general, una flecha de dirección), la distancia y el texto de inserción (que puede incluir intervalos de imagen, como los marcadores de ruta).
  2. Indicaciones de carril (opcional): Se muestran como imágenes simples de asistencia de carril o como una imagen de intersección más grande (tamaño flexible con una altura máxima de 200 dp).
  3. Siguiente paso (opcional): Incluye el ícono y la indicación, y solo puede aparecer en la parte inferior de una tarjeta de enrutamiento que no incluya una imagen de intersección.

Otra opción en el estado de enrutamiento es que la tarjeta de enrutamiento muestre una animación de ícono giratorio (no se muestra aquí) para indicar estados transitorios, como la carga, el cálculo o el redireccionamiento.

En algunas circunstancias, la información de ruta se puede mostrar en una barra de navegación flotante, como se indica en Cómo agregar una parada mientras conduces.

Estado del mensaje de la tarjeta de enrutamiento

Cuando la tarjeta de ruta se encuentra en estado de mensaje, muestra un mensaje en lugar de las instrucciones de ruta. El mensaje se puede usar para transmitir situaciones, como la llegada a un destino o fallas en las rutas.

En el estado del mensaje, la tarjeta de enrutamiento puede incluir lo siguiente:

  • Un mensaje no vacío relacionado con el enrutamiento de hasta 2 líneas de longitud
  • Una imagen o un ícono (opcional)
Simulación del estado del mensaje de la tarjeta de enrutamiento

Notificaciones de navegación: paso a paso (TBT) y normales

Tarjeta de enrutamiento con notificación TBT
Tarjeta de ruta con notificación normal

Notificaciones TBT: Cuando una app proporciona instrucciones TBT basadas en texto, también debe activar notificaciones TBT. Estas notificaciones se utilizan para exponer las instrucciones TBT fuera de la plantilla de Navigation. Las apps pueden personalizar el color de fondo de las notificaciones TBT para aumentar la visibilidad.

Notificaciones regulares: Para comunicar otros mensajes relacionados con la navegación, como cambios en la configuración de la ruta, las apps de navegación también pueden enviar notificaciones normales (que no son TBT) (como se muestra aquí) o usar alertas de navegación. Pueden aparecer incluso cuando se muestre la tarjeta de enrutamiento.

Alertas de navegación

Las alertas de navegación proporcionan un mensaje breve y temporal y acciones opcionales en un formato que no bloquea la ruta de navegación. El contenido debe ser simple y relevante para la tarea de navegación. Por ejemplo, la alerta podría describir un cambio en las condiciones de tráfico o preguntar si el conductor puede recoger a un cliente.

Cada alerta incluye lo siguiente:

  • Título y subtítulo opcional
  • Ícono (opcional)
  • Indicador de progreso: ya sea una barra o, opcionalmente, un botón temporizado
  • Hasta 2 botones, en los que un botón se puede designar como principal o como botón sincronizado (con un indicador de progreso, como se muestra en la imagen anterior).

Las alertas se pueden descartar de la siguiente manera:

  • Selección de cualquier acción por parte del usuario
  • Tiempo de espera agotado después de X segundos (configurable)
  • Descarte de la app sin acción del usuario
Alerta de navegación

Plantilla de navegación, sin interacción
Mapa en pantalla completa cuando no se producen la navegación ni la interactividad con mapas (ejemplo de Android Auto)
Plantilla de navegación, sin interacción
Tarjeta de ruta con estimación de viaje, barra de acciones (en la parte superior) y BAF (en la parte inferior derecha) durante la navegación activa.

Requisitos de UX para la plantilla de navegación

Desarrolladores de apps:

DEBE Muestra al menos 1 maniobra en una tarjeta de ruta.
DEBE Incluye al menos un botón de acción en la barra de acción para habilitar los flujos de usuarios.
DEBE Incluye un botón de desplazamiento lateral en la barra de acciones en mapa si la app admite gestos de desplazamiento lateral.
DEBES Usar un tema oscuro en los mapas que se muestran en el clúster
DEBES Incluye solo botones relacionados con la interactividad del mapa en la barra de acciones en mapa (por ejemplo, brújula, cambio de enfoque o modo 3D).
DEBES Incluye un botón para finalizar la navegación cuando proporciones instrucciones paso a paso.
DEBES Usa símbolos estandarizados o coherentes con símbolos internacionales o específicos de cada país.
DEBES Usa la imagen de la intersección solo para mostrar contenido relevante para la navegación, que abarque el ancho de la tarjeta con imagen.
DEBES Proporciona imágenes de carriles con fondos transparentes para combinar con el fondo de la tarjeta de enrutamiento.
DEBES Usa alertas solo para la información relevante que no distraiga a la tarea de navegación actual.
MAYO Muestra texto breve de apoyo debajo de un carril (se recomienda Roboto 24) y una proporción de contraste más baja para los carriles no destacados.
MAYO Muestra 2 maniobras en una tarjeta de ruta cuando se produzcan en una sucesión rápida.
MAYO Incluye imágenes, como marcadores de ruta, en el texto de la tarjeta de enrutamiento (paso actual y paso siguiente).
MAYO Mostrar un mapa completo cuando el usuario conduzca sin instrucciones paso a paso basadas en texto o cuando esté en el modo de conducción libre.
MAYO Elige mostrar, o bien ocultar la tarjeta de ruta y los componentes de estimación de viajes, según sea necesario.
MAYO Dibuja en el mapa detalles relacionados con la conducción y alertas, como la velocidad actual, el límite de velocidad y la cámara que se encuentra adelante.
MAYO Personaliza el color de fondo de la tarjeta de ruta y cámbialo durante la sesión de navegación para que refleje el tipo de ruta y otras condiciones relevantes.