मल्टीस्टेप फॉर्म और संदर्भ संरक्षण

1) सिद्धांत

1. एक लक्ष्य कई प्राकृतिक कदम हैं। डेटाबेस तालिकाओं द्वारा नहीं, बल्कि उपयोगकर्ता तर्क द्वारा विभाजित करें: "डेटा → पुष्टि → पूर्णता"।

2. प्रत्येक चरण एक पूर्ण अर्थ है। बहुत बारीक न कुचलें: 3-5 कदम इष्टतम हैं।

3. संक्रमण को संदर्भ रीसेट नहीं करना चाहि सभी क्षेत्र, चयन और फ़ाइलें सहेजी जाती हैं.

4. मुझे वापस जाने दो। वापस - कोई डेटा हानि नहीं।

5. ट्रैक प्रगति। प्रगति पट्टी, चरण शीर्षक और साफ CTA।

6. उपयोगकर्ता छोड़ सकता है और वापस आ सकता है। ड्राफ्ट - स्थानीय या सर्वर पर।

2) मल्टी-स्टेप आर्किटेक्चर

क्लाइंट स्थिति: स्थानीय स्टोर (उदाहरण के लिए, रिएक्ट कॉन्सेप्ट/Redux/Singal) या अस्थायी भंडारण ('Sature Storage', IndexedDB)।

सर्वर स्थिति: 'ड्राफ्ट _ आईडी' के साथ एक ड्राफ्ट बनाएँ, प्रत्येक चरण के बाद सहेजें।

सुरक्षा: 'ड्राफ्ट _ आईडी' उपयोगकर्ता के साथ जुड़ा हुआ है और एन घंटों में समाप्त होता है; डेटा आराम पर एन्क्रिप्ट किया गया है।

चरण यांत्रिकी:

'currentStept' - वर्तमान चरण का सूचकांक;
'compleepteptips' - पूर्ण की सूची;
'त्रुटियां' - प्रति-चरण त्रुटियां;
'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। पहचान का प्रमाण"।

सीटीए बटन:

मुख्य एक "अगला "/" जारी रखें "है।
द्वितीयक - "वापस।"
अंतिम चरण में - "पूर्ण "/" भेजें। "

प्रगति डिजाइन:

' आरिया-वर्तमान =" चरण" का उपयोग करें।
% दिखाएँ यदि चरण असमान हैं.
एक "बाद में वापस आ सकता है" प्रांप्ट जोड़ें।

4) संदर्भ और डेटा सहेजें

ऑटोसेव

सहेजें जब:

क्षेत्र परिवर्तन (500-1000 एमएस के डिबंक के साथ);
अगले चरण में ले जाएँ
टैब फोकस का नुकसान।

भंडारण:

स्थानीय रूप से ('localStore '/IndexedDB) - यदि फॉर्म छोटा है;
सर्वर - CCM/भुगतान/प्रश्नावली के लिए।

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

वसूली

फॉर्म खोलते समय, एक ड्राफ्ट ('ड्राफ्ट _ आईडी' या स्थानीय कुंजी) देखें।

बहाल करने के लिए प्रस्ताव:

💡 "12:42 बजे से मसौदा मिला। क्या आप बचत स्थान से जारी रखना चाहते हैं?

संघर्ष (नए क्षेत्र) के मामले में - परिवर्तनों को उजागर करने के साथ "अपडेट ड्राफ्ट"।

5) यूएक्स संक्रमण पैटर्न

स्थानीय चरण सत्यापन के बाद ही आगे बढ़ें।

बैक - बिना पुष्टि के अगर कोई डेटा हानि नहीं है।

एक नेटवर्क त्रुटि के मामले में, इसे स्थानीय रूप से सहेजें, "अगले कनेक्शन पर पुनर्स्थापित करें" दिखाएँ.
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 और उपलब्धता

सक्रिय चरण के लिए' एरिया-करंट =" स्टेप"।

कदम परिवर्तन को 'आरिया-लाइव = "विनम्र" द्वारा आवाज दी गई है।

वर्तमान चरण के भीतर ध्यान केंद्रित संक्रमण के दौरान - हेडर की ओर बढ़ें।

टैब और एंटर नेविगेशन पूर्वानुमानित है; Esc को संदर्भ नहीं खोना चाहिए।

चरण-दर-चरण प्रगति सलाखों के लिए, चरण के लिए 'रोल = "सूची",' रोल = "लिस्टिटेम", और 'आरिया-लेबल' का उपयोग करें।

8) त्रुटि और बाधित व्यवहार

नेटवर्क विफलता: "कनेक्शन खो गया। डाटा स्थानीय स्तर पर सहेजा जाएगा।

टाइमआउट: 3-5 s में स्वचालित रूप से दोहराएं; असफलता - ऑफ़ लाइन ड्राफ्ट पर।

सत्र विराम: लॉगइन के बाद → "अंतिम चरण से जारी रखें।"

चरण त्रुटि: आंशिक रूप से भरे हुए क्षेत्रों को सहेजें, समस्याग्रस्त लोगों को उ

9) समानांतर सत्र और सुरक्षा

'ड्राफ्ट _ id' प्रति उपयोगकर्ता अद्वितीय है।

नया टैब खोलते समय - सुझाव दें "एक और सत्र खुला है। अद्यतन करें या यहाँ जारी रखें।

CCM/वित्तीय रूपों के लिए, ड्राफ्ट को सहेजने से पहले ग्राहक (AES/GCM) पर डेटा एन्क्रिप्ट किया जाता है।

टीटीएल द्वारा ड्राफ्ट मिटाएँ (उदाहरण के लिए, निष्क्रियता के 7 दिन)।

10) iGaming परिदृश्य उदाहरण

10. 1 CCM/सत्यापन

1. व्यक्तिगत डेटा → 2। दस्तावेज़ → 3। → 4 की जाँच करें। पूरा होना।

फोटो अपलोड करने के बाद स्वतः सहेजें।

ब्रेक के बाद परीक्षण चरण से वसूली।

सूचक के साथ स्थिति "पुष्टि के लिए प्रतीक्षा"।

10. 2 भुगतान/जमा

कदम: 1। राशि → 2। विधि → 3। पुष्टि।

विधि डेटा सत्रों के बीच संग्रहीत होता है।

आप राशि को साफ किए बिना विधि चयन पर लौट सकते हैं।

10. 3 सेटिंग सीमा

चरण सीमित प्रकार के मूल्य पुष्टि हैं।

प्रगति शेष चरणों को दर्शाती है।

पूरा होने के बाद - स्क्रीन "प्रभावी होगी"...।

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
.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) क्यूए चेकलिस्ट

सहेजना और पुनर्स्थापना

प्रत्येक चरण में एक मसौदा बनाया और अद्यतन किया जाता है।
रिबूट पर, वसूली उपलब्ध है और सही है।
संस्करण संघर्ष को संभाला जा रहा है (पुराना/नया प्रारूप)।

नेविगेशन

"बैक" डेटा नहीं खोता है।
यूआरएल वर्तमान चरण से मेल खाता है।
प्रगति पट्टी स्थिति के साथ सिंक्रनाइज़।

नेटवर्क और ऑफ़ लाइन

ऑफ़ लाइन स्थानीय स्तर पर बचत करता है और ऑनलाइन बहाल करता है।
विफलता संदेश समझने योग्य और गैर-विनाशकारी हैं।

A11y

' आरिया-करंट =" स्टेप",' आरिया-लाइव = "विनम्र" काम।
फोकस स्टेप हेडर पर जाता है।

निष्पादन

संक्रमण तात्कालिक (≤ 100 ms) हैं।
अतुल्यकालिक बचत यूआई को अवरुद्ध नहीं करते हैं।

15) डिजाइन प्रणाली में प्रलेखन

Компоненты: 'स्टेपइंडिकेटर', 'मल्टीस्टेपफॉर्म', 'ऑटोसेवबैनर', 'ड्राफ्टेलर मोडल'।

संदर्भ (स्थानीय बनाम सर्वर), A11y और ARIA विशेषताओं के भंडारण के लिए गाइड।

UX टेम्पलेट: KYC, जमा, सीमा, प्रश्नावली, एक त्रुटि के बाद वापसी।

नेटवर्क विफलता और सफल वसूली के उदाहरणों के साथ मत करो/।

संक्षिप्त सारांश

मल्टी-स्टेप फॉर्म को एक निरंतर प्रक्रिया की तरह महसूस करना चाहिए, भले ही उपयोगकर्ता विचलित हो, पृष्ठ को रीबूट किया, या नेटवर्क खो दिया। ऑटो-सेव, रिकवरी, दृश्यमान प्रगति और सुरक्षित रिट्रे जटिल परिदृश्यों (केवाईसी, भुगतान, सीमा) को अनुमानित और विश्वसनीय अनुभवों में बदल देते हैं।

मल्टीस्टेप फॉर्म और संदर्भ संरक्षण

वसूली

सीएसएस प्रीसेट

नेविगेशन

नेटवर्क और ऑफ़ लाइन

A11y

निष्पादन

संक्षिप्त सारांश

हमसे संपर्क करें

त्वरित संपर्क

वीडियो जल्द ही अपडेट किया जाएगा

हम इस समय परियोजनाओं में बहुत व्यस्त हैं