Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Шаблон навигации представляет базовую карту и дополнительную информацию о маршруте.
Когда пользователь едет без текстовых пошаговых указаний, приложения могут отображать полноэкранную карту, обновляемую в реальном времени. Во время активной навигации приложения могут отображать дополнительные карты с маневрами и подробностями о поверхности, а также навигационные оповещения .
Этот шаблон можно внедрить в шаблон вкладки для обеспечения навигации по вкладкам.
Карта оценки поездки (дополнительно) с расчетным временем прибытия (ETA), временем до пункта назначения и оставшимся расстоянием (или альтернативным информационным дисплеем с настраиваемым текстом и вариантами значков)
Во время активной навигации приложения могут отображать карту в комбинации приборов с помощью шаблона навигации. Кластер — это область приборной панели за рулем.
Карты в кластере предназначены для:
Отображается независимо , но при желании можно скопировать основной экран.
Неинтерактивный. Интерактивные элементы, такие как кнопки, удалены.
Темная тема. Настоятельно рекомендуется нарисовать версию карты кластера в темной тематике, чтобы уменьшить вероятность отвлечения внимания водителя от дороги.
Карта приложения в кластере будет отображаться только в определенное время, в зависимости от таких факторов, как состояние навигации, предпочтения OEM-производителя автомобиля (в AAOS) и то, что отображается на главном дисплее (в AAP).
Здесь приложение отображает карту крупным планом в кластере, а на центральном экране отображает обзорную карту маршрута. Здесь карта приложения продолжает отображаться в кластере, пока пользователь настраивает параметры автомобиля на центральном экране.
Детали маршрутной карты
Когда карта маршрутизации находится в состоянии маршрутизации (в отличие от состояния сообщения ), она отображает следующую информацию:
Текущий шаг : включает значок (обычно стрелку направления), расстояние и текст подсказки (который может включать в себя фрагменты изображений, например маркеры маршрута).
Подсказка по полосе движения (дополнительно): отображается либо в виде простых изображений, вспомогательных по полосе, либо в виде более крупного изображения перекрестка (гибкий размер с максимальной высотой 200 dp).
Следующий шаг (необязательно): включает значок и подсказку и может отображаться только внизу карты маршрутизации, которая не содержит изображения соединения.
Другой вариант состояния маршрутизации — для карты маршрутизации отображать анимацию счетчика (здесь не показана) для обозначения переходных состояний, таких как загрузка, расчет или перенаправление.
В некоторых случаях информация о маршруте может вместо этого отображаться на плавающей панели навигации, как показано в разделе «Добавление остановки во время движения» .
Состояние сообщения карты маршрутизации
Когда карта маршрутизации находится в состоянии сообщения , вместо указаний маршрутизации отображается сообщение. Сообщение может использоваться для передачи информации о таких ситуациях, как прибытие в пункт назначения или сбой на маршруте.
В состоянии сообщения карта маршрутизации может включать в себя:
Непустое сообщение, связанное с маршрутизацией, длиной до 2 строк.
Изображение или значок (необязательно)
Навигационные уведомления: пошаговые (TBT) и регулярные.
Уведомления TBT . Когда приложение предоставляет текстовые указания TBT, оно также должно запускать уведомления TBT. Эти уведомления используются для предоставления указаний TBT за пределами шаблона навигации. Приложения могут настраивать цвет фона уведомлений TBT для большей видимости.
Регулярные уведомления . Для передачи других сообщений, связанных с навигацией, таких как изменения в настройках маршрута, навигационные приложения также могут отправлять регулярные (не TBT) уведомления (как показано здесь) или использовать навигационные оповещения. Они могут появиться даже при отображении карты маршрутизации.
Навигационные оповещения
Навигационные оповещения предоставляют краткое временное сообщение и дополнительные действия в формате, который не блокирует маршрут навигации. Контент должен быть простым и соответствовать навигационной задаче. Например, предупреждение может описывать изменение условий дорожного движения или спрашивать, может ли водитель забрать клиента.
Каждое оповещение включает в себя:
Название и дополнительный подзаголовок
Значок (необязательно)
Индикатор прогресса — либо полоса, либо (опционально) встроен в кнопку с таймером.
До двух кнопок , причем кнопка может быть назначена основной или временной (с индикатором выполнения, как показано на предыдущем рисунке).
Оповещения можно отключить одним из следующих способов:
Выбор пользователем любого действия
Тайм-аут через X секунд (настраиваемый)
Закрытие приложения без действий пользователя
Примеры шаблонов навигации
Полноэкранная карта, когда навигация и интерактивность карты не выполняются (пример Android Auto) Карта маршрута с оценкой поездки, полосой действий (вверху) и FAB (внизу справа) во время активной навигации.
Требования к пользовательскому интерфейсу шаблона навигации
Разработчики приложения:
ДОЛЖЕН
Покажите хотя бы 1 маневр на карточке маршрута.
ДОЛЖЕН
Добавьте хотя бы одну кнопку действия на полосу действий, чтобы включить потоки пользователей.
ДОЛЖЕН
Добавьте кнопку панорамирования в полосу действий карты, если приложение поддерживает жесты панорамирования.
ДОЛЖЕН
Используйте темную тему на картах, отображаемых в кластере.
ДОЛЖЕН
Включите в полосу действий карты только кнопки, связанные с интерактивностью карты (например, компас, центрирование или 3D-режим).
ДОЛЖЕН
Включите кнопку для завершения навигации при предоставлении пошаговых указаний.
ДОЛЖЕН
Используйте символы, которые стандартизированы или соответствуют международным или национальным символам.
ДОЛЖЕН
Используйте изображение перехода только для отображения контента, имеющего отношение к навигации, охватывая ширину карты и изображения.
ДОЛЖЕН
Предоставьте изображения полос движения с прозрачным фоном, чтобы они сливались с фоном карты маршрутизации.
ДОЛЖЕН
Используйте оповещения только для неотвлекающей информации, относящейся к текущей навигационной задаче.
МОЖЕТ
Отобразите короткий вспомогательный текст под полосой (рекомендуется Roboto 24) и уменьшите коэффициент контрастности для невыделенных дорожек.
МОЖЕТ
Покажите на карточке маршрута 2 маневра, когда они происходят быстро друг за другом.
МОЖЕТ
Включите изображения, такие как маркеры маршрута, в текст маршрутной карты (текущий шаг и следующий шаг).
МОЖЕТ
Показывать полную карту, когда пользователь едет без текстовых пошаговых указаний или находится в режиме свободного вождения.
МОЖЕТ
При необходимости выберите отображение или скрытие карты маршрута и компонентов оценки поездки.
МОЖЕТ
Нарисуйте на карте информацию и оповещения, связанные с вождением, например текущую скорость, ограничение скорости и камеру впереди.
МОЖЕТ
Настройте цвет фона карты маршрута и измените его во время сеанса навигации, чтобы он отражал тип дороги или другие соответствующие условия.
[[["Прост для понимания","easyToUnderstand","thumb-up"],["Помог мне решить мою проблему","solvedMyProblem","thumb-up"],["Другое","otherUp","thumb-up"]],[["Отсутствует нужная мне информация","missingTheInformationINeed","thumb-down"],["Слишком сложен/слишком много шагов","tooComplicatedTooManySteps","thumb-down"],["Устарел","outOfDate","thumb-down"],["Проблема с переводом текста","translationIssue","thumb-down"],["Проблемы образцов/кода","samplesCodeIssue","thumb-down"],["Другое","otherDown","thumb-down"]],["Последнее обновление: 2025-07-25 UTC."],[[["\u003cp\u003eThe Navigation template provides a base map, routing information, and optional cards for maneuvers and travel estimates during active navigation in driver apps.\u003c/p\u003e\n"],["\u003cp\u003eIt supports map display in the instrument cluster, offering a non-interactive, dark-themed view alongside the main display.\u003c/p\u003e\n"],["\u003cp\u003eThe routing card displays turn-by-turn directions or messages, and navigation alerts provide temporary, non-blocking messages for relevant updates.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can customize the template with action strips, map interactivity buttons, and navigation notifications to enhance the user experience.\u003c/p\u003e\n"],["\u003cp\u003eThe template includes UX requirements for app developers to ensure clear and consistent navigation guidance for drivers.\u003c/p\u003e\n"]]],[],null,["# Navigation template\n\n\u003cbr /\u003e\n\nThe Navigation template presents a base map and optional routing\ninformation.\n\nWhen a user is driving without text-based turn-by-turn directions, apps can show\na full-screen map updated in real time. During active navigation, apps can\nsurface optional cards with maneuvers and surface details, as well as\n[navigation alerts](#alerts).\n\nThis template can be embedded in the\n[Tab template](/cars/design/create-apps/apps-for-drivers/templates/tab-template)\nto provide tabbed navigation. \n**Includes:**\n\n- Full-screen base map drawn by app\n- [Routing card](#routing-card) (optional) with upcoming maneuvers\n- Travel estimate card (optional) with estimated time of arrival (ETA), time to destination, and remaining distance (or an alternate information display with custom text and icon options)\n- [Action strip](/cars/design/create-apps/apps-for-drivers/components/action-strip) with up to 4 app actions, visible only as described in [Visibility of action strips](/cars/design/create-apps/apps-for-drivers/components/action-strip#visibility)\n- Optional [map action strip](/cars/design/create-apps/apps-for-drivers/components/map-action-strip) with up to 4 buttons for map interactivity\n\n\u003cbr /\u003e\n\nMap display in the cluster\n--------------------------\n\nDuring active navigation, apps can display a map in the instrument cluster\nusing the Navigation template. The cluster is the area of the dashboard behind\nthe steering wheel.\n\nMaps in the cluster are intended to be:\n\n- **Independently rendered**, but may copy the main display if desired.\n- **Non-interactive.** Interactive elements such as buttons are removed.\n- **Dark theme.** Drawing a dark-themed version of the cluster map is strongly recommended, to reduce the potential for attracting the driver's attention away from the road.\n\nThe app's map in the cluster will display only at certain times, dependent on\nsuch factors as navigation state, vehicle OEM preference (in AAOS), and what is\nshowing on the main display (in AAP).\n\nFor a sample user flow involving the cluster, see\n[View a map in the cluster](/cars/design/create-apps/sample-flows/view-map-in-cluster).\n| **Note:** For AAOS, vehicle OEMs can opt to show their own turn-by-turn instructions in the cluster, instead of the app's. When navigation ends, they can also decide whether the cluster will keep showing the navigation app's map or revert to the default map.\n\n### Cluster and center screen examples\n\nHere, the app displays a close-up map in the cluster, while displaying a route overview map in the center screen. Here, the app's map continues to show in the cluster while the user adjusts car settings on the center screen.\n\n\u003cbr /\u003e\n\nRouting card details\n--------------------\n\nWhen the routing card is in routing state (as opposed to\n[message state](#message-state)), it shows the following\ninformation:\n\n1. **Current step**: includes icon (typically a direction arrow), distance, and cue text (which may include image spans such as route markers)\n2. **Lane guidance** (optional): shown either as simple lane-assist images or as a larger junction image (flexible size with maximum height of 200dp)\n3. **Next step** (optional): includes icon and cue, and can appear only at the bottom of a routing card that doesn't include a junction image\n\nAnother option in routing state is for the routing card to display a\nspinner animation (not shown here) to indicate transient states such as\nloading, calculating, or rerouting.\n\nIn some circumstances, routing information can instead be displayed in a\nfloating navigation bar, as shown in\n[Add a stop while driving](/cars/design/create-apps/sample-flows/add-stop-while-driving).\n\n\u003cbr /\u003e\n\n### Message state of routing card\n\nWhen the routing card is in **message** state, it displays a\nmessage instead of routing directions. The message can be used to convey\nsituations such as arrival at a destination or route failures.\n\nIn the message state, the routing card can include:\n\n- A non-empty routing-related message up to 2 lines in length\n- An image or icon (optional)\n\n\u003cbr /\u003e\n\n### Navigation notifications: Turn-by-turn (TBT) and regular\n\n**TBT notifications**: When an app\nprovides text-based TBT directions, it must also trigger TBT notifications.\nThese notifications are used to expose TBT directions outside of the\nNavigation template. Apps can customize TBT notification background color for\ngreater visibility.\n\n**Regular notifications**: To\ncommunicate other navigation-related messages, such as changes in route\nsettings, navigation apps can also send regular (non-TBT) notifications (as\nshown here) or use navigation alerts. These can appear even when the routing\ncard is displayed.\n\n\u003cbr /\u003e\n\n### Navigation alerts\n\nNavigation alerts provide a brief, temporary message and optional actions\nin a format that doesn't block the navigation route. The content should be\nsimple and relevant to the navigation task. For example, the alert might\ndescribe a change in traffic conditions or ask if the driver can pick up a\ncustomer.\n\nEach alert includes:\n\n- Title and optional subtitle\n- Icon (optional)\n- Progress indicator -- either a bar or (optionally) built into a timed button\n- Up to 2 [buttons](/cars/design/create-apps/apps-for-drivers/components/button), where a button can be designated as [primary](/cars/design/create-apps/apps-for-drivers/components/button#primary) or as a [timed button](/cars/design/create-apps/apps-for-drivers/components/button#timed) (with a progress indicator, as shown in the previous figure)\n\nAlerts can be dismissed by any of the following:\n\n- User selection of any action\n- Time-out after `X` seconds (configurable)\n- App dismissal without user action\n\n\u003cbr /\u003e\n\n| **Note**: Don't use navigation alerts to show primary navigation information, such as upcoming turns or arrival time. For those types of information, use the routing card or trip estimate card\n\nNavigation template examples\n----------------------------\n\nFull-screen map when navigation and map interactivity are not occurring (Android Auto example) Routing card with travel estimate, action strip (at top), and FAB (at bottom right) during active navigation.\n\n\u003cbr /\u003e\n\nNavigation template UX requirements\n-----------------------------------\n\nApp developers:\n\n|------------|----------------------------------------------------------------------------------------------------------------------------------------|\n| **MUST** | Show at least 1 maneuver on a routing card. |\n| **MUST** | Include at least one action button on the action strip to enable user flows. |\n| **MUST** | Include a pan button in the map action strip if the app supports panning gestures. |\n| **SHOULD** | Use a dark theme on maps displayed in the cluster. |\n| **SHOULD** | Include only buttons related to map interactivity on the map action strip (for example, compass, recentering, or 3D mode). |\n| **SHOULD** | Include a button to end navigation when providing turn-by-turn directions. |\n| **SHOULD** | Use symbols that are standardized or consistent with international or country-specific symbols. |\n| **SHOULD** | Use the junction image only to show content relevant to navigation, spanning card width with image. |\n| **SHOULD** | Provide lane images with transparent backgrounds to blend with the routing-card background. |\n| **SHOULD** | Use alerts only for non-distracting information relevant to the current navigation task. |\n| **MAY** | Display short supporting text under a lane (Roboto 24 recommended) and lower contrast ratio for non-highlighted lanes. |\n| **MAY** | Show 2 maneuvers on a routing card when they occur in rapid succession. |\n| **MAY** | Include images such as route markers in routing-card text (current step and next step). |\n| **MAY** | Show a full map when the user is driving without text-based turn-by-turn directions or is in free-drive mode. |\n| **MAY** | Choose to show or the hide routing card and trip estimate components as needed. |\n| **MAY** | Draw driving-related details and alerts on the map, such as current speed, speed limit, and camera ahead. |\n| **MAY** | Customize routing-card background color and change it during the navigation session to reflect road type or other relevant conditions. |"]]