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](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/navigation-template.png?authuser=0000&hl=es)
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](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/nav-template-map-cluster.png?authuser=0000&hl=es)
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](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/nav-template-map-cluster.png?authuser=0000&hl=es)
![Esquema de página de un clúster de mapas con configuración](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/nav-template-map-cluster-2.png?authuser=0000&hl=es)
Detalles de la tarjeta de enrutamiento
![Maquetas de los detalles de la tarjeta de enrutamiento en el estado de ruta](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/navigation-routing-card-details.png?authuser=0000&hl=es)
Cuando la tarjeta de enrutamiento está en estado de enrutamiento (a diferencia del estado del mensaje), muestra la siguiente información:
- 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).
- 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).
- 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](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/navigation-message-state.png?authuser=0000&hl=es)
Notificaciones de navegación: paso a paso (TBT) y normales
![Tarjeta de enrutamiento con notificación TBT](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/navigation-tbt-notification.png?authuser=0000&hl=es)
![Tarjeta de ruta con notificación normal](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/navigation-regular-notification.png?authuser=0000&hl=es)
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](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/navigation-alert.png?authuser=0000&hl=es)
Ejemplos de plantillas de navegación
![Plantilla de navegación, sin interacción](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/navigation-full-screen.png?authuser=0000&hl=es)
![Plantilla de navegación, sin interacción](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/navigate_to_saved_location_2.png?authuser=0000&hl=es)
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. |