UI Liderlik Tablosu ve Görev Kartları: En İyi Uygulamalar
1) Neden hepsi: UI hedefleri
Leaderboard: "Kimin nerede olduğunu've neden oynayacağınızı anında açıklayın; En yakın hedefi göster (ap'den önce + N noktası).
Görev kartları: Uzun kuralları 10-30 dakika boyunca anlaşılabilir bir "eylem birimine" dönüştürün.
2) Liderlik Kurulu Bilgi Hiyerarşisi
Minimum sütun kümesi:1. Sabit bir genişliğe ve büyük bir sayıya sahip (#) yerleştirin.
2. Oyuncu (avatar/frame/title, short nickname) - tıklanabilir profil.
3. Puan/derecelendirme metriği (SP/MMR/olay noktaları) - sağa hizalanır.
4. Ödül/sıra bölgesi (nadirlik simgesi/ödül aralığı).
5. Zaman/aşama (canlı/eleme/finaller), bitiş zamanlayıcısı.
Desenler:- Çizginizi vurgulayın (yapışkan satır +'bana geri dön ").
- "Hedefe eşik": küçük kalıp "− 48 SP TOP-100."
- Yapıştırmayı bağlayın (aynı noktalar için "T-10").
3) Kontrol ve navigasyon
Filtreler: lig/bölüm, bölge, arkadaşlar, "sadece sağlayıcım".
Konuma göre (varsayılan), noktalara göre, giriş saatine göre, ödül bölgesine göre sıralayın.
Pagination vs sonsuz kaydırma:- Masaüstü - sayfalama + "kendinize", mobil - sonsuz kaydırma, ancak "başlangıca/kendinize".
- Jump-to Rank: Anlık geçiş için bir sıra giriş alanı (ölçek panoları için önemlidir).
4) Canlı güncellemeler (seğirme yok)
Diff güncellemeleri: Yalnızca gerçekten taşınan satırları değiştiririz.
Çizgi hareketinin animasyonu: 120-200 ms, gevşeme; Zıplamak yok.
Anti-titreme: Her 1-2 saniyede bir toplu güncellemeler (daha sık değil).
İyimser güncellemeler: yerel olarak puan ekleyin ve "senkronizasyonu" işaretleyin....
5) UI leaderboard'da bütünlük ve güvenlik
Kuralların açıklaması: düğme "Gözlükler nasıl sayılır?" başlığın yanında.
Anti-zorbalık: takma adın maske kısmı (seçenek), toksik bir isim hakkında şikayet - 1 tıklama.
Şüpheli hesapların işaretçisi: başkalarından gizli; Oyuncu - "puanlarınız kontrol edildi".
Bölüm ayrımı: görsel olarak farklı lig rozetleri, böylece güçlü olanlar yeni başlayanlarla karışmaz.
6) Bir görev kartının anatomisi (tek bakışta tasarım)
Başlık (≤ 40-50 karakter), görev türü simgesi.
Kısa açıklama (ne yapmalı, nerede, ne kadar).
Sayı/yüzde + zaman tahmini ile ilerleme çubuğu (≈ 20-25 dakika).
Zorluk (1-3 puan) ve ödül nadir (renk/yüz).
Ödüller: "Parasal" alt metin olmadan belirteçler/kozmetikler (küçük minyatürler).
Terim: yumuşak renk (son %10 turuncu/kırmızı) ile sona erene kadar zamanlayıcı.
CTA: "Start "/" Continue "/" Pick up "- bir ana düğme.
İkincil: "Görevi değiştir" (izin verilirse), "Daha fazla" (modal kurallar).
7) Görev kartı durumları
Kilitli: gri, "seviye 7'den sonra açılacak "; CTA = "Neye ihtiyacınız var? ».
Mevcut: türe göre renk; CTA = "Başlat".
Devam ediyor: ilerleme çubuğu etkin, CTA = "Devam".
Tamamlandı: yeşil kontrol; CTA = "Pick up" (etki ≤ 1 sn).
Süresi dolmuş: soluk; CTA = "Hide "/" Repeat in Season N ".
Beklemede (dürüstlük kontrolü): sarı kalıp "sonuç kontrolü 1-3 dakika".
8) Görsel dil ve erişilebilirlik
Nadir renkler: Ortak (nötr), Nadir (mavi), Epik (menekşe), Efsanevi (altın), Mitik (gökkuşağı aksanı).
Anlamsal renkler: başarı/ilerleme - yeşil, uyarılar - kehribar, son tarihler - kırmızı.
Kontrast ≥ 4. 5:1, fontlar ≥ mobilde 14-16 piksel.
Önemli olan her şey sadece renkli değildir (simgeler/desenler).
Thrifty VFX: 0. 6–1. 2 c, kontrol çakışması olmadan.
Anavar: masa kartları (2 sütun tablet, 1 sütun telefon); sabit başlıklar.
9) Yükleme durumları, boşluklar ve hatalar
Tablolar ve kartlar için iskeletler (3-5 satır/fayans).
Boş durum: kullanışlı metin + "Bir fırlatma görevi al".
Ağ hataları: anlaşılabilir, "Tekrar'ile; Çevrimdışı - önbelleği göster ve "son güncelleme: 14:02'yi işaretle.
10) Performans
Liste sanallaştırma (300 + satır).
Sprite/Lottie olarak simgeler (gereksiz yere bir SVG hayvanat bahçesi değil).
Debounce filtreleri/arama (300-500 ms).
Panolar/görevler için istemci önbellekleri ve ETag.
11) UI misyonlarında dürüst içerik ve kötüye kullanım karşıtı
Kısa "Nasıl çalışır": Şans, acıma mantığı, ağız koruyucuları, pazarlama bulutsusu yok.
Çiftlik karşıtı model: "çeşitlilik'e dikkat edin - sağlayıcı/bahis değiştirirken ilerleme daha hızlıdır.
"Görevi Değiştir" düğmesindeki bekleme süreleri ve tekrar yapabileceğiniz bir ipucu.
12) Gerçekten önemli olan metrikler
TO görev kartları, Başlangıç Oranı, Tamamlanma Oranı, Medyan TTC.
Görevden türetilmiş kozmetikler için Donanım Oranı/Süresi.
Leaderboard Engagement: "to yourself", "go to profile", görünürlük süresi üzerine tıklanır.
VFX/bildirimlerde Şikayet/Sessize Alma Oranı.
Görev/turnuvalara katılanlar için yapışkanlık (DAU/MAU) ve D7/D30 yükseltme.
SP tarafından Gini: Benzer oyun zamanlarında ilerleme düzgünlüğü.
13) A/B fikirleri
1. İlerleme çubuğu formatı: sayısal + görsel vs sadece görsel.
2. Zaman değerlendirmesi: göster/gösterme; Başlangıç üzerindeki etkisi.
3. CTA düzeni: bir büyük vs iki eşit düğme.
4. Varsayılan sıralama: yere göre ve ödül alanına göre.
5. Son tarih arka ışık eşiği: T-10 % vs T-20 % zaman.
6. Lider panosunda "kendine": vs düğmesi her zaman sabit bir dizedir.
14) JSON şemalarına örnekler (içerik> UI)
Görev kartı
Json
{
'id ":" m. s4. sağlayıcı. Çeşitlilik," "unvan": "Üç sağlayıcı aç", "özet": "30 dakika içinde 3 farklı sağlayıcıyla oyna", "zorluk": "orta", "est_time_min": 25, "ilerleme": {"geçerli": 2, "hedef": 3}, "ödüller": {"belirteçler": 10, "cosmetic_drop": {"nadirlik": "Nadir", "p": 0. 1}} ", expires_at": "2025-10-26T18: 00: 00Z," "state": "in_progress," "cta": {"label": "Continue", "deeplink": "app ://open/lobby? tab = sağlayıcılar"}
}
Leaderboard satırı
Json
{
"rank": 124, "user": {'id ":" u_59211, "" name ":" SeaFox "," avatar_frame": "legendary. Wave "}", skor ": 18420," lig ":" Gold I "," prize_band": "Top 100", "delta_to_next": 47", is_me": false "," aşama ":" eleme "," ends_at": "2025-10-24T21:00:00Z"
}
15) Mikrokopi (kısa ve net)
Görev başladı - "Hadi gidelim! ≈ 20 dakika kaldı".
İlerlemeyi teşvik etmek - "Ödülden önce 1 sağlayıcı daha".
Son tarih - "Zamanın %10'u, tek seferde zamanınız olacak".
Dürüstlük kontrolü - "Sonucu kontrol ederiz (3 dakikaya kadar) - ödül kaydedilir".
16) Yayın öncesi kontrol listesi
- 320 px'te okunabilen tablolar; "Kendine've yapışkan başlık var.
- Görev kartları'bir bakışta "açıktır: hedef, zaman, ödül, CTA.
- Titreme olmadan gerçek zamanlı güncelleme; Diff yamaları ve butch frekansı.
- Nasıl Çalışır ekranı: nokta/kap/nadirlik formülleri.
- Gürültü kontrolü: VFX sınırları/dak, gece sessiz modu.
- Erişilebilirlik: kontrast, sadece renk değil, klavye navigasyonu.
- Anti-kötüye kullanım: cooldowns "Misyonu değiştir", değişkenliği vurgulayarak.
- Metrikler ve A/B planı oluşturuldu; Günlükleri tıklayın ve senkronize edin.
Lider panosu ve görev kartlarının güçlü bir kullanıcı arayüzü, anında okunabilirlik, yumuşak dinamikler, dürüst şeffaflık ve kontrollü gürültüdür. Oyuncuya en yakın hedefi, anlaşılabilir ilerlemeyi ve düzgün VFX'i verin, güncellemeleri sabit tutun ve kuralları netleştirin. Daha sonra yönetim kurulu rekabetin motoru haline gelir ve görev kartları, katılımı ve elde tutmayı sistematik olarak artıran uygun bir "eylem birimi" haline gelir.