مدل ها و پانل های خروجی

1) چه زمانی از چه چیزی استفاده کنیم

مودال (گفتگو با پس زمینه) - برای راه حل های انتقادی و وظایف کوتاه که نیاز به توجه کامل دارند: تایید عمل، رضایت قانونی، عملیات خطرناک، فرم های کوتاه ≤ زمینه های 1-2. پسزمینه را قفل میکند.
کشو/ورق (پانل کشویی) - برای فرمت در محل: جزئیات شی، ویرایش ویژگی، انتخاب از لیست، ناوبری کمکی. پس زمینه قابل مشاهده است → زمینه حفظ شده است.

• اگر عمل نیاز به تمرکز و تایید → معین.
• هنگامی که برای ذخیره زمینه و به یک نمای کلی «موازی» → کشو.

2) ساختار و ابعاد

مدال ها

عنوان (مورد نیاز) → بدن → CTA (اولیه/ثانویه/مخرب).
ابعاد: S (480-560 پیکسل)، M (640-720 پیکسل)، L (≤ 840 پیکسل). در تلفن همراه - ورق تمام صفحه.

کشو/ورق

جهت: لبه راست (دسکتاپ، ویرایش)، پایین (تلفن همراه، اقدامات)، گاهی اوقات سمت چپ (ناوبری).
عرض: 360-480 (S)، 480-640 (M)، 640-800 (L) در تلفن همراه: 90-100٪ عرض/ارتفاع.

ارتفاع محتوا همیشه محدود است، پیمایش در داخل ؛ هدر/STA ثابت هستند.

3) کپی رایت و CTA

عنوان = عمل/معنی: تایید نرخ، انتخاب روش پرداخت، KYC مورد نیاز است.

متن کوتاه، 1-2 جمله. اجتناب از فرمول های مبهم

CTA: یک اولیه، ثانویه بعدی («لغو») و در صورت لزوم مخرب.

برای اقدامات خطرناک، یک توضیح 1 خطی اضافه کنید: "این عمل غیر قابل برگشت است. شما قادر خواهید بود در عرض 10 ثانیه (در صورت موجود بودن) لغو کنید

4) رفتار و دولت ها

باز کردن: پاسخ فوری ≤ 100 میلی ثانیه، سپس انیمیشن 120-180 میلی ثانیه.
بسته شدن: سریع تر از باز کردن (80-140 میلی ثانیه)، بازگشت تمرکز به ماشه.
مشغول: «aria-busy =» true «» در ظرف، دکمه با قفل مجدد.
ذخیره نشده (فرم کثیف): در بستن - محاوره هشدار («تغییرات ذخیره نشده وجود دارد»).
فرار/کلیک بر روی پس زمینه: قابل قبول برای گفت و گوهای غیر خطرناک ؛ برای بحرانی - فقط دکمه های صریح.

5) در دسترس بودن (A11y)

Container: «role =» dialog «و» aria-modal = «true» (برای یک مودال حقیقی).
عنوان از طریق «aria-labelledby» مرتبط است ؛ description - 'aria-descripedby'.
تله تمرکز در داخل ؛ تمرکز اصلی بر روی هدر یا اولین آیتم تعاملی است.
بازگشت تمرکز به ماشه اصلی پس از بسته شدن.
بدون پس زمینه پیمایش: "سند. بدن {overflow: پنهان ؛} 'یا' بی اثر 'در بقیه DOM.
پشتیبانی از صفحه کلید: Tab/Shift + Tab چرخه ای هستند. ESC بسته (مگر اینکه اسکریپت ممنوع).
«prefers-reduced-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-index.
هنگامی که برای اولین بار باز می شود، محتوا را به آرامی باز کنید، پس از بستن انیمیشن (یا ترجمه خارج از صفحه).
فقط «تبدیل/کدورت» را متحرک کنید ؛ اجتناب از سایه های گران قیمت/بزرگ.
قفل اسکرول پس زمینه (اسکرول قفل)، نگه داشتن موقعیت فعلی به طوری که آن را «پرش» پس از بسته شدن نیست.
برای لیست های بزرگ در کشو - استفاده از مجازی سازی.

7) الگوهای تلفن همراه

برگه پایین برای اقدامات سریع/تایید: کشیدن حرکات به پایین برای بستن (با آستانه).
CTA چسبنده در پایین ؛ دکمه بستن - از بالا سمت چپ.
تورفتگی های منطقه امن (مناطق شکاف/ژست).
صفحه کلید روی صفحه نمایش نباید با CTA همپوشانی داشته باشد ؛ طرح - محتوای «بلند کردن» یا پانل ثابت بالای صفحه کلید.

8) طراحی حرکت

ورودی: محو شدن + تغییر نور (معین: در امتداد Y، کشو: در امتداد محور ظاهر). 120-180 میلی ثانیه

خروجی: کوتاه تر (80-140 میلی ثانیه)، easing 'cubic-bezier (0. 2,0,0. 2,1)`.
کدورت پس زمینه 0 → 0 است. 4–0. 6. بدون ضربان و درخشش بی پایان.
برای 'prefers-reduced-motion': بدون تغییر، فقط محو شدن.

9) مدیریت بسته شدن

بسته شدن فوری فقط برای عملیات ایمن.
اگر خطایی وجود داشته باشد، ما در گفتگو باقی می مانیم، دلیل را نشان می دهیم و سعی می کنیم.
در اجرای پس زمینه - محاوره را ببندید و نان تست «ما در پس زمینه اجرا می کنیم»...، به علاوه بخش «تاریخچه».

10) سناریوهای iGaming معمولی

10. 1 تأیید پیشنهاد (معین)

محتوا: رویداد، ضریب، مقدار، سود بالقوه، مدت اعتبار ضریب.
دکمه ها: «تایید» (اولیه)، «لغو».
الگوی تأخیر> 3 s: متن «در انتظار تأیید»... ؛ اگر ضریب تغییر کند، به روز رسانی صادقانه.

10. 2 نقدی (معین/ورق)

مقدار cashout فعلی و تایمر پنجره را نمایش می دهد.
تایید + ممکن است لغو (اگر مقررات اجازه می دهد).

10. 3 انتخاب یک روش پرداخت (کشو)

لیست روش ها با کمیسیون/ETA ؛ → فرم مینی را انتخاب کنید.

صرفه جویی در روش پیش فرض ؛ بازگشت بدون از دست دادن ورودی

10. 4 KYC (کشو → معین)

کشو برای بارگذاری اسناد/پیشنهادات.
مدال هنگام تلاش برای بستن با بار ناقص: هشدار در مورد ذخیرهنشده.

10. 5 محدودیت بازی مسئولانه (معین)

رادیو «روز/هفته/ماه»، میدان مقدار، خط «اثر در»....

11) ضد الگوهای

مودال های تو در تو (modal over modal) استفاده از یک محاورۀ منفرد یا دنبالۀ گام.
Modalka برای مشاهده منظم محتوا (کشو/صفحه بهتر).
صلیب پنهان یا بسته شدن تنها توسط «microzone».
اقدام مخاطره آمیز → اجازه برای بستن «توسط پس زمینه».
شکل طولانی در یک مودال (انتقال → به یک صفحه/پانل جداگانه).
بدون بازگشت تمرکز به ماشه.

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) معیارها و آزمایشات

Open Rate/Completion Rate by modal: تعداد دفعات باز کردن و تکمیل عمل.
زمان تصمیم گیری: از باز کردن تا کلیک بر روی اولیه.
رد نرخ و دلایل (ESC/پس زمینه نزدیک در مقابل «لغو»).
خطا/نرخ تکرار در دستنوشتههای اشغال.
A/B: مودال در مقابل کشو، متن CTA، سفارش فیلد، «تأیید» در مقابل «خنثی کردن».

15) چک لیست QA

در دسترس بودن

• 'role = «dialog»', 'aria-modal = «true»', correct 'aria-labelledby/- توصیف شده'.
• تله تمرکز کار می کند ؛ تمرکز به ماشه برميگرده.
• ESC بسته (در صورت مجاز) ؛ تب چرخهای است.
• کنتراست ≥ AA ؛ این فقط رنگ نیست که معنی را منتقل می کند.

رفتار

• TTFF ≤ 100 میلی ثانیه ؛ انیمیشن در 120-180 ms/out 80-140 ms.
• اسکرول قفل پس زمینه بدون «پریدن» صفحه.
• گارد محافظ در شکل کثیف.
• حالت شلوغ، تصحیح مجدد/خطاها.

رابط کاربری

• هدر پاک و یک CTA اولیه.
• یک دکمه متقابل/نزدیک در دسترس است.
• ابعاد سازگار هستند ؛ بر روی تلفن همراه - ورق با یک ژست.

عملکرد

• پورتال/z-index درست است ؛ بدون «انتقال»
• راه اندازی تنبل ؛ فقط تبدیل/کدورت متحرک هستند.

16) مستندات در سیستم طراحی

کامپوننت ها: «Modal»، «Drawer/Sheet»، «ConfirmDialog»، «UnsavedGuard».
نشانه ها: ابعاد، تورفتگی ها، سایه ها، انیمیشن ها، پس زمینه، حلقه تمرکز.
راهنماها: «هنگامی که مدال در مقابل کشو»، الگوهای copywriting، اقدامات مخاطره آمیز (تایید/لغو)، اسکرول قفل و پورتال، کاهش حرکت.
Do/Don 't gallery: nested modals (don' t), long forms in modal (don 't), sheet for expanding context (do).

خلاصه ای کوتاه

Modalka - برای تصمیم گیری تحت توجه کامل، کشو - برای گسترش زمینه بدون شکستن جریان. ساختار ساده، CTA بدون ابهام و تعاملات قابل پیش بینی و قابل دسترس را حفظ کنید. به عملکرد احترام بگذارید، پس زمینه را قفل کنید و تمرکز را برگردانید. در سناریوهای iGaming، این به طور مستقیم بر اعتماد تاثیر می گذارد: تایید شرط، پرداخت نقدی، انتخاب روش پرداخت و KYC باید منصفانه، سریع و امن باشد.