Прогресс және мәртебе индикаторлары

1) Қағидаттар

1. Жедел жауап беру (≤ 100 мс). Кез келген әрекет бірден көзбен шолу арқылы расталады: → 'busy '/скелет/микроанимация.
2. Адалдық және болжамдылық. Пайыздар «мәңгілік 99%» емес, нақты прогресті көрсетеді. Егер бағалау мүмкін болмаса, анықталмаған (indeterminate) нұсқаны және түсіндіруді пайдаланыңыз.
3. Әрекеттің жанындағы мәтінмәні. Пайдаланушы қарайтын/әрекет ететін индикатор (түймешік, карточка, блок) алыс бұрышта емес.
4. Табыстан кейінгі көрінбеушілік. Сәттілік - қысқа чек/фейд және бәрі. Қате - түсінікті түсіндіру және қауіпсіз қайталау.
5. Әдепкі қол жетімділік. 'role = «progressbar»', 'aria-valuenow', live-аймақтар, контраст ≥ AA.

2) Индикаторлардың түрлері және оларды қашан пайдалану

Сызықтық прогресс (determinate/indeterminate). Жүктеу/импорттау/экспорттау, түсінікті көлемдегі қадамдар.
Дөңгелек прогресс (әдетте indeterminate). Ықшам жерлердегі қысқа жергілікті операциялар.
Степпер (қадамдық). Жүйелі кезеңдер («4 қадамнан 2»), KYC, мастер-процестер.
Skeleton (скелетон-бітеуіш). Спиннерлер орнына мазмұн құрылымын алмастыру үшін; 'prefers-reduced-motion' пайдаланушылары үшін «shimmer» дегеннен аулақ болыңыз.
Мәртебе-бейдждер (success/warning/danger/info). Объектінің жай-күйі («Өңдеуде», «Қабылданбады», «Дайын»).
Мәртебенің баннері/тосты. Жаһандық оқиғалар: оффлайн, сервер жаңылысы, кезекті үндестіру.
Inline loader (түймешік/жол). Жергілікті әрекеттер: «Сақтау»..., «Жіберу»....

3) Белгілі бір vs белгісіз прогресс

Determinate: белгілі жұмыс көлемі → %/кезеңдерін көрсету.
Indeterminate: көлемі белгісіз → «Өңдеу жүріп жатыр»... + мәтін («Әдетте 1-2 минутқа дейін»).
Күйді ауыстыру: indeterminate → ден бастауға болады.
ETA абайлаңыз: диапазонды көрсетіңіз («~ 30-60 сек») және «уәделерден» аулақ болыңыз.

4) Орналастыру және паттерндер

Жергілікті әрекет: 'aria-busy' түймешігі, кесте жолындағы спиннер, карточкадағы прогресс.
Блоктың/тізімнің үстінде: пакеттік операциялар кезінде секция хедерінің астындағы сызықтық бар.
Жаһандық: жоғарғы жіңішке прогресс (route-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' -ке қосыңыз.
Әдеттегі жаңартулар үшін 'aria-live = "polite', тек сыни жаңартулар үшін 'assertive' аймақтары.
'aria-busy =' true 'әрекеті уақытша бұғатталған контейнерде.
Фокус «секіріп кетпейді»: кезеңді ауыстырған кезде фокусты қадам тақырыбына жылжытыңыз.

6) Копирайтинг және визуалды семантика

Қысқаша және іс бойынша: «Жүктеу жүріп жатыр»..., «Төлемді өңдейміз»...
"Келесі": "Дайын. Бетті автоматты түрде жаңартамыз".
Түстері: жасыл - табыс, қызғылт сары - ескерту/назар аудару, қызыл - қате. Түсі ≠ мағынаның жалғыз тасымалдаушысы: белгішені/мәтінді беріңіз.

7) Оптимистік жаңарту және қайтару

Оптимистика: UI-ді бірден өзгертеміз (мысалы, «Таңдаулыларда» белгісі) және сервермен ақырын растаймыз.
Қате кезінде - жұмсақ кері қайту + түсініктеме және 'Retry'.
Күрделі операциялар (мөлшерлеме/төлем): опциондық «жұмсақ оптимизм» («Жіберілді → Растауды күтеміз»...), бірақ расталғанға дейін ақшалай жағдайын өзгертпей.

8) Кезектер және фондық міндеттер

«n» кезегін көрсетіңіз.
Мүмкін болса, ұзақ операциялар үшін үзіліс/болдырмау беріңіз.
Өңдік өңдеу: «Фондағы» бейдж, аяқталған тостар, «Тапсырмалар тарихы» бөлімі.

9) Перформанс және таймингтер

Бірінші реакция ≤ 100 мс: бос орынның орнына skeleton/inline-busy қолданыңыз.
Анимациялар: 120-180 мс (in), 80-140 мс (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сіз болашақ мазмұн пішінін пайдаланыңыз (немесе 'prefers-reduced-motion' кезінде ажыратыңыз).
Уақыт шегі: егер жүктеме> 300-500 мс болса, skeleton ақталады; кішігірім кідірістерде «микро-фейда» жеткілікті.

12) Статус-бейдждер (объектілік жай-күйлер)

Мысалдар: Жоба жазу Өңдеуде Растауды күтеді Дайын Қабылданбады

Қысқа мәтін, иконаның/аяның тұрақты түстері, контраст ≥ AA.
' aria-hidden =» true»' + мәтіндік лейбл (SR үшін).
Басу арқылы - егжей-тегжейін ашамыз немесе «Тарихты» ашамыз.

13) iGaming ерекшелігі

• CTA басу → «Жіберілді»..., кешіктірілгенде> 3 с - «Растауды күтеміз...» (indeterminate).
• Табыс - «Ставка қабылданды» + чек; қате - адал түсіндіру («нарықтық кезең жабық/коэффициент өзгерді») және қауіпсіз Retry.

• Кезеңдер бойынша Determinate: «Әдісті тексеру → Жіберу → PSP растау».
• Шығару үшін - бейдж В өңдеу, профильдегі статус экраны, ETA диапазоны; аяқталғаннан кейін іске қосу.

• Степпер тіркеу (қадамдар), наградаға дейінгі прогресс (N/ұпай), «Қатысады» мәртебесінің бейджі.
• Шынайы жаңарту - ұқыпты, жыпылықтамай, 'aria-live =' polite '.

• Stepper + бейдж «Тексеруде». Бұрыннан не қабылданғанын және не қалғанын көрсетіңіз.

14) Түстер, контраст және мәтін

Success/Info/Warning/Danger - дизайн жүйесіндегі төрт тұрақты тон.
Мәтіннің АА ≥ бейдж аясына қарама-қарсылығы.
«өңдеуде» және «ескерту» үшін бір түсті пайдаланбаңыз.

15) Метрика

Time-to-First-Feedback (TTFF): басудан бірінші визуалды жауапқа дейін.
Ұзақ тапсырмалар үшін drop/abort rate және операциялар бойынша Completion Time.
Прогресс операциялары үшін Retry success rate.
Сәтті аяқталған оптимистік% (және қайтару үлесі).
Visible time skeleton/spinner (мақсат: мүмкіндігінше аз).

16) Қарсы үлгілер

«Мылқау» түймешігі (busy/спиннер жоқ)> 100 мс.
Түсініктемесіз және баламасыз шексіз спиннерлер.
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 мс; жергілікті busy/skeleton бар.
• Determinate - нақты%; indeterminate - түсіндірмемен.

Қол жетімділік

• 'role = «progressbar» '/' aria-valuenow' дұрыс; жаңартулардағы live-аймақтар.
• Бейдждердің/мәтіннің контрастысы ≥ AA; түс тек мағынаны тасушы емес.

Мінез-құлық

• Дұрыс кері қайтарумен және түсіндірумен оптимистика.
• Кезектер көрсетіледі; болдырмау/үзіліс бар (егер қолданылса).
• Әрекет орнының жанындағы прогресс CTA-ны қамтымайды.

Көрініс

• Жаңартулар секундына 10-15 реттен жиі емес; 'transform/opacity' анимациялары.
• Skeleton 'reduce-motion' кезінде shimmer 'деп мазақтамайды.

Мәтіндер

• Қысқаша, техжаргонсыз; аяқталғаннан кейін «не істеу керек».
• Егер оған кепілдік берілмесе, нақты уақыттың «уәдесінсіз».

19) Дизайн-жүйедегі құжаттама

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
Мәртебелер үшін типті, копирайтингті және түстерді таңдау қағидалары.
Паттерндер: оптимистика, кезектер, фондық өңдеу, оффлайн-синхрондау.
Do/Don 't-галереясы: «мәңгілік спиннер», жалған пайыздар, «үнсіз» CTA vs жақсы TTFF.

Қысқаша түйіндеме

Прогресс және мәртебе индикаторлары уақтылы, адал және қолжетімді кері байланыс беруі тиіс. Оларды әрекетпен қатар орналастырыңыз, белгілі бір және белгісіз прогресті анықтаңыз, a11y-ді құрметтеңіз және анимацияларды теріс пайдаланбаңыз. iGaming-те бұл мөлшерлемелер, төлемдер, турнирлер және KYC үшін ерекше маңызды - тыныш, болжамды прогресс тікелей сенім мен конверсияны арттырады.