Gezinme çekmecesi
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Gezinme çekmeceleri, kullanıcıların farklı hedeflere ve özelliklere erişmesine olanak tanıdığı için tüm TV uygulamalarında temel bileşenlerdir. Gezinme çekmecesi, uygulamanın bilgi mimarisinin bel kemiğidir ve uygulamada gezinmek için net ve sezgisel bir yol sunar.
Mobil gezinme çekmecesinin aksine, TV'deki gezinme çekmecesinde kullanıcı tarafından görülebilen hem genişletilmiş hem de daraltılmış durumlar vardır.
Kaynaklar
Öne çıkanlar
- Hedefler, kullanıcının önemine göre sıralanır. Sık ziyaret edilen hedefler önce gelir ve ilgili hedefler birlikte gruplandırılır.
- Hem standart hem de modal gezinme çekmeceleri daraltıldığında gezinme çubuğu gereklidir.
Varyantlar
İki tür gezinme çekmecesi stili vardır:
- Standart gezinme çekmecesi: Sayfa içeriğini kenara iterek gezinme için ek alan oluşturmak üzere genişler.
- Modal gezinme çekmecesi: Uygulama içeriğinin üzerinde yer alan bir yer paylaşımı olarak görünür ve çekmece genişletildiğinde okunabilirliği artırmaya yardımcı olan bir örtü içerir.
Standart gezinme çekmecesi
Anatomi
- Üst bölüm: Uygulama logosunu içerir. Profiller arasında geçiş yapmak veya arama işlemini tetiklemek için düğme görevi görür. Daraltılmış durumdayken üst kapsayıcıda yalnızca simge görünür.
- Gezinme öğesi: Gezinme çubuğundaki her öğe, simge ve metnin bir kombinasyonunu içerir. Daraltılmış durumdayken yalnızca simge görünür.
- Gezinme çubuğu: Gezinme çubuğu, ana menü işlevi gören ve 3 ila 7 uygulama hedefini gösteren bir sütundur. Her hedefin bir metin etiketi ve isteğe bağlı bir simgesi vardır. Ayrıca, daha iyi bağlama uygunluk için menü öğelerini gruplandırma seçeneği de vardır.
- Alt bölüm: Ayarlar, yardım veya profil gibi sayfalar için ideal olan bir ila üç işlem düğmesi içerebilir.
Davranış
- Gezinme çekmecesi genişletmesi: Standart gezinme çekmeceleri genişletildiğinde sayfa içeriğini iterek gezinme için genişletilmiş sürüme yer açar.
- Gezinme güncellemeleri: Bir gezinme öğesinden diğerine geçiş yapıldığında sayfa otomatik olarak yeni hedefe güncellenir.
Modal gezinme çekmecesi
Anatomi
- Üst bölüm: Uygulama logosunu içerir. Profiller arasında geçiş yapmak veya arama işlemini tetiklemek için düğme görevi görür. Daraltılmış durumdayken üst kapsayıcıda yalnızca simge görünür.
- Gezinme öğesi: Gezinme çubuğundaki her öğe, simge ve metnin bir kombinasyonunu içerir. Daraltılmış durumdayken yalnızca simge görünür.
- Gezinme çubuğu: Ana menü işlevi gören ve üç ila yedi uygulama hedefini gösteren sütun. Her varış noktasının bir metin etiketi ve isteğe bağlı bir simgesi vardır. Ayrıca, daha iyi bağlam için menü öğelerini gruplandırma seçeneği de vardır.
- Scrim: Gezinme öğesi metninin daha iyi okunması için.
- Alt bölüm: Ayarlar, yardım veya profil gibi sayfalar için ideal olan bir ila üç işlem düğmesi içerebilir.
Davranış
- Çekmece genişletmesi: Uygulama içeriğinin üstünde yer alan bir yer paylaşımı olarak görünür. Çekmece genişletildiğinde okunabilirliği artıran bir örtü de gösterilir.
- Gezinme güncellemeleri: Kullanıcı bir gezinme öğesi seçtiğinde gerçekleşir.
opaklık katmanı
Kalıcı gezinme çekmecesinde, çekmecenin arkasındaki bir örtü, çekmece içeriğinin okunabilir olmasını sağlar. Kullanıcı arayüzünün farklı varyasyonlarını oluşturmak için gezinme çekmecesinin arkasında bir degrade veya düz yüzey kullanabilirsiniz.
Gradyan kumaş
Düz kumaş
Özellikler
Kullanım
Etkin Gösterge
Etkin gösterge, gösterilen gezinme çekmecesi hedefini vurgulayan görsel bir ipucudur. Gösterge genellikle çekmecedeki diğer öğelerden görsel olarak farklı bir arka plan şekliyle temsil edilir.
Etkinlik göstergesi, kullanıcıların uygulamada nerede olduklarını ve hangi hedefe göz attıklarını anlamalarına yardımcı olur. Etkin göstergenin açıkça görülebildiğinden ve gezinme çekmecesinde diğer öğelerden daha kolay ayırt edilebildiğinden emin olun.
Ayırıcılar (isteğe bağlı)
Ayırıcılar, daha iyi bir düzen için gezinme çekmecesinde hedef gruplarını ayırmak amacıyla kullanılabilir. Ancak çok fazla bölücü görsel gürültü oluşturabileceği ve kullanıcılar için gereksiz bilişsel yük oluşturabileceğinden bunları az miktarda kullanmak önemlidir.
Rozetler
Rozetler, ek bilgi sağlamak için gezinme öğelerine eklenebilen görsel ipuçlarıdır. Örneğin, bir akış uygulamasında mevcut yeni filmlerin sayısını belirtmek için rozet kullanılabilir. Rozetler kullanıcı arayüzünü kalabalık ve dağınık gösterebileceğinden, rozetleri yalnızca gerektiğinde ve az miktarda kullanın. Rozetleri kullanırken net ve kolay anlaşılır olduklarından ve kullanıcının uygulamada gezinme özelliğini etkilemediklerinden emin olun.
Rozet genişletildi
Rozet daraltıldı
Etiketler
Gezinme çekmecesinde yer alan etiketler, daha kolay okunabilmesi için net ve kısa olmalıdır.
warning
Dikkat
Uzun etiketler kullanmaktan kaçınamıyorsanız üç nokta kullanarak etiketi kısaltın.
cancel
Yapılmaması gerekenler
Sarmalamayı gerektiren uzun metin etiketleri kullanmaktan kaçının.
cancel
Yapılmaması gerekenler
Kullanıcıların uygulamada gezinmesini zorlaştırabileceğinden, simge içermeyen bir gezinme çekmecesi oluşturmaktan kaçının.
cancel
Yapılmaması gerekenler
Simge gezinme öğelerini simge olmayan gezinme öğeleriyle karıştırmayın. Aksi takdirde, kullanıcılar için gezinme deneyimi kafa karıştırıcı olabilir.
Gezinme çekmeceleri, uygulamanızın hiyerarşisini temsil eden temel öğelerdir ve yalnızca beş ila altı birincil gezinme hedefini listelemek için kullanılmalıdır.
check_circle
Yapılması gerekenler
Daha iyi bir kullanıcı deneyimi için gezinme çekmecesinde ana gezinme hedeflerinin sayısını beş veya altı ile sınırlayın.
cancel
Yapılmaması gerekenler
Dikey kaydırma oluşturabileceği ve kullanıcıların uygulamada gezinmesini zorlaştırabileceği için çok fazla gezinme öğesi eklemekten kaçının.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[null,null,["Son güncelleme tarihi: 2025-07-27 UTC."],[],[],null,["# Navigation drawers are essential components in any TV app as they allow users\nto access different destinations and features. A navigation drawer is the\nbackbone of the app's information architecture, providing a clear and intuitive\nway to navigate through the app.\n\nIn contrast to the mobile navigation drawer, the navigation drawer on\nTV has both expanded and collapsed states visible to the user.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose (NavigationDrawer)](/reference/kotlin/androidx/tv/material3/package-summary#NavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,kotlin.Function0)) [Jetpack Compose (ModalNavigationDrawer)](/reference/kotlin/androidx/tv/material3/package-summary#ModalNavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,androidx.compose.ui.graphics.Brush,kotlin.Function0)) | Available |\n\nHighlights\n----------\n\n- Destinations are ordered according to user importance, with frequent destinations first and related destinations grouped together.\n- A navigation rail is required for both standard and modal navigation drawers when collapsed.\n\nVariants\n--------\n\nThere are two type of navigation drawer styles:\n\n1. **Standard navigation drawer** --- Expands to create additional space for navigation, pushing the page content aside.\n2. **Modal navigation drawer** --- Appears as an overlay on top of the app's content with a scrim that helps to improve readability when the drawer is expanded.\n\nStandard navigation drawer\n--------------------------\n\n### Anatomy\n\n1. **Top section:** Features the app logo. Serves as a button to switch profiles or to trigger search action. In the collapsed state, only the icon remains visible in the top container.\n2. **Navigation item:** Each item in the navigation rail features a combination of an icon and text, with only the icon visible in the collapsed state.\n3. **Navigation rail:** The Navigation Rail is a column that shows 3 to 7 app destinations, acting as the main menu. Each destination has a text label and an optional icon, with the option of grouping menu items for better contextuality.\n4. **Bottom section:** Can have one to three action buttons, which are ideal for pages like settings, help, or profile.\n\n### Behavior\n\n- **Navigation drawer expansion:** When expanded the standard navigation drawers pushes the page content making space for the expanded version for the navigation.\n- **Navigation updates:** Moving from one nav item to another, the page automatically updates to the new destination.\n\nModal navigation drawer\n-----------------------\n\n### Anatomy\n\n1. **Top section:** Features the app logo. Serves as a button to switch profiles or to trigger a search action. In the collapsed state, only the icon remains visible in the top container.\n2. **Navigation item:** Each item in the navigation rail features a combination of an icon and text, with only the icon visible in the collapsed state.\n3. **Navigation rail:** Column that shows three to seven app destinations, acting as the main menu. Each destination has a text label and an optional icon, with the option of grouping menu items for better contextuality.\n4. **Scrim:** For better readability of navigation item text.\n5. **Bottom section:** Can have one to three action buttons, which are ideal for pages like settings, help, or profile.\n\n### Behavior\n\n- **Drawer expansion:** Appears as an overlay on top of the app's content, with a scrim that improves readability when the drawer is expanded.\n- **Navigation updates:** Occur when the user selects a navigation item.\n\n### Scrim\n\nFor the modal navigation drawer, a scrim behind the\ndrawer ensures the drawer content is readable. You can\nuse a gradient or solid surface behind the navigation drawer to create different\nvariations of the UI.\n\n\nGradient scrim \n\nSolid scrim\n\n\u003cbr /\u003e\n\nSpec\n----\n\nUsage\n-----\n\n\n### Active Indicator\n\nThe active indicator is a visual cue that highlights the navigation drawer\ndestination that is displayed. The indicator is typically represented by a\nbackground shape that is visually distinct from the other items in the drawer.\nThe active indicator helps users understand where they are in the app and which\ndestination they are browsing. Ensure that the active indicator is clearly\nvisible and easier to distinguish from the other items in the navigation drawer. \n\n\u003cbr /\u003e\n\n\n### Dividers (optional)\n\nDividers can be used to separate groups of destinations within the navigation\ndrawer for better organization. However, it's important to use them sparingly as\ntoo many dividers can create visual noise and add unnecessary cognitive overload\nfor users. \n\n\u003cbr /\u003e\n\n### Badges\n\nBadges are visual cues that can be added to navigation items to provide\nadditional information. For example, a badge could be used to\nindicate the number of new movies available in a streaming app. Use\nbadges sparingly and only when necessary, as they can\nmake the UI appear busy and cluttered. When using badges, ensure that\nthey are clear and easier to understand and that they don't\ninterfere with the user's ability to navigate the app.\n\n\nBadge expanded \n\nBadge collapsed\n\n\u003cbr /\u003e\n\n### Labels\n\nLabels in the navigation drawer should be clear and concise so that they\nare easier to read. \nwarning\n\n### Caution\n\nIf it's impossible to avoid using long labels, truncate the label using an ellipsis. \ncancel\n\n### Don't\n\nAvoid using long text labels that require wrapping. \ncancel\n\n### Don't\n\nAvoid creating a navigation drawer without icons, as this can make it difficult for users to navigate the app. \ncancel\n\n### Don't\n\nAvoid mixing icon navigation items with non-icon navigation items, as this can make the navigation experience confusing for users.\n\nNavigation drawers are foundational elements that represent your app's\nhierarchy and should be used to list only five to six primary\nnavigation destinations. \ncheck_circle\n\n### Do\n\nLimit the number of main navigation destinations in the navigation drawer to five to six for a better user experience. \ncancel\n\n### Don't\n\nAvoid adding too many navigation items as this can create a vertical scroll and make it harder for users to navigate the app."]]
