Gezinme çekmecesi

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.

Kapaklı Gezinme Çekmecesi

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:

  1. Standart gezinme çekmecesi — Gezinme için ek alan oluşturmak üzere genişleyerek sayfa içeriğini kenara iter.
  2. 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

Kalıcı Gezinme Çekmecesi

Standart gezinme çekmecesi

Anatomi

Standart gezinme çekmecesi anatomisi

  1. Ü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.
  2. 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.
  3. 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.
  4. 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 anatomisi

  1. Ü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.
  2. Gezinme öğesi: Gezinme çubuğundaki her öğe, yalnızca simge daraltılmış durumdayken bir simge ile metnin bir kombinasyonunu içerir.
  3. 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.
  4. Scrim: Gezinme öğesi metninin daha iyi okunabilmesi için.
  5. Alt bölüm: Ayarlar, yardım veya profil gibi sayfalar için ideal olan bir ila üç işlem düğmesi olabilir.
  • Ç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

Gradyan dokusu

Kalıcı Gezinme Çekmecesi

Düz kumaş

Özellikler

Özellik Genişliği

Teknik Dolgu

Gezinme Öğesi Özellikleri

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

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

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

Rozet genişletildi

Rozet daraltıldı

Rozet daraltıldı

Etiketler

Gezinme çekmecesindeki etiketler, kolay okunabilmesi için açık ve kısa olmalıdır.

Uzun etiketler kullanmaktan kaçınmak imkansızsa, etiketi üç nokta kullanarak kırpın.
Sarmalama gerektiren uzun metin etiketleri kullanmaktan kaçının.
Kullanıcıların uygulamada gezinmesini zorlaştırabileceğinden, simge içermeyen bir gezinme çekmecesi oluşturmaktan kaçının.
Simgeyle gezinme öğelerini simge olmayan gezinme öğeleriyle karıştırmaktan kaçının. Bu, kullanıcılar için gezinme deneyimini kafa karıştırıcı hale getirebilir.

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.

Daha iyi bir kullanıcı deneyimi için gezinme çekmecesindeki ana gezinme hedeflerinin sayısını beş ila altı olacak şekilde sınırlandırın.
Dikey kaydırma yapabileceği ve kullanıcıların uygulamada gezinmesini zorlaştırabileceği için çok fazla gezinme öğesi eklemekten kaçının.