Gezinme çekmeceleri, kullanıcıların farklı hedeflere ve özelliklere erişmesine olanak tanıdığından TV uygulamalarının temel bileşenleridir. Gezinme çekmecesi, uygulamanın bilgi mimarisinin bel kemiğidir ve uygulamada gezinmek için net ve sezgisel bir yol sağlar.
Mobil gezinme çekmecesinin aksine, TV'deki gezinme çekmecesinde kullanıcı tarafından görülebilen hem genişletilmiş hem de daraltılmış durumlar bulunur.
Kaynaklar
Tür | Bağlantı kur | Durum |
---|---|---|
Tasarım | Tasarım kaynağı (Figma) | Kullanılabilir |
Uygulama |
Jetpack Compose (navigationDrawer)
Jetpack Compose (ModalnavigationDrawer) |
Kullanılabilir |
Öne çıkanlar
- Hedefler, kullanıcının önem derecesine göre sıralanır. Sık gidilen yerler en başta ve alakalı hedefler ise birlikte gruplandırılır.
- Daraltıldığında hem standart hem de kalıcı gezinme çekmeceleri için gezinme çubuğu gerekir.
Varyantlar
İki tür gezinme çekmecesi stili vardır:
- Standart gezinme çekmecesi — Gezinme için ek alan oluşturmak üzere genişleyerek sayfa içeriğini kenara iter.
- Modal gezinme çekmecesi: Uygulama içeriğinin üzerinde yer paylaşımlı olarak görünür. Çekmece genişletildiğinde okunabilirliği artırmaya yardımcı olan bir örtüyle kaplıdır.
Standart gezinme çekmecesi
Anatomi
- Üst bölüm: Uygulama logosunu içerir. Profilleri değiştirmek veya arama işlemini tetiklemek için kullanılan bir düğme olarak işlev görür. Daraltılmış durumdayken yalnızca simge üst kapsayıcıda görünür durumda kalır.
- Gezinme öğesi: Gezinme çubuğundaki her öğe, yalnızca simge daraltılmış durumda görünür olmak üzere bir simge ile metnin bir kombinasyonunu içerir.
- Gezinme treni: Navigation Rail, 3 ila 7 uygulama hedefinin gösterildiği ve ana menü işlevi gören bir sütundur. Her hedefin 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 sunulur.
- Alt bölüm: Ayarlar, yardım veya profil gibi sayfalar için ideal olan bir ila üç işlem düğmesi olabilir.
Davranış
- Gezinme çekmecesini genişletme: 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çtiğinde sayfa otomatik olarak yeni hedefi içerecek şekilde güncellenir.
Kalıcı gezinme çekmecesi
Anatomi
- Üst bölüm: Uygulama logosunu içerir. Profilleri değiştirmek veya bir arama işlemini tetiklemek için kullanılan bir düğme olarak işlev görür. Daraltılmış durumdayken yalnızca simge üst kapsayıcıda görünür durumda kalır.
- Gezinme öğesi: Gezinme çubuğundaki her öğe, yalnızca simge daraltılmış durumdayken bir simge ile metnin bir kombinasyonunu içerir.
- Gezinme çubuğu: Ana menü işlevi gören üç ila yedi uygulama hedefini gösteren sütun. Her hedefte bir metin etiketi ve isteğe bağlı bir simge bulunur. Bu simgeler arasında, daha iyi bağlam için menü öğelerini gruplandırma seçeneği yer alır.
- Scrim: Gezinme öğesi metninin daha iyi okunabilmesi için.
- Alt bölüm: Ayarlar, yardım veya profil gibi sayfalar için ideal olan bir ila üç işlem düğmesi olabilir.
Davranış
- Çekmece genişletme: Uygulama içeriğinin üst kısmında yer paylaşımlı olarak görünür ve çekmece genişletildiğinde okunabilirliği artıran bir ekran kaplaması bulunur.
- Navigasyon güncellemeleri: Kullanıcı bir gezinme öğesi seçtiğinde gerçekleşir.
Katmanlı
Kalıcı gezinme çekmecesinde, çekmecenin arkasındaki örtü, çekmece içeriğinin okunabilmesini sağlar. Kullanıcı arayüzünün farklı varyasyonlarını oluşturmak için gezinme çekmecesinin arkasında gradyan veya düz bir yüzey kullanabilirsiniz.
![Standart Gezinme Çekmecesi](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/gradient-scrim.webp?authuser=5&hl=tr)
Gradyan dokusu
![Kalıcı Gezinme Çekmecesi](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/solid-scrim.webp?authuser=5&hl=tr)
Düz kumaş
Özellikler
Kullanım
Aktif Gösterge
Etkin göstergesi, görüntülenen gezinme çekmecesinin hedefini vurgulayan görsel bir işarettir. Gösterge, genellikle çekmecedeki diğer öğelerden görsel olarak farklı bir arka plan şekli ile temsil edilir. Etkin 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 net bir şekilde görülebildiğinden ve gezinme çekmecesindeki diğer öğelerden daha kolay ayırt edilebildiğinden emin olun.
![Etkin göstergesi](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/modal-drawer-selected.webp?authuser=5&hl=tr)
Ayırıcılar (isteğe bağlı)
Ayırıcılar, daha iyi bir düzen sağlamak amacıyla gezinme çekmecesinde hedef gruplarını ayırmak için kullanılabilir. Bununla birlikte, çok fazla bölme unsuru görsel karmaşaya neden olabileceğinden ve kullanıcılarda gereksiz bilişsel aşırı yüke yol açabileceğinden, bunları dikkatli bir şekilde kullanmak önemlidir.
![Etkin göstergesi](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/dividers.webp?authuser=5&hl=tr)
Rozetler
Rozetler, ek bilgi sağlamak için gezinme öğelerine eklenebilen görsel işaretlerdir. Örneğin, rozet bir akış uygulamasında kullanılabilen yeni filmlerin sayısını belirtmek için kullanılabilir. Rozetleri tutumlu ve yalnızca gerektiğinde kullanın. Aksi takdirde kullanıcı arayüzü meşgul ve karışık görünebilir. Rozetleri kullanırken açık ve kolay anlaşılır olduklarından ve kullanıcının uygulamada gezinmesini engellemediğinden emin olun.
![Rozet Genişletildi](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/badge-expand.webp?authuser=5&hl=tr)
Rozet genişletildi
![Rozet daraltıldı](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/badge-collapse.webp?authuser=5&hl=tr)
Rozet daraltıldı
Etiketler
Gezinme çekmecesindeki etiketler, kolay okunabilmesi için açık ve kısa olmalıdır.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/labels-do.webp?authuser=5&hl=tr)
Dikkat
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/label-dont.webp?authuser=5&hl=tr)
Yapılmaması gerekenler:
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/no-icons.webp?authuser=5&hl=tr)
Yapılmaması gerekenler:
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/no-mixing-icons.webp?authuser=5&hl=tr)
Yapılmaması gerekenler:
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.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/navigation-count-do.webp?authuser=5&hl=tr)
Yapılması gerekenler
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/navigation-count-dont.webp?authuser=5&hl=tr)