多字形形式和上下文保存

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）步驟和布局設計

結構：垂直導航（桌面）/頂部進度欄（移動）。

可見步驟名稱： "1.個人詳細信息」，「2。身份證明。"

• 主要是「下一步「/「繼續」。
• 次要是「後退」。
• 最後一步是「完成「/」提交」。

• 使用'aria-current='step'。
• 如果步驟不均勻,則顯示百分比。
• 添加「可以稍後返回」提示。

4）保存上下文和數據

汽車保護

• 更改字段（debouns 500-1000 ms）；
• 轉向下一步；
• 失去選項卡的焦點。

• 本地（「localStorage」/IndexedDB）-如果形式短；
• 服務器-用於KUS/付款/問卷。

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：灰色/活動指示燈,只有前一個步驟完成時才可點擊。
完成：綠色勾選/圖標；可以打開進行編輯。
錯誤：紅色輪廓，字段下方的文本和進度線。
已禁用：當前步驟已隱藏或不可用。

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）錯誤和中斷行為

網絡故障： "連接丟失。數據將在本地保存。"

Taymout：通過3-5 c自動重復；失敗時-離線草稿。
會話中斷：登錄後→「從最後一步繼續」。
步驟錯誤：我們保留部分填充的字段,我們突出顯示有問題的字段。

9）平行會議和安全性

「draft_id」在用戶上是唯一的。

打開新選項卡-建議"打開另一個會話。在這裏更新或繼續。"

對於KUS/財務表格-數據在保存草稿之前在客戶端（AES/GCM）上加密。
刪除TTL草稿（例如7天非活動）。

10） iGaming腳本示例

10.1 KUS/驗證

1.個人數據→ 2.文件→ 3。驗證→ 4。完成。

照片上傳後自動駕駛。
中斷後從檢查步驟恢復。
指示符的「等待確認」狀態。

10.2付款/定金

步驟：1。金額→ 2。方法3 →。確認。
方法數據在會期之間保存。
可以返回到方法選擇而不重置金額。

10.3設置限制

步驟：限制類型→值→確認。
進展顯示了剩余的步驟。
完成後-屏幕將通過「……」生效。

11）度量與控制

完成率：完成所有步驟的用戶百分比。
下降的步驟：在哪個步驟離開。

Average time per step и Time-to-Complete.

自動保存成功率（恢復了多少草稿）。
錯誤恢復率：失敗後成功繼續的百分比。

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/Do n't提供網絡故障和成功恢復的示例。

簡短摘要

即使用戶分心，重新啟動頁面或丟失了網絡，也必須通過連續的過程感覺到多頁形式。自動保護、恢復、可見的進步和安全轉發將復雜的情景（KYC、支付、限制）轉變為可預測和值得信賴的體驗。