צורות מולטיסטפ ושימור הקשר

1) עקרונות

1. מטרה אחת היא מספר צעדים טבעיים. התחלק לא בטבלאות מסד הנתונים, אלא בלוגיקה של המשתמש: ”Data # Education # Education”.
2. כל צעד הוא משמעות מוחלטת. אין למחוץ דק מדי: 3-5 צעדים הם אופטימליים.
3. המעבר לא צריך לאפס את ההקשר. כל השדות, הבחירות והקבצים נשמרים.
4. תן לי לחזור. חזרה - אין אובדן נתונים.
5. עקוב אחר התקדמות. בר התקדמות, צעד קדימה וצאו מהמסלול.
6. המשתמש יכול לעזוב ולחזור. טיוטה - מקומית או על השרת.

2) ארכיטקטורה רב-שלבית

מצב לקוח: חנות מקומית (לדוגמה, React Context/Redux/Signal) או אחסון זמני (” Storage”, IndexedDB).
מצב שרת: צור טיוטה עם טיוטה _ id, שמור אחרי כל צעד.
אבטחה: "draft _ id' משויכת למשתמש ופגה בשעות N; נתונים מוצפנים במנוחה.

• 'currentStep' - אינדקס של הצעד הנוכחי;
• "השלמת TedeSteps' - רשימת השלמות;
• שגיאות של כל צעד;
• '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) שמור הקשר ונתונים

autosave

• שינוי שדה (עם דיבאנק של 500-1000 מ ');
• לעבור לשלב הבא
• אובדן מיקוד לשונית.

• באופן מקומי (”Outestory ”/IndexedDB) - אם הטופס קצר;
• שרת - עבור CCM/תשלומים/שאלון.

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

התאוששות

בעת פתיחת הטופס, חפש טיוטה ("draft _ id' או מקש מקומי).

במקרה של קונפליקט (שדות חדשים) - ”טיוטת עדכון” עם הדגשת השינויים.

5) דפוסי מעבר UX

לך קדימה רק לאחר אישור צעד מקומי.
חזרה - ללא אישור אם אין אובדן נתונים.
במקרה של שגיאת רשת, שמור אותה מקומית, הצג ”שחזור בחיבור הבא”.
אל תשנה את הכתובת באופן שרירותי: ”/טופס/שלב/2 ”is נוח לניווט/התאוששות.
תמיכה ב- Ctrl + Enter עבור מעבר מהיר לשלב הבא.

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-זרם =” צעד” עבור הצעד הפעיל.
השינוי בצעד נשמע על ידי 'אריה-לחיות = "מנומס" ".
המשך להתמקד בצעד הנוכחי; במהלך המעבר - לעבור לכותרת.
לשונית וניווט הזן ניתנים לחיזוי; Esc לא צריך לאבד את ההקשר.
לברים של התקדמות צעד אחר צעד, השתמש ב "תפקיד" = "list'," תפקיד "=" listitem "ו-" aria-label "עבור הצעד.

8) שגיאה והפרעה להתנהגות

כשל רשת: "הקשר אבד. הנתונים יישמרו באופן מקומי.
פסק זמן: חזור אוטומטית על 3-5 ש '; בטיוטת כישלון לא מקוונת.
הפסקת הפעלה: לאחר התחברות = ”המשך מהצעד האחרון”.
שגיאת שלב: לשמור שדות מלאים חלקית, להדגיש אלה בעייתיים.

9) מפגשים מקבילים וביטחון

'draft _ id' הוא ייחודי לכל משתמש.
בעת פתיחת כרטיסייה חדשה - מציע "פגישה נוספת פתוחה. עדכן או המשך כאן.
עבור צורות CCM/financial, המידע מוצפן על הלקוח (AES/GCM) לפני שמירת הטיוטה.
מחק טיוטות על ידי TTL (לדוגמה, 7 ימים של חוסר פעילות).

10) דוגמאות לתרחיש iGaming

10. 1 CCM/אימות

1. נתונים אישיים = 2. מסמכים = 3. בדוק # 4. השלמה.

אוטומטית לאחר העלאת תמונה.
התאוששות מהמבחן שלב לאחר הפסקה.
מצב ”מחכה לאישור” עם אינדיקטור.

10. 2 תשלום/הפקדה

צעדים: 1. כמות = 2. שיטה # 3. אישור.
נתוני שיטה מאוחסנים בין הפעלות.
אתה יכול לחזור לבחירת השיטה בלי לנקות את הכמות.

10. 3 הצבת גבולות

הצעדים הם הגבלה של type # value.
ההתקדמות מראה את הצעדים הנותרים.

לאחר סיום - המסך ”ייכנס לתוקף...”

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 pressets

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

חיסכון ושיקום

[ ] טיוטה A נוצרת ומתעדכנת בכל שלב.

[ ] באתחול מחדש, ההחלמה זמינה ונכונה.

[ קונפליקט ] Version מטופל (פורמט ישן/חדש).

ניווט

[ ] ”גב” לא מאבד נתונים.

[ ] הכתובת מתאימה לשלב הנוכחי.

[ ] Progress בר מסונכרן עם מעמד.

רשת ומחובר

[ ] Offline חוסך מקומי ומשחזר באינטרנט.

[ הודעות כישלון ] מובנות ולא הרסניות.

A11y

[ ] 'אריה-זרם = "צעד", "אריה-לחיות" עבודה "מנומסת.

[ ] פוקוס עובר לכותרת המדרגה.

ביצועים

[ ] המעברים מידיים (100 ms).

[ ] הצלות אסינכרוני לא חוסמות את ההשתלמויות.

15) תיעוד במערכת התכנון

"אינדיקטור חורג", "Multi Stepple Form'," Autos Banner "," Happliced Modal ".
מדריכים לאחסון הקשר (local vs server), A11y ותכונות ARIA.
תבניות UX: KYC, הפקדות, הגבלות, שאלונים, חזרה לאחר שגיאה.
האם/לא עם דוגמאות של כשל רשת והתאוששות מוצלחת.

תקציר

הצורה מרובת השלבים צריכה להרגיש כמו תהליך רציף, גם אם דעתו של המשתמש מוסחת, אתחל מחדש את הדף, או איבד את הרשת. חיסכון אוטומטי, התאוששות, התקדמות נראית לעין, ומגשים מאובטחים הופכים תרחישים מורכבים (KYC, תשלומים, מגבלות) לחוויות צפויות ומהימנות.