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.
Kaynaklar
| Tür | Bağlantı kur | Durum |
|---|---|---|
| Tasarım | Tasarım kaynağı (Figma) | Kullanılabilir |
| Uygulama | Jetpack Compose | Çok yakında |
Öne çıkanlar
- Listeler metin veya 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.
Varyantlar
Üç tür liste vardır: tek satırlık liste, iki satırlık liste ve üç satırlık liste.
- Tek satırlı liste: Her bir öğeyi bildiren tek bir satır. Bu basit tasarım, her bir öğenin diğerlerinden açıkça farklı olmasını sağlar.
- İ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üklenmeyi önler.
- Üç 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
- Simge: Belirli bir nesneyi ya da eylemi temsil eden ve genellikle bir fikri veya kavramı görsel olarak aktarmak için kullanılan küçük bir grafiktir.
- Üst Başlık: 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ı.
- Başlık: Bir tasarım öğesinin veya sayfanın ana başlığı olarak kullanılan, büyük ve kalın bir metin satırı.
- Alt başlık: Ana başlığın altında ek bilgi veya bağlam sağlayan daha kısa bir metin satırı.
- Kontrol: Kullanıcının karar girmesine olanak tanıyan etkileşimli bir öğedir.
Eyaletler
Özellikler
Kullanım
Listeler, dikey olarak düzenlenmiş metin ve resim gruplarıdır. Okuduğunu anlama özelliği için optimize edilmiş bir liste, kesintisiz tek bir öğe sütunundan oluşur. Liste öğeleri, simgeler ve metinle temsil edilen birincil ve ek işlemler içerebilir.
Yapılması gerekenler
Liste öğeleri düğme değildir. Öğelerin kapsayıcısı yok. Liste öğeleri, varsayılan olarak seçili değildir ve odaklanmamıştır.
Dikkat
Liste öğeleri için yalnızca gerektiğinde kapsayıcı arka planını kullanın.
Seçim kontrolleri
Liste öğeleriyle ilgili bilgileri ve işlemleri kontrol eder. Liste öğesinin ön veya son kenarına hizalanabilirler.
- Onay kutuları: Bir veya daha fazla liste öğesi seçin.
- Radyo düğmeleri: Listeden tam olarak bir öğe seçin.
- Anahtarlar: Bir kontrolü açın veya kapatın.
Yapılması gerekenler
Seçilen öğeyi listede net bir şekilde göstermek için bir simge seçim göstergesi kullanın. Bu, kullanıcıların seçtikleri öğeyi kolayca tanımlamalarına yardımcı olur ve genel kullanıcı deneyimini iyileştirir.
Yapılmaması gerekenler:
Bir listedeki seçimi belirtmek için yalnızca arka plan rengine güvenmekten kaçının.
Yapılmaması gerekenler:
O anda odakta olan öğe konusunda karışıklığa neden olabileceğinden liste öğesinin içine düğme yerleştirmekten kaçının.
Simgeler
Yapılması gerekenler
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 atlayın. Simgeleri bir işe yaramadığı ve ek bilgi vermediği durumlarda bir listede kullanmaktan kaçının.
Yapılmaması gerekenler:
Bir listedeki tüm öğeler için aynı simgeyi kullanmaktan kaçının. Bu durum, 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 eklediklerinde 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.
