Δείκτες προόδου και κατάστασης

1) Αρχές

1. Άμεση απόκριση (≤ 100 ms). Οποιαδήποτε ενέργεια επιβεβαιώνεται αμέσως οπτικά: πιέζοντας τον «απασχολημένο »/σκελετό/μικροαποικισμό →.
2. Εντιμότητα και προβλεψιμότητα. Τα ποσοστά αντικατοπτρίζουν την πραγματική πρόοδο και όχι το «αιώνιο 99%». Εάν η αξιολόγηση δεν είναι δυνατή, χρησιμοποιήστε μια απροσδιόριστη παραλλαγή και εξήγηση.
3. Πλαίσιο δίπλα στη δραστηριότητα. Ο δείκτης είναι εκεί όπου ο χρήστης κοιτάζει/δρα (κουμπί, κάρτα, μπλοκ), όχι στην άκρη της γωνίας.
4. Stealth μετά την επιτυχία. Η επιτυχία είναι μια σύντομη επιταγή/εξασθένιση και αυτό είναι όλο. Σφάλμα - κατανοητή εξήγηση και ασφαλής επανάληψη.
5. Προκαθορισμένη διαθεσιμότητα. 'role =' progressbar '', 'aria-valuenow', ζωντανές περιοχές, αντίθεση ≥ AA.

2) Τύποι δεικτών και χρόνος χρήσης τους

Γραμμική πρόοδος (προσδιορισμός/απροσδιόριστη). Φόρτωση/εισαγωγή/εξαγωγή, στάδια με σαφή εμβέλεια.
Κυκλική πρόοδος (συνήθως απροσδιόριστη). Σύντομες τοπικές λειτουργίες σε συμπαγή σημεία.
Στέπερ (βήμα προς βήμα). Διαδοχικά βήματα («Βήμα 2 του 4»), KYC, κύριες διαδικασίες.
Σκελετός (βύσματα σκελετού). Υποκατάσταση της δομής του περιεχομένου αντί των spinners. να αποφεύγεται το «shimmer» για τους χρήστες με «προτιμώμενη-μειωμένη κίνηση».
Σήματα κατάστασης (επιτυχία/προειδοποίηση/κίνδυνος/πληροφορίες). Η κατάσταση του αντικειμένου (In Process, Readed, Ready).
Πανό/πρόποση κατάστασης. Παγκόσμια γεγονότα: εκτός σύνδεσης, αποτυχία διακομιστή, συγχρονισμός αναμονής.
Εισερχόμενος φορτωτής (κουμπί/γραμμή). Τοπικές λειτουργίες: «Αποθήκευση»..., «Αποστολή»...

3) Οριστική έναντι αβέβαιης προόδου

Προσδιορισμός: η ποσότητα της εργασίας είναι γνωστή → δείχνουμε %/στάδια.
Απροσδιόριστος: άγνωστος όγκος → «Επεξεργασία σε εξέλιξη»... + πλαίσιο («Συνήθως έως 1-2 λεπτά»).
Κρατική μετάβαση - Μπορείτε να ξεκινήσετε με απροσδιόριστο → να πάτε να καθορίσετε πότε εμφανίζεται η αξιολόγηση.
ETA προσεκτικά: εμφάνιση του εύρους («~ 30-60 δευτερόλεπτα») και αποφυγή «υποσχέσεων».

4) Τοποθέτηση και πρότυπα

Τοπικά προς δράση: κουμπί 'aria-busy', spinner στη σειρά πίνακα, πρόοδος καρτών.
Πάνω από το τετράγωνο/κατάλογο: γραμμική ράβδος κάτω από την επικεφαλίδα τμήματος κατά τη διάρκεια των εργασιών παρτίδας.
Παγκόσμια: εξαιρετικά λεπτή πρόοδος (αλλαγή διαδρομής), πανό συστήματος.
Κολλώδης πίνακας (κινητό): επιβεβαίωση/πρόοδος σε CTA στην κάτω δεξαμενή.

5) Διαθεσιμότητα (A11y)

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

Απροσδιόριστο: ορισμός 'ρόλου =' progressbar '' χωρίς 'aria-valuenow', προσθήκη επεξηγηματικού κειμένου στο 'role =' status ''.
Ζωντανές περιοχές: 'aria-live = «ευγενική»' για τακτικές ενημερώσεις, 'δυναμική' μόνο για κρίσιμες.
«aria-busy =» true «» σε ένα εμπορευματοκιβώτιο που παρεμποδίζεται προσωρινά από ενέργειες.
Η εστίαση δεν «πηδάει»: όταν αλλάζει το στάδιο, μετακινείται η εστίαση στην κεφαλίδα του βήματος.

6) Αντιγραφή και οπτική σημασιολογία

Εν συντομία και στην περίπτωση: «Τρέχουσα φόρτωση»..., «Πληρωμή επεξεργασίας»....
Προσθήκη "τι ακολουθεί": "Έγινε. Ας ανανεώσουμε αυτόματα τη σελίδα.
Χρώματα: πράσινο - επιτυχία, πορτοκαλί - προειδοποίηση/προσοχή, κόκκινο - σφάλμα. Χρώμα ≠ το μόνο μέσο νοήματος: δώστε ένα εικονίδιο/κείμενο.

7) Upbeat ενημερώσεις και pullbacks

Αισιόδοξος: αλλάζουμε αμέσως τον UI (για παράδειγμα, το σήμα «Αγαπημένα») και το επιβεβαιώνουμε αθόρυβα με τον διακομιστή.
Σε περίπτωση σφάλματος - soft rollback + εξήγηση και 'Retry'.
Κρίσιμες πράξεις (επιτόκιο/πληρωμή): προαιρετικά «ήπια αισιόδοξη» (ορίστε «Αποστολή → αναμονή για επιβεβαίωση»...), αλλά χωρίς αλλαγή της νομισματικής κατάστασης πριν από την επιβεβαίωση.

8) Ουρές αναμονής και βασικά καθήκοντα

Εμφάνιση της αναμονής: «n» εργασίες κατά την επεξεργασία, μεμονωμένες κάρτες με πρόοδο.
Διακοπή/ακύρωση για μεγάλες λειτουργίες, εάν είναι δυνατόν.
Επεξεργασία φόντου: «Στο παρασκήνιο», τοστ μετά την ολοκλήρωση, τμήμα «Ιστορικό εργασιών».

9) Επιδόσεις και χρονοδιαγράμματα

Πρώτη αντίδραση ≤ 100ms: χρησιμοποιήστε σκελετό/inline-busy αντί του κενού.
Κινούμενα σχέδια: 120-180 ms (in), 80-140 ms (out), μόνο 'transform/αδιαφάνεια'.
Μακροχρόνιες διαδικασίες: επικαιροποίηση της προόδου το πολύ 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>

Γραμμικός προσδιορισμός

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) Σκελετός σωστός

Χρησιμοποιήστε τη μορφή του μελλοντικού περιεχομένου (κάρτες/γραμμές), χωρίς ατελείωτη λάμψη (ή απενεργοποίηση με «προνομιούχα μειωμένη κίνηση»).
Χρονικό όριο: εάν η φόρτωση> 300-500 ms, ο σκελετός είναι δικαιολογημένος· με χαμηλότερες καθυστερήσεις, αρκεί το «micro-fade».

12) Σήματα κατάστασης (δηλώνει αντικείμενο)

Παραδείγματα είναι το σχέδιο, εν εξελίξει, εκκρεμούσας επιβεβαίωσης, έτοιμης, απορριφθείσας.

Σύντομο κείμενο, σταθερά χρώματα εικονιδίων/φόντου, αντίθεση ≥ AA.
Icon' aria-hidden =» true»' + text label (για SR).
Κάντε κλικ - αποκαλύψτε λεπτομέρειες ή ανοίξτε «Ιστορία».

13) Οι ιδιαιτερότητες του iGaming

• Πατώντας το CTA → «Αποστολή»..., με καθυστέρηση> 3 δευτερόλεπτα - «Αναμονή για επιβεβαίωση»... (απροσδιόριστο).
• Επιτυχία - «Αποδεκτό στοίχημα» + έλεγχος σφάλμα - ειλικρινής εξήγηση («η περίοδος αγοράς έκλεισε/η αναλογία άλλαξε») και ασφαλής Retry.

• Προσδιορισμός ανά στάδιο: «Μέθοδος ελέγχου → Αποστολή → Επιβεβαίωση PSP».
• Για έξοδο - Σήμα διεργασίας, οθόνη κατάστασης στο προφίλ, εύρος ETA. προώθηση της ολοκλήρωσης.

• Βαθμίδα εγγραφής (βαθμίδες), πρόοδος στην απονομή (N/βαθμοί), σήμα κατάστασης «Συμμετέχων».
• Ενημέρωση σε πραγματικό χρόνο - τακτοποιημένη, χωρίς αναβοσβήνει, με 'aria-live = «ευγενική»'.

• Στέπερ + σήμα "Under Review. "Δείξτε τι είναι ήδη αποδεκτό (tick) και τι έχει απομείνει.

14) Χρώματα, αντίθεση και κείμενο

Επιτυχία/πληροφορίες/προειδοποίηση/κίνδυνος - τέσσερις σταθεροί τόνοι στο σύστημα σχεδιασμού.
Το κείμενο έρχεται σε αντίθεση με το φόντο του σήματος ≥ AA.
Μη χρησιμοποιείτε το ίδιο χρώμα για «σε διαδικασία» και «προειδοποίηση».

15) Μετρήσεις

Time-to-First-Feedback (TTFF): κάντε κλικ στην πρώτη οπτική απόκριση.
Χρόνος ολοκλήρωσης για τις λειτουργίες και ποσοστό πτώσης/ματαίωσης για μακροχρόνιες εργασίες.
Επαναπροσδιορισμός του ποσοστού επιτυχίας για επιχειρήσεις προόδου.
% των αισιόδοξων που ολοκλήρωσαν με επιτυχία (και το μερίδιο των rollbacks).
Ορατός χρονοσκελετός/spinner (στόχος: όσο το δυνατόν λιγότερος).

16) Αντι-μοτίβα

Σιωπηλό κουμπί (χωρίς φορτίο/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, υπάρχει ένας τοπικός πολυσύχναστος/σκελετός.
• Προσδιορισμός - πραγματικό%; απροσδιόριστο - με μια εξήγηση.

Διαθεσιμότητα

• 'ρόλος = «progressbar» '/' aria-valuenow' ορθός· ζωντανές περιφέρειες για επικαιροποιήσεις.
• Αντίθεση σημάτων/κειμένου ≥ AA; το χρώμα δεν είναι ο μόνος φορέας νοήματος.

Συμπεριφορά

• Αισιόδοξος με σωστή ανατροπή και εξήγηση.
• Εμφανίζονται ουρές αναμονής. υπάρχει ακύρωση/παύση (κατά περίπτωση).
• Η πρόοδος κοντά στη σκηνή δεν επικαλύπτει το CTA.

Απόδοση

• Ενημερώσεις το πολύ 10-15 φορές το δευτερόλεπτο. κινούμενα σχέδια «transform/αδιαφάνεια».
• Ο σκελετός δεν πειράζει τη λάμψη με την «αναπαραγωγή-κίνηση».

Κείμενα

• Σύντομη, χωρίς τεχνική ορολογία. «τι θα ακολουθήσει» μετά την ολοκλήρωση.
• Καμία «υπόσχεση» του ακριβούς χρόνου, εκτός αν είναι εγγυημένη.

19) Τεκμηρίωση στο σύστημα σχεδιασμού

: 'PrensBar', 'PrevenCircle', 'Stepper', 'StatesBadge', 'Inline Loader', 'Skeleton'.
Κανόνες για την επιλογή τύπου, αντιγραφής και χρωμάτων για καταστάσεις.
Πρότυπα: αισιόδοξες, ουρές αναμονής, επεξεργασία υποβάθρου, συγχρονισμός εκτός σύνδεσης.
Do/Don 't gallery: «perpetual spinner», ψευδή ποσοστά, «mute» CTA vs good TTFF.

Σύντομη Περίληψη

Οι δείκτες προόδου και κατάστασης θα πρέπει να παρέχουν έγκαιρη, ειλικρινή και προσβάσιμη ανατροφοδότηση. Τοποθετήστε τα παράλληλα με τη δράση, διακρίνετε μεταξύ σαφούς και αβέβαιης προόδου, σεβαστείτε το a11y και μην καταχραστείτε κινούμενα σχέδια. Στο iGaming, αυτό είναι ιδιαίτερα σημαντικό για στοιχήματα, πληρωμές, τουρνουά και KYC - ήρεμη, προβλέψιμη πρόοδος αυξάνει άμεσα την εμπιστοσύνη και τη μετατροπή.