מודלים ולוחות יציאה

1) מתי להשתמש במה

מודל (דיאלוג עם הרקע) - לפתרונות קריטיים ומשימות קצרות הדורשות תשומת לב מלאה: אישור פעולה, הסכמה משפטית, פעולות מסוכנות, צורות קצרות של שדות 1-2. נועל את הרקע.
מגירה/גיליון (לוח משיכה) - להרחבה במקום: פרטי אובייקט, עריכת מאפיינים, בחירה מהרשימה, ניווט מסייע. הרקע נראה לעין. ההקשר נשמר.

• אם הפעולה זקוקה לריכוז ואישור.
• מתי לשמור את ההקשר ולתת סקירה ”מקבילה” של המגירה.

2) מבנה ומימדים

מודלים

כותרת (דרושה) Gody # CTA (ראשי תיבות של Primary/Secondary/Destructive).
ממדים: S (480-560 px), M (640-720 px), L (840 px). בגיליון המסך הנייד.

מגירה/גיליון

כיוון: קצה ימני (שולחן עבודה, עריכה), תחתון (נייד, פעולות), לפעמים שמאלה (ניווט).
רוחב: 360-480 (S), 480-640 (M), 640-800 (L) בנייד: 90-100% רוחב/גובה.

גובה התוכן תמיד מוגבל, מגולל בפנים; כותרת/STA קבועים.

3) קופירייטינג וCTA

כותרת = פעולה/משמעות: אישור קצב, בחירת שיטת תשלום, KYC נדרש.
טקסט קצר, 1-2 משפטים. הימנע מנוסחאות מעורפלות.
CTA: אחד ראשי, הבא משני (”ביטול”), ואם יש צורך, הרסני.

לפעולות מסוכנות, הוסף הסבר קו אחד: "הפעולה היא בלתי הפיכה. תוכל לבטל בתוך 10 שניות (אם יהיה זמין) "

4) התנהגות ומצבים

פתיחה: תגובה מיידית מצורפת 100 ms, ואז אנימציה 120-180 ms.
סגירה: מהר יותר מפתיחה (80-140 ms), החזר את הפוקוס על ההדק.
עסוק: ”אריה-עסוק =” נכון ”” על מיכל, כפתור עם מנעול מחדש.
לא שמור (צורה מלוכלכת): בסגירה - אזהרת דו ־ שיח (”יש שינויים שלא נשמרו”).
בריחה/לחיצה על רקע: מקובל לשיח לא מסוכן; עבור כפתורים קריטיים בלבד.

5) זמינות (A11y)

מיכל: 'תפקיד =' דו-שיח 'ו' אריה-מודל = ”true” (עבור מודל אמיתי).
הכותרת מקושרת דרך 'אריה-תווית'; תיאור 'אריה-תיאורים'.
מלכודת מיקוד בתוך; המיקוד העיקרי הוא על הכותרת או הפריט האינטראקטיבי הראשון.
מחזיר את הפוקוס על ההדק המקורי לאחר הסגירה.
אין רקע גלילה: "מסמך. גופה עולה על גדותיה, מוסתרת, או אינרטית, על שאר הדום.
תמיכה במקלדת: Tab/Shift + Tab הם מחזוריים; Esc נסגר (אלא אם תסריט אסור).
תחשבו על ”מעדיף-מופחת-תנועה”: ביטול/פישוט אנימציות.

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-index.
הר תוכן בעצלות כאשר נפתח לראשונה, ללא ספירה לאחר סגירת אנימציה (או לתרגם offscreen).
אנימציה רק ”שינוי צורה/אופייה”; הימנע מטשטוש יקר/צללים גדולים מדי.
נעל את מגילת הרקע (groll-lock), שמור את המיקום הנוכחי כך שהוא לא ”יקפוץ” לאחר הסגירה.
לרשימות גדולות במגירה - שימוש וירטואליזציה.

7) תבניות ניידות

גיליון תחתון עבור פעולות/אישורים מהירים: swipe למטה מחוות לסגירה (עם סף).
דביק-CTA בתחתית; כפתור סגור - מלמעלה שמאלה.
indents safe-area (אזורי חריץ/מחווה).
המקלדת על המסך לא אמורה לחפוף את CTA; פריסה - ”הרמת” תוכן או לוח קבוע מעל המקלדת.

8) עיצוב תנועה

קלט: fade + light shift (מודאלי: לאורך Y, מגירה: לאורך ציר המראה). 120-180 ms.
פלט: קצר יותר (80-140 ms), מקל 'cubic-bezier (0. 2,0,0. 2,1)`.
רקע-אופציה היא 0 = 0. 4–0. 6. ללא פעימות ומבט אינסופי.
עבור ”מעדיף-מופחת תנועה”: אין שינוי, רק לדעוך.

9) ניהול סגירה

סגר מיידי רק לפעולות בטוחות.
אם יש טעות, אנחנו נשארים בדיאלוג, מראים את הסיבה ורטרי.

ברקע ביצוע - לסגור את הדו ־ שיח ולהראות את טוסט ”אנו מבצעים ברקע...”

10) תרחישי iGaming טיפוסיים

10. 1 אישור הצעה (מודל)

תוכן: אירוע, מקדם, כמות, רווח פוטנציאלי, תקופת תוקף מקדם.
כפתורים: ”לאשר” (ראשי), ”לבטל”.
עיכוב תבנית> 3 s: טקסט ”מחכה לאישור”... אם המקדם משתנה, עדכון הוגן.

10. 2 Cashout (מודל/גיליון)

מציג את כמות המזומנים הנוכחית ושעון הזמן של החלון.
אישור + אפשרות לבטל (אם הרגולציה מאפשרת).

10. 3 בחירת שיטת תשלום (מגירה)

רשימת שיטות עם עמלות/זמן הגעה משוער; תבחר את מספר הצורה המינית.

שמירת שיטת ברירת המחדל; חזור ללא אובדן קלט

10. 4 KYC (מגירה = מודל)

מגירה להעמסת מסמכים/הודעות.
מודאלי כאשר מנסים לסגור עם עומס לא שלם: אזהרה על לא נשמר.

10. 5 מגבלות משחק אחראיות (מודל)

רדיו ”יום/שבוע/חודש”, כמות שדה, שורה ”ייכנס לתוקף...”

11) אנטי דפוסים

מודלים מקוננים (מודלים מעל מודלים). השתמש בדו ־ שיח או ברצף שלב אחד.
מודלקה לצפייה רגילה בתוכן (מגירה טובה יותר/עמוד).
צלב נסתר או סוגר רק על ידי ”מיקרו-אזור”.
פעולה מסוכנת פי רשות לסגור ”על ידי רקע”.
צורה ארוכה במודל (להזיז את ה ־ IF למסך/פאנל נפרד).
אין מיקוד לחזור על ההדק.

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) מטריצות וניסויים

קצב פתיחה/השלמה: כמה פתחו והשלימו את הפעולה.
מפתיחה לחיצה על ראשי.
ביטול קצב וסיבות (Esc/רקע סגור נגד ”ביטול”).
שגיאה/שינוי קצב בתסריטים עמוסים.
A/B: מודאל נגד מגירה, טקסט CTA, סדר שדה, ”לאשר” vs ”לבטל”.

15) רשימת QA

זמינות

[ ] תפקיד = ”דו-שיח”, ”אריה-מודל” = ”נכון”, נכון ”אריה-labeledby/- describedby”.

[ ] מלכודת פוקוס עובדת; הפוקוס חוזר אל ההדק.

[ ] Esc נסגר (אם מותר); לשונית היא מחזורית.

[ ניגוד ] AA; זה לא רק צבע שמעביר משמעות.

התנהגות

[ ] TTFF 100 ms; אנימציה ב-120-180 ms/out 80-140 ms.

[ ] לנעול את הרקע ללא ”קפיצה” הדף.

[ ] שומר לא שמור בצורה מלוכלכת.

[ ] המדינה העמוסה, תקן את הטעויות.

ממשק

[ ] כותרת ברורה ואחד ראשי-CTA.

[ ] כפתור צולב/סגור זמין.

[ ממדי ] מסתגלים; על הנייד - גיליון עם מחווה.

ביצועים

[ ] פורטלים/z-index נכונים; בלי ”שידור”.

[ ] ייזום עצלן; רק שינוי-אופייה מונפשים.

16) תיעוד במערכת התכנון

רכיבים: 'מודל', 'מגירה/גיליון', 'שיח חשיבה', 'שומר לא זמין'.
אסימונים: ממדים, חריצים, צללים, אנימציות, רקע, מיקוד-טבעת.
מדריכים: ”כאשר מודל נגד מגירה”, ”תבניות קופירייטינג”, פעולות מסוכנות (אישור/ביטול), מנעול גלילה ופורטלים, הפחתת תנועה.
Do/Don 't Gallery: מודלים מקוננים (לא), צורות ארוכות במודל (לא), גיליון להרחבת הקשר (do).

תקציר

מודלקה - להחלטות תחת תשומת לב מלאה, מגירה - להרחיב את ההקשר מבלי לשבור את הזרימה. שמור על מבנה פשוט, CTA חד משמעי, ואינטראקציות צפויות ונגישות. כבד את ההופעה, נעל את הרקע וחזור להתמקד. בתרחישי iGaming, זה משפיע ישירות על אמון: אישורי הימור, קאשאוט, בחירת שיטת תשלום, ו-KYC חייבים להיות הוגנים, מהירים ומאובטחים.