M.AIM.AISoloLabsUI Sözlüğü · İçerik ve yerleşim

← UI Sözlüğü

Avatar grubu avatar group

bilinen diğer adları avatar group · stacked avatars · bindirmeli profiller · facepile

Böyle diyorsan: "üst üste binen yuvarlak fotoğraflar" · "yan yana dizilmiş profil resimleri" · "+3 yazan yuvarlaklar" → bunun adı avatar grubu.

Üst üste bindirilmiş yuvarlak profil görselleri; sığmayanlar +N sayacında toplanır.

Avatar grubu, bir işe ya da bir içeriğe katılan kişileri üst üste binmiş küçük dairelerle gösterir. Taşıdığı bilgi görsel değil SOSYALDİR: 'burada başkaları da var' der ve kalabalığı bir sayıdan daha hızlı hissettirir. Bu yüzden asıl karar kaç kişinin gösterileceği değil, gösterilmeyenlerin nasıl anlatılacağıdır — '+12' rozeti bir süs değil, listenin devamı olduğunu söyleyen bilgidir. İkinci mesele yedek gösterimdir: profil fotoğrafı olmayan kullanıcı boş bir daire olarak kalmamalı, baş harfleriyle temsil edilmelidir. Üçüncüsü erişilebilirliktir: on iki ayrı görselin tek tek okunması ekran okuyucu kullanıcısını boğar; grup tek bir anlamlı ifadeye indirgenmelidir.

Kapsam: Bu madde kişileri temsil eden bindirmeli görsel grubunu kapsar. Tek bir kişinin görseli avatarın kendisidir; sayısal bir durum göstergesi ise Rozet maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
AYMKZT
▸ +4'e tıkla, grup açılsın
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Ekip üyelerini avatar grubu olarak göster: daireler negatif kenar boşluğuyla üst üste binsin, her dairenin çevresinde zemin renginde ayırma halkası olsun, fotoğrafı olmayan üye baş harflerine düşsün, en çok 4 yüz görünsün ve kalanlar '+N' taşma avatarında toplansın (N = toplam − görünen).
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Avatar grubum bozuk; şu klasikleri sırayla ele: (1) negatif boşluk İLK daireye de uygulanmış, satır sola taşıyor; (2) +N toplamdan hesaplanmış (görünenler düşülmemiş), 4 kişi gizliyken +5 yazıyor; (3) sıralama ters — son eklenen ilkinin üstüne biniyor (z-index tanımsız); (4) ayırma halkası beyaza sabit, koyu temada parlıyor; (5) grup overflow: hidden bir kapsayıcıda, halkalar kırpılıyor; (6) kırık fotoğraf URL'i baş harf yedeğine düşmüyor, boş daire kalıyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Bindirmemargin-left: -10px

    Her dairenin bir öncekinin üstüne binmesi; negatif kenar boşluğuyla yapılır, kimin üstte kalacağını z-index belirler.

  • 2Ayırma halkasıborder (zemin renginde)

    Yüzlerin birbirine karışmasını önleyen ince çerçeve; rengi ZEMİNDEN alır — beyaza sabitlenirse koyu temada parlar.

  • 3Baş harf yedeğifallback

    Fotoğrafı olmayan (ya da yüklenemeyen) üye için renkli daire + baş harfler.

  • 4Taşma avatarı+N

    Yer bitince son daire yüz değil sayaç olur: +4 = 'dört kişi daha var'. Sayı, toplam eksi görünenlerdir.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ANormal3-5 avatar

    Birkaç kişi görünür. Bindirme miktarı okunabilirliği belirler: fazla bindirme yüzleri tanınmaz yapar.

  • BTaşan+N rozeti

    Gösterilenden fazlası var. '+12' tıklanabilirse tam listeyi açmalı; tıklanamayan bir sayı yalnız bilgi verir, merakı karşılamaz.

  • CFotoğrafsızbaş harf yedeği

    Görsel yok. Baş harfler ve tutarlı bir arka plan rengi kullanılır; boş gri daire kimliği tamamen siler.

  • DTek kişigrup gereksiz

    Bir kişi varsa bindirme anlamını kaybeder; tek avatar ve adı yazmak daha açıktır.

  • EÇevrimiçidurum noktası

    Avatarın köşesinde durum işareti. Nokta yalnız renkle anlatılmamalı; erişilebilir ada durum da katılmalı.

KODDAKİ ADLARI
CSSmargin-left: -10pxbindirmeyi yapan negatif boşluk
shadcn/uiAvatar + AvatarFallbackbaş harf yedeği
MUIAvatarGroup (max, total)+N'i kendisi hesaplar
Ant DesignAvatar.Grouptaşma sayacı hazır
ERİŞİLEBİLİRLİK & SIK HATA
  • Grubu tek bir anlamlı ifadeye indirge: 'Ayşe, Mehmet ve 12 kişi daha' gibi. On iki ayrı görselin tek tek okunması ekran okuyucu kullanıcısı için gürültüdür.
  • Dekoratif avatarlarda alt="" kullan; bilgi taşıyorsa kişinin adını yaz (WCAG 1.1.1). İkisi arasındaki farkı sen belirlersin: ad başka bir yerde yazılıysa görsel dekoratiftir.
  • '+N' bir düğmeyse gerçek düğme olsun ve ne yaptığını söylesin ('12 kişiyi daha göster'); süs olarak bırakılan sayı klavyeyle erişilemez.
  • Baş harf yedeğinde kontrastı kontrol et: pastel zemin üstüne beyaz harf çoğu zaman 4.5:1'i geçmez.
  • Çevrimiçi durumunu yalnız renkli noktayla anlatma; erişilebilir ada 'çevrimiçi' bilgisini de kat.
SIK KARIŞTIRILANLAR

Rozetten farkı. Avatar grubundaki '+12' KİMLERİ gösterir — listenin devamıdır ve tıklanınca kişileri açar. Rozet ise bir öğenin köşesinde NİCELİK bildirir (okunmamış sayısı) ve tıklanmaz. İkisi de küçük daire içinde sayı gösterir; ayrım, sayının neyi temsil ettiğidir: biri kişi listesi, diğeri durum.

Rozet sayfasına git →

Etiketten farkı. Avatar grubu KİŞİLERİ temsil eder ve görsel kimliğe dayanır; etiket ise kategori ya da filtre gibi soyut bir niteliği taşır ve metinle çalışır. Kişileri etiket olarak listelemek (isim çipleri) kalabalığı hissettirmez; avatar grubu tam da o hissi verdiği için vardır.

Etiket sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Rozet badgeEtiket chip / tagKart cardTablo table

AYNI AİLEDE · İÇERIK VE YERLEŞIM