Avatar

Ne zaman kullanılır

Avatar, bir kişiyi ya da şirketi küçük bir alanda tanıtır: liste satırı, yorum, kullanıcı menüsü, ekip üyeleri. Görsel yoksa baş harfler aynı işi görür; böylece satırlar hizasını korur.

Ne zaman kullanılmaz

• Bir ürünün ya da içeriğin görseli için: Avatar kimlik içindir; fotoğraf ve ürün görseli için img kullanın.
• Bir simge için: Eylemi ya da türü anlatan simge için Icon kullanın.
• Durumu tek başına anlatmak için: Durum noktası yardımcıdır; önemli durumu Badge ile metin olarak yazın.
• Tıklanabilir profil için: Avatar etkileşimli değildir; bir bağlantının ya da butonun içine koyun.

Anatomi

1. Kök: 24-64 px kutu; kişi için daire, şirket için radius-md kare. role="img" ve adı taşır.
2. Görsel (Avatar.Image): yüklenince 110 ms içinde belirir; alt boştur.
3. Yedek (Avatar.Fallback): ad yüklenene kadar ya da hiç yüklenmezse baş harfler; ad yoksa simge.
4. Durum (Avatar.Status): sağ alt uçta nokta, 2 px yüzey halkası.
5. Grup (Avatar.Group): örtüşen avatarlar ve “+N” sayacı.

Davranış

• Görsel yüklenirken yedek görünür. delay ile yedeği geciktirerek hızlı bağlantıda baş harf titremesini önleyebilirsiniz.
• Görsel yüklenince yedeğin yerini alır ve opaklıkla belirir. Yüklenemezse yedek kalır.
• Baş harfler adın ilk iki kelimesinin ilk harfidir, en fazla 2 karakter; Provider diline göre büyük harf yapılır.
• Avatar odak almaz ve etkileşime girmez.
• Grupta max aşılırsa kalanlar “+N” ile sayılır.

Yönergeler

Adı yanında yazılıysa avatarı süsleyin

Ad avatarın yanında görünüyorsa decorative verin; ekran okuyucu adı iki kez okumaz.

Kullanıcı 1

YapınAd yazılı; avatar süs olarak işaretli.

K1Kullanıcı 1

YapmayınAd hem yanında yazılı hem avatarda okunuyor.

Gerçek ad verin

name her zaman kişinin ya da şirketin tam adı olmalı.

K2

YapınTam ad: doğru baş harfler ve anlamlı ad.

K

YapmayınGenel bir ad: baş harfler ve ekran okuyucu çıktısı anlamsız.

Aynı yerde tek boyut

Bir listedeki avatarlar aynı boyutta olsun.

K1K2

YapınTüm satırlarda aynı boyut.

K1K2

YapmayınKarışık boyutlar hizayı bozuyor.

İçerik

• name olarak kişinin ya da şirketin tam adını verin: “Kullanıcı 1”, “Örnek Ltd”.
• Görsele alternatif metin yazmayın; Avatar alt değerini boş bırakır ve adı kökte verir.
• Grup aria-label değerini ekibi anlatan kısa bir ad yapın: “Ekip”.

İlgili bileşenler

• Badge: Durumu metinle yazmak için.
• Icon: Kimlik değil, tür ya da eylem simgesi için.
• ListItem: Başında Avatar olan liste satırı için.