Listeler

Listeler bir veya daha fazla ilgili öğenin görsel bir temsilidir. Bunlar genellikle bir dizi seçeneği görüntülemek için kullanılır.

Liste Kapağı

Kaynaklar

Tür Bağlantı Durum
Tasarım Tasarım kaynağı (Figma) Kullanılabilir
Uygulama Jetpack Compose Çok yakında

Öne çıkanlar

  • Listeler metin ve resimlerin sürekli bir koleksiyonudur.
  • Listeler doğal olmalı ve göz atılabilir olmalıdır.
  • Listeler, simgeler ve metinlerle temsil edilen birincil ve ek işlemler içeren öğelerden oluşur.

Varyasyonlar

Üç satırlı liste vardır: tek satırlık liste, iki satırlık liste ve üç satırlık liste.

Liste Anatomisi

  1. Tek satırlı liste: Her bir öğeyi ileten tek bir satır. Bu basit tasarım, her bir öğenin diğerinden net bir şekilde farklı olmasını sağlar.
  2. İki satırlı liste: Her bir öğeyi belirtmek için iki paralel çizgi kullanır. Bu yapılandırılmış tasarım, doğal okunabilirlik sağlar ve bilişsel aşırı yükü önler.
  3. Üç satırlı liste: Her bir öğeyi temsil etmek için üç paralel çizgi kullanır. Bu dekoratif tasarım, üst düzey bir görsel belirginlik sağlar.

Anatomi

Liste Anatomisi

  1. Simge: Belirli bir nesneyi veya eylemi temsil eden ve genellikle bir fikri veya kavramı görsel olarak aktarmak için kullanılan küçük bir grafiktir.
  2. Üst çizgi: Başlığın veya alt başlığın üzerinde görünen ve genellikle ek bağlam veya vurgu sağlamak için kullanılan kısa bir metin satırı.
  3. Başlık: Bir tasarım öğesinin veya sayfanın ana başlığı görevi gören büyük ve kalın bir metin satırı.
  4. Alt başlık: Ana başlığın altında ek bilgi veya bağlam sağlayan daha kısa bir metin satırı.
  5. Kontrol: Kullanıcının karar girmesine olanak tanıyan etkileşimli bir öğedir.

Eyaletler

Durumları Listeleme

Özellikler

Özellikleri Listeleme

Liste Yüksekliği Önerisi

Liste Aralığı

Kullanım

Listeler dikey olarak düzenlenmiş metin ve resim gruplarıdır. Okunduğunu anlama özelliği için optimize edilmiş bir liste, kesintisiz tek bir öğe sütunundan oluşur. Liste öğeleri, simgeler ve metinlerle gösterilen birincil ve ek işlemler içerebilir.

Liste öğeleri düğme değildir. Öğelerin kapsayıcısı yok. Liste öğeleri varsayılan olarak seçili değildir ve odaklanmamıştır.
Liste öğeleri için yalnızca gerektiğinde kapsayıcı arka planını kullanın.

Seçim kontrolleri

Liste öğeleriyle ilgili görüntülenen bilgileri ve işlemleri kontrol eder. Liste öğesinin ön veya son kenarına hizalanabilirler.

Seçim onay kutusu Seçim radyosu Seçim anahtarı
  1. Onay kutuları: Bir veya daha fazla liste öğesi seçin.
  2. Radyo düğmeleri: Listeden tam olarak bir öğe seçin.
  3. Anahtarlar: Bir kontrolü açın veya kapatın.
Listede seçili öğeyi net bir şekilde göstermek için bir simge seçim göstergesi kullanın. Bu, kullanıcıların hangi öğeyi seçtiklerini kolayca tanımlamalarına ve genel kullanıcı deneyimini iyileştirmesine yardımcı olur.
Bir listede seçimi belirtmek için yalnızca arka plan rengine güvenmekten kaçının.
Hangi öğenin geçerli olarak odakta olduğu konusunda karışıklığa neden olabileceğinden, liste öğesinin içine düğme yerleştirmekten kaçının.

Simgeler

Listede aynı türde içerik gösteriyorsanız görsel gürültüyü azaltmak ve kullanıcı deneyimini iyileştirmek için simgeleri çıkarın. Bir listede hiçbir amaca hizmet etmeyen ve ek bilgi sunmayan simgeleri kullanmaktan kaçının.
Bir listedeki tüm öğeler için aynı simgeyi kullanmaktan kaçının. Bu, kullanıcılar için görsel açıdan bunaltıcı ve kafa karıştırıcı olabilir. Bunun yerine, simgeleri yalnızca değer kattıklarında veya ek bilgi sağladıklarında kullanın.

Avatarlar ve resimler

Liste öğeleri, bir kişiyi veya varlığı temsil edecek şekilde dairesel kırpılmış resimler içerebilir.

Avatarlar ve Resimler