Plantilla de navegación

La plantilla de Navigation presenta un mapa base, además de 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 maniobras y detalles de superficie, así como alertas de navegación.

Incluye lo siguiente:

  • Mapa base en pantalla completa dibujado por la app
  • Tarjeta de ruta (opcional) con próximas maniobras
  • 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 visualización 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 acciones
  • Barra de acciones en mapa opcional con hasta 4 botones para interactuar con el mapa
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 mediante 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.

Estructura del clúster de mapas

Los mapas del clúster se diseñaron con las siguientes características:

  • Se renderiza de forma independiente, pero puedes copiar la pantalla principal si lo deseas.
  • No interactivo. Se quitan los elementos interactivos, como los botones.
  • Tema oscuro Se recomienda dibujar una versión de tema oscuro del mapa de clústeres para reducir la posibilidad de atraer la atención del conductor y alejarlo 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 muestre en la pantalla principal (en AAP).

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

Ejemplos de pantalla central y de clúster

Estructura 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, mientras que un mapa de descripción general de la ruta en la pantalla central.
Estructura de un clúster de mapas con configuración
Aquí, el mapa de la app se sigue mostrando en el clúster mientras el usuario ajusta la configuración del vehículo en la pantalla central.

Detalles de la tarjeta de ruta

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

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 pueden incluir intervalos de imagen, como los marcadores de ruta).
  2. Indicación de carril (opcional): Se muestra como imágenes simples de ayuda de carril o como una imagen de intersección más grande (tamaño flexible con una altura máxima de 200 dp)
  3. Próximo paso (opcional): Incluye el ícono y la indicación, y solo puede aparecer en la parte inferior de una tarjeta de enrutamiento que no incluye 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 carga, cálculo o redireccionamiento.

En algunos casos, 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 tiene el estado Mensaje, muestra un mensaje en lugar de las instrucciones de ruta. El mensaje se puede usar para transmitir situaciones, como llegada a un destino o fallas en la ruta.

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 enrutamiento con notificación normal

Notificaciones de TBT: Cuando una app proporciona instrucciones de TBT basadas en texto, también debe activar notificaciones de TBT. Estas notificaciones se utilizan para mostrar 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 (no TBT) (como se muestra aquí) o usar alertas de navegación. Estos pueden aparecer incluso cuando se muestra la tarjeta de ruta.

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 con tiempo
  • 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 cualquiera de las siguientes maneras:

  • Selección de cualquier acción por parte del usuario
  • Se agotó el tiempo de espera después de X segundos (configurable)
  • Descarte de app sin acción del usuario
Alerta de navegación

Plantilla de navegación, sin interacción
Plantilla de navegación, sin interacción

Mapa de pantalla completa cuando no ocurren la navegación ni la interactividad con mapas (ejemplo de Android Auto)

Tarjeta de ruta con una estimación de viaje, una barra de acciones (en la parte superior) y una barra de acciones en el mapa (en la parte inferior derecha) durante la navegación activa.

Requisitos de UX de las plantillas de navegación

Desarrolladores de apps:

DEBES Muestra al menos 1 maniobra en una tarjeta de planificación de ruta.
DEBES Incluye al menos un botón de acción en la barra de acciones para habilitar los flujos de usuarios.
DEBES Incluye un botón de desplazamiento lateral en la barra de acciones del mapa si la app admite gestos de desplazamiento lateral.
SE RECOMIENDA Usar un tema oscuro en los mapas que se muestran en el clúster
SE RECOMIENDA Incluye solo los botones relacionados con la interactividad del mapa en la barra de acciones del mapa (por ejemplo, la brújula, la función de volver a centrar el mapa o el modo 3-D).
SE RECOMIENDA Incluye un botón para finalizar la navegación cuando se proporcionen instrucciones paso a paso.
SE RECOMIENDA Usa símbolos que estén estandarizados o coherentes con los símbolos internacionales o específicos de cada país.
SE RECOMIENDA Usa la imagen de intersección solo para mostrar contenido relevante para la navegación, que abarque el ancho de la tarjeta con una imagen.
SE RECOMIENDA Proporciona imágenes de carriles con fondos transparentes para combinarlos con el fondo de la tarjeta de enrutamiento.
SE RECOMIENDA Usa alertas solo para la información que no distraiga al usuario y a la tarea de navegación actual.
MAYO Muestra texto breve debajo de un carril (se recomienda Roboto 24) y una relación de contraste menor para los carriles no destacados.
MAYO Muestra 2 maniobras en una tarjeta de enrutamiento cuando se realicen en rápida sucesión.
MAYO Incluye imágenes, como marcadores de ruta, en el texto de la tarjeta de enrutamiento (paso actual y paso siguiente).
MAYO Muestra un mapa completo cuando el usuario conduce sin instrucciones paso a paso basadas en texto o cuando esté en modo de conducción libre.
MAYO Elige mostrar u ocultar la tarjeta de ruta y los componentes de estimación de viajes según sea necesario.
MAYO Dibuja en el mapa detalles y alertas relacionados con la conducción, como la velocidad actual, el límite de velocidad y la cámara que tienes delante.
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.