Έντυπα πολλαπλών βημάτων και διατήρηση πλαισίου

1) Αρχές

1. Ένας στόχος είναι αρκετά φυσικά βήματα. Διαιρείται όχι με πίνακες βάσεων δεδομένων, αλλά με τη λογική χρήστη: «Επιβεβαίωση δεδομένων Ολοκλήρωση».
2. Κάθε βήμα είναι ένα πλήρες νόημα. Μην συνθλίβεστε πολύ καλά: τα 3-5 βήματα είναι τα βέλτιστα.
3. Η μετάβαση δεν πρέπει να επαναφέρει το πλαίσιο. Όλα τα πεδία, οι επιλογές και τα αρχεία αποθηκεύονται.
4. Επιτρέψτε μου να πάω πίσω. Πίσω - καμία απώλεια δεδομένων.
5. Παρακολούθηση της προόδου. Γραμμή προόδου, κεφαλίδα βήματος και σαφείς CTA.
6. Ο χρήστης μπορεί να φύγει και να επιστρέψει. Σχέδιο - τοπικά ή επί του εξυπηρετητή.

2) Αρχιτεκτονική πολλαπλών σταδίων

Κατάσταση πελάτη: τοπικό κατάστημα (π.χ. React Context/Redux/Signal) ή προσωρινή αποθήκευση ('surveStorage', IndexedDB).
Κατάσταση εξυπηρετητή: δημιουργήστε ένα σχέδιο με 'draft _ id', εκτός από κάθε βήμα.
Ασφάλεια: το «σχέδιο _ id» συνδέεται με το χρήστη και λήγει σε N ώρες. τα δεδομένα είναι κρυπτογραφημένα σε ηρεμία.

• 'currentStep' - δείκτης της τρέχουσας βαθμίδας·
• «compl Step» - κατάλογος συμπληρωμένων
• «σφάλματα» - σφάλματα ανά βήμα·
• «έξοδος = ρεύμα/σύνολο».

js const formState = {
draftId: "d-84f...",
currentStep: 2,
steps: [ { id: "personal", completed: true }, { id: "kyc", completed: false } ],
data: { name:"", idPhoto:null },
lastSaved: Date. now()
}

3) Σχεδιασμός βήματος και διάταξης

Δομή: κάθετη πλοήγηση (επιφάνεια εργασίας )/γραμμή προόδου από ψηλά (κινητή).

Το ορατό όνομα του βήματος είναι "1. Προσωπικά δεδομένα», «2. Απόδειξη ταυτότητας"

• Το κύριο είναι το «Επόμενο «/» Συνεχίστε «.
• Δευτεροβάθμια - «Πίσω».
• Στο τελευταίο βήμα - «Πλήρης «/» Αποστολή «.

• Χρησιμοποιήστε το' ari- current =» step»'.
• Εμφάνιση% αν τα βήματα είναι άνισα.
• Να προστεθεί η φράση «Μπορεί να επανέλθει αργότερα».

4) Αποθήκευση πλαισίου και δεδομένων

Αυτόματη αποθήκευση

• αλλαγή πεδίου (με αποκεφαλισμό 500-1000 ms)·
• Μετακίνηση στο επόμενο βήμα
• απώλεια της εστίασης της καρτέλας.

• τοπικά («localStorage »/IndexedDB) - εάν το έντυπο είναι σύντομο·
• εξυπηρετητής - για CCM/πληρωμές/ερωτηματολόγιο.

js const saveDraft = debounce(async (data) => {
await fetch('/api/draft', { method:'POST', body: JSON. stringify(data) });
}, 800);

Ανάκτηση

Κατά το άνοιγμα του εντύπου, αναζητήστε ένα σχέδιο («σχέδιο _ id» ή τοπικό κλειδί).

• Σε περίπτωση σύγκρουσης (νέα πεδία) - «επικαιροποιημένο σχέδιο» με έμφαση στις αλλαγές.

5) Μεταβατικά πρότυπα UX

Προχωρήστε μόνο μετά την επικύρωση του τοπικού βήματος.
Πίσω - χωρίς επιβεβαίωση εάν δεν υπάρχει απώλεια δεδομένων.
Σε περίπτωση σφάλματος δικτύου, αποθηκεύστε το τοπικά, δείξτε «Επαναφορά στην επόμενη σύνδεση».
Μην αλλάζετε το URL αυθαίρετα: '/μορφή/βήμα/2 '→ είναι βολικό για πλοήγηση/ανάκτηση.
Υποστήριξη 'Ctrl + Enter' for μια γρήγορη μετάβαση στο επόμενο βήμα.

6) Κράτη και οπτικές ενδείξεις

Εν εξελίξει: γκρι/ενεργός δείκτης, το βήμα είναι κλικ μόνο εάν το προηγούμενο έχει ολοκληρωθεί.
Ολοκληρώθηκε: πράσινο τικ/εικονίδιο. μπορεί να ανοίξει για επεξεργασία.
Σφάλμα: κόκκινο περίγραμμα, κείμενο κάτω από το πεδίο και στη γραμμή προόδου.
Απενεργοποιημένα - Τα βήματα μετά το τρέχον είναι κρυμμένα ή μη διαθέσιμα.

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> 3 Verification </li>
</ol>
</nav>

7) A11y και διαθεσιμότητα

' aria-ρεύμα =» βήμα»' για το ενεργό βήμα.
Η αλλαγή βήμα εκφράζεται από 'aria-live = «ευγενική»'.
Διατήρηση της εστίασης στο τρέχον στάδιο· κατά τη διάρκεια της μετάβασης - μετακίνηση στην κεφαλίδα.
Η πλοήγηση καρτέλας και εισόδου είναι προβλέψιμη. Η ΟΚΕ δεν θα πρέπει να χάσει το πλαίσιο.
Για τις ράβδους προόδου βήμα προς βήμα, χρησιμοποιήστε το 'role =' lis ',' role = 'listitem' 'και' aria-label 'για το βήμα.

8) Σφάλμα και διακοπή συμπεριφοράς

Αποτυχία δικτύου: "Χαμένη σύνδεση. Τα δεδομένα θα αποθηκευτούν τοπικά.
Timeout: επαναλαμβάνεται αυτόματα σε 3-5 s. σχετικά με την αποτυχία - σχέδιο εκτός σύνδεσης.
Διάλειμμα συνεδρίας: μετά τη σύνδεση → «Συνεχίστε από το τελευταίο βήμα».
Σφάλμα βήματος: αποθήκευση μερικώς συμπληρωμένων πεδίων, επισήμανση προβληματικών.

9) Παράλληλες συνεδριάσεις και ασφάλεια

"draft _ i είναι μοναδικό ανά χρήστη.
Όταν ανοίγετε μια νέα καρτέλα - προτείνετε "Μια άλλη συνεδρία είναι ανοιχτή. Επικαιροποίηση ή συνέχιση εδώ.
Για CCM/χρηματοοικονομικά έντυπα, τα δεδομένα κρυπτογραφούνται στον πελάτη (AES/GCM) πριν από την αποθήκευση του σχεδίου.
Διαγραφή σχεδίων με TTL (για παράδειγμα, 7 ημέρες αδράνειας).

10) Παραδείγματα σεναρίων iGaming

10. 1 CCM/επαλήθευση

1. Δεδομένα προσωπικού χαρακτήρα → 2. Έγγραφα → 3. Ελέγξτε → 4. Ολοκλήρωση.

Autosave μετά την αποστολή μιας φωτογραφίας.
Ανάκτηση από το στάδιο της δοκιμής μετά από διακοπή.
Κατάσταση «αναμονής επιβεβαίωσης» με δείκτη.

10. 2 Πληρωμή/κατάθεση

Βήματα: 1. Ποσό → 2. Μέθοδος → 3. Επιβεβαίωση.
Τα δεδομένα της μεθόδου αποθηκεύονται μεταξύ των συνεδριών.
Μπορείτε να επιστρέψετε στην επιλογή της μεθόδου χωρίς να εκκαθαρίσετε το ποσό.

10. 3 Όρια καθορισμού

Τα στάδια είναι οριακή τιμή τύπου επιβεβαίωσης.
Η πρόοδος δείχνει τα υπόλοιπα βήματα.
Μετά την ολοκλήρωση - η οθόνη «Θα τεθεί σε ισχύ σε»....

11) Μετρήσεις και έλεγχος

Ποσοστό ολοκλήρωσης:% των χρηστών που έχουν ολοκληρώσει όλα τα στάδια.
Drop-off ανά βήμα: σε ποιο βήμα φεύγουν.
Μέσος χρόνος ανά στάδιο - Χρόνος έως την ολοκλήρωση.
Αυτόματη εξοικονόμηση ποσοστού επιτυχίας.
Ποσοστό ανάκτησης σφάλματος - Το ποσοστό επιτυχούς ανάκτησης μετά από αποτυχία.

12) Αντιπατερίδια

Σκληρή πλοήγηση χωρίς «Πίσω».
Απώλεια εισόδου κατά την επανεκκίνηση.
Πηδώντας πάνω από βήματα χωρίς πλαίσιο.
Μία κοινή υποβολή ανά 10 οθόνες.
Σφάλμα βήματος - και «Επανεκκίνηση».
Κενή οθόνη μετά από βλάβη δικτύου.
Γραμμή προόδου χωρίς σημασιολογικές ονομασίες («1/4/7»...).

13) Μάρκες συστήματος σχεδιασμού (παράδειγμα)

json
{
"steps": {
"radius": 10,
"gap": 8,
"barHeight": 4,
"activeColor": "#2B9F5E",
"inactiveColor": "#E0E0E0"
},
"autosave": {
"debounceMs": 800,
"retryMs": 3000,
"ttlDays": 7
},
"a11y": {
"ariaLive": "polite",
"focusBehavior": "scrollToTitle"
}
}

προεπιλογές CSS

css
.steps { display:flex; gap:8px; list-style:none; counter-reset:step; }
.steps li { position:relative; flex:1; text-align:center; }
.steps li::before { counter-increment:step; content:counter(step); display:block; width:24px; height:24px; line-height:24px; margin:0 auto 4px; border-radius:50%; background:var(--inactive); color:#fff; }
.steps li. done::before { background:var(--success); }
.steps li[aria-current="step"]::before { background:var(--primary); }

14) Κατάλογος ελέγχου QA

Αποθήκευση και αποκατάσταση

• Καταρτίζεται σχέδιο και επικαιροποιείται σε κάθε στάδιο.
• Κατά την επανεκκίνηση, η ανάκτηση είναι διαθέσιμη και σωστή.
• Η διαμάχη έκδοσης αντιμετωπίζεται (παλιά/νέα μορφή).

Πλοήγηση

• «Πίσω» δεν χάνει τα δεδομένα.
• Το URL αντιστοιχεί στο τρέχον στάδιο.
• Γραμμή προόδου συγχρονισμένη με την κατάσταση.

Δίκτυο και offline

• Offline αποθηκεύει τοπικά και αποκαθιστά online.
• Τα μηνύματα αποτυχίας είναι κατανοητά και μη καταστροφικά.

A11y

• ' aria-current =» step»', 'aria-live = «polite»' work.
• Η εστίαση κινείται προς την κεφαλίδα του βήματος.

Απόδοση

• Οι μεταβάσεις είναι στιγμιαίες (≤ 100 ms).
• Οι ασύγχρονες αποταμιεύσεις δεν εμποδίζουν τους UI.

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

: 'StepIndicator', 'MultiStepFor Компоненты,' AutosaveBanner ',' DraftReaderModal '.
Οδηγοί για την αποθήκευση συμφραζομένων (τοπικός έναντι διακομιστής), χαρακτηριστικών A11y και ARIA.
Πρότυπα UX: KYC, καταθέσεις, όρια, ερωτηματολόγια, απόδοση μετά από σφάλμα.
Κάντε/Μην με παραδείγματα αποτυχίας δικτύου και επιτυχούς ανάκτησης.

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

Η μορφή πολλαπλών σταδίων θα πρέπει να μοιάζει με μια συνεχή διαδικασία, ακόμη και αν ο χρήστης αποσπάται, επανεκκινεί τη σελίδα ή χάνει το δίκτυο. Η αυτόματη αποθήκευση, η ανάκτηση, η ορατή πρόοδος και τα ασφαλή retrays μετατρέπουν σύνθετα σενάρια (KYC, πληρωμές, όρια) σε προβλέψιμες και αξιόπιστες εμπειρίες.