引导流程
规则
- 多步骤向导：将步骤定义为数组 — 在状态中追踪
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个步骤，其余推迟
- 无进度持久化 — 用户如果页面刷新后丢失进度会放弃
- 强制完成所有步骤 — 允许用户跳过可选步骤
- 无激活追踪 — 需要衡量引导完成率