Առաջընթացի և կարգավիճակների ցուցանիշները

1) Սկզբունքներ

1. Ակնթարթային արձագանք (100 մզ)։ Ցանկացած գործողություն անմիջապես հաստատվում է տեսողական կերպով 'սեղմելով www.dy '/կմախքը/միկրոշրջանը։

2. Ազնվություն և կանխատեսելիություն։ Տոկոսները արտահայտում են իրական առաջընթացը, ոչ թե «հավերժական 99 տոկոսը»։ Եթե գնահատումը անհնար է, օգտագործեք ոչ որոշակի (indeterminate) տարբերակը և բացատրությունը։

3. Համատեքստը գործողության կողքին է։ Այն ցուցիչը, որտեղ օգտագործողը նայում է/գործում (կոճակ, քարտ, բլոկ), ոչ թե հեռավոր անկյունում։

4. Հաջողությունից հետո աննկատելիությունը։ Հաջողությունը կարճ չեկ/ֆեյդ է և ամեն ինչ։ Սխալը հասկանալի բացատրություն է և անվտանգ խոհարար։

5. Լռելյայն հասանելիությունը '"role =" progressbar "," aria-valuenow ", նախկին տարածաշրջանները, AA կոդավորման հակադրություն։

2) Բաղադրիչների տեսակները և երբ օգտագործել դրանք

Գծային առաջընթաց (determinate/indeterminate)։ Բեռնումը/ներմուծումը/էքսպորտը, քայլերը պարզ ծավալով։

Շրջանային առաջընթաց (սովորաբար indeterminate)։ Կարճ տեղական վիրահատությունները կոմպակտ վայրերում։

Ստեպեր (կոպիտ)։ Հաջորդական փուլերը («Քայլ 4»), KYC, վարպետության գործընթացներ։

Skeleton (կմախքը)։ Բովանդակության կառուցվածքը փոխելու համար սպիններների փոխարեն։ խուսափեք shimer-ից օգտագործողների համար 'www.fers-reduced-motion-ից։

Կարգավիճակ-բեյջը (success/warning/danger/2019)։ Օբյեկտի վիճակը («Մշակման մեջ», «Շեղված», «Պատրաստ»)։

Բաններ/թոստ կարգավիճակը։ Համաշխարհային իրադարձությունները 'օֆլինը, սերվերի ձախողումը, հերթի համաժամացումը։

Inloader (կոճակ/տող)։ Տեղական վիրահատությունները ՝ «Պահպանումը»..., «Ուղարկում»...

3) Որոշակի vs անորոշ առաջընթաց

Determinate: Հայտնի է աշխատանքի ծավալը, որը ցույց ենք տալիս %/փուլեր։

Indeterminate: ծավալը անհայտ է «Մշակումը»... + ենթատեքստը («Սովորաբար մինչև 1-2 րոպե»)։

Պետության փոփոխությունը 'դուք կարող եք սկսել indeterminate-ից անցնել determinate-ին, երբ կհայտնվի գնահատականը։

ETA զգույշ. Ցույց տվեք միջակայքը («3530-60 վայրկյան») և խուսափեք «խոստումներից»։

4) Տեղադրումը և արտոնագրերը

Տեղական գործողության համար 'կոճակը' aria-busy ", աղյուսակի տողում, առաջընթաց քարտի մեջ։

Բլոկի/ցուցակի վրա 'գծային բար, որը գտնվում է փաթեթային վիրահատությունների ժամանակ հատվածի հեդերի տակ։

Գլոբալ 'վերին բարակ առաջընթացը (roult-change), ռուսական բանան։

Sticky-վահանակ (ռեժ.) 'CTA-ի հաստատումը/առաջընթացը ներքևի դարակում։

5) Հասանելիություն (A11y)

Առաջընթաց

html
<div role = "progressbar" aria-valuemin =" 0" aria-valuemax =" 100" aria-valuenow =" 42" aria-label = "Load Report "> </div>

Indeterminate: Տեղադրեք "role =" progressbar "'առանց" aria-valuenow ", ավելացրեք բացատրական տեքստը' role =" status "։

Live-տարածաշրջանները ՝ "aria-intel =" polite "սովորական կոմպոզիցիաների համար," assertive "- միայն քննադատների համար։

"aria-buby =" alt "բեռնարկղում, որը ժամանակավորապես արգելափակված է գործողություններով։

Ֆոկուսը չի «պտտվում», երբ քայլը փոխվում է, կենտրոնացրեք ռուսական տափաստանային գլխին։

6) Կոպիրայթինգը և տեսողական սեմանտիկան

Կարճ և դեպքում '«Բեռնումը գնում է»..., «Մենք մշակում ենք»...

Ավելացրեք «ինչ է հետո»։ Թարմացնենք էջը ինքնաբերաբար"։

Գույները 'կանաչ' հաջողություն, նարնջագույն 'նախազգուշացում/ուշադրություն, կարմիր' սխալ։ Գույնը միակ իմաստն է 'թույլ տվեք իկոն/տեքստ։

7) Լավատեսական թարմացումներ և արձագանքներ

Լավատեսություն. Մենք անմիջապես փոխում ենք UI-ը (օրինակ ՝ "Ընտրված" նշանը) և հանգիստ ապացուցում ենք "։

Սխալմամբ 'փափուկ արձագանք + բացատրություն և «Retry»։

Քննադատական վիրահատությունները (տոկոսադրույքը/տոկոսադրույքը) 'ուղղակիորեն «փափուկ լավատեսություն» (մենք կուղարկենք «Ուղարկված Մոսկվան սպասում ենք ապացույցը»), բայց առանց դրամական վիճակը փոխելու մինչև հաստատումը։

8) Գծեր և ֆոնային առաջադրանքներ

Ցույց տվեք հերթը '«n» խնդիրներ վերամշակման մեջ, որոշակի քարտեր առաջընթացի հետ։

Թույլ տվեք դադար/վերացնել երկար վիրահատությունների համար, եթե հնարավոր է։

Ֆոնի վերամշակումը 'բեյջ «Ֆոնի ֆոնի», տոստերը ավարտելուց հետո, «Առաջադրանքների պատմություն» բաժինը։

9) Պերֆորանսը և թայմինգները

Առաջին արձագանքը 100 մզ է: Օգտագործեք skeleton/inter-buby 'դատարկության փոխարեն։

Անիմացիաներ ՝ 120-180 ms (in), 80-140 ms (out), միայն «transform/opacity»։

Երկար գործընթացներ 'առաջընթացի նորարարությունը ոչ ավելի քան 10-15 անգամ/վրկ; խմբին փոփոխություններ կատարեք։

10) Սնիպետներ

Տեղական առաջընթաց կոճակի մոտ

html
<button id="export" class="btn" aria-busy="false">Экспорт CSV</button>
<script>
const btn = document. getElementById('export');
btn. addEventListener('click', async () => {
btn. setAttribute('aria-busy','true'); btn. disabled = true;
try {
const r = await fetch('/api/export', { method:'POST' });
if(!r.ok) throw new Error();
//show toast "Export has begun. We will notify upon readiness"
} catch {
//toast with cause and Retry
} finally {
btn. disabled = false; btn. setAttribute('aria-busy','false');
}
});
</script>

Գծային determinate

html
<div class="progress">
<div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
<style>
.progress{height:4px; background:var(--bg-muted); border-radius:999px; overflow:hidden}
.progress. bar{height:100%;width:0%;background:var(--accent); transition:width. 16s}
</style>
<script>
const bar = document. querySelector('.progress. bar');
let n=0; const t=setInterval(()=>{ n=Math. min(100, n+5); bar. style. width=n+'%'; bar. setAttribute('aria-valuenow',n); if(n===100) clearInterval(t); },160);
</script>

Ստեպեր

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> <span> 3 </span> Confirmation </li>
</ol>
</nav>

11) Skeleton ճիշտ

Օգտագործեք ապագա բովանդակության ձևը (քարտեր/տող), առանց անվերջ shimmer (կամ անջատեք «www.fers-reduced-motion»)։

Ժամանակի սահմանը 'եթե բեռնումը> 300-500 մզ, skeleton արդարացված է։ ավելի քիչ ուշացումով բավական է «միկրո-ֆեյդ»։

12) Բեյջի կարգավիճակը (օբյեկտի վիճակը)

Օրինակներ ՝ Չեռնովիկը, Վերամշակման մեջ, ակնկալում է հաստատում, Պատրաստ, Մերժոն։

Կարճ տեքստը, իկոնկայի/ֆոնի կայուն գույները, AA կոդավորման հակադրությունը։

Iconka' aria-hidden =» pro» + տեքստային պիտակը (SR)։

Տեսահոլովակի վրա մենք բացահայտում ենք մանրամասները կամ բացում ենք «Պատմությունը»։

13) iGaming հատկությունները

Դրույքաչափը

CTA-ի սեղմումը «Ուղարկված»..., հետաձգման ժամանակ> 3 s - «Սպասում ենք ապացույց...» (indeterminate).

Հաջողությունը '«112 տոկոսադրույքը» + չեկը։ սխալը ազնիվ բացատրություն է («շուկայի ժամանակահատվածը փակված է/գործակիցը փոխվել է») և անվտանգ Retry։

Դեպոզիտ/եզրակացություն

Determinate-ը քայլերով. <<Ուղարկման մեթոդի ստուգում>>։

Եզրակացության համար 'բեյջ Մշակման, կարգավիճակի էկրանի, ETA-ի միջակայքի համար։ Ավարտվեց։

Aleksra/առաջնորդները

Գրանցման (քայլերի), առաջընթաց մինչև մրցանակը (N/ակնոցներ), «Մասնակցում» կարգավիճակը։

Real-taim նորարարությունը կոկիկ է, առանց միգրանցների, "aria-104 =" polite "։

• Ստեպեր + բեյջը «Ստուգման համար»։ Ցույց տվեք, որ արդեն ընդունված է (կտոր) և որ մնացել է։

14) Գույներ, հակադրություն և տեքստ

Success/Warning/Danger - չորս կայուն երանգներ դիզայնի համակարգում։

Տեքստի հակադրությունը Բայջի ֆոնդի վրա AA-ն է։

Մի օգտագործեք նույն գույնը «մշակման մեջ» և «նախազգուշացումներ» համար։

15) Մետրիկի

Time-to-First-Feedback (TTFF) 'տեսահոլովակից մինչև առաջին տեսողական արձագանքը։

Completion Time-ը երկար խնդիրների համար։

Retry success rate-ը առաջընթացի վիրահատությունների համար։

լավատեսների% -ը, որոնք հաջողությամբ ավարտվեցին (և արձագանքների մասնաբաժինը)։

Visible time skeleton/spinner (նպատակը հնարավորինս քիչ է)։

16) Anti-patterna

«Լուռ» կոճակը (ոչ busy/spinner)> 100 ms։

Անվերջ սպինները առանց բացատրության և այլընտրանքի։

Կեղծ տոկոսներ/սողուններ, որոնք կախված էին 99 տոկոսով։

Բովանդակության հավաքումը սխալմամբ առանց կրկնելու։

Միայն գույնը առանց տեքստի/սրբապատկերների կարգավիճակի համար։

Առաջընթացը հեռու է գործողության վայրից (օգտագործողը չի տեսնում)։

17) Դիզայնի համակարգը (օրինակ)

json
{
"progress": {
"barHeight": 4,
"radius": 999,
"inMs": 160,
"outMs": 120,
"pollHz": 10
},
"status": {
"tones": { "success": "#", "info": "#", "warning": "#", "danger": "#" },
"badge": { "radius": 8, "px": "6 10", "icon": 14 }
},
"skeleton": {
"rowHeight": 16,
"gap": 8,
"reduceMotion": true
},
"a11y": {
"useAriaBusy": true,
"live": "polite",
"contrastAA": true
}
}

CSS ճնշումները

css
.badge{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:8px; font-size:.875rem}
.badge--success{background:var(--bg-success); color:var(--on-success)}
.skeleton{background:linear-gradient(90deg, var(--sk1), var(--sk2), var(--sk1)); border-radius:8px}
@media (prefers-reduced-motion: reduce){.skeleton{background:var(--sk1)} }

18) QA-chek-թերթ

Արձագանք և ազնվություն

• TTFF 35100 մզ; տեղական buy/skeleton.
• Determinate - իրական տոկոսը; indeterminate - բացատրությամբ։

Հասանելիություն

• 'role = "progressbar" "/" aria-valuenow "ճիշտ; նախկին տարածաշրջանները նորարարությունների վրա։
• Bajey/TED/TEP; գույնը իմաստ չունի։

Վարք

• Լավատես 'ճիշտ արձագանքով և բացատրությամբ։
• Գծերը ցուցադրվում են; կա վերացում/դադար (եթե կիրառելի է)։
• Առաջընթացը գործողության վայրի մոտ, չի արգելափակում CTA-ն։

Պերֆորանսը

• Նորարարությունները ոչ ավելի քան 10-15 անգամ/վ; անիմացիա 'transform/opacity "։
• Skeleton չի տալիս shimmer's «reduce-motion» -ի հետ։

Տեքստեր

• Կարճ, առանց տեխնջարգոնի; «Ինչ է հետո» ավարտելուց հետո։
• Առանց «խոստումների» ճշգրիտ ժամանակը, եթե այն երաշխավորված չէ։

19) Մոսկվա դիզայնի համակարգում

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.

Ընտրության կանոնները, պատճենները և գույները ստատուսների համար։

Պատրանքները 'լավատեսություն, հերթեր, ֆոնային վերամշակում, օֆլինի համաժամեցում։

Do/Don 't-պատկերասրահը' «հավերժական սպիններ», կեղծ տոկոսներ, CTA-ի «լուռ» լավ TTFF։

Live ռեզյումե

Առաջընթացի և կարգավիճակների ցուցանիշները պետք է տան ժամանակին, ազնիվ և հասանելի հետադարձ կապ։ Տեղադրեք դրանք գործողության կողքին, տարբերեք որոշակի և անորոշ առաջընթացը, հարգեք a1y-ը և մի չարաշահեք անիմացիաները։ IGaming-ում դա հատկապես կարևոր է վճարումների, վճարումների, կիսագնդի և KYC-ի համար 'հանգիստ, կանխատեսելի առաջընթաց ուղղակիորեն բարձրացնում է վստահությունը և փոխարկումը։