Listeler bir veya daha fazla ilgili öğenin görsel temsilidir. Bunlar genellikle bir seçenek koleksiyonunu 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 Oluşturma | Kullanılabilir |
Öne çıkanlar
- Listeler, kesintisiz bir metin veya resim koleksiyonudur.
- Listeler doğal ve taranabilir olmalıdır.
- Listeler birincil ve ek öğeleri içeren öğelerden oluşur. işlemler simge ve metinle temsil edilir.
Varyantlar
Üç tür liste vardır: tek satırlı liste, iki satırlı liste ve üç satırlık liste olabilir.
- Tek satırlık liste: Her bir öğeyi iletmek için tek bir satır. Bu kadar basit tasarım, her bir öğenin birbirinden net bir şekilde ayırt edilmesini sağlar.
- İki satırlı liste: Her bir öğeyi iletmek için iki paralel çizgi kullanır. Bu yapılandırılmış tasarım doğal okunabilirlik sağlar ve bilişsel okumayı aşırı yüklenme.
- Üç satırlı liste: Her bir öğeyi temsil etmek için üç paralel çizgi kullanır. Bu dekoratif tasarım, üst düzey görsel belirginlik sağlar.
Anatomi
- Simge: Genellikle belirli bir nesneyi veya işlemi temsil eden küçük bir grafik bir fikri veya kavramı görsel olarak aktarmak için kullanılır.
- Üst çizgi: Başlığın veya alt başlığın üzerinde görünen kısa bir metin satırı, sıklıkla ek bağlam veya vurgulama sağlamak için kullanılır.
- Başlık: Başlığın ana başlığı olarak işlev gören büyük, kalın bir metin satırı tasarım öğesi veya sayfa olabilir.
- Alt başlık: Ek bilgi sağlayan daha kısa metin satırı bağlamı hakkında daha fazla bilgi edinin.
- Kontrol: Kullanıcının bir karar girmesine olanak tanıyan etkileşimli bir öğe.
Eyaletler
Özellikler
Kullanım
Listeler, dikey olarak düzenlenmiş metin ve resim gruplarıdır. Okuduğunu anlaması için optimize edilmiş olan listede tek bir kesintisiz öğe sütunudur. Liste öğeleri, temsil edilen birincil ve ek işlemleri içerebilir daha fazla bağlam sunar.
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
Kapsayıcı arka planını yalnızca gerektiğinde liste öğeleri için kullanın.
Seçim kontrolleri
Liste öğeleri için görüntülenen bilgileri ve işlemleri kontrol eder. Bunlar birbiriyle uyumlu .
- Onay kutuları: Bir veya daha fazla liste öğesi seçin.
- Radyo düğmeleri: Tam olarak bir tane seçin öğesini seçin.
- Anahtarlar: Bir kontrolü açabilir veya kapatabilirsiniz.
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 hangi öğeyi seçtiklerini kolayca tanımlamalarına yardımcı olur ve genel kullanıcı deneyimini iyileştirir.
Yapılmaması gerekenler:
Bir listede seçimi belirtmek için yalnızca arka plan rengine güvenmeyin.
Yapılmaması gerekenler:
O anda hangi öğeye odaklanıldığı konusunda karışıklığa neden olabileceğinden liste öğesinin içine düğmeler 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. Bir listede amaç için olmayan simgeler kullanmaktan kaçının ve ek bilgi vermeyin.
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 kattıkları veya ek bilgi sundukları durumlarda kullanın.
Avatarlar ve resimler
Liste öğeleri, bir resmin gerçekleşebilir.
