الوسائط ولوحات الخروج

1) متى تستخدم ما

Modal (حوار مع الخلفية) - للحلول الحاسمة والمهام القصيرة التي تتطلب اهتمامًا كاملاً: تأكيد العمل، والموافقة القانونية، والعمليات الخطرة، والأشكال القصيرة ≤ المجالات 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) كتابة الإعلانات و CTA

العنوان = الإجراء/المعنى: تأكيد المعدل، تحديد طريقة الدفع، مطلوب KYC.
نص قصير، 1-2 جملة. تجنب الصيغ الغامضة.
CTA: مدرسة ابتدائية واحدة، ثانوية تالية («إلغاء»)، وإذا لزم الأمر، مدمرة.

بالنسبة للأفعال المحفوفة بالمخاطر، أضف تفسيرًا من سطر واحد: "الإجراء لا رجعة فيه. ستتمكن من الإلغاء في غضون 10 ثوانٍ (إذا كان متاحًا) "

4) السلوك والحالات

الافتتاح: استجابة فورية ≤ 100 مللي ثانية، ثم الرسوم المتحركة 120-180 مللي ثانية.
الإغلاق: أسرع من الفتح (80-140 مللي ثانية)، أعد التركيز إلى الزناد.
مشغول: أغنية مشغولة = «حقيقية» على الحاوية، زر مع قفل إعادة المحاولة.
غير محفوظ (شكل قذر): عند الإغلاق - تحذير حواري («هناك تغييرات غير محفوظة»).
الهروب/انقر على الخلفية: مقبول للحوارات غير الخطرة ؛ للأزرار الحرجة - فقط الأزرار الصريحة.

5) التوافر (A11y)

الحاوية: 'role = «dialog»' و 'aria-modal = «true»' (للحصول على وسيلة حقيقية).
يتم ربط العنوان عبر «aria-labelledby» ؛ الوصف - 'وصف أغنية'.
فخ التركيز في الداخل ؛ ينصب التركيز الأساسي على الرأس أو العنصر التفاعلي الأول.
يعيد التركيز إلى المشغل الأصلي بعد الإغلاق.
لا توجد خلفية تمرير: "مستند. الجسم {فائض: مخفي ؛} 'أو' خامل 'على بقية DOM.
دعم لوحة المفاتيح: علامة تبويب/تحول + علامة تبويب دورية ؛ يغلق Esc (ما لم يتم كتابته محظورًا).
ضع في اعتبارك «prefers-lowing-motion»: تعطيل/تبسيط الرسوم المتحركة.

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.
قم بتثبيت المحتوى بتكاسل عند فتحه لأول مرة، أو عدم عده بعد إغلاق الرسوم المتحركة (أو ترجمة خارج الشاشة).
تحريك «التحويل/التعتيم» فقط ؛ تجنب الظلال الضبابية/الكبيرة باهظة الثمن.
اقفل لفة الخلفية (قفل التمرير)، احتفظ بالموضع الحالي حتى لا «يقفز» بعد الإغلاق.
بالنسبة للقوائم الكبيرة في الدرج - استخدم الافتراضية.

7) أنماط الهاتف المحمول

الورقة السفلية للإجراءات/التأكيدات السريعة: مرر الإيماءات لأسفل لإغلاقها (مع الحد الأدنى).
Sticky-CTA في الأسفل ؛ زر إغلاق - من أعلى اليسار.
المسافات الفاصلة بين المناطق الآمنة (مناطق الشق/الإيماءات).
يجب ألا تتداخل لوحة المفاتيح التي تظهر على الشاشة مع CTA ؛ تخطيط - محتوى «رفع» أو لوحة ثابتة فوق لوحة المفاتيح.

8) تصميم الحركة

المدخلات: تتلاشى + تحول الضوء (الوسيلة: على طول Y، الدرج: على طول محور المظهر). 120-180 م.
الناتج: أقصر (80-140 مللي ثانية)، تخفيف 'cubic-bezier (0. 2,0,0. 2,1)`.
Background-Opacity هو 0 → 0. 4–0. 6. بدون نبضات ووهج لا نهاية له.
لـ «يفضل الحركة المخفضة»: لا تحول، يتلاشى فقط.

9) إدارة الإغلاق

الإغلاق الفوري فقط للعمليات الآمنة.
إذا كان هناك خطأ، فإننا نبقى في الحوار، ونظهر السبب وريتري.
في تنفيذ الخلفية - أغلق الحوار وأظهر الخبز المحمص «ننفذه في الخلفية»... بالإضافة إلى قسم «التاريخ».

10) سيناريوهات iGaming النموذجية

10. 1 تأكيد العطاء (مودال)

المحتوى: الحدث والمعامل والكمية والمكاسب المحتملة وفترة صلاحية المعامل.
الأزرار: «تأكيد» (أساسي)، «إلغاء».
نمط التأخير> 3 s: نص «في انتظار التأكيد»... ؛ إذا تغير المعامل، تحديث صادق.

10. 2 صرف نقدي (مودال/ورقة)

يعرض مبلغ النقود الحالي ومؤقت النوافذ.
التأكيد + التراجع المحتمل (إذا سمحت اللوائح بذلك).

10. 3 اختيار طريقة الدفع (درج)

قائمة الأساليب المتبعة مع اللجان/اتفاقات التجارة التفضيلية ؛ اختر → من نموذج.

حفظ الطريقة الافتراضية ؛ العودة دون فقدان المدخلات

10. 4 KYC (درج → مودال)

درج لتحميل المستندات/المطالب.
المودال عند محاولة الإغلاق بحمل غير مكتمل: تحذير من غير محفوظ.

10. 5 حدود اللعب المسؤولة (مودال)

راديو «يوم/أسبوع/شهر»، حقل الكمية، السطر «سيدخل حيز التنفيذ في»....

11) الأنماط المضادة

الوسائط المتداخلة (الأسلوب فوق الأسلوب). استخدم حوارًا واحدًا أو تسلسل خطوات.
مودالكا لمشاهدة المحتوى بانتظام (درج/صفحة أفضل).
صليب مخفي أو يغلق فقط بواسطة «منطقة صغيرة».
الإجراء المحفوف بالمخاطر → الإذن بالإغلاق «حسب الخلفية».
شكل طويل في طريقة (نقل → إلى شاشة/لوحة منفصلة).
لا تركيز يعود إلى الزناد.

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/background close مقابل "Cancel').
معدل الخطأ/إعادة التجربة في النصوص المزدحمة.
A/B: مودال مقابل درج، نص CTA، ترتيب ميداني، «تأكيد» مقابل «التراجع».

15) قائمة QA المرجعية

توافر

• «دور =» حوار «»، «aria-modal» = «صحيح»، صحيح «aria-labelledby/- descedby».
• أعمال فخ التركيز ؛ التركيز يعود إلى الزناد.
• يغلق Esc (إذا سمح بذلك) ؛ علامة التبويب دورية.
• التباين ≥ AA ؛ ليس اللون فقط هو الذي ينقل المعنى.

السلوك

• TTFF ≤ 100 mm ؛ الرسوم المتحركة في 120-180 ms/out 80-140 ms.
• قفل الخلفية دون «القفز» على الصفحة.
• الحارس غير المراقب في شكل قذر.
• حالة مشغولة، إعادة/أخطاء صحيحة.

واجهة

• رأسية واضحة وواحدة أولية CTA.
• زر تقاطع/إغلاق متاح.
• الأبعاد قابلة للتكيف ؛ على ورقة الهاتف المحمول مع لفتة.

الأداء

• البوابات/الفهرس z صحيحة ؛ بدون «نقل».
• الاستهلال الكسول ؛ فقط التحول/التعتيم هو الرسوم المتحركة.

16) التوثيق في نظام التصميم

المكونات: «Modal»، «Drawer/Sheet'،» ConfirmeDialog «،» UnsavedGuard'.
الرموز: الأبعاد، المسافات، الظلال، الرسوم المتحركة، الخلفية، حلقة التركيز.
الأدلة: «عندما تكون الوسيلة مقابل الدرج»، أنماط كتابة الإعلانات، الإجراءات المحفوفة بالمخاطر (تأكيد/التراجع)، قفل التمرير والبوابات، تقليل الحركة.
افعل/لا تفعل المعرض: الوسائط المتداخلة (لا تفعل)، الأشكال الطويلة في الوسطية (لا تفعل)، ورقة لتوسيع السياق (افعل).

موجز موجز

مودالكا - للقرارات تحت الاهتمام الكامل، الدرج - لتوسيع السياق دون كسر التدفق. اجعل الهيكل بسيطًا، ولا لبس فيه CTA، ويمكن التنبؤ بالتفاعلات والوصول إليها. احترم الأداء وقفل الخلفية وعودة التركيز. في سيناريوهات iGaming، يؤثر هذا بشكل مباشر على الثقة: يجب أن تكون تأكيدات الرهان، والنقد، واختيار طريقة الدفع، و KYC عادلة وسريعة وآمنة.