入職引導流程
規則
- 多步驟精靈：將步驟定義為陣列 — 在狀態中追蹤
currentStep，顯示帶有步驟計數的進度條 - 進度指示器：在頂部顯示步驟編號或進度條 — 顯示已完成、目前和即將進行的步驟 — 永遠不要隱藏剩餘步驟數
- 進度持久化：將完成的步驟儲存至資料庫 — 用戶可以離開並從中斷處繼續
- 啟用核取清單：定義關鍵行動（例如「建立第一個專案」、「邀請團隊成員」、「連接整合工具」）— 在儀表板上顯示完成百分比
- 歡迎郵件序列：註冊後立即發送，然後在第 1、3、7 天發送 — 內容對應他們尚未完成的核取清單項目
- 跳過選項：允許用戶跳過非關鍵步驟 — 標記為「已跳過」，而非「已完成」 — 提供稍後完成的選項
- 資料收集：只詢問必要的內容 — 將個人資訊、工作區設定和偏好設定分為不同的步驟
- 完成慶祝：在最後一步顯示五彩紙屑或成功動畫 — 將用戶重新導向主要產品視圖
精靈模式
const ONBOARDING_STEPS = [
{ id: "profile", title: "你的個人檔案", required: true },
{ id: "workspace", title: "建立工作區", required: true },
{ id: "invite", title: "邀請團隊", required: false },
{ id: "integrations", title: "連接工具", required: false },
] as const;
// 在資料庫中追蹤
interface OnboardingState {
userId: string;
currentStep: number;
completedSteps: string[];
skippedSteps: string[];
completedAt: Date | null;
}
啟用核取清單模式
在儀表板上顯示，直到所有項目完成或用戶關閉：
const ACTIVATION_ITEMS = [
{ key: "first_project", label: "建立你的第一個專案", check: (user) => user.projectCount > 0 },
{ key: "invite_member", label: "邀請一位團隊成員", check: (user) => user.teamSize > 1 },
{ key: "first_deploy", label: "部署到生產環境", check: (user) => user.deployCount > 0 },
];
應避免的事項
- 過早詢問過多資訊 — 精靈中最多 3-5 個步驟，其餘推遲
- 沒有進度持久化 — 用戶會因為頁面重新整理而失去進度
- 強制完成所有步驟 — 允許用戶跳過可選步驟
- 沒有啟用追蹤 — 你必須衡量入職引導的完成率