Көп баскычтуу формалар жана контекстти сактоо

1) Принциптер

1. Бир максат - бир нече табигый кадамдар. DD таблицалары боюнча эмес, колдонуучунун логикасы боюнча бөлүшүңүз: "Маалыматтар → Ырастоо → Аяктоо".
2. Ар бир кадам - толук мааниси. өтө майда майдалап жок: 3-5 кадам оптималдуу.
3. Өтүү контекстти жокко чыгарбашы керек. Бардык талаалар, шайлоолор жана файлдар сакталат.
4. кайра барууга уруксат. Артка - маалыматтарды жоготуу жок.
5. Прогресске көз салыңыз. Прогресс-бар, кадам аталышы жана ачык CTA.
6. Колдонуучу кетип, кайтып келе алат. Долбоор - жергиликтүү же серверде.

2) Көп кадамдуу форманын архитектурасы

Client State: жергиликтүү Store (мисалы, React Context/Redux/Signal) же убактылуу сактоо ('sessionStorage', IndexedDB).
Server State: '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 үлгүлөрү өтүү

Кадамдын жергиликтүү валидациясынан кийин гана алдыга өтүү.
Артка - эч кандай маалымат жоготуу жок болсо, тастыктоо жок.
Эгерде тармак ката болсо, биз аны локалдуу сактайбыз, "Кийинки туташууда калыбына келтиребиз" деп көрсөтөбүз.
өзүм билемдик менен URL өзгөртүүгө болбойт: '/form/step/2 '→ багыттоо/калыбына келтирүү үчүн ыңгайлуу.
Кийинки кадамга тез өтүү үчүн '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. Аяктоо.

сүрөттөрдү жүктөп кийин Autoseive.
тыныгуудан кийин текшерүү кадам калыбына келтирүү.
Индикатор менен "ырастоо күтүү" абалы.

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 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-чек тизмеси

Сактоо жана калыбына келтирүү

• Долбоор ар бир кадамда түзүлөт жана жаңыланат.
• Кайра жүктөгөндө калыбына келтирүү жеткиликтүү жана туура.
• Version карама-каршы мамиле (эски/жаңы формат).

Навигация

• "Артка" маалыматтарды жоготпойт.
• URL учурдагы кадамга туура келет.
• Прогресс-бар абалы менен синхрондоштурулган.

Тармак жана оффлайн

• Offline жергиликтүү сактайт жана онлайн калыбына келтирет.
• Ката билдирүүлөр түшүнүктүү жана жараксыз.

A11y

• ' aria-current =" step"', 'aria-live = "polite"' иштеп жатат.
• Focus кадам аталышы которулат.

Аткаруу

• Өтүү заматта (≤ 100 ms).
• Асинхрондук сактоо UI бөгөт жок.

15) Дизайн системасында документтер

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

Кыскача резюме

Көп кадамдуу форма колдонуучу алаксып, баракчаны кайра жүктөп же тармакты жоготуп алса да, үзгүлтүксүз процесс катары сезилиши керек. Auto сактоо, калыбына келтирүү, көзгө көрүнгөн прогресс жана коопсуз Retray татаал жагдайлар (KYC, төлөмдөр, лимиттер) алдын ала жана ишенимдүү тажрыйбага айландырат.