Listeler
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
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
Ö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.
check_circle
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.
warning
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.
check_circle
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.
cancel
Yapılmaması gerekenler:
Bir listede seçimi belirtmek için yalnızca arka plan rengine güvenmeyin.
cancel
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
check_circle
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.
cancel
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.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2024-08-19 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"İhtiyacım olan bilgiler yok"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Çok karmaşık / çok fazla adım var"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Güncel değil"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Çeviri sorunu"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Örnek veya kod sorunu"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Diğer"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Anlaması kolay"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Sorunumu çözdü"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Diğer"
}]
{"lastModified": "Son g\u00fcncelleme tarihi: 2024-08-19 UTC."}
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2024-08-19 UTC."]]