Kullanıcı profili arayüzü

1) İlkeler

1. Ekran başına bir düşünce. Profil = her biri bir CTA içeren kısa bağımsız bölümler kümesi.
2. Varsayılan güvenlik. 2FA/sessions/devices görünür durumları, basit eylem yolları.
3. Veri saydamlığı. Ne saklanır, neden, nasıl devre dışı bırakılır/indirilir/silinir.
4. Aşırı yükleme kişiselleştirme yok. Yalnızca deneyimi etkileyen gerçek ayarlar.
5. Bağlamı asla kaybetmeyin. Taslaklar, son bölüme geri dön, öngörülebilir URL.

2) Bilgi mimarisi

• Profil (avatar, isim, kişiler)
• Güvenlik (şifre, 2FA, cihazlar/oturumlar)
• Ödemeler (yöntemler, otomatik kaydedilmiş parçalar, geçmiş)
• Limitler (sorumlu oyun)
• KYC (durum, belge yükleme)
• Tercihler (dil, para birimi, oran formatı, hızlı bahisler, konular)
• Bildirimler (türler/kanallar, sessizlik/özet)
• Gizlilik ve veriler (görünürlük, DSAR/dışa aktarma, hesap silme)

Asla tam PAN/CVC göstermeyin; Yalnızca UX belirteçleri ve maskeleri.

3) Profil başlığı

Avatar (yükleme/kırpma), görüntüleme adı, kimlik/kullanıcı adı.
Durum Rozetleri: KYC: İnceleme Altında/Geçti, 2FA: Açık/Kapalı, Sorumlu Oyun: Aktif.
Hızlı bağlantılar: "Şifreyi değiştir", "E-postayı/telefonu onayla", "Limit belirle".

html
<header class="profile-head">
<img class="avatar" alt="Аватар пользователя">
<div>
<h1>Имя пользователя</h1>
<div class="badges"><span class="badge">KYC: На проверке</span><span class="badge">2FA: Выкл</span></div>
</div>
<button class="btn btn--primary">Загрузить документы</button>
</header>

4) Profil bölümü

Alanlar: isim, doğum tarihi, ülke, arayüz dili.
Kişiler: e-posta (doğrulama), telefon (OTP).
Yerel: dil ve ülkeye bağlı tarih/saat/para birimi.
Doğum tarihi sadece KYC'den sonra destek yoluyla düzenlenir.

UX: format istemleri, yumuşak maskeler, hata ayıklama ile otomatik kaydetme, başarının onaylanması.

5) Güvenlik

Parola: mevcut parola + kalite kurallarına (basınç göstergesi/istemleri) göre değiştirin, gereksinimleri geriye dönük olarak göstermeyin.
2FA: TOTP/SMS; Basit ana akış: "Enable ^ QR ^ backup codes".
Cihazlar ve oturumlar: aktif girdilerin listesi (cihaz/OS/konum/saat), CTA "Akım hariç hepsini sonlandırın".
Sosyal girişler: Onaylama ile bağlama/bağlantıyı kesme.

6) Ödemeler

Ödeme yöntemleri: kartlar (maske '1234'), A2A/wallets; Varsayılan durum.
Sonuçlar: Varsa, mikro aktarım doğrulaması ile kaydedilen ayrıntılar (IBAN/cüzdan).
İşlem geçmişi: türe/tarihe/miktara göre filtreler, CSV dışa aktarma.
Şeffaflık: Komisyonlar/ETA ve Süreç İçinde/Reddedildi/Hazır durumlar.

7) Limitler (Sorumlu Oyun)

Türleri: Mevduat, Oran, Zaman aşımları, Kendini dışlama.
UX: radyo dönemi (gün/hafta/ay) + miktar, açık metin "Yürürlüğe girecek"....
Zayıflamaya doğru değişim - gecikmeli; sıkılaştırma - hemen.

8) KYC

Stepper: Kişisel veriler - Belgeler - Gönderme - İnceleme altında.
Dosya gereksinimlerini temizleyin (tür/boyut/netlik) + önizleme.
Durum ve şartlar, hazırlık için bildirim kanalı, gönderilen belgelerin geçmişi.

9) Tercihler

Katsayıların biçimi ondalık/kesirli/Amerikan.
Hızlı bahisler: anahtar + "onay yok" uyarısı ve izin verilirse Geri Al.
Tema: açık/karanlık/sistemik; Görme engelliler için kontrast modu.
Coğrafi ve dil: yargı gereksinimlerini (içerik/blok listeleri) saklayın ancak hatırlayın.

10) Bildirimler

Kanallar: Uygulamada itme/e-posta/SMS/.
Gruplar: finansal, oyun, sosyal, pazarlama (varsayılan olarak orta).
"Rahatsız etmeyin": zaman aralıkları ve koşullar (örn. Geceleri pazarlama yok).
Önizleme: Bildirimin nasıl göründüğü, nerede kapatılacağı.

11) Gizlilik ve veriler

Profil görünürlüğü (sosyal işlevler ise): Takma ad/avatar/etkinlik gören.
Veri yükleme (DSAR): Teslim süresi olan bir arşiv için istek; Hazırlık hakkında bildirim.
Bir hesap silme: sonuçlarını açıklayın, grace-dönem, alternatif olarak "Dondur".
Onay Günlüğü: Çerezler/Pazarlama/Şartlar - Tarihler ve Sürümler.

12) Eylem geçmişi

Besleme: girişler/çıkışlar, şifre changes/2FA, ödeme ayrıntılarındaki değişiklikler, sınırlar.
Filtreler ve ihracat; geo-IP ve cihazların açıklaması.
CTA "Sen değil miydin?" Hızlı şifre değişikliği ve oturum sonlandırma akışı.

13) A11y ve yerelleştirme

Etiketler ve ipuçları "aria-describedby'ile bağlantılıdır; errors - 'role =' alert ''.
Kontrast ≥ AA, görünür ': odak-görünür', Sekme sırası görsele karşılık gelir.
'prefers-reduced-motion' - minimum animasyonlar.
Dil genişlemesi: Genişlikte %20-30 marj; Sayılar tabular ('font-variant-numeric: tabular-nums; ').

14) Mobil desenler

Çekmece olarak profil menüsü; Anahtar durumlar/CTA - en üstte.
Uzun formlar için altta Yapışkan-CTA ("Değişiklikleri Kaydet").
Alanların ölçeklendirilmesi, klavye türüne göre ('inputmode').
Bildirimler/tarih - sonsuz yükleme ve nöbetçi-gözlemci ile bant.

15) Boş, hatalar, durumlar

Boş: dost ipucu ve "sırada ne var" (yöntem ekle/2FA dahil).
Hata: neden + nasıl düzeltilir + Yeniden deneme; Girişi sıfırlamayın.
Meşgul: tüm ekranı kilitlemeden yerel önyükleyiciler; TFF ≤ 100 ms.

16) Metrikler

Anahtar ayarlarına göre Tamamlama Oranı (2FA, KYC, ödeme yöntemleri).
Tamamlanma Süresi bölümleri (şifre/2FA/KYC/limitleri).
Hata Formların oranı + Yeniden deneme başarı oranı.
Evlat edinme tercihleri (konu, hızlı bahisler, oran formatı).
Güvenlik duruşu: 2FA'lı kullanıcıların oranı, tamamlanan yabancı oturumların sayısı.

17) Anti-desenler

Gizli kritik ayarlar (2FA/limits) derinlemesine.
Bir modalde uzun anketler; Otomatik kaydetme yok.
Meşgul/onay olmadan sessiz gönderme.
Odağı ve "atlama" düzenini sıfırlayın; CLS resimler nedeniyle.
2FA/OTP kodun kopyalanmasının yasaklanması.
Pazarlama ve varsayılan kritik bildirimleri karıştırın.

18) Tasarım sistemi belirteçleri (örnek)

json
{
"profile": {
"sectionGap": 20,
"fieldHeight": 44,
"radius": 12
},
"security": {
"badge": { "radius": 8, "px": "4 8" },
"focusRing": { "width": 2, "offset": 2 }
},
"lists": {
"row": { "py": 12, "px": 16 },
"divider": 1
},
"motion": { "hoverMs": 160, "pressMs": 90 },
"a11y": { "contrastAA": true, "reduceMotion": true }
}

19) Snippet'lar

Aygıt/Oturum Listesi (HTML)

html
<ul class="sessions" role="list">
<li>
<div>Chrome · Windows · Киев</div>
<small>Последняя активность: 14:32</small>
<button class="btn btn--ghost">Выйти</button>
</li>
<li aria-current="true">
<div>Safari · iOS · Текущая сессия</div>
<small>Последняя активность: сейчас</small>
<button class="btn btn--ghost" disabled>Текущая</button>
</li>
</ul>
<button class="btn btn--secondary">Завершить все сеансы</button>

Katsayı format anahtarı (radyo)

html
<fieldset>
<legend>Формат коэффициентов</legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичные</label>
<label><input type="radio" name="odds" value="fractional"> Дробные</label>
<label><input type="radio" name="odds" value="american"> Американские</label>
</fieldset>

Ödeme yöntemi kartı (maskeleme)

html
<article class="pay-card">
<h4>Visa •••1234</h4>
<small>По умолчанию</small>
<div class="actions">
<button>Сделать основным</button>
<button class="danger">Удалить</button>
</div>
</article>

20) KG kontrol listesi

Anlam ve akış

• Bölümler mantıklıdır; Her ekranın bir ana CTA'sı vardır.
• URL/gezinme son bölümü geri yükler.

Formlar

• Doğru 'type/inputmode/autocomplete'; yumuşak maskeler, öngörülebilir dikkat.
• Debunking ile asenkron kontroller; Kaydetme verileri kaybetmez.

Güvenlik

• 2FA akışı anlaşılabilir; Yedekleme kodları indirmek için kullanılabilir.
• Oturumlar/cihazlar sonlandırılır, olaylar kaydedilir.
• Hassas alanlar günlüğe kaydedilmez/önbelleğe alınmaz.

iGaming özellikleri

• Gecikmeli giriş ve farklı dönemlerle sınırlar.
• KYC durumları ve belgeleri açıktır; Son tarihler ve bildirim kanalı görülebilir.
• Oran formatı ve hızlı bahisler reklamı yapıldığı gibi çalışır.

А11у/Localization

• AA ≥ kontrast; ': odak-görünür' bakın; Sekme sırası doğru.
• Metinler ve sayılar dile/para birimine uyarlanmıştır; RTL desteklenir (gerekirse).

Performans

• TFF ≤ 100 ms; CLS yok; Görüntüler tembel yükleniyor.
• Büyük listeler (geçmiş) sayfalanır/sanallaştırılır.

21) Tasarım sistemindeki belgeler

Компоненты: 'ProfileHeader', 'ProfileSection', 'SecurityPanel', 'SessionsList', 'PaymentMethodCard', 'LimitsForm', 'KYCStepper', 'PreferencesForm'.
Belirteçler: alanlar/yarıçaplar/odak/rozetler, CUS/limit durumları, başarı/hata/dikkat renkleri.
Desenler: "Bölüm başına bir CTA", "Risk için geri al/onayla", "Verileri dışa aktar/sil (DSAR)".
Yapma/Yapma: gizli güvenlik ayarları, pazarlama içeriklerini maskeleyen aşırı yüklenmiş formlar.

Kısa özet

Profil arayüzü bir güven merkezidir: basit, dürüst ve güvenli olmalıdır. Net mimari, hızlı ve öngörülebilir akış (2FA/KYC/limitler/ödemeler), düzgün formlar ve verilerle yapılan işin şeffaflığı, profili bir ürün desteğine dönüştürür ve özellikle iGaming için kritik olan destek yükünü azaltır.