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ı | 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.
- 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.
- İ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.
- Üç 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 veya eylemi temsil eden ve genellikle bir fikri veya kavramı görsel olarak aktarmak için kullanılan küçük bir grafiktir.
- Ü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ı.
- 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ı.
- 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. 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.
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 görüntülenen 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
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.
Yapılmaması gerekenler:
Bir listede seçimi belirtmek için yalnızca arka plan rengine güvenmekten kaçının.
Yapılmaması gerekenler:
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
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 çıkarın. Bir listede hiçbir amaca hizmet etmeyen ve ek bilgi sunmayan simgeleri kullanmaktan kaçının.
Yapılmaması gerekenler:
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.
