Нишондиҳандаҳои пешрафт ва вазъ

1) Принсипҳо

1. Ҷавоби фаврӣ (≤ 100 мс). Ҳама гуна амал фавран ба таври визуалӣ тасдиқ карда мешавад: пахш кардани 'банд '/скелет/микроаниматсия →.
2. Ростқавлӣ ва пешгӯишаванда. Фоизҳо пешрафти воқеиро инъикос мекунанд, на "99% абадӣ". Агар арзёбӣ имконнопазир бошад, варианти номуайян ва шарҳро истифода баред.
3. Контекст дар назди фаъолият. Нишондиҳанда он ҷоест, ки корбар менигарад/амал мекунад (тугма, корт, блок), на дар кунҷи дур.
4. Дуздӣ пас аз муваффақият. Муваффақият санҷиши кӯтоҳ/пажмурда аст ва ҳамин тавр. Хато - шарҳи фаҳмо ва такрори бехатар.
5. Дастрасии пешфарз. 'role = "progressbar"', 'aria-valuenow', минтақаҳои зинда, муқоиса ≥ АА.

2) Намудҳои нишондиҳандаҳо ва кай истифода бурдани онҳо

Пешрафти хатӣ (муайян/номуайян). Боркунӣ/воридот/содирот, қадамҳо бо доираи равшан.
Пешрафти даврӣ (одатан номуайян аст). Амалиёти кӯтоҳи маҳаллӣ дар ҷойҳои зич.
Stepper (қадам ба қадам). Қадамҳои пайдарпай ("Қадами 2 аз 4"), KYC, равандҳои асосӣ.
Скелет (зарфҳои скелетӣ). Ба ҷои spinners иваз кардани сохтори мундариҷа; барои корбарон бо 'prefers-creded-motion' канорагирӣ кунед.
Нишонаҳои ҳолат (муваффақият/огоҳӣ/хатар/маълумот). Ҳолати объект (Дар ҷараён, рад, тайёр).
Баннер/ҳолати тост. Чорабиниҳои глобалӣ: офлайн, нокомии сервер, ҳамоҳангсозии навбат.
Боркунаки дарунӣ (тугма/хат). Амалиёти маҳаллӣ: "Захира...", "Фиристед"....

3) Муайян ва пешрафти номуайян

Муайян кунед: миқдори кор маълум аст → мо %/марҳилаҳоро нишон медиҳем.
Номуайян: ҷилди номаълум → "Коркард дар ҷараён аст"... + контекст ("Одатан то 1-2 дақиқа").
Гузариши давлатӣ - Шумо метавонед аз номуайянии → оғоз кунед, то муайян кунед, ки арзёбӣ кай пайдо мешавад.
ETA бодиққат: диапазонро нишон диҳед ("~ 30-60 сония") ва аз "ваъдаҳо" канорагирӣ кунед.

4) Ҷойгиркунӣ ва намунаҳо

Маҳаллӣ ба амал: тугмаи 'aria-банд', чархзананда дар сафи миз, пешрафти корт.
Дар болои блок/рӯйхат: сатри хатӣ дар зери сарлавҳаи қисмат ҳангоми амалиёти партия.
Глобалӣ: пешрафти нозук (тағир додани масир), баннерҳои система.
Панели часпанда (мобилӣ): тасдиқ/пешрафт дар CTA дар бандари поёнӣ.

5) Дастрасӣ (A11y)

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

Номуайян: 'нақш =' progressbar '-ро бе' aria-valuenow 'насб кунед, матни тавзеҳиро ба' reg = "status" илова кунед.
Минтақаҳои зинда: 'aria-live = "хушмуомила"' барои навсозиҳои мунтазам, танҳо барои онҳое, ки муҳиманд.
'aria-busy = "ҳақиқӣ"' дар зарфе, ки муваққатан бо амалҳо баста мешавад.
Фокус "ҷаҳида" намешавад: ҳангоми тағир додани саҳна, фокусро ба сарлавҳаи қадами stepper гузаронед.

6) Семантикаи копирайтинг ва визуалӣ

Мухтасар ва дар ин ҳолат: "Боркунӣ идома дорад"..., "Коркарди пардохт"....
Илова кардани "боз чӣ": "Иҷро шуд. Биёед саҳифаро ба таври худкор тароват бахшем.
Рангҳо: сабз - муваффақият, норанҷӣ - огоҳӣ/диққат, сурх - хато. Ранг ≠ воситаи ягонаи маъно: нишона/матнро диҳед.

7) Навсозиҳои шадид ва камбудиҳо

Хушбинона: мо UI-ро фавран иваз мекунем (масалан, аломати "мунтахаб") ва оромона онро бо сервер тасдиқ мекунем.
Дар ҳолати хатогӣ - шарҳи мулоим + шарҳ ва 'Retry'.
Амалиётҳои интиқодӣ (меъёр/пардохт): ихтиёрӣ "оптимистӣ" (ислоҳи "Ирсол → Интизории тасдиқ"...), аммо бидуни тағир додани ҳолати пулӣ пеш аз тасдиқ.

8) Навбатҳо ва вазифаҳои пасзамина

Нишон додани навбат: 'n' вазифаҳо дар коркард, кортҳои инфиродӣ бо пешрафт.
Агар имконпазир бошад, барои амалиёти тӯлонӣ таваққуф/бекор кунед.
Коркарди замина: Нишони "Дар замина", тост пас аз ба итмом расидан, бахши "Таърихи вазифа".

9) Иҷро ва мӯҳлатҳо

Реаксияи аввал ≤ 100 мм: ба ҷои холӣ скелет/inline-банд истифода баред.
Аниматсияҳо: 120-180 мс (дар), 80-140 мс (берун), танҳо 'табдил/шаффофӣ'.
Равандҳои дароз: навсозии пешрафт на бештар аз 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>

Муайян кардани хат

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>

Stepper

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) Скелет дуруст аст

Шакли мундариҷаи ояндаро (кортҳо/хатҳо) бидуни тобиши беохир истифода баред (ё бо 'prefers-cut-motion' хомӯш кунед).
Мӯҳлати вақт: агар боркунӣ> 300-500 мс бошад, скелет асоснок аст; бо таъхирҳои камтар, "micro-fade" кофӣ аст.

12) Нишони вазъ (ҳолати объект)

Мисолҳо лоиҳаҳое мебошанд, ки дар ҷараён, тасдиқи интизорӣ, омода, рад карда шудаанд.

Матни кӯтоҳ, тасвири устувор/рангҳои пасзамина, контрасти ≥ АА.
Нишона' aria-пинҳон =" ҳақиқӣ"' + нишонаи матн (барои SR).
Пахш кунед - тафсилотро ошкор кунед ё "Таърих" -ро кушоед.

13) Хусусиятҳои IGaming

• Пахш кардани CTA → "Фиристодашуда"..., бо таъхири> 3 сония - "Интизории тасдиқ"... (номуайян).
• Муваффақият - "Бет қабул карда шуд" + чек; хато - шарҳи софдилона ("давраи бозор пӯшида/таносуб иваз карда шуд") ва Retry бехатар.

• Аз рӯи марҳилаҳо муайян кунед: "Усули Санҷед → Ирсол → PSP-ро тасдиқ кунед".
• Барои баромад - Дар нишонаи раванд, экрани ҳолат дар профил, диапазони ETA; тела ба анҷом.

• Stepper (қадамҳои) бақайдгирӣ, пешрафт ба мукофот (N/points), нишони мақоми "Иштирок".
• Навсозии вақти воқеӣ - тозаву озода, чашмак нест, бо 'aria-live = "хушмуомила".

• Нишони Stepper + "Дар доираи барраси. "Нишон диҳед, ки аллакай қабул шудааст (ишора кунед) ва чӣ боқӣ мондааст.

14) Рангҳо, контраст ва матн

Муваффақият/Маълумот/Огоҳӣ/Хатар - чор оҳанги устувор дар системаи тарроҳӣ.
Матн аз пасзаминаи нишона ≥ АА фарқ мекунад.
Ранги якхеларо барои "дар ҷараён" ва "огоҳӣ" истифода набаред.

15) Метрҳо

Вақт-ба-Аввал-Бозгашт (TTFF): ба посухи аввалини визуалӣ клик кунед.
Анҷом Вақти амалиёт ва сатҳи тарки/исқоти ҳамл барои вазифаҳои дароз.
Сатҳи муваффақиятро барои амалиёти пешрафт дубора санҷед.
% оптимистҳо, ки бомуваффақият анҷом ёфтанд (ва ҳиссаи гардишҳо).
Скелети/спиннери намоёни вақт (ҳадаф: то ҳадди имкон).

16) Анти-намунаҳо

Тугмаи хомӯш (банд нест/spinner)> 100 мс.
Spinners беохир бе шарҳ ё алтернатива.
Фоизи бардурӯғ/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
.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

Ҷавоб ва ростқавлӣ

• TTFF ≤ 100 мс; як банд/скелети маҳаллӣ мавҷуд аст.
• Муайян кунед - воқеӣ%; номуайян - бо тавзеҳот.

Дастрасӣ

• 'нақш = "progressbar" '/' aria-valuenow' дуруст аст; минтақаҳои зинда оид ба навсозиҳо.
• Муқоисаи нишонаҳо/матн ≥ АА; ранг ягона барандаи маъно нест.

Рафтор

• Хушбинона бо бозгашт ва шарҳи дуруст.
• Навбатҳо нишон дода мешаванд; бекоркунӣ/таваққуф мавҷуд аст (агар лозим бошад).
• Пешрафт дар наздикии саҳна CTA-ро такрор намекунад.

Иҷро

• Навсозӣ на бештар аз 10-15 маротиба/сония; аниматсияҳои 'transform/opacity'.
• Скелет тобутро бо 'reduce-motion' масхара намекунад.

Матнҳо

• кӯтоҳ, бе jargon техникӣ; пас аз ба итмом расидани "боз чӣ".
• Не "ваъдаҳои" вақти дақиқ, агар кафолат дода нашавад.

19) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компоненты: 'Прогресс', 'Прогресс', 'Степер', 'Статуси Badge', 'Inline' Loader ',' Скелет '.
Қоидаҳои интихоби намуд, нусхабардорӣ ва рангҳо барои статусҳо.
Намунаҳо: оптимистӣ, навбатҳо, коркарди пасзамина, ҳамоҳангсозии офлайнӣ.
Галереяро иҷро накунед: "спиннери доимӣ", фоизи бардурӯғ, "хомӯш" CTA vs TTFF хуб.

Хулосаи мухтасар

Нишондиҳандаҳои пешрафт ва мақом бояд фикру мулоҳизаҳои саривақтӣ, софдилона ва дастрасро таъмин намоянд. Онҳоро дар баробари амал ҷойгир кунед, пешрафти муайян ва номуайянро фарқ кунед, a11y-ро эҳтиром кунед ва аниматсияҳоро сӯиистифода накунед. Дар IGaming, ин махсусан барои букмекерӣ, пардохтҳо, мусобиқаҳо ва KYC муҳим аст - пешрафти ором ва пешгӯишаванда эътимод ва табдилдиҳиро мустақиман афзоиш медиҳад.