Gezinme çekmecesi

Gezinme çekmeceleri, kullanıcıların farklı hedeflere ve özelliklere erişmesine olanak tanıdığından tüm TV uygulamalarının temel bileşenleridir. Gezinme çekmecesi, uygulamanın bilgi mimarisinin bel kemiğidir ve uygulama içinde gezinmek için açık ve sezgisel bir yol sağlar.

Mobil gezinme çekmecesinin aksine, TV'deki gezinme çekmecesinin hem genişletilmiş hem de daraltılmış durumları kullanıcı tarafından görülebilecektir.

Gezinme Çekmecesini Kapak

Kaynaklar

Tür Bağlantı 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 önce, 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: Sayfa içeriğini kenara iterek gezinme için ek alan oluşturmak üzere genişler.
  2. Modal gezinme çekmecesi: Çekmece genişletildiğinde okunabilirliği iyileştirmeye yardımcı olan bir kaplama ile uygulama içeriğinin üzerinde yer paylaşımı olarak görünü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. Profiller arasında geçiş yapmak veya arama işlemini tetiklemek için kullanılan bir düğme işlevi görür. Daraltılmış durumdayken, üst kapsayıcıda yalnızca simge 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 ve metnin bir kombinasyonunu içerir.
  3. Gezinme yolu: Navigation Rail, 3 ila 7 uygulama hedefini gösteren ve ana menü işlevi gören bir sütundur. Her hedefte bir metin etiketi ve isteğe bağlı bir simge bulunur. Bu seçenekler, daha iyi bağlam bilgisi için menü öğelerini gruplandırma seçeneğine sahiptir.
  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 çekmecesi 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çildiğinde sayfa otomatik olarak yeni hedefe güncellenir.

Kalıcı gezinme çekmecesi anatomisi

  1. Üst bölüm: Uygulama logosunu içerir. Profiller arasında geçiş yapmak veya bir arama işlemini tetiklemek için kullanılan bir düğme işlevi görür. Daraltılmış durumdayken, üst kapsayıcıda yalnızca simge 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 ve metnin bir kombinasyonunu içerir.
  3. Gezinme çubuğu: Ana menü görevi gören üç ila yedi uygulama hedefini gösteren sütun. Her hedefte bir metin etiketi ve isteğe bağlı bir simge bulunur. Bu seçenekler arasında, daha iyi bağlam bilgisi 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 üzerinde yer paylaşımlı olarak görünür ve çekmece genişletildiğinde okunabilirliği artıran bir kaplama vardır.
  • Gezinme güncellemeleri: Kullanıcı bir gezinme öğesi seçtiğinde gerçekleşir.

opaklık katmanı

Kalıcı gezinme çekmecesinde, çekmecenin arkasındaki kaplama, ç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 yüzey

Kalıcı Gezinme Çekmecesi

Düz kumaş

Özellikler

Özellik Genişliği

Teknik Özellik Dolgusu

Gezinme Öğesi Özellikleri

Kullanım

Aktif Gösterge

Etkin gösterge, 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 şekliyle gösterilir. Etkin gösterge, kullanıcıların uygulamada nerede olduklarını ve hangi hedefe göz attıklarını anlamalarına yardımcı olur. Etkin göstergenin gezinme çekmecesindeki diğer öğelerden net bir şekilde görülebildiğinden ve 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ölücü görsel bir karmaşaya neden olabileceğinden ve kullanıcılar için gereksiz bilişsel aşırı yüklenmeye yol açabileceğinden, bunları tutumlu bir şekilde kullanmak önemlidir.

Etkin göstergesi

Rozetler

Rozetler, ek bilgi sağlamak için gezinme öğelerine eklenebilen görsel işaretlerdir. Örneğin, bir akış uygulamasında mevcut olan yeni filmlerin sayısını belirtmek için bir rozet kullanılabilir. Rozetleri dikkatli 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 olduğundan, 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 mümkün değilse üç nokta kullanarak etiketi kırpın.
Sarmalanması gereken uzun metin etiketleri kullanmaktan kaçının.
Kullanıcıların uygulamada gezinmesini zorlaştırabileceği için simgesiz bir gezinme çekmecesi oluşturmaktan kaçının.
Simgeyle gezinme öğelerini simge olmayan gezinme öğeleriyle karıştırmaktan kaçının. Bu durum 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ı olarak sınırlandırın.
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.