53 lines
2.5 KiB
Markdown
53 lines
2.5 KiB
Markdown
# 工作区首次进入弹窗需求
|
||
|
||
## 背景
|
||
用户第一次进入工作区时，对创作流程与生产流程不熟悉，容易迷失操作路径。
|
||
通过一次性弹窗，在首屏集中展示核心流程，降低学习成本，提升首次创作转化率。
|
||
|
||
## 需求目标
|
||
1. 用户首次进入“工作区”即触发弹窗（仅首次）。
|
||
2. 弹窗内容清晰说明“创作流程”与“生产流程”两步走。
|
||
3. 用户可主动关闭弹窗；关闭后不再自动弹出。
|
||
4. 记录“已阅”状态，刷新/重进工作区仍保持关闭状态。
|
||
|
||
## 触发条件
|
||
- 本地无 `workspaceGuideShown = true` 标记。
|
||
- 路由命中 `/workspace` 且用户身份已登录。
|
||
|
||
## 弹窗内容
|
||
| 步骤 | 标题 | 说明 | 示意图（占位） |
|
||
|----|------|------|--------------|
|
||
| ① 创作流程 | 上传素材 → AI 解析 → 在线编辑 | 支持 3D 模型、图片、文本一键上传，AI 自动拆解可编辑元素 | ![创作流程图] |
|
||
| ② 生产流程 | 预览效果 → 一键打包 → 多端发布 | 实时预览场景，智能压缩与格式转换，直接发布至 Web/VR/小程序 | ![生产流程图] |
|
||
|
||
## 交互细则
|
||
1. 弹窗居中，蒙层遮罩，宽度 640px，高度自适应最大 80vh。
|
||
2. 顶部大标题：“欢迎来到工作区，3 分钟带你完成首个作品”。
|
||
3. 步骤卡片横向排布，PC 端左右滑动，移动端上下滑动。
|
||
4. 底部固定按钮：
|
||
- 主按钮“开始创作”——关闭弹窗并定位到“上传区域”。
|
||
- 次按钮“稍后提醒”——关闭弹窗，不写入标记，下次进入再弹。
|
||
5. 右上角“X”直接关闭，写入标记，视为“已阅”。
|
||
|
||
## 埋点需求
|
||
| 事件 | 参数 |
|
||
|------|------|
|
||
| workspace_guide_show | { user_id, timestamp } |
|
||
| workspace_guide_close | { user_id, way: 'start'/'later'/'x', timestamp } |
|
||
| workspace_guide_slide | { user_id, step: 1/2, timestamp } |
|
||
|
||
## 异常处理
|
||
- 若用户禁用了 localStorage，降级使用 sessionStorage，关闭标签页即失效。
|
||
- 若图片加载失败，显示占位灰图，不阻塞流程。
|
||
|
||
## 验收标准
|
||
✅ 首次进入出现弹窗；刷新后不再出现。
|
||
✅ 点击“开始创作”自动滚动到上传区域并焦点高亮 3 秒。
|
||
✅ 点击“稍后提醒”关闭，重新进入工作区再次弹出。
|
||
✅ 所有埋点正确上报，可在大数据平台查询。
|
||
|
||
## 上线计划
|
||
- 前端：2024-07-15 提测
|
||
- 测试：2024-07-18 完成
|
||
- 上线：2024-07-20 随 v3.4.0 发布
|