Көп сатылы пішіндер және контексті сақтау

1) Қағидаттар

1. Бір мақсат - бірнеше табиғи қадам. ДБ кестелері бойынша емес, пайдаланушының логикасы бойынша бөліңіз: «Деректер → Растау → Аяқтау».
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 )/жоғарыдағы прогресс-бар (mobile).
Қадамның көрінетін атауы: "1. Жеке деректер» «, 2. Жеке басын растау".

• Негізгі - «Одан әрі «/« Жалғастыру ».
• Екінші - «Артқа».
• Соңғы қадамда - «Аяқтау «/» Жіберу ».

• 'aria-current =' step 'дегенді пайдаланыңыз.
• Егер қадамдар біркелкі болмаса,% көрсетіңіз.
• «Кейінірек қайтуға болады» деген кеңесті қосыңыз.

4) Контексті мен деректерді сақтау

Автосақтау

• егістік өзгерген кезде (дебаунсы 500-1000 мс);
• келесі қадамға көшу;
• қойындының фокусын жоғалту.

• жергілікті ('localStorage '/IndexedDB) - егер пішіні қысқа болса;
• сервер - АКҚ/төлемдер/сауалнама үшін.

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

Қалпына келтіру

Пішінді ашқанда жоба жазбаны ('draft _ id' немесе жергілікті кілтті) іздеңіз.

• Қайшылық болған жағдайда (жаңа өрістер) - өзгерістерді жарықтандырумен «жоба жазбаны жаңарту».

5) UX өту үлгілері

Қадамның жергілікті валидациясынан кейін ғана алға ауысу.
Деректер жоғалмаса - растаусыз артқа.
Желі қате болса - жергілікті сақтаймыз, «Келесі қосылым кезінде қалпына келтіреміз» деп көрсетеміз.
'/form/step/2 '→ URL-ін еркін өзгертпеңіз.
Келесі қадамға жылдам өту үшін 'Ctrl + Enter' дегенді қолдаңыз.

6) Жай-күйлер және көрнекі кеңестер

In progress: сұр/белсенді көрсеткіш, алдыңғы қадам аяқталған жағдайда ғана батырмалы.
Completed: жасыл белгі/белгі; өңдеу үшін ашуға болады.
Error: қызыл контур, өріс астындағы және прогресс сызығындағы мәтін.
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 =' step '.
Қадамды ауыстыру 'aria-live = "polite' деп айтылады.
Назарыңызды ағымдағы қадамның шегінде сақтаңыз; ауысқан кезде - тақырыпқа жылжытыңыз.
Tab және Enter навигациясы болжамды; Esc мәнмәтінді жоғалтпауы керек.
Қадамдық прогрестер үшін 'role = «list' ',' role =» listitem 'және' aria-label 'қадамдарын пайдаланыңыз.

8) Қателер мен үзілістер кезіндегі мінез-құлық

Желі жаңылысы: "Қосылым жоғалды. Деректер жергілікті сақталады".
Таймаут: 3-5 секундтан кейін автоматты түрде қайталау; сәтсіз болған жағдайда - оффлайн-жоба.
Сессияның үзілуі: логиннен кейін → «Соңғы қадамнан жалғастыру».
Қадамның қатесі: ішінара толтырылған өрістерді сақтаймыз, проблемаларды анықтаймыз.

9) Қатарлас сессиялар және қауіпсіздік

'draft _ id' пайдаланушы үшін бірегей.
Жаңа қойындыны ашқанда - "Басқа сеанс ашылды. Жаңарту немесе жалғастыру".
АЖК/қаржылық нысандар үшін - деректер жоба жазбаны сақтаудың алдында клиентке (AES/GCM) шифрланады.
TTL бойынша жоба жазбаларды жою (мысалы, 7 күн белсенді емес).

10) iGaming сценарийлерінің мысалдары

10. 1 АКҚ/верификация

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.
Auto-save success rate (қанша жоба жазба қалпына келтірілген).
Error recovery rate: Сәтсіз аяқталғаннан кейін сәтті жалғасқанның үлесі.

12) Антипаттерндер

«Артқа» қатқыл шарлау.
Қайта қотару кезінде енгізілген деректерді жоғалту.
Мәтінмәнсіз қадамдар арқылы секіру.
10 экранға ортақ бір submit.
Қадамдағы қате - және «Қайта бастаңыз».
Желі істен шыққаннан кейін бос экран.
Мағыналық атаусыз прогресс-бар («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 мс ≤).
• Асинхронды сақтаулар UI бұғаттамайды.

15) Дизайн-жүйедегі құжаттама

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
Контекст сақтау бойынша гайдтар (local vs server), A11y және ARIA-атрибуттар.
UX үлгілері: KYC, депозиттер, лимиттер, сауалнамалар, қатеден кейін қайтару.
Do/Don 't желі ақауы мен сәтті қалпына келтіру мысалдарымен.

Қысқаша түйіндеме

Көп қадамдық пішін, егер пайдаланушы алшақтаған, бетті қайта іске қосқан немесе желіні жоғалтқан болса да, үздіксіз процесс арқылы сезінуі тиіс. Автосақтау, қалпына келтіру, көрінетін прогресс және қауіпсіз ретрациялар күрделі сценарийлерді (KYC, төлемдер, лимиттер) болжамды және сенімді тәжірибеге айналдырады.