Modaller ve çıkış panelleri

1) Ne zaman kullanılacağı

Modal (arka planla diyalog) - tam dikkat gerektiren kritik çözümler ve kısa görevler için: eylemin onaylanması, yasal rıza, tehlikeli işlemler, kısa formlar ≤ 1-2 alanları. Arka planı kilitler.
Çekmece/Levha (çekmece paneli) - yerinde uzantı için: nesne ayrıntıları, nitelik düzenleme, listeden seçim, yardımcı gezinme. Arka plan görünür - bağlam korunur.

• Eylem konsantrasyon ve onay gerekiyorsa - Modal.
• Ne zaman bağlamı kaydetmek ve Çekmece bir "paralel" genel bakış vermek.

2) Yapı ve boyutlar

Modal

Başlık (gerekli) - vücut - CTA (Birincil/İkincil/Yıkıcı).
Boyutlar: S (480-560 px), M (640-720 px), L (≤ 840 px). Mobil - tam ekran sayfasında.

Çekmece/Levha

Yön: sağ kenar (masaüstü, düzenleme), alt (mobil, eylemler), bazen sol (gezinme).
Genişlik: 360-480 (S), 480-640 (M), 640-800 (L) Mobilde: %90-100 genişlik/yükseklik.

İçeriğin yüksekliği her zaman sınırlıdır, içeride kaydırılır; Başlık/STA sabittir.

3) Metin Yazarlığı ve CTA

Başlık = Eylem/Anlam: Oranı Onayla, Ödeme Yöntemini Seç, KYC Gerekli.
Kısa metin, 1-2 cümle. Belirsiz formüllerden kaçının.
CTA: Bir Birincil, bir sonraki İkincil ("İptal") ve gerekirse Yıkıcı.

Riskli eylemler için 1 satırlık bir açıklama ekleyin: "Eylem geri döndürülemez. 10 saniye içinde iptal edebileceksiniz (varsa) "

4) Davranış ve durumlar

Açılış: Anında yanıt ≤ 100 ms, sonra animasyon 120-180 ms.
Kapatma: Açılıştan daha hızlı (80-140 ms), odağı tetiğe döndürün.
Meşgul: Konteynerde 'aria-busy = "true"', yeniden deneme kilidi olan düğme.
Kaydedilmemiş (kirli form): kapanışta - iletişim uyarısı ("Kaydedilmemiş değişiklikler var").
Arka planda kaçış/tıklama: Tehlikeli olmayan diyaloglar için kabul edilebilir; Kritik - sadece açık düğmeler için.

5) Kullanılabilirlik (A11y)

Container: 'role = "dialog've' aria-modal =" true "'(gerçek bir modal için).
Başlık 'aria-labelledby'ile bağlantılıdır; Açıklama - 'aria-description by'.
Odak tuzağı içinde; Birincil odak başlık veya ilk etkileşimli öğedir.
Kapattıktan sonra odağı orijinal tetikleyiciye döndürür.
Kaydırma arka planı yok: 'belge. DOM'un geri kalanında body {overflow: hidden;} 'veya' inert '.
Klavye desteği: Tab/Shift + Tab döngüseldir; Esc kapanır (komut dosyası yasaklanmadıkça).
'Prefers-reduced-motion'ı düşünün: animasyonları devre dışı bırakma/basitleştirme.

html
<div class="backdrop" data-open hidden></div>
<div class="dialog" role="dialog" aria-modal="true" aria-labelledby="d-title" aria-describedby="d-desc" hidden>
<h2 id =" d-title "> Confirm Bid </h2>
<p id =" d-desc "> Sum of 200 ₴ by factor 1. 85</p>
<div class="actions">
<button class =" btn btn--primary "> Confirm </button>
<button class =" btn btn--ghost "> Cancel </button>
</div>
</div>

6) Performans ve mimari

Bir portal üzerinden oluşturma (bir uygulamanın üstündeki katman) - daha az z-indeks sorunu.
İçeriği ilk açıldığında tembel bir şekilde bağlayın, animasyonu kapattıktan sonra bırakın (veya ekran dışına çevirin).
Yalnızca 'transform/opacity' animasyon uygulayın; pahalı bulanıklık/büyük boy gölgelerden kaçının.
Arka plan kaydırmasını (kaydırma kilidi) kilitleyin, kapattıktan sonra "atlamaması" için geçerli konumu koruyun.
Çekmecedeki büyük listeler için sanallaştırmayı kullanın.

7) Mobil desenler

Hızlı eylemler/onaylar için alt sayfa: kapatmak için hareketleri aşağı kaydırın (eşikle).
Altta yapışkan-CTA; Kapat düğmesi - sol üstten.
Güvenli alan girintileri (çentik/hareket alanları).
Ekran klavyesi CTA ile çakışmamalıdır; Düzen - "kaldırma" içeriği veya klavyenin üzerinde sabit bir panel.

8) Hareket tasarımı

Giriş: solma + ışık kayması (modal: Y boyunca, çekmece: görünüm ekseni boyunca). 120-180 ms.
Çıkış: daha kısa (80-140 ms), easing 'cubic-bezier (0. 2,0,0. 2,1)`.
Background-Opacity değeri 0-0'dır. 4–0. 6. Titreşimler ve sonsuz parlama olmadan.
'Prefers-reduced-motion' için: kayma yok, sadece soluk.

9) Kapanış yönetimi

Sadece güvenli operasyonlar için derhal kapatma.
Bir hata varsa, diyalogda kalırız, nedenini gösterir ve yeniden deneriz.
Arka planda yürütme - diyaloğu kapatın ve "Arka planda yürütüyoruz"..., artı "Geçmiş" bölümünü tost gösterin.

10) Tipik iGaming Senaryoları

10. 1 Teklif onayı (Modal)

İçerik: olay, katsayı, miktar, potansiyel kazanç, katsayı geçerlilik süresi.
Düğmeler: "Onayla" (birincil), "İptal".
Gecikme desen> 3 s: metin "Onay bekliyor"...; katsayı değişirse, dürüst bir güncelleme.

10. 2 Cashout (Modal/Sheet)

Geçerli cashout miktarını ve pencere zamanlayıcısını görüntüler.
Onay + olası Geri Alma (düzenleme izin veriyorsa).

10. 3 Bir ödeme yöntemi seçme (Çekmece)

Komisyonlar/ETA ile yöntemlerin listesi; Mini formun ½'sini seçer.

Varsayılan yöntemi kaydetme; Girdi kaybı olmadan geri dönüş

10. 4 KYC (Çekmece - Modal)

Belgeleri/istemleri yüklemek için çekmece.
Eksik yükle kapatmaya çalışırken modal: kaydedilmemiş hakkında uyarı.

10. 5 Sorumlu oyun limitleri (Modal)

Radyo "Gün/Hafta/Ay", miktar alanı, satır "Yürürlüğe girecek"....

11) Anti-desenler

İç içe modaller (modal üzeri modal). Tek bir diyalog veya adım dizisi kullanın.
İçeriğin düzenli olarak görüntülenmesi için Modalka (daha iyi çekmece/sayfa).
Gizli çapraz veya sadece "microzone'ile kapanış.
Riskli eylem - "arka plana göre" kapatma izni.
Bir modalda uzun şekil (+'yı ayrı bir ekrana/panele taşıyın).
Tetiklemeye odaklanma geri dönüşü yok.

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

json
{
"dialog": {
"radius": 12,
"shadow": "var(--elev-4)",
"sizes": { "s": 520, "m": 680, "l": 840 },
"backdropOpacity": 0. 5,
"padding": "20 24",
"gap": 16
},
"drawer": {
"width": { "s": 360, "m": 480, "l": 640 },
"edge": "right",
"radius": 12,
"shadow": "var(--elev-4)"
},
"motion": {
"inMs": 160,
"outMs": 120,
"ease": "cubic-bezier(0. 2,0,0. 2,1)",
"reduce": true
},
"a11y": {
"useAriaModal": true,
"focusTrap": true,
"returnFocus": true
}
}

css
.backdrop[data-open]{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:saturate(80%); opacity:1; transition:opacity. 16s}
.dialog,[data-drawer]{position:fixed; background:var(--bg-elevated); border-radius:12px; box-shadow:var(--elev-4);}
.dialog{inset:auto; left:50%;top:50%;transform:translate(-50%,-50%); max-width:840px; width:min(100% - 32px, var(--dialog-w,680px));}
[data-drawer="right"]{top:0; right:0; height:100%;width:var(--drawer-w,480px); transform:translateX(0)}
.dialog[hidden],.backdrop[hidden]{display:none}

13) Davranış parçacıkları

js const openBtn = document. getElementById('open');
const dlg = document. querySelector('.dialog');
let prevFocus;

function openDialog() {
prevFocus = document. activeElement;
dlg. hidden = false; document. body. style. overflow = 'hidden';
const focusable = dlg. querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
(focusable[0]        dlg). focus();
function onKey(e){
if(e. key==='Escape') return closeDialog();
if(e. key!=='Tab') return;
const first = focusable[0], last = focusable[focusable. length-1];
if(e. shiftKey && document. activeElement===first){ e. preventDefault(); last. focus(); }
else if(!e.shiftKey && document. activeElement===last){ e. preventDefault(); first. focus(); }
}
dlg. addEventListener('keydown', onKey);
dlg. dataset. off = ()=> dlg. removeEventListener('keydown', onKey);
}
function closeDialog() {
dlg. dataset. off && dlg. dataset. off();
dlg. hidden = true; document. body. style. overflow = '';
prevFocus && prevFocus. focus();
}

js let startY=0, delta=0;
const sheet = document. querySelector('.sheet');
sheet. addEventListener('touchstart', e => startY = e. touches[0].clientY);
sheet. addEventListener('touchmove', e => {
delta = Math. max(0, e. touches[0].clientY - startY);
sheet. style. transform = `translateY(${delta}px)`;
});
sheet. addEventListener('touchend', () => {
if (delta > 120) sheet. classList. remove('open'); else sheet. style. transform = '';
delta = 0;
});

14) Metrikler ve deneyler

Modala göre Açık Oran/Tamamlama Oranı: Kaç kişi eylemi açtı ve tamamladı.
Karar Verme Süresi: Açılıştan Birincil'e tıklamaya kadar.
Dismit Oranı ve nedenleri (Esc/background close vs "Cancel").
Meşgul komut dosyalarında Hata/Yeniden Deneme Oranı.
A/B: modal vs çekmece, CTA metni, alan sırası, "onayla" vs "geri al".

15) KG kontrol listesi

Kullanılabilirlik

• 'role = "dialog"', 'aria-modal =' true '', correct 'aria-labelledby/-describedby'.
• Odak tuzağı çalışır; Odak tetiğe döner.
• Esc kapanır (izin verilirse); Sekme döngüseldir.
• AA ≥ kontrast; Anlamı ileten sadece renk değildir.

Davranış

• TFF ≤ 100 ms; Animasyon 120-180 ms/çıkış 80-140 ms.
• Sayfayı "atlamadan" arka planı kaydırarak kilitleyin.
• Kirli formda kaydedilmemiş koruma.
• Meşgul durum, doğru Yeniden deneme/hatalar.

Arayüz

• Temiz başlık ve bir Birincil-CTA.
• Bir çapraz/kapatma düğmesi mevcuttur.
• Boyutlar uyarlanabilir; Cep telefonunda - bir jest ile sayfa.

Performans

• Portallar/z-indeksi doğrudur; "Yayın" olmadan.
• Tembel başlatma; Yalnızca transform/opaklık canlandırılır.

16) Tasarım sistemindeki belgeler

Bileşenler: 'Modal', 'Çekmece/Sayfa', 'ConfirmDialog', 'KaydedilmemişKoruma'.
Belirteçler: boyutlar, girintiler, gölgeler, animasyonlar, arka plan, odak halkası.
Kılavuzlar: "Ne zaman modal vs çekmece", metin yazarlığı desenleri, riskli eylemler (onayla/geri al), kaydırma kilidi ve portallar, küçültme hareketi.
Do/Don't gallery: iç içe modallar (don't), modalda uzun formlar (don't), bağlamı genişletmek için sayfa (do).

Kısa Özet

Modalka - tam dikkat altındaki kararlar için, çekmece - akışı bozmadan bağlamı genişletmek için. Yapıyı basit, CTA'yı açık ve etkileşimleri öngörülebilir ve erişilebilir tutun. Performansa saygı gösterin, arka planı kilitleyin ve odağı döndürün. İGaming senaryolarında, bu doğrudan güveni etkiler: bahis onayları, nakit ödeme, ödeme yöntemi seçimi ve KYC adil, hızlı ve güvenli olmalıdır.