Formy multistep i ochrona kontekstu

1) Zasady

1. Jednym z celów jest kilka naturalnych kroków. Podziel nie przez tabele bazy danych, ale przez logikę użytkownika: „Dane → Potwierdzenie → Zakończenie”.
2. Każdy krok jest kompletnym znaczeniem. Nie kruszyć zbyt drobno: 3-5 kroków są optymalne.
3. Przejście nie powinno zresetować kontekstu. Wszystkie pola, wybory i pliki są zapisywane.
4. Pozwól mi wrócić. Powrót - brak utraty danych.
5. Śledzenie postępów. Pasek postępu, nagłówek kroku i wyczyścić CTA.
6. Użytkownik może odejść i wrócić. Projekt - lokalnie lub na serwerze.

2) Architektura wielostopniowa

Stan klienta: lokalny sklep (na przykład React Context/Redux/Signal) lub tymczasowa pamięć masowa (IndexedDB).
Stan serwera: utwórz projekt z 'draft _ id', zapisz po każdym kroku.
Bezpieczeństwo: 'draft _ id' jest powiązany z użytkownikiem i wygasa w godzinach N; dane są szyfrowane w spoczynku.

• „bieżący krok” - wskaźnik bieżącego etapu;
• „compl Steps” - wykaz ukończonych;
• „błędy” - błędy na krok;
• „progress = prąd/suma”.

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) Krok i projekt układu

Struktura: nawigacja pionowa (pulpit )/pasek postępu z góry (mobilny).

Widoczna nazwa kroku to "1. Dane osobowe”, „2. Dowód tożsamości"

• Głównym z nich jest „Next „/” Continue „.
• Drugorzędne - „Back”.
• Na ostatnim kroku - "Zakończ "/" Wyślij'.

• Użyj 'aria-current =' step '.
• Pokaż%, jeśli kroki są nierówne.
• Dodaj wiersz „Może wrócić później”.

4) Zapisz kontekst i dane

Autosave

• zmiana pola (z debunk 500-1000 ms);
• Przejdź do następnego kroku
• utrata ostrości zakładki.

• lokalnie („Na bieżąco ”/IndexedDB) - jeśli formularz jest krótki;
• serwer - dla CCM/płatności/kwestionariusz.

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

Odzyskiwanie

Podczas otwierania formularza należy poszukać projektu ('draft _ id' lub klucz lokalny).

• W przypadku konfliktu (nowe pola) - „zaktualizować projekt” z podkreśleniem zmian.

5) Wzory przejścia UX

Idź do przodu tylko po walidacji lokalnego kroku.
Z powrotem - bez potwierdzenia, jeśli nie ma utraty danych.
W przypadku błędu sieci, zapisz go lokalnie, pokaż „Przywróć przy następnym połączeniu”.
Nie zmieniaj adresu URL arbitralnie: '/form/step/2 '→ jest wygodne dla nawigacji/odzyskiwania.
Wsparcie 'Ctrl + Enter' dla szybkiego przejścia do następnego kroku.

6) Państwa i sygnały wizualne

W toku: szary/aktywny wskaźnik, krok jest klikalny tylko wtedy, gdy poprzedni jest zakończony.
Zakończone: zielony kleszcz/ikona; można otworzyć do edycji.
Błąd: czerwony zarys, tekst w polu i w linii postępów.
Wyłączony - kroki po aktualnym są ukryte lub niedostępne.

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 i dostępność

"aria-current =" krok "dla czynnego kroku.
Zmiana kroku jest wyrażana przez 'aria-live =' grzeczny '.
Skupić się w bieżącym kroku; podczas przejścia - przejdź do nagłówka.
Zakładka i Enter nawigacja jest przewidywalna; Esc nie powinien tracić kontekstu.
Dla pasków postępu krok po kroku użyj 'role =' list ',' role = 'listitem' i 'aria-label' dla tego kroku.

8) Błąd i przerywanie zachowania

Awaria sieci: "Połączenie utracone. Dane będą zapisywane lokalnie.
Timeout: powtórzyć automatycznie w 3-5 s; w przypadku awarii - projekt offline.
Przerwa sesyjna: po zalogowaniu → „Kontynuuj od ostatniego kroku”.
Błąd kroku: zapisz częściowo wypełnione pola, podkreśl problematyczne.

9) Sesje równoległe i bezpieczeństwo

'draft _ id' jest wyjątkowy dla każdego użytkownika.
Podczas otwierania nowej karty - sugeruj "Inna sesja jest otwarta. Zaktualizuj lub kontynuuj tutaj.
W przypadku formularzy CCM/finansowych dane są szyfrowane na kliencie (AES/GCM) przed zapisaniem projektu.
Usuń projekty przez TTL (na przykład 7 dni bezczynności).

10) Przykłady scenariuszy iGaming

10. 1 CCM/weryfikacja

1. Dane osobowe → 2. Dokumenty → 3. Sprawdź → 4. Zakończenie.

Autosave po przesłaniu zdjęcia.
Powrót do zdrowia po przerwie.
Status „czekanie na potwierdzenie” ze wskaźnikiem.

10. 2 Płatność/depozyt

Kroki: 1. Kwota → 2. Metoda → 3. Potwierdzenie.
Dane metody są przechowywane między sesjami.
Możesz wrócić do wyboru metody bez rozliczania kwoty.

10. 3 Ustalanie limitów

Kroki to typ limitu → wartość → potwierdzenie.
Postęp pokazuje pozostałe kroki.

Po zakończeniu - ekran „Zacznie działać w....”

11) Mierniki i kontrola

Wskaźnik wykonania:% użytkowników, którzy wykonali wszystkie kroki.
Drop-off na krok: na jakim kroku odchodzą.
Średni czas na etap - Time-To-Complete.
Automatyczne oszczędzanie sukcesu.
Wskaźnik odzyskiwania błędów - procent udanego odzysku po awarii.

12) Antypattery

Ciężka nawigacja bez „Back”.
Utrata wejścia przy ponownym uruchomieniu.
Skacząc nad krokami bez kontekstu.
Jeden wspólny składać na 10 ekranów.
Błąd kroku - i „Start ponownie”.
Pusty ekran po awarii sieci.
Pasek postępu bez nazw semantycznych („1/4/7”...).

13) Żetony systemu projektowania (przykład)

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

Ustawienia wstępne 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) Lista kontrolna QA

Oszczędzanie i przywracanie

• Na każdym etapie tworzy się i aktualizuje projekt.
• Przy ponownym uruchomieniu odzyskiwanie jest dostępne i poprawne.
• Konflikt wersji jest obsługiwany (stary/nowy format).

Nawigacja

• „Back” nie traci danych.
• Adres URL odpowiada bieżącemu krokowi.
• Pasek postępu zsynchronizowany ze statusem.

Sieć i offline

• Offline oszczędza lokalnie i przywraca online.
• Komunikaty o awarii są zrozumiałe i nieniszczące.

A11y

• 'aria-current =' step ',' aria-live = 'polite' 'work.
• Focus przechodzi do nagłówka kroku.

Wydajność

• Przejścia są natychmiastowe (≤ 100 ms).
• Zapisy asynchroniczne nie blokują UI.

15) Dokumentacja w systemie projektowym

Кобонента: "StepIndicator", "MultiStepForm", "Autos, Banner", ",

Przewodniki do przechowywania kontekstu (lokalny serwer vs), atrybuty A11y i ARIA.
Szablony UX: KYC, depozyty, limity, kwestionariusze, zwrot po błędzie.
Nie używaj przykładów awarii sieci i udanego odzyskiwania.

Krótkie podsumowanie

Wielostopniowa forma powinna się czuć jak ciągły proces, nawet jeśli użytkownik jest rozproszony, ponownie uruchomił stronę lub stracił sieć. Automatyczne zapisywanie, odzyskiwanie, widoczny postęp i bezpieczne przekaźniki zmieniają złożone scenariusze (KYC, płatności, limity) w przewidywalne i zaufane doświadczenia.