Մոդալներ և հեռացող վահանակներ
1) Ե՞ րբ օգտագործել
Modal (խոսակցություն բեքդրոպի հետ) - կրիտիկական լուծումների և կարճ խնդիրների համար, որոնք պահանջում են ամբողջական ուշադրություն 'գործողության հաստատումը, իրավական համաձայնությունը, վտանգավոր վիրահատությունները, 1-2 դաշտերի կարճ ձևերը։ Արգելափակում է ֆոնը։
Diawer/Sheet (հեռացող վահանակ) - համատեքստային ընդարձակման համար 'օբյեկտի մանրամասները, ատրիբուտների խմբագրումը, ցուցակից ընտրությունը, օժանդակ լուծումը։ Ֆոն տեսանելի է, պահպանվում է համատեքստը։
Ընտրության կանոնը
Եթե գործողությունը անհրաժեշտ է Modal-ի համակենտրոնացման և հաստատման համար։
Երբ դուք պետք է պահպանեք համատեքստը և տվեք Systawer-ի «զուգահեռ» ակնարկ։
2) Կառուցվածքը և չափսերը
Modal
Վերնագիրը (պարտական) մեջբերում է CTA գոտու (Primary/Secondary/Destructive) հիմնական տեքստը։
Չափերը ՝ S (460-560 px), M (640-720 px), L (38840 px)։ Մավիլկա վրա լիամետրաժ sheet է։
Drawer / Sheet
Ուղղություն ՝ աջ եզրը (դիսկոպը, խմբագրումը), կոդավորումը (altaile, գործողություններ), երբեմն ձախ (ռոտացիան)։
Լայնությունը ՝ 360-380 (S), 460-640 (M), 640-800 (L)։ Մավիլկա վրա 90-100 տոկոսը լայնությամբ/բարձրությամբ։
Բովանդակության բարձրությունը միշտ սահմանափակ է, ներսում 'սքրոլ; վերնագիրը/STA ֆիքսված է։
3) Կոպիրայթինգը և CTA-ն
Վերնագիր = գործողություն/իմաստ '«Հաստատել դրույքը», «Բյուջետային մեթոդի ընտրությունը», «Պահանջվում է KYC»։
Տեքստը կարճ է, 1-2 նախադասություն։ Խուսափեք փխրուն բանաձևից։
CTA: Մեկ Primary, Secondary («Վերացում») և, անհրաժեշտության դեպքում, Destructive-ը։
Ռիսկային գործողությունների համար ավելացրեք 1 տողի բացատրությունը. <<Գործողությունը անդառնալի է։ Դուք կարող եք վերացնել 10 վայրկյանում (եթե հասանելի եք)"։
4) Վարքն ու վիճակը
Բացահայտումը 'ակնթարթային արձագանք 100 մզ, ապա 120-180 մզ անիմացիա։
Տե՛ ս 'ավելի արագ հայտնագործությունը (80-140 մզ), մենք վերադառնում ենք ֆոկուս դեպի ձգան։
Busy: Unsaved (կեղտոտ ձև) 'փակելիս' խոսակցական նախազգուշացում («Կան համապատասխան պահպանված փոփոխություններ»)։ Escape/clik ֆոնի վրա 'թույլատրելի է ոչ վտանգավոր երկխոսությունների համար։ քննադատների համար միայն ակնհայտ կոճակներ են։ 5) Հասանելիություն (A11y) Բեռնարկղը ՝ «role =» www.alog «և» aria-modal = «me» (իրական մոդալի համար)։ Վերնագիրը կապված է «aria-labelledby» -ի միջոցով։ նկարագրությունը 'aria-describedby'։ Focus trap ներսում; առաջնային ֆոկուսը վերնագրի կամ առաջին ինտերակտիվ տարրերի վրա է։ Փակվելուց հետո ֆոկուսի տեղադրումը աղբյուրի վրա։ Ոչ մի ֆոն ՝ «document»։ body 'overflow: hidden; կոդ 'կամ' inae 'մնացած DFC-ում։ Ստեղնաշարի աջակցությունը 'Tab/Shift + Tab ցիկլիկ; Esc-ը փակում է (եթե չի արգելվում բեմական)։ Հաշվի առեք «wwww.fers-reduced-motion» 'անիմացիայի անջատումը/պարզեցումը։ Ձևանմուշներ 6) Պերֆորանսը և ճարտարապետությունը Ռենդերը պորտալի միջոցով (հավելվածի վերևի շերտը) ավելի քիչ խնդիրներ ունի z-index-ի հետ։ Տեղադրեք Լենիվոյի բովանդակությունը առաջին բացման ժամանակ, ապամոնտաժեք փակման անիմացիայից հետո (կամ թարգմանեք www.screen)։ Animirurem միայն «transform/opacity»; խուսափեք թանկարժեք բլուրը/տենաները մեծ չափերով։ Արգելափակեք ֆոնի ժայռը (scrope-71 k), պահպանեք ներկա դիրքը, որպեսզի փակվելուց հետո «ցատկեք»։ Մեծ ցուցակների համար, ww.awer-ում, օգտագործեք վիրտուալիզացիան։ 7) Բջջային արտոնագրեր Bottronsheet արագ գործողությունների/ապացույցների համար 'սվայփի ժեստերը փակելու համար (շեմով)։ Sticky-CTA ներքևում; փակման կոճակը ձախ վերևում է։ Safe-area նահանջները (notch/gesture areas)։ Էկրանի ստեղնաշարը չպետք է փակի CTA-ը։ layout - բովանդակության «բարձրացում» կամ ֆիքսված վահանակ ստեղնաշարի վերևում։ 8) Motion-դիզայն Express: fade + թեթև շարժումը (modal: Y, wwwer: Հայտնության առանցքի վրա)։ 120-180 մզ։ Ելքը 'կարճ (80-140 մզ), easing' cubic-bezier (0։ 2,0,0. 2,1)`. Ֆոն (backdrop), անթափանցելիությունը 0-0։ 4–0. 6. Առանց զարկերակների և անվերջ բլոկների։ «Windfers-reduced-motion» -ի համար 'առանց փոփոխության, միայն fade։ 9) Փակման կառավարումը Վերը նշվածը միայն անվտանգ վիրահատության ժամանակ է։ Սխալմամբ, մենք մնում ենք երկխոսության մեջ, ցույց ենք տալիս պատճառը և Retry-ը։ Ֆոնային կատարմամբ 'փակել երկխոսությունը և ցույց տալ «Մենք անում ենք ֆոնի վրա», գումարած «Պատմություն» բաժինը։ 10) iGaming-ի տիպիկ սցենարները 10. 1 Ապացույց (Modal) Բովանդակությունը 'իրադարձություն, գործակից, գումար, պոտենցիալ շահույթ, աշխատանքային ժամկետի տևողություն։ Կոճակները ՝ «Հաստատել» (primary), «Վերացում»։ Pattern հետաձգում> 3 s: «Սպասում ենք ապացույց» տեքստը... փոփոխությունը ազնիվ ապդեյթ է։ 10. 2 Քեշաութ (Modal/Sheet) Այս գումարի ցուցադրումը և պատուհանի թայմերը։ Հաստատումը + հնարավոր Undo (եթե կարգավորումը թույլ է տալիս)։ 10. 3 Բյուջետային մեթոդի ընտրություն (Drawer) Հանձնաժողովների/ETA մեթոդների ցանկը; ռուսական մինի ձևերի ընտրություն։ Լռելյայն մեթոդի պահպանումը։ Առանց մուտքագրված տվյալների կորստի։ 10. 4 KYC (Drawer → Modal) Diawer-ը փաստաթղթերի/հուշումների բեռնման համար։ Modal-ը, երբ փորձում է փակել չօգտագործված բեռնման հետ 'նախազգուշացում պահպանված տարածքների մասին։ 10. 5 Պատասխան խաղի սահմանները (Modal) Ռադիո «Օր/Շաբաթ/Ամիս», գումարի դաշտը, «Ուժի միջով» տողը... 11) Anti-patterna Ներդրված մոդելները (մոդալը մոդալի վերևում)։ Օգտագործեք մեկ խոսակցություն կամ քայլերի հաջորդականություն։ Սովորական բովանդակության դիտման մոդալկան (ավելի լավ է www.awer/էջ)։ Թաքնված խաչը կամ միայն «միկրոզոնով»։ Ռիսկային գործողությունը թույլ է տալիս փակել «ֆոնով»։ Մոդալի երկար ձևը (տեղադրեք առանձին էկրանի/վահանակի մեջ)։ Ռուսական ֆոկուսի բացակայությունը դեպի ձգան։ 12) Դիզայնի համակարգը (օրինակ) CSS պրեսետներ (հայեցակարգ) 13) Վարքի ներքև Focus trap + 105 ֆոկուս Sheet-ը փակման ժեստով (altaile, պարզեցված) 14) Մետրիկի և փորձարկումների Open Rate/Completion Rate-ը մոդալներով 'որքա՞ ն բացեցին և ավարտեցին գործողությունը։ Time-to-Decision-ից մինչև Primary տեսահոլովակը։ Winmiss Rate-ը և պատճառները (Esc/fonu vs «Վերացում»)։ Error/Retry Rate-ը Busy-սցենարներում։ A/B: modal vs entawer, CTA տեքստը, դաշտերի կարգը, «ապացուցումը» vs «undo»։ 15) QA-chek-թերթ Հասանելիություն 16) Մոսկվա դիզայնի համակարգում Բաղադրիչները ՝ «Modal», «Diawer/Sheet», «MedirmEntalog», «UnsavedGuard»։ Տոկենները ՝ չափսեր, նահանջներ, ստվերներ, անիմացիաներ, backdrop, focus-ring։ Դելդներ ՝ «Երբ modal vs nodawer», կոպիրայթինգի ձևանմուշները, ռիսկային գործողությունները (www.irm/undo), scrome-ensk և portals, reduce-motion։ Do/Don 't-պատկերասրահը' nested modals (don 't), երկար ձևեր մոդալկայում (don' t), sheet ենթատեքստը ընդլայնելու համար (do)։ Մոդալկան ամբողջական ուշադրության տակ լուծումների համար է, ww.awer-ը 'համատեքստը ընդլայնելու համար առանց հոսքի կոտրման։ Պահել կառուցվածքը պարզ, CTA-ը միանշանակ է, իսկ փոխազդեցությունը կանխատեսելի և հասանելի է։ Հարգեք պերֆորանսը, արգելափակեք ֆոնը և վերադարձրեք ֆոկուսը։ iGaming-ի սցենարներում դա ուղղակիորեն ազդում է վստահության վրա 'հաստատումը, քեշաութը, ստացիոնար մեթոդի ընտրությունը և KYC-ը պետք է լինեն ազնիվ, արագ և անվտանգ։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>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}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;
});
Վարք
Ինտերֆեյս
Պերֆորանսը
Live ռեզյումե