მრავალსაფეხურიანი ფორმები და კონტექსტის შენარჩუნება

1) პრინციპები

1. ერთი მიზანი რამდენიმე ბუნებრივი ნაბიჯია. გააზიარეთ არა BD ცხრილების მიხედვით, არამედ მომხმარებლის ლოგიკის მიხედვით: "მონაცემები - დადასტურება" დასრულება ".
2. თითოეული ნაბიჯი დასრულებული აზრია. ნუ ამოიღებთ ძალიან წვრილად: 3-5 ნაბიჯი ოპტიმალურია.
3. გადასვლამ არ უნდა ჩამოაგდოს კონტექსტი. ყველა ველი, არჩევნები და ფაილები დაცულია.
4. ნვკა ჟვ გყპნვრვ. უკან - მონაცემთა დაკარგვის გარეშე.
5. თვალყური ადევნეთ წინსვლას. პროგრესი ბარი, ნაბიჯის სათაური და მკაფიო CTA.
6. მომხმარებელს შეუძლია დატოვოს და დაბრუნდეს. პროექტი ადგილობრივად ან სერვერზე.

2) მრავალსაფეხურიანი არქიტექტურა

კლიენტის შტატი: ადგილობრივი ნაკადი (მაგალითად, React Context/Redux/Signal) ან დროებითი საცავი ('sessionStorage', IndexedDB).
სერვერის სტატი: შექმენით პროექტი 'draft _ id ", შეინახეთ ყოველი ნაბიჯის შემდეგ.
უსაფრთხოება: 'draft _ id' უკავშირდება მომხმარებელს და იწურება N საათის შემდეგ; მონაცემები დაშიფრულია მარტო.

• 'currentStep' - მიმდინარე ნაბიჯის ინდექსი;
• 'completedSteps' - დასრულებულთა სია;
• 'errors' - პლეიოფის შეცდომები;
• `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 )/წინსვლა ბარი ზემოდან (მობილური).
ნაბიჯის თვალსაჩინო სახელია: "1. პირადი მონაცემები“ „, 2. პიროვნების დადასტურება".

• მთავარია „შემდგომი „/„ გაგრძელება “.
• მეორადი - „უკან“.
• ბოლო ეტაპზე - „დასრულება „/“ გაგზავნა “.

• გამოიყენეთ' aria-current =“ ნაბიჯი“.
• აჩვენეთ%, თუ ნაბიჯები არათანაბარია.
• დაამატეთ მინიშნება „შეგიძლიათ მოგვიანებით დაბრუნდეთ“.

4) კონტექსტისა და მონაცემების შენარჩუნება

მანქანის შენახვა

• ველის შეცვლა (500-1000 ms მორბენალი);
• გადასვლა შემდეგ ნაბიჯზე;
• ჩანართის ფოკუსის დაკარგვა.

• ადგილობრივად ('localStorage '/IndexedDB) - თუ ფორმა მოკლეა;
• სერვერი - KUS/გადახდები/კითხვარისთვის.

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

აღდგენა

ფორმის გახსნისას მოძებნეთ მონახაზი ('draft _ id' ან ადგილობრივი გასაღები).

• კონფლიქტის შემთხვევაში (ახალი ველები) - „განაახლეთ პროექტი“ ცვლილებების შუქით.

5) UX გადასვლის ნიმუშები

წინსვლა მხოლოდ ნაბიჯის ადგილობრივი მიზანშეწონილობის შემდეგ.
უკან - დადასტურების გარეშე, თუ მონაცემების დაკარგვა არ არსებობს.
ქსელის შეცდომით - ჩვენ ადგილობრივად ვიცავთ, ვაჩვენებთ „აღდგენას შემდეგი კავშირით“.
არ შეცვალოთ URL თვითნებურად: '/form/step/2 'მოსახერხებელია ნავიგაციის/აღდგენისთვის.
მხარი დაუჭირეთ 'Ctrl + Enter' - ს შემდეგი ნაბიჯის სწრაფად გადასვლისთვის.

6) სახელმწიფოები და ვიზუალური რჩევები

პროგრესში: ნაცრისფერი/აქტიური ინდიკატორი, ნაბიჯი კლიკაბელურია მხოლოდ იმ შემთხვევაში, თუ წინა დასრულებულია.
რთული: მწვანე ნიშანი/ხატი; შეგიძლიათ გახსნათ რედაქტორისთვის.
ერორი: წითელი წრე, ტექსტი მინდვრის ქვეშ და პროგრესული ხაზები.
Disabled: მიმდინარე ნაბიჯები იმალება ან მიუწვდომელია.

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 =“ ნაბიჯი“' აქტიური ნაბიჯისთვის.
ნაბიჯის შეცვლა ჟღერს 'aria-live = "polite" ".
შეინარჩუნეთ ფოკუსი მიმდინარე ნაბიჯის ფარგლებში; გადასვლისას - გადაიტანეთ სათაურით.
Tab და Enter ნავიგაცია პროგნოზირებულია; Esc არ უნდა დაკარგოს კონტექსტი.
წინსვლის პროგრესირებისთვის გამოიყენეთ 'role = „list“', 'role = „listitem“ „და' aria-label“ ნაბიჯისთვის.

8) ქცევა შეცდომებსა და შეფერხებებში

ქსელის უკმარისობა: ბანერი "კავშირი დაიკარგა. მონაცემები ადგილობრივად დარჩება."

ტაიმუთი: გაიმეორეთ ავტომატურად 3-5 წამში; წარუმატებლობის შემთხვევაში - ოფლაინ პროექტი.
სხდომის უფსკრული: ლოგინის შემდეგ - „გაგრძელება ბოლო ნაბიჯიდან“.
ნაბიჯის შეცდომა: ჩვენ შევინარჩუნებთ ნაწილობრივ შევსებულ ველს, გავაფართოვებთ პრობლემებს.

9) პარალელური სესიები და უსაფრთხოება

'draft _ id' უნიკალურია მომხმარებლისთვის.

ახალი ჩანართის გახსნისას - შესთავაზეთ "სხვა სესია ღიაა. განახლება ან გაგრძელება აქ."

KUS/ფინანსური ფორმებისთვის - მონაცემები დაშიფრულია კლიენტზე (AES/GCM) მონახაზების შენარჩუნებამდე.
მონახაზების მოცილება TTL- ზე (მაგალითად, არააქტიურობის 7 დღე).

10) iGaming სცენარების მაგალითები

10. 1 კუს/გადამოწმება

1. პირადი მონაცემები 2. დოკუმენტები - 3. შემოწმება 4. დასრულება.

Autosave ფოტოების ჩატვირთვის შემდეგ.
აღდგენა გადამოწმების ნაბიჯიდან შესვენების შემდეგ.
„დადასტურების მოლოდინის“ მდგომარეობა ინდიკატორთან.

10. 2 გადახდა/ანაბარი

ნაბიჯები: 1. თანხა 2. მეთოდი 3. დადასტურება.
მეთოდის მონაცემები დაცულია სხდომებს შორის.
შესაძლებელია მეთოდის არჩევის დაბრუნება თანხის გამონადენის გარეშე.

10. 3 ლიმიტის დაყენება

ნაბიჯები: ლიმიტის ტიპი - მნიშვნელობა, დადასტურება.
პროგრესი გვიჩვენებს დანარჩენ ნაბიჯებს.
დასრულების შემდეგ - ეკრანი „ძალაში შედის“....

11) მეტრიკი და კონტროლი

Completion rate: მომხმარებელთა%, რომლებმაც დაასრულეს ყველა ნაბიჯი.
Drop-off ნაბიჯი: რა ეტაპზე მიდის.
Average time per step и Time-to-Complete.
Auto-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 ჩეკის სია

შენარჩუნება და აღდგენა

• პროექტი იქმნება და განახლდება ყოველი ნაბიჯით.
• გადატვირთვისას, აღდგენა ხელმისაწვდომი და სწორია.
• ვერსიების კონფლიქტი დამუშავებულია (ძველი/ახალი ფორმატი).

ნავიგაცია

• „უკან“ არ კარგავს მონაცემებს.
• URL შეესაბამება მიმდინარე ნაბიჯს.
• პროგრესი ბარი სინქრონიზებულია მდგომარეობასთან.

ქსელი და ოფლაინი

• ოფლაინი ინარჩუნებს ადგილობრივად და აღადგენს ინტერნეტით.

წარუმატებლობის შესახებ ცნობები გასაგები და არაპრაქტიკულია.

A11y

• 'aria-current = "step"', 'aria-live = "polite" "მუშაობს.
• ფოკუსი გადადის ნაბიჯის სათაურით.

შესრულება

• გადასვლები მყისიერი (100 ms).
• ასინქრონული შენახვა არ ბლოკავს UI.

15) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
კონტექსტის შენახვის ჰაიდები (ადგილობრივი სერვერი), A11y და ARIA ატრიბუტები.
UX შაბლონები: KYC, ანაბრები, ლიმიტები, კითხვარები, შეცდომის შემდეგ დაბრუნება.
Do/Don 't ქსელის გაუმართაობის და წარმატებული აღდგენის მაგალითებით.

მოკლე რეზიუმე

მრავალსაფეხურიანი ფორმა უნდა იგრძნოს უწყვეტი პროცესი, მაშინაც კი, თუ მომხმარებელმა ყურადღება გაამახვილა, გვერდის გადატვირთვა ან ქსელი დაკარგა. მანქანის შენახვა, აღდგენა, თვალსაჩინო პროგრესი და უსაფრთხო რესტავრაცია რთულ სკრიპტებს (KYC, გადახდები, შეზღუდვები) პროგნოზირებად და სანდო გამოცდილებად აქცევს.