[null,null,["最后更新时间 (UTC):2025-07-25。"],[[["\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. |"]]