Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Navigasyon şablonu, bir temel harita ve isteğe bağlı yönlendirme bilgileri sunar.
Kullanıcı, metin tabanlı adım adım yol tarifleri olmadan araç kullanırken uygulamalar, gerçek zamanlı olarak güncellenen tam ekran bir harita gösterebilir. Etkin navigasyon sırasında uygulamalar, manevralar ve yüzey ayrıntılarının yanı sıra navigasyon uyarıları içeren isteğe bağlı kartlar gösterebilir.
Bu şablon, sekmeli gezinme sağlamak için Sekme şablonuna yerleştirilebilir.
Dahil olanlar:
Uygulama tarafından çizilen tam ekran temel harita
Tahmini varış zamanı (ETA), varışa kadar geçecek süre ve kalan mesafenin (veya özel metin ve simge seçenekleri içeren alternatif bir bilgi ekranının) yer aldığı seyahat tahmini kartı (isteğe bağlı)
Harita etkileşimi için 4 adede kadar düğme içeren isteğe bağlı harita işlem çubuğu
Kümede harita görüntüleme
Uygulamalar, etkin navigasyon sırasında Navigasyon şablonunu kullanarak gösterge grubunda bir harita gösterebilir. Kontrol paneli, direksiyonun arkasındaki alandır.
Kümedeki haritalar şu şekilde tasarlanmıştır:
Bağımsız olarak oluşturulur ancak istenirse ana ekranı kopyalayabilir.
Etkileşimli değildir. Düğmeler gibi etkileşimli öğeler kaldırılır.
Koyu tema Sürücünün dikkatini yoldan uzaklaştırma olasılığını azaltmak için küme haritasının koyu temalı bir sürümünü çizmeniz önemle tavsiye edilir.
Uygulamanın gösterge panelindeki haritası, navigasyon durumu, araç OEM tercihi (AAOS'te) ve ana ekranda gösterilen içerik (AAP'de) gibi faktörlere bağlı olarak yalnızca belirli zamanlarda gösterilir.
Bu örnekte uygulama, kümede yakın plan bir harita gösterirken merkez ekranda rotaya genel bakış haritası görüntülemektedir.Bu örnekte, kullanıcı merkez ekranda araç ayarlarını yaparken uygulamanın haritası grupta gösterilmeye devam etmektedir.
Yönlendirme kartı ayrıntıları
Yönlendirme kartı yönlendirme durumundayken (mesaj durumunun aksine) aşağıdaki bilgiler gösterilir:
Mevcut adım: simgeyi (genellikle yön oku), mesafeyi ve işaret metnini (rota işaretçileri gibi resim aralıkları içerebilir) içerir
Şerit kılavuzu (isteğe bağlı): Basit şerit yardımı resimleri veya daha büyük bir kavşak resmi (maksimum yüksekliği 200 dp olan esnek boyut) olarak gösterilir.
Sonraki adım (isteğe bağlı): Simge ve işaret içerir ve yalnızca bir kavşak resmi içermeyen bir yönlendirme kartının alt kısmında görünebilir
Yönlendirme durumundaki bir diğer seçenek, yönlendirme kartının yükleme, hesaplama veya yeniden yönlendirme gibi geçici durumları belirtmek için bir döndürme animasyonu (burada gösterilmez) göstermesidir.
Bazı durumlarda, rota bilgileri Aracınızı sürerken durak ekleme bölümünde gösterildiği gibi, kayan bir gezinme çubuğunda gösterilebilir.
Yönlendirme kartının ileti durumu
Yönlendirme kartı mesaj durumundayken yol tarifi yerine bir mesaj görüntülenir. İleti, hedefe varış veya rota hataları gibi durumları bildirmek için kullanılabilir.
Yönlendirmeyle ilgili, en fazla 2 satır uzunluğunda boş olmayan bir mesaj
Resim veya simge (isteğe bağlı)
Navigasyon bildirimleri: Adım adım (Adım Adım Rota) ve normal
Geçmişe Dönüş bildirimleri: Bir uygulama, metin tabanlı Geçmişe Dönüş yol tarifleri sağladığında Geçmişe Dönüş bildirimlerini de tetiklemelidir.
Bu bildirimler, TBT yol tariflerini Gezinme şablonunun dışında göstermek için kullanılır. Uygulamalar, daha fazla görünürlük için Geçmişe Dönüş bildiriminin arka plan rengini özelleştirebilir.
Normal bildirimler: Rota ayarlarındaki değişiklikler gibi navigasyonla ilgili diğer mesajları iletmek için navigasyon uygulamaları normal (TBT olmayan) bildirimler de gönderebilir (burada gösterildiği gibi) veya navigasyon uyarıları kullanabilir. Bu mesajlar, yönlendirme kartı gösterilirken bile görünebilir.
Navigasyon uyarıları
Navigasyon uyarıları, navigasyon rotasını engellemeyen bir biçimde kısa, geçici bir mesaj ve isteğe bağlı işlemler sağlar. İçerik basit ve gezinme göreviyle alakalı olmalıdır. Örneğin, uyarıda trafik koşullarındaki bir değişiklik açıklanabilir veya sürücünün bir müşteriyi alıp alamayacağı sorulabilir.
Her uyarıda şunlar bulunur:
Başlık ve isteğe bağlı alt başlık
Simge (isteğe bağlı)
İlerleme göstergesi: Çubuk veya (isteğe bağlı olarak) zamanlanmış bir düğmeye yerleştirilmiş
En fazla 2 düğme. Düğmeler birincil veya zamanlanmış düğme (önceki şekilde gösterildiği gibi bir ilerleme göstergesiyle) olarak belirlenebilir.
Uyarılar aşağıdakilerden herhangi biri tarafından kapatılabilir:
Kullanıcının herhangi bir işlem seçmesi
X saniye sonra zaman aşımı (yapılandırılabilir)
Kullanıcı işlemi olmadan uygulamanın kapatılması
Gezinme şablonu örnekleri
Gezinme ve harita etkileşimi gerçekleşmediğinde tam ekran harita (Android Auto örneği)Etkin gezinme sırasında seyahat tahmini, işlem çubuğu (üstte) ve FAB'yi (sağ alt kısımda) içeren rota kartı.
Gezinme şablonu kullanıcı deneyimi şartları
Uygulama geliştiriciler:
ZORUNLU
Yönlendirme kartında en az 1 manevra gösterin.
ZORUNLU
Kullanıcı akışlarını etkinleştirmek için işlem çubuğuna en az bir işlem düğmesi ekleyin.
ZORUNLU
Uygulama kaydırma hareketlerini destekliyorsa harita işlem şeridine kaydırma düğmesi ekleyin.
OLMALIDIR
Kümede görüntülenen haritalarda koyu tema kullanın.
OLMALIDIR
Harita işlem çubuğuna yalnızca harita etkileşimiyle ilgili düğmeler (ör. pusula, yeniden ortalama veya 3D mod) ekleyin.
OLMALIDIR
Adım adım yol tarifi sağlarken navigasyonu sonlandırma düğmesi ekleyin.
OLMALIDIR
Standartlaştırılmış veya uluslararası ya da ülkeye özgü simgelerle tutarlı simgeler kullanın.
OLMALIDIR
Kavşak resmini yalnızca gezinmeyle alakalı içerik göstermek için kullanın. Bu resim, kart genişliğini kaplar.
OLMALIDIR
Yönlendirme kartı arka planıyla uyumlu olması için şeffaf arka plana sahip şerit resimleri sağlayın.
OLMALIDIR
Uyarılar yalnızca mevcut gezinme göreviyle alakalı ve dikkat dağıtmayan bilgiler için kullanılmalıdır.
MAY
Bir şeridin altında kısa destekleyici metin (Roboto 24 önerilir) ve vurgulanmayan şeritler için daha düşük kontrast oranı gösterin.
MAY
Bir rota kartında, birbirini hızlıca takip eden 2 manevrayı gösterme
MAY
Yönlendirme kartı metnine (mevcut adım ve sonraki adım) rota işaretçileri gibi resimler ekleyin.
MAY
Kullanıcı metin tabanlı adım adım yol tarifleri olmadan sürüş yaptığında veya serbest sürüş modundayken haritanın tamamını gösterin.
MAY
Gerektiği şekilde rota kartı ve gezi tahmini bileşenlerini göstermeyi veya gizlemeyi seçin.
MAY
Haritada sürüşle ilgili ayrıntıları ve uyarıları (ör. mevcut hız, hız sınırı ve ilerideki kamera) çizin.
MAY
Yönlendirme kartı arka plan rengini özelleştirin ve yol türünü veya diğer ilgili koşulları yansıtacak şekilde gezinme oturumu sırasında değiştirin.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 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. |"]]
