პროგრესისა და სტატუსის ინდიკატორები

1) პრინციპები

1. მყისიერი პასუხი (100 ms). ნებისმიერი მოქმედება დაუყოვნებლივ დადასტურებულია ვიზუალურად: დაჭერით 'busy '/ჩონჩხი/მიკროანიმაცია.
2. პატიოსნება და პროგნოზირება. პროცენტი ასახავს რეალურ პროგრესს და არა „მარადიულ 99%“. თუ შეფასება შეუძლებელია, გამოიყენეთ არა კონკრეტული ვარიანტი და ახსნა.
3. კონტექსტი მოქმედების მახლობლად. ინდიკატორი, სადაც მომხმარებელი უყურებს/მოქმედებს (ღილაკი, ბარათი, ბლოკი), და არა შორეულ კუთხეში.
4. წარმატების შემდეგ უხილავი. წარმატება - მოკლე ჩეკი/ყალბი და ეს ყველაფერი. შეცდომა - გასაგები ახსნა და უსაფრთხო გამეორება.
5. ნაგულისხმევი წვდომა. 'role = „progressbar“', 'aria-valuenow', ცოცხალი რეგიონები, AA კონტრასტი.

2) ინდიკატორების ტიპები და როდის გამოიყენეთ ისინი

ხაზოვანი პროგრესი (determinate/indeterminate). დატვირთვა/იმპორტი/ექსპორტი, ნაბიჯები გასაგები მოცულობით.
წრიული პროგრესი (ჩვეულებრივ indeterminate). მოკლე ადგილობრივი ოპერაციები კომპაქტურ ადგილებში.
სტეპერი (ნაბიჯი). თანმიმდევრული ეტაპები („ნაბიჯი 2 4“), KYC, მასტერკლასები.
სკელეტონი (ჩონჩხის ჩონჩხი). შინაარსის სტრუქტურის შეცვლისთვის, სპინერების ნაცვლად; მოერიდეთ shimmer- ს მომხმარებლებისთვის „prefers-reduced-motion“.
სტატუს ბეიჯი (success/warning/danger/info). ობიექტის მდგომარეობა („დამუშავებაში“, „უარყოფა“, „მზად“).
ბანერი/სტატუსის სადღეგრძელო. გლობალური მოვლენები: ოფლაინი, სერვერის უკმარისობა, რიგის სინქრონიზაცია.
Inline loader (ღილაკი/სტრიქონი). ადგილობრივი ოპერაციები: „დაცვა“..., „გაგზავნა“....

3) გარკვეული გაურკვეველი პროგრესი

Determinate: ცნობილია მუშაობის მოცულობა, ჩვენ ვაჩვენებთ %/ეტაპს.
Indeterminate: მოცულობა უცნობია - „მიმდინარეობს დამუშავება“... + კონტექსტი („ჩვეულებრივ 1-2 წუთამდე“).
სახელმწიფოების ცვლილება: შეგიძლიათ დაიწყოთ indeterminate - ზე გადასვლა, როდესაც შეფასება გამოჩნდება.
ETA ფრთხილად: აჩვენეთ დიაპაზონი („~ 30-60 წამი“) და თავიდან აიცილეთ „დაპირებები“.

4) განთავსება და ნიმუშები

ადგილობრივად მოქმედებისკენ: 'aria-busy' ღილაკი, ცხრილის ზოლები, ბარათის პროგრესი.
ბლოკის ზემოთ/ჩამონათვალში: ხაზოვანი ბარი განყოფილების კედლის ქვეშ, პაკეტის ოპერაციებში.
გლობალურად: ზედა თხელი წინსვლა, სისტემის ბანერები.
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 = „ნამდვილი“ კონტეინერზე, რომელიც დროებით დაბლოკილია მოქმედებებით.
ფოკუსი არ არის „ნახტომი“: სცენის შეცვლისას, ფოკუსი გადაიტანეთ სტეპერის ნაბიჯის სათაურზე.

6) საავტორო უფლებები და ვიზუალური სემანტიკა

მოკლედ და საქმეში: „დატვირთულია“..., „ჩვენ ვამუშავებთ გადახდას“....

დაამატეთ "რა არის შემდეგი": "მზად არის. განაახლეთ გვერდი ავტომატურად."

ფერები: მწვანე - წარმატება, ნარინჯისფერი - გაფრთხილება/ყურადღება, წითელი - შეცდომა. ფერი არის მნიშვნელობის ერთადერთი გადამზიდავი: მიეცით ხატი/ტექსტი.

7) ოპტიმისტური განახლებები და გამოტოვება

ოპტიმისტიკა: ჩვენ დაუყოვნებლივ ვცვლით UI- ს (მაგალითად, ნიშანს „არჩეულში“) და მშვიდად ვადასტურებთ სერვერს.
შეცდომით - რბილი გამოტოვება + ახსნა და 'Retry'.
კრიტიკული ოპერაციები (განაკვეთი/გადახდა): სურვილისამებრ "რბილი ოპტიმისტიკა" (ჩაწერეთ "გაგზავნილი" ჩვენ ველოდებით დადასტურებას "...), მაგრამ ფულადი მდგომარეობის შეცვლის გარეშე, სანამ დადასტურდება.

8) რიგები და ფონური დავალებები

აჩვენეთ რიგები: 'n' დავალებები დამუშავებაში, ინდივიდუალური ბარათები პროგრესით.
მიეცით პაუზა/გაუქმება გრძელი ოპერაციებისთვის, თუ ეს შესაძლებელია.
ფონის დამუშავება: გასროლა „ფონზე“, ბოლოს სადღეგრძელოები, სექცია „დავალებების ისტორია“.

9) შესრულება და ტაიმინგი

პირველი რეაქცია 100 ms: გამოიყენეთ skeleton/inline-busy სიცარიელის ნაცვლად.
ანიმაციები: 120-180 ms (in), 80-140 ms (out), მხოლოდ „ტრანსფორმაცია/კონტროლი“.
გრძელი პროცესები: პროგრესის განახლება არა უმეტეს 10-15 ჯერ/წმ; ჯგუფური ცვლილებები.

10) Snippets

ღილაკის ადგილობრივი წინსვლა

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) სკელეტონი სწორად

გამოიყენეთ მომავალი შინაარსის ფორმა (ბარათები/სტრიქონები), უსასრულო შიმერის გარეშე (ან გამორთეთ „პრეფერენციული-მონაცვლეობით“).
დროის ზღვარი: თუ დატვირთვა> 300-500 ms, სკელეტონი გამართლებულია; ნაკლები შეფერხებებით, საკმარისია „მიკრო სახე“.

12) სტატუსის ბეიჯი (ობიექტის მდგომარეობა)

მაგალითები: პროექტი, დამუშავების დროს, დადასტურებას ელოდება, მზად ვარ, უარი ვთქვა.

მოკლე ტექსტი, ხატის/ფონის სტაბილური ფერები, AA კონტრასტის.
ხატი' aria-hidden =“ ნამდვილი“' + ტექსტური ეტიკეტი (SR- სთვის).
დაწკაპეთ - ჩვენ ვაცხადებთ დეტალებს ან ვხსნით „ისტორიას“.

13) iGaming სპეციფიკა

• CTA- ს დაჭერით „გაგზავნილი“..., შეფერხებით> 3 წმ - „ჩვენ ველოდებით დადასტურებას...“ (indeterminate).
• წარმატება - „ფსონი მიღებულია“ + ჩეკი; შეცდომა - პატიოსანი ახსნა („ბაზრის პერიოდი დახურულია/კოეფიციენტი შეიცვალა“) და უსაფრთხო რეტრი.

• Determinate ეტაპზე: „მეთოდის შემოწმება - გაგზავნა PSP დადასტურება“.
• გამომავალი - დამუშავების ბარიერი, პროფილის სტატუსის ეკრანი, ETA დიაპაზონი; დასასრულს.

• სტეპერის რეგისტრაცია (ნაბიჯები), პროგრესი ჯილდოსკენ (N/ქულები), „მონაწილე“ სტატუსის მიღწევა.
• Real Time განახლება - ნაზად, მოციმციმე გარეშე, s 'aria-live = „polite“.

• სტეპერი + გასროლა „შემოწმებაზე“. აჩვენეთ რა არის უკვე მიღებული (ნიშანი) და რა დარჩა.

14) ფერები, კონტრასტები და ტექსტი

Success/Info/Warning/Danger - ოთხი სტაბილური ტონი დიზაინის სისტემაში.
ტექსტის კონტრასტი Baje Foundation - AA.
ნუ გამოიყენებთ ერთსა და იმავე ფერს „დამუშავებისა“ და „გაფრთხილებისთვის“.

15) მეტრიკი

Time-to-First-Feedback (TTFF): კლიკიდან დაწყებული პირველი ვიზუალური პასუხი.
Completion Time ოპერაციებში და drop/abort rate გრძელი დავალებებისთვის.
Retry success rate პროგრესირების ოპერაციებისთვის.
% ოპტიმისტი, რომელიც წარმატებით დასრულდა (და გამოტოვების წილი).
Visible time skeleton/spinner (მიზანი: რაც შეიძლება ნაკლები).

16) ანტი შაბლონები

„მუნჯი“ ღილაკი (არ არის 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
.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 ms; არის ადგილობრივი busy/skeleton.
• Determinate - რეალური%; indeterminate - განმარტებით.

ხელმისაწვდომობა

• 'role = „progressbar“ '/' aria-valuenow' სწორი; live რეგიონები განახლებებში.
• ბეიჯის/ტექსტის კონტრასტი AA; ფერი არ არის მნიშვნელობის ერთადერთი გადამზიდავი.

ქცევა

• ოპტიმისტიკა სწორი გამოტოვებით და განმარტებით.

ხაზები ნაჩვენებია; არსებობს გაუქმება/პაუზა (თუ გამოიყენება).

• პროგრესი სცენის მახლობლად, არ ბლოკავს CTA- ს.

შესრულება

• განახლებები არა უმეტეს 10-15 ჯერ/წმ; ანიმაცია 'ტრანსფორმირება/კეთილდღეობა'.
• Skeleton არ იშლება shimmer- ით 'reduce-motion'.

ტექსტები

• მოკლედ, ტექნიკური ჯარგონის გარეშე; „რა არის შემდეგი“ დასრულების შემდეგ.
• ზუსტი დროის „დაპირებების“ გარეშე, თუ ეს გარანტირებული არ არის.

19) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
წესებს არჩევანის ტიპი, საავტორო უფლებები და ფერები სტატუსებისთვის.
ნიმუშები: ოპტიმისტიკა, რიგები, ფონური დამუშავება, ოფლაინ სინქრონიზაცია.
Do/Don 't გალერეა: „მარადიული სპინერი“, ყალბი ინტერესი, „მუნჯი“ CTA vs კარგი TTFF.

მოკლე რეზიუმე

პროგრესისა და სტატუსის ინდიკატორებმა უნდა მისცეს დროული, გულწრფელი და ხელმისაწვდომი გამოხმაურებები. განათავსეთ ისინი მოქმედების გვერდით, განასხვავეთ გარკვეული და განუსაზღვრელი პროგრესი, პატივი სცეთ a11y- ს და არ ბოროტად გამოიყენოთ ანიმაციები. IGaming- ში ეს განსაკუთრებით მნიშვნელოვანია განაკვეთების, გადახდების, ტურნირებისა და KYC- სთვის - მშვიდი, პროგნოზირებადი პროგრესი პირდაპირ ზრდის ნდობას და კონვერტაციას.