Μέθοδοι και πίνακες εξόδου

1) Πότε να χρησιμοποιήσετε το

Τρόπος (διάλογος με το πλαίσιο) - για κρίσιμες λύσεις και σύντομες εργασίες που απαιτούν πλήρη προσοχή: επιβεβαίωση της δράσης, νομική συναίνεση, επικίνδυνες λειτουργίες, σύντομες μορφές ≤ 1-2 πεδία. Κλειδώνει το φόντο.
Συρτάρι/Φύλλο (πίνακας έλξης) - για επέκταση εντός του τόπου: λεπτομέρειες αντικειμένου, επεξεργασία χαρακτηριστικών, επιλογή από τον κατάλογο, βοηθητική πλοήγηση. Το φόντο είναι ορατό → το πλαίσιο διατηρείται.

• Εάν η δράση χρειάζεται συγκέντρωση και επιβεβαίωση → Modal.
• Πότε να αποθηκεύσετε το πλαίσιο και να δώσετε μια «παράλληλη» επισκόπηση του → συρταριού.

2) Δομή και διαστάσεις

Τρόπος μεταφοράς

Τίτλος (απαιτούμενος) → φορέας → CTA (πρωτοβάθμια/δευτεροβάθμια/καταστροφική).
Διαστάσεις: S (480-560 px), M (640-720 px), L (840 px). Στο κινητό - φύλλο πλήρους οθόνης.

Σχέδιο/φύλλο

Κατεύθυνση: δεξιά άκρη (επιφάνεια εργασίας, επεξεργασία), κάτω (κινητό, ενέργειες), μερικές φορές αριστερά (πλοήγηση).
Πλάτος: 360-480 (S), 480-640 (M), 640-800 (L) Σε κινητό: 90-100% πλάτος/ύψος.

Το ύψος του περιεχομένου είναι πάντα περιορισμένο, κυλώντας μέσα. η κεφαλίδα/STA είναι σταθερή.

3) Copywriting και CTA

Τίτλος = Δράση/Σημασία: Επιβεβαίωση επιτοκίου, επιλογή μεθόδου πληρωμής, απαιτείται KYC.
Σύντομο κείμενο, 1-2 προτάσεις. Αποφύγετε ασαφείς τύπους.
CTA: μία πρωτοβάθμια, επόμενη δευτεροβάθμια («ακύρωση») και, εάν είναι απαραίτητο, καταστροφική.

Για ριψοκίνδυνες ενέργειες, προσθέστε μια εξήγηση μιας γραμμής: "Η δράση είναι μη αναστρέψιμη. Θα είστε σε θέση να ακυρώσετε εντός 10 δευτερολέπτων (εάν υπάρχει) "

4) Συμπεριφορά και καταστάσεις

Άνοιγμα: άμεση απόκριση ≤ 100 ms και στη συνέχεια εικονογράφηση 120-180 ms.
Κλείσιμο: ταχύτερο από το άνοιγμα (80-140 ms), εστίαση στην ενεργοποίηση.
Απασχολημένος: 'aria-busy = «true»' στο δοχείο, κουμπί με retry lock.
Μη αποθηκευμένη (βρώμικη μορφή): κατά το κλείσιμο - προειδοποίηση διαλόγου («Υπάρχουν μη αποθηκευμένες αλλαγές»).
Διαφυγή/κλικ στο φόντο: αποδεκτή για μη επικίνδυνους διαλόγους. για κρίσιμα - μόνο ρητά κουμπιά.

5) Διαθεσιμότητα (A11y)

Περιέκτης: 'role =' dialog '' and 'aria-modal =' true '' (for a real modal).
Ο τίτλος συνδέεται με το «aria-labelledby». περιγραφή - «aria-descripedby».
Παγίδα εστίασης εντός· η κύρια εστίαση είναι στην κεφαλίδα ή το πρώτο διαδραστικό στοιχείο.
Επιστρέφει την εστίαση στην αρχική σκανδάλη μετά το κλείσιμο.
Χωρίς φόντο κύλισης: 'έγγραφο. το σώμα {υπερχείλιση: κρυμμένο;} 'ή' αδρανές 'στο υπόλοιπο της DOM.
Υποστήριξη πληκτρολογίου: Η καρτέλα/καρτέλα Shift + είναι κυκλική. Το Esc κλείνει (εκτός αν απαγορεύεται το σενάριο).
Σκεφτείτε 'prefers-μειωμένη κίνηση': απενεργοποίηση/απλοποίηση κινουμένων σχεδίων.

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) Επιδόσεις και αρχιτεκτονική

Απόδοση μέσω μιας πύλης (στρώμα πάνω από μια εφαρμογή) → λιγότερα προβλήματα z-ευρετηρίου.
Τοποθετήστε το περιεχόμενο τεμπέλικα όταν ανοίξετε για πρώτη φορά, ξεφορτωθείτε μετά το κλείσιμο του animation (ή μεταφράστε το offscreen).
Κινείται μόνο «μετασχηματισμός/αδιαφάνεια», να αποφεύγονται οι ακριβές θολερές/υπερμεγέθεις σκιές.
Κλειδώστε τον κύλινδρο φόντου (κλείδωμα κύλισης), κρατήστε την τρέχουσα θέση έτσι ώστε να μην «πηδήξει» μετά το κλείσιμο.
Για μεγάλες λίστες στο συρτάρι - χρησιμοποιήστε εικονοποίηση.

7) Κινητά μοτίβα

Κάτω φύλλο για ταχείες ενέργειες/επιβεβαιώσεις: ρίξτε κάτω χειρονομίες για να κλείσετε (με κατώφλι).
Κολλώδες CTA στο κάτω μέρος· Κλείστε το κουμπί - από πάνω αριστερά.
Περιπτώσεις ασφαλούς περιοχής (εγκοπές/περιοχές χειρονομιών).
Το πληκτρολόγιο στην οθόνη δεν πρέπει να επικαλύπτει το CTA. διάταξη - περιεχόμενο «ανύψωσης» ή σταθερό πίνακα πάνω από το πληκτρολόγιο.

8) Σχεδιασμός κίνησης

Είσοδος: εξασθενημένη + φωτεινή μετατόπιση (τρόπος: κατά μήκος Y, συρτάρι: κατά μήκος του άξονα εμφάνισης). 120-180 ms.
Έξοδος: μικρότερη (80-140 ms), χαλάρωση 'cubic-bezier (0. 2,0,0. 2,1)`.
Η αδιαφάνεια υποβάθρου είναι 0 → 0. 4–0. 6. Χωρίς παλμούς και ατελείωτη λάμψη.
Για «προνομιούχα μειωμένη κίνηση»: καμία μετατόπιση, μόνο εξασθενημένη.

9) Διαχείριση κλεισίματος

Άμεσο κλείσιμο μόνο για ασφαλείς λειτουργίες.
Αν υπάρχει κάποιο λάθος, παραμένουμε στο διάλογο, δείχνουμε το λόγο και το Retry.
Στην εκτέλεση υποβάθρου - κλείσιμο του διαλόγου και εμφάνιση της πρόποσης «Εκτελούμε στο παρασκήνιο»..., συν την ενότητα «Ιστορία».

10) Τυπικά σενάρια iGaming

10. 1 Επιβεβαίωση προσφοράς (Modal)

Περιεχόμενο: συμβάν, συντελεστής, ποσό, δυνητικό κέρδος, περίοδος ισχύος συντελεστή.
Κουμπιά: «Επιβεβαίωση» (πρωτογενής), «Ακύρωση».
Σχέδιο καθυστέρησης> 3 s: κείμενο «Αναμονή επιβεβαίωσης»... εάν ο συντελεστής μεταβάλλεται, μια ειλικρινής επικαιροποίηση.

10. 2 Cashout (Modal/Φύλλο)

Εμφάνιση του τρέχοντος ποσού μετρητών και χρονοδιακόπτη παραθύρων.
Επιβεβαίωση + πιθανό Undo (εάν το επιτρέπει ο κανονισμός).

10. 3 Επιλογή μεθόδου πληρωμής (συρτάρι)

Κατάλογος μεθόδων με επιτροπές/ΕΤΑ Επιλέγει το → της μίνι μορφής.

Αποθήκευση της προκαθορισμένης μεθόδου. Απόδοση χωρίς απώλεια εισροών

10. 4 KYC (συρτάρι - modal)

Συρτάρι για τη φόρτωση εγγράφων/κινήσεων.
Μέθοδος όταν προσπαθείτε να κλείσετε με ατελές φορτίο: προειδοποίηση για μη αποθηκευμένο.

10. 5 Όρια υπεύθυνου παιχνιδιού (Modal)

Radio «Day/Week/Month», πεδίο ποσού, σειρά «Θα τεθεί σε ισχύ σε»....

11) Αντι-μοτίβα

Nested modals (modal over modal). Χρήση μιας ακολουθίας διαλόγου ή βήματος.
Modalka για τακτική προβολή περιεχομένου (καλύτερο συρτάρι/σελίδα).
Κρυμμένος σταυρός ή κλείσιμο μόνο με «μικροζώνη».
Ριψοκίνδυνη δράση → άδεια κλεισίματος «κατά βάθος».
Μακρύ σχήμα σε τρόπο (μετακινήστε το → σε ξεχωριστή οθόνη/πίνακα).
Καμία εστίαση δεν επιστρέφει στην ενεργοποίηση.

12) Μάρκες συστήματος σχεδιασμού (παράδειγμα)

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) Αποσπάσματα συμπεριφοράς

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) Μετρήσεις και πειράματα

Ποσοστό ανοικτής τιμής/ολοκλήρωσης ανά τρόπο μεταφοράς: πόσοι άνοιξαν και ολοκλήρωσαν τη δράση.
Χρόνος έως τη λήψη απόφασης: Από το άνοιγμα έως το κλικ στο Primary.
Ποσοστό και λόγοι απόρριψης (Esc/background close vs «Cancel»).
Σφάλμα/Ρυθμός επαναπροσδιορισμού σε πολυσύχναστα σενάρια.
A/B: modal vs συρτάρι, κείμενο CTA, σειρά πεδίου, «επιβεβαιώστε» vs «undo».

15) Κατάλογος ελέγχου QA

Διαθεσιμότητα

• "ρόλος =" διάλογος "',' aria-modal =" true "', σωστή' aria-labelledby/-desreded '.
• Έργα παγίδας εστίασης. η εστίαση επιστρέφει στη σκανδάλη.
• Η esc κλείνει (εάν επιτρέπεται). Η καρτέλα είναι κυκλική.
• Αντίθεση ≥ AA; Δεν είναι μόνο το χρώμα που μεταδίδει νόημα.

Συμπεριφορά

• TTFF ≤ 100 ms, animation σε 120-180 ms/out 80-140 ms.
• Κλειδώστε το φόντο χωρίς να «πηδήξετε» τη σελίδα.
• Μη αποθηκευμένη φρουρά σε βρώμικη μορφή.
• Πολυάσχολη κατάσταση, διόρθωση Retry/λάθη.

Διεπαφή

• Καθαρή κεφαλίδα και ένα πρωτογενές CTA.
• Διατίθεται ένα σταυροειδές/κλειστό κουμπί.
• Οι διαστάσεις είναι προσαρμοστικές. στο κινητό φύλλο με χειρονομία.

Απόδοση

• Οι πύλες/ο δείκτης z είναι σωστές. χωρίς «διαβίβαση».
• Τεμπέλης αρχικοποίηση? μόνο μετασχηματισμός/αδιαφάνεια είναι κινούμενα σχέδια.

16) Τεκμηρίωση στο σύστημα σχεδιασμού

Συστατικά μέρη: 'Modal', 'Drawer/Sheet', 'FamilyDialog', 'UnsavedGuard'.
Μάρκες: διαστάσεις, περιπτώσεις, σκιές, κινούμενα σχέδια, φόντο, δακτύλιος εστίασης.
Οδηγοί: «When modal vs συρτάρι», μοτίβα αντιγραφής, επικίνδυνες ενέργειες (επιβεβαίωση/αναίρεση), κλείδωμα ρόλων και πύλες, μειωμένη κίνηση.
Do/Don 't gallery: ένθετα modals (don 't), μακριές μορφές σε modal (don), φύλλο για επέκταση του πλαισίου (do).

Σύντομη Περίληψη

Modalka - για αποφάσεις υπό πλήρη προσοχή, συρτάρι - να επεκτείνει το πλαίσιο χωρίς να σπάσει η ροή. Διατηρήστε τη δομή απλή, σαφή CTA, και τις αλληλεπιδράσεις προβλέψιμες και προσβάσιμες. Σεβασμός των επιδόσεων, κλείδωμα του φόντου και εστίαση της επιστροφής. Στα σενάρια iGaming, αυτό επηρεάζει άμεσα την εμπιστοσύνη: οι επιβεβαιώσεις στοιχημάτων, το cashout, η επιλογή μεθόδων πληρωμής και η KYC πρέπει να είναι δίκαιες, γρήγορες και ασφαλείς.