Köp basgançakly görnüşler we konteksti saklamak

1) Ýörelgeler

1. Bir maksat - birnäçe tebigy ädim. DB tablisalary boýunça däl-de, ulanyjynyň logikasy boýunça bölüň: "Maglumatlar → Tassyklamak → Tamamlamak".
2. Her ädim doly manydyr. Gaty inçe bölmäň: 3-5 ädim optimal.
3. Geçiş konteksti ýitirmeli däldir. Ähli meýdanlar, saýlawlar we faýllar saklanýar.
4. Gelmäge rugsat beriň. Yzyna - maglumatlary ýitirmän.
5. Öňe gidişligi yzarlaň. Ösüş bar, ädimiň ady we aýdyň CTA.
6. Ulanyjy gidip gaýdyp biler. Taslama - lokal ýa-da serwerde.

2) Köp basgançakly görnüşiň arhitekturasy

Müşderi State: lokal stor (mysal üçin, React Context/Redux/Signal) ýa-da wagtlaýyn ammar ('sessionStorage', IndexedDB).
Serwer state: 'draft _ id' bilen taslama dörediň, her ädimden soň saklaň.
Howpsuzlyk: 'draft _ id' ulanyjy bilen baglanyşykly we N sagatdan soň gutarýar; maglumatlar rahat şifrlenýär.

• 'currentStep' - häzirki ädimiň görkezijisi;
• 'completedSteps' - tamamlananlaryň sanawy;
• 'errors' - ädimme-ädim ýalňyşlyklar;
• `progress = current / total`.

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) Ädimleriň dizaýny we tertibi

Gurluşy: dik nawigasiýa (desktop )/ýokarky progress-bar (mobile).
Ädimiň görnüp duran ady: "1. Şahsy maglumatlar" ", 2. Şahsyýeti tassyklamak".

• Esasy - "Indiki "/" Dowam et ".
• Ikinji - "Yza".
• Soňky ädimde - "Tamamlamak "/" Ibermek ".

• 'aria-current =' step 'ulanyň.
• Ädimler birmeňzeş bolmasa% -i görkeziň.
• "Soň gaýdyp bilersiňiz" maslahatyny goşuň.

4) Mazmuny we maglumatlary saklamak

Awtomatiki saklamak

• meýdanyň üýtgemegi (debauns 500-1000 ms);
• indiki ädim ätmek;
• Sekme fokusynyň ýitmegi.

• lokal ('localStorage '/IndexedDB) - görnüşi gysga bolsa;
• serwer - KCS/tölegler/anketa üçin.

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

Dikeldiş

Formany açanyňyzda taslamany ('draft _ id' ýa-da ýerli açar) gözläň.

• Gapma-garşylyk ýüze çykan halatynda (täze meýdançalar) - üýtgeşmeleri yşyklandyrmak bilen "taslamany täzelemek".

5) UX geçişler patternleri

Diňe ädimiň ýerli tassyklamasyndan soň öňe gitmek.
Maglumat ýitgisi ýok bolsa, yza gaýdyň.
Toruň ýalňyşlygy ýüze çyksa, lokal saklaýarys, "Indiki birikdirilende dikelderis".
URL-i özbaşdak üýtgetmäň: '/form/step/2 '→ nawigasiýa/dikeldiş üçin amatly.
Indiki ädime geçmek üçin 'Ctrl + Enter' -i goldaýar.

6) Ýagdaýlar we wizual maslahatlar

In progress: çal/işjeň görkeziji, ädim diňe öňküsi tamamlansa basylýar.
Doly: ýaşyl belgi/nyşan; redaktirlemek üçin açylyp bilner.
Error: gyzyl kontury, meýdanyň aşagyndaky we progress setirindäki tekst.
Disabled: häzirki ädimden soň ädimler gizlenýär ýa-da elýeterli däl.

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 we elýeterlilik

'aria-current =' step '

Ädimiň üýtgemegi 'aria-live =' polite 'ses berýär.
Häzirki ädimde ünsüňizi saklaň; geçeniňizde - sözbaşy bilen göçüriň.
Tab we Enter nawigasiýasy öňünden aýdylýar; Esc kontekstini ýitirmeli däldir.
Ädimme-ädim barlar üçin 'role = "list' ',' role =" listitem 'we' aria-label 'ädim ätmek üçin.

8) Ýalňyşlyklar we bökdençlikler ýüze çykan mahalynda özüni alyp barşy

Tor şowsuzlygy: "Baglanyşyk ýitdi. Maglumatlar ýerli derejede saklanar".
Wagt: 3-5 sekuntdan soň awtomatiki usulda gaýtalaň; şowsuz bolsa - awtonom taslama.
Sessiýanyň kesilmegi: giriş → "Soňky ädimden dowam et".
Ädim ýalňyşlygy: bölekleýin doldurylan meýdanlary saklaýarys, problemalary görkezýäris.

9) Paralel sessiýalar we howpsuzlyk

'draft _ id' ulanyjy üçin özboluşly.
Täze taby açanyňyzda "Başga bir sessiýa açyldy. Täzelemek ýa-da dowam etmek".
KGS/maliýe görnüşleri üçin - maglumatlar taslamany saklamazdan ozal müşderide (AES/GCM) şifrlenýär.
TTL boýunça taslamalary aýyrmak (mysal üçin, hereketsizligiň 7 güni).

10) iGaming ssenarileriniň mysallary

10. 1 KUS/tassyklama

1. Şahsy maglumatlar → 2. Resminamalar → 3. Barlamak → 4. Tamamlamak.

Surat ýüklenenden soň awtoseýw.
Arakesmeden soň barlag ädiminden dikeltmek.
Görkeziji bilen "tassyklamaga garaşmak" ýagdaýy.

10. 2 Töleg/goýum

Ädimler: 1. Jemi → 2. Usul → 3. Tassyklamak.
Usul hakynda maglumatlar sessiýalaryň arasynda saklanýar.
Pul mukdaryny taşlamazdan usuly saýlamaga gaýdyp gelmek mümkindir.

10. 3 Çäkleri bellemek

Ädimler: çäk görnüşi → bahasy → tassyklama.
Ösüş galan ädimleri görkezýär.
Tamamlanandan soň - "arkaly güýje girer" ekrany....

11) Metrika we gözegçilik

Completion rate: Ähli ädimleri tamamlan ulanyjylaryň% -i.
Drop-off per step: haýsy ädimde gidýärler.
Average time per step и Time-to-Complete.
Auto-save success rate (näçe taslama dikeldildi).
Error recovery rate: şowsuzlykdan soň üstünlikli dowam etdirilenleriň paýy.

12) Antipatternler

"Yza" bolmasa gaty nawigasiýa.
Gaýtadan açylanda girizilen maglumatlaryň ýitmegi.
Kontekstsiz ädimlerden bökmek.
10 ekranda bir umumy submit.
Ädimde ýalňyşlyk - we "Täzeden başla".
Tor şowsuzlygyndan soň boş ekran.
Semantik atsyz progress-bar ("1/4/7"...).

13) Dizaýn-ulgamyň bellikleri (mysal)

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 Presets

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-çek-sanawy

Saklamak we dikeltmek

• Taslama her ädimde döredilýär we täzelenýär.
• Täzeden açylanda dikeldiş mümkin we dogry.
• Wersiýalaryň gapma-garşylygy işlenilýär (köne/täze format).

Nawigasiýa

• "Yza" maglumatlary ýitirmeýär.
• URL häzirki ädim bilen gabat gelýär.
• Progress bar ýagdaýy bilen sinhronlaşdyryldy.

Tor we awtonom

• Awtonom lokal saklaýar we onlaýn ýagdaýda dikeldýär.
• Şowsuzlyk baradaky habarlar düşnükli we netijesiz.

A11y

• ' aria-current =" step"', 'aria-live = "polite"' işleýär.
• Fokus ädimiň sözbaşysyna geçirilýär.

Çykyş

• Gyssagly geçişler (100 ms ≤).
• Asinhron saklamalar UI-ni petiklemeýär.

15) Dizaýn-ulgamdaky resminamalar

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
Konteksti saklamak boýunça gaýdlar (local vs server), A11y we ARIA atributlary.
UX şablonlary: KYC, depozitler, çäkler, anketalar, ýalňyşlykdan soň yzyna gaýtarmak.
Do/Don 't toruň şowsuzlygy we üstünlikli dikeldiş mysallary bilen.

Gysgaça gysgaça

Ulanyjy ünsüni sowup, sahypany täzeden açsa ýa-da toruny ýitirse-de, köp basgançakly görnüş üznüksiz prosesde duýulmalydyr. Awto-gorap saklamak, dikeltmek, göze görnüp duran ösüş we howpsuz retralar çylşyrymly ssenariýalary (KYC, tölegler, çäkler) öňünden aýdyp boljak we ygtybarly tejribä öwürýär.