Բազմաշերտ ձևեր և կոնտեքստի պահպանում

1) Սկզբունքներ

1. Մեկ նպատակը մի քանի բնական քայլ է։ Կիսեք ոչ թե BD ալգորիթմներով, այլ օգտագործողի տրամաբանությամբ. <<Տվյալները www.ru Pro>>։

2. Յուրաքանչյուր քայլ ավարտված իմաստ է։ Մի մանրացրեք շատ փոքր ՝ 3-5 քայլը լավատեսորեն։

3. Անցումը չպետք է փչացնի համատեքստը։ Բոլոր դաշտերը, ընտրությունները և կոդավորման ֆայլերը։

4. Թույլ տվեք վերադառնալ։ Ետ 'առանց տվյալների կորստի։

5. Հետևեք առաջընթացին։ Առաջընթաց-բար, կոդավորման վերնագիր և պարզ CTA։

6. Օգտագործողը կարող է հեռանալ և վերադառնալ։ Չեռնովիկը տեղական կամ սերվերի վրա է։

2) Բազմաշերտ ճարտարապետությունը

Հաճախորդի սթեյթ 'տեղական սթոր (օրինակ ՝ React Disext/Redux/Signal) կամ ժամանակավոր պահեստ («sessionStorage», IndexeddDB)։

Սերվերային սթեյթ 'պատրաստել չեռնովիկ' «www.aft _ id», պահպանեք յուրաքանչյուր կոմպոզիցիայից հետո։

Անվտանգությունը '«www.aft _ id» կապված է օգտագործողի հետ և ավարտվում է N ժամից։ տվյալները կոդավորված են հանգստի մեջ։

Քայլերի մեխանիկա

«currentStep» -ը ընթացիկ ինդեքսն է։

«completedSteps» - ավարտվածների ցանկը;

'errors' - 108-շագանակագույն սխալներ;

`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) Քայլերի և մոդելի դիզայնը

Կառուցվածքը 'ուղղահայաց ռոտացիա (desktop )/առաջընթաց-բար վերևում (mobile)։

Տեսանելի անունը կոչվում է "1։ Անձնական տվյալները», «2։ Ինքնության ապացույցը"։

CTA կոճակները

Հիմնականը «Հաջորդը «/« Շարունակել »է։

Արբիտրաժային '«Առաջ»։

Վերջին հանդիպման ժամանակ '«Ավարտել «/» Ուղարկել »։

Առաջընթացի դիզայնը

Օգտագործեք' aria-current =» step»։

Ցույց տվեք%, եթե քայլերը անհավասար են։

Ավելացրեք «Կարող եք վերադառնալ ավելի ուշ»։

4) Կոնտեքստի և տվյալների պահպանումը

Ավտո պահպանումը

Պահպանեք

դաշտի փոփոխությունը (500-1000 մզ դեբաունսի հետ);

անցում հաջորդ քայլին.

ավանդի ֆոկուսի կորուստ։

Պահեստ

Տեղական («wwww.alStorage »/IndexeddDB) - եթե ձևը կարճ է;

սերվերը KUS/վճարումների/հարցաթերթիկներ են։

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

Վերականգնումը

Երբ բացեք ձևը, փնտրեք չեռնովիկը («www.aft _ id» կամ տեղական բանալին)։

Առաջարկեք վերականգնել

Հակամարտության դեպքում (նոր դաշտեր) «նորարարություն» է փոփոխության լուսավորությամբ։

5) UX patters անցում

Անցումը միայն տեղական վալիդացիայից հետո է։

Ետ 'առանց հաստատման, եթե տվյալների կորուստ չկա։

Ցանցի սխալի դեպքում, մենք պահպանում ենք տեղական, ցույց ենք տալիս «Վերականգնել հաջորդ միացմամբ»։

Մի փոխեք URL-ը կամայականորեն '«/form/step/2 »-ը հարմար է նավիգացիայի/վերականգնման համար։

Աջակցեք 'Ctrl + Enter '-ին' հաջորդ քայլին արագ անցնելու համար։

6) Վիճակ և տեսողական խորհուրդներ

In progress: մոխրագույն/ակտիվ ցուցիչ, քայլը կլիկաբելեն միայն եթե ավարտվի նախորդը։

Completed: Կանաչ/icon; կարող եք բացել խմբագրման համար։

Error: Կարմիր կոմպոզիա, տեքստ դաշտի տակ և առաջընթաց գծերում։

Delabled: Այս քայլերը թաքնված են կամ անհասանելի։

Առաջընթացի բարի օրինակ

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-current =" step "ակտիվ շարժիչների համար։

Կոմպոզիցիայի փոփոխությունը բարձրաձայնում է 'aria-105 = «polite»։

Պահպանեք ֆոկուսը ներկա հատվածի սահմաններում։ անցնելիս 'շարժեք վերնագրի վրա։

Tab և Enter կանխատեսելի; Esc-ը չպետք է կորցնի համատեքստը։

Տուրիստական առաջընթացի համար օգտագործեք "role =" list "", "role =" listitem "և" aria-label "։

8) Սխալների և ընդհատումների դեպքում վարքը

Ցանցի ձախողումը '"Կապը կորած է։ Տվյալները պահպանվում են տեղական"։

Թայմաութ 'կրկնել ինքնաբերաբար 3-5 s; ձախողման դեպքում 'օֆլայնային չեռնովիկ։

Նստաշրջանի խզումը '«Շարունակել վերջին դեպքից»։

Սխալն այն է, որ մենք պահպանում ենք մասամբ լցված դաշտերը, փակցնում ենք խնդրահարույց։

9) Զուգահեռ նստաշրջանները և անվտանգությունը

«diaft _ id» -ը եզակի է օգտագործողի վրա։

Նոր ներդրումը բացելիս 'առաջարկել "Բաց մեկ այլ նստաշրջան։ Թարմացնել կամ շարունակել այստեղ"։

KUS/ֆինանսական ձևերի համար տվյալները կոդավորված են կլիենտում (AES/GCM) մինչև չեռնովիկի պահպանումը։

Chernoviks հեռացումը TTL-ով (օրինակ, 7 օր)։

10) DiiGaming-ի օրինակները

10. 1 KUS/veriation

1. Թիվ 2 անձնական տվյալները։ Թիվ 3 փաստաթղթերը։ Թիվ 4 ստուգումը։ Ավարտը։

Ավտոսեյվը նկարը բեռնելուց հետո։

Վերականգնումը ընդմիջումից հետո ստուգումից հետո։

«Հաստատման սպասումը» վիճակը ադմինիստրատորի հետ։

10. 2 Մոսկվա/դեպոզիտ

Քայլերը ՝ 1։ Թիվ 2 գումարը։ Թիվ 3 մեթոդը։ Ապացույց։

Մեթոդի մասին տվյալները ներկայացված են նստաշրջանների միջև։

Հնարավոր է, որ մեթոդը ընտրի առանց գումար հավաքելու։

10. 3 Սահմանների տեղադրում

Քայլերը 'լիմիտի տեսակը նշանակությունը հաստատվում է։

Առաջընթացը ցույց է տալիս մնացած քայլերը։

Ավարտելուց հետո 'էկրանը «Ուժի մեջ կմտնի»...

11) Մետրիկները և վերահսկողությունը

Completion rate: Օգտագործողների տոկոսը, ովքեր ավարտեցին բոլոր քայլերը։

Drop-off per step: Ինչպիսի՞ ն են գնում։

Average time per step и Time-to-Complete.

System-save success rate (քանի՞ չեռնիվներ վերականգնվել են)։

Error recovery rate 'ձախողումից հետո հաջողությամբ շարունակվող մասնաբաժինը։

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-chek-թերթ

Պահպանումը և վերականգնումը

• Չեռնովիկը ստեղծվում և նորարարվում է յուրաքանչյուր դեպքում։
• Վերանորոգման ժամանակ վերականգնումը հասանելի է և ճիշտ։
• Տարբերակների հակամարտությունը զարգանում է (հին/նոր ձևաչափ)։

Ռոտացիան

• «Առաջ» չի կորցնում տվյալները։
• URL-ն համապատասխանում է ներկա քայլին։
• Առաջընթաց-բարը համաժամեցված է վիճակի հետ։

Ցանցը և օֆլայնը

• Օֆլայնը պահպանում է տեղական և վերականգնում է առցանց։
• Խնայողությունների մասին հաղորդագրությունները հասկանալի և անառողջ են։

A11y

• 'aria-current = «step» «,» aria-105 = «polite» աշխատում են։
• Ֆոկուսը փոխանցվում է վերնագրին։

Պերֆորանսը

• Անցումները ակնթարթային են (100 մզ)։
• Ասինխրոնի պահպանումը չի արգելափակում UI-ը։

15) Մոսկվա դիզայնի համակարգում

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.

Ենթատեքստը պահպանելու համար (wwww.al vs server), A1y և ARIA-ը։

UX ձևանմուշները ՝ KYC, դեպոզիտներ, լիմիտներ, հարցաթերթիկներ, որոնք պատրաստված են սխալից հետո։

Do/Don 't-ը ցանցի ձախողման և հաջողակ վերականգնման օրինակներով։

Live ռեզյումե

Բազմաշերտ ձևը պետք է զգա շարունակական գործընթաց, նույնիսկ եթե օգտագործողը շեղվում է, սեղմում է էջը կամ կորցրել ցանցը։ Ավտոմեքենաների պահպանումը, վերականգնումը, տեսանելի առաջընթացը և անվտանգ ռետրերը վերածում են բարդ սցենարներ (KYC, վճարումներ, սահմանափակումներ) կանխատեսելի և վստահելի փորձի։