Шаклҳои Multistep ва ҳифзи контекст

1) Принсипҳо

1. Як ҳадаф якчанд қадамҳои табиӣ мебошад. На аз рӯи ҷадвалҳои пойгоҳи додаҳо, балки аз рӯи мантиқи корбар тақсим кунед: "Маълумот → тасдиқи → Анҷом".
2. Ҳар як қадам маънои комил дорад. Аз ҳад зиёд зарба назанед: 3-5 қадам оптималӣ мебошанд.
3. Гузариш набояд контекстро барқарор кунад. Ҳамаи майдонҳо, интихобҳо ва файлҳо захира карда мешаванд.
4. Биёед ман баргардам. Бозгашт - талафи маълумот нест.
5. Пешрафтро пайгирӣ кунед. Бари пешрафт, сарлавҳаи қадам ва CTA-ҳои тоза.
6. Корбар метавонад тарк кунад ва баргардад. Нақша - маҳаллӣ ё дар сервер.

2) Меъмории бисёрқабата

Ҳолати муштарӣ: мағозаи маҳаллӣ (масалан, React Context/Redux/Signal) ё нигаҳдории муваққатӣ ('session

Ҳолати сервер: лоиҳаро бо 'draft _ id' эҷод кунед, пас аз ҳар як қадам захира кунед.
Амният: 'draft _ id' бо корбар алоқаманд аст ва дар N соат ба итмом мерасад; маълумот ҳангоми истироҳат рамзгузорӣ карда мешавад.

• 'current- step' - индекси қадами ҷорӣ;
• 'Қадамҳои нопурра' - рӯйхати анҷомшуда;
• 'хатогиҳо' - хатогиҳои як қадам;
• 'progress = ҷорӣ/умумӣ'.

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) Тарҳи қадам ва тарҳ

Сохтор: навигатсионии амудӣ (мизи корӣ )/бари пешрафт аз боло (мобилӣ).

Номи намоёни қадам "1. Маълумоти шахсӣ," "2. Исботи шахсият"

• Асосӣ "Next "/" Идома "аст.
• Миёна - "Бозгашт".
• Дар қадами охирин - "Мукаммал "/" Ирсол ".

• ' Aria-ҷорӣ =" қадам" -ро истифода баред.
• Агар қадамҳо нобаробар бошанд,% - ро нишон диҳед.
• Дархости "Метавонед дертар баргардед" илова кунед.

4) Захира кардани матн ва маълумот

Автозавр

• тағйири майдон (бо вазни 500-1000 мс);
• Гузариш ба қадами оянда
• аз даст додани фокуси ҷадвал.

• маҳаллӣ ('Storage '/Индексатсия) - агар шакл кӯтоҳ бошад;
• сервер - барои CCM/пардохт/саволнома.

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' for гузариши зуд ба қадами оянда.

6) Давлатҳо ва нишонаҳои визуалӣ

Дар ҷараёни кор: нишондиҳандаи хокистарӣ/фаъол, қадам танҳо дар сурати анҷом ёфтани он клик карда мешавад.
Анҷом ёфт: нишона/нишонаи сабз; барои таҳрир боз кардан мумкин аст.
Хато: контури сурх, матн дар зери майдон ва дар хати пешрафт.
Маъюбон - Қадамҳо пас аз қадами ҷорӣ пинҳон ё дастнорасанд.

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-ҷорӣ =" қадам"' барои қадами фаъол.
Тағироти қадам бо 'aria-live = "хушмуомила" садо медиҳад.
Фокусро дар қадами ҷорӣ нигоҳ доред; ҳангоми гузариш - ба сарлавҳа гузаштан.
Tab ва Enter navigation пешгӯишаванда аст; Esc набояд контекстро гум кунад.
Барои қадамҳои қадам ба қадам, барои қадам 'нақш = "рӯйхат",' нақш = "листитем" ва 'aria-label' -ро истифода баред.

8) Рафтори хато ва қатъ

Нокомии шабака: "Пайвастшавӣ гум шуд. Маълумот дар маҳал захира карда мешавад.
Вақт: ба таври худкор дар 3-5 с такрор кунед; оид ба нокомӣ - лоиҳаи офлайнӣ.
Танаффуси сессия: пас аз воридшавӣ → "Аз қадами охирин идома диҳед".
Хатогии қадам: майдонҳои қисман пуршударо захира кунед, майдонҳои мушкилро равшан созед.

9) Ҷаласаҳои мувозӣ ва амният

'draft _ id' is беназир барои як корбар.
Ҳангоми кушодани ҷадвали нав - пешниҳод кунед "Ҷаласаи дигар кушода аст. Навсозӣ ё идома дар ин ҷо.
Барои CCM/шаклҳои молиявӣ, маълумот пеш аз сарфа кардани лоиҳа дар муштарӣ (AES/GCM) рамзгузорӣ карда мешавад.
Тарҳҳоро аз ҷониби TTL нест кунед (масалан, 7 рӯзи ғайрифаъол).

10) Намунаҳои сенарияи IGaming

10. 1 CCM/санҷиш

1. Маълумоти шахсӣ → 2. Ҳуҷҷатҳо → 3. Санҷед → 4. Анҷом.

Autosave пас аз бор кардани акс.
Барқароршавӣ аз қадами санҷиш пас аз танаффус.
Ҳолати "интизори тасдиқ" бо нишондиҳанда.

10. 2 Пардохт/амонат

Қадамҳо: 1. Маблағ → 2. Усули → 3. Тасдиқ.
Маълумоти метод дар байни сессияҳо нигоҳ дошта мешавад.
Шумо метавонед ба интихоби метод бе тоза кардани маблағ баргардед.

10. 3 Муқаррар кардани маҳдудиятҳо

Қадамҳо маҳдудияти type арзиши → тасдиқ мебошанд.
Пешрафт қадамҳои боқимондаро нишон медиҳад.
Пас аз ба итмом расидан - экрани "Дар амал татбиқ хоҳад шуд"....

11) Нишондиҳандаҳо ва назорат

Меъёри анҷомёбӣ:% корвандоне, ки ҳамаи қадамҳоро иҷро кардаанд.
Тарки як қадам: дар кадом қадам онҳо мераванд.
Вақти миёнаи як қадам ба вақти анҷом.
Суръати муваффақияти худкор.
Суръати барқароркунии хатогӣ - Фоизи барқароршавии бомуваффақият пас аз нокомӣ.

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-ҷорӣ =" қадам"', 'aria-live = "хушмуомила"' кор мекунад.
• Фокус ба сарлавҳаи қадам ҳаракат мекунад.

Иҷро

• Гузаришҳо фаврӣ мебошанд (≤ 100 мс).
• Пасандозҳои асинхронӣ UI-ро манъ намекунанд.

15) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компоненты: 'Step-Indicator', 'Multi

Роҳнамо барои нигоҳ доштани матн (против сервер), A11y ва ARIA.
Қолабҳои UX: KYC, амонатҳо, маҳдудиятҳо, саволномаҳо, пас аз хатогӣ бармегарданд.
Бо намунаҳои нокомии шабака ва барқарорсозии бомуваффақият кор накунед.

Хулосаи мухтасар

Шакли бисёрқабата бояд худро ҳамчун раванди муттасил эҳсос кунад, ҳатто агар корбар парешон бошад, саҳифаро аз нав бор кунад ё шабакаро аз даст диҳад. Сарфа, барқарорсозӣ, пешрафти намоён ва бозпардохтҳои бехатар сенарияҳои мураккабро (KYC, пардохтҳо, маҳдудиятҳо) ба таҷрибаҳои пешгӯишаванда ва боэътимод табдил медиҳанд.