2026-06-04-pre-login-discovery-design.md 14 KB
登录前浏览体验设计
状态: Draft 日期: 2026-06-04 品牌名变更: 溪艾福 → 浠艾福（本设计沿用新品牌名）
1. 设计目标
让未登录用户在登录前即可浏览平台内容，对浠艾福的定位和功能形成初步了解，降低注册门槛，提升转化率。
核心原则
- 零门槛浏览 — 打开小程序无需登录即可看到内容
- 渐进式引导 — 浏览过程中自然触发登录，而非强制登录
- 品牌心智 — 通过五行沙盘视觉符号建立品牌认知
- 低改造成本 — 尽量复用现有页面和组件，减少重复开发
2. 品牌更名
全站文本替换（涉及前端页面 + 后端返回数据）：
| 原词 | 新词 | 范围 |
|---|---|---|
| 溪艾福 | 浠艾福 | 所有前端页面标题、文案、Banner |
| 溪福俱乐部 | 浠艾福俱乐部 | 会员相关文案 |
| 溪艾福 (Care Family Club) | 浠艾福 (Care Family Club) | 品牌全称 |
| XIAIFU | XIAIFU | 无变化（拼音相同） |
3. 用户流程
┌─────────────────────────────────────────────────┐
│ 打开小程序 │
└────────────────────┬────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ 发现 Tab（未登录 = 首屏） │
│ · 五行沙盘视觉展示 │
│ · 精选活动介绍 │
│ · 推荐商品介绍 │
│ 底部导航：[发现] [商城] │
└────────────────────┬────────────────────────────┘
↓
┌───────────┴───────────┐
↓ ↓
┌────────────┐ ┌────────────┐
│ 浏览内容 │ │ 商城 │
│ (发现页) │ │ (商品列表) │
└──────┬─────┘ └──────┬─────┘
↓ ↓
┌────────────────────────────────────────┐
│ 点击交互点（任意以下操作） │
│ · 五行沙盘五个角 │
│ · 活动卡片「查看详情」 │
│ · 商品卡片「立即购买」 │
│ · 底部「登录解锁完整功能」 │
└──────────────────┬─────────────────────┘
↓
┌────────────────────────────────────────┐
│ 跳转登录页 │
│ (现有 login.vue，无需改造) │
└──────────────────┬─────────────────────┘
↓
┌────────────────────────────────────────┐
│ 登录成功 → 恢复原生 TabBar │
│ 首页 | 发现 | 商城 | 我的 │
│ 根据角色显示对应内容 │
└────────────────────────────────────────┘
4. 页面设计
4.1 发现页（预登录核心页面）
位置: pages/discover/index.vue（现有，需重构）
页面结构（从上到下）:
┌─────────────────────────────────────────────┐
│ 📱 状态栏 │
├─────────────────────────────────────────────┤
│ ★ Banner 区 │
│ ┌───────────────────────────────────────┐ │
│ │ 🌟 浠艾福 Care Family Club │ │
│ │ 以五行五维为内核的 │ │
│ │ 家庭主动健康管理平台 │ │
│ │ │ │
│ │ [任务积分] [五行沙盘] [家庭共育] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ★ 五行能量沙盘（视觉主体） │
│ ┌───────────────────────────────────────┐ │
│ │ 🔥 心·火 (点此登录) │ │
│ │ │ │
│ │ 🌿 行·木 ⭐五行平衡 💧 富·水 │ │
│ │ 共同成长 │ │
│ │ │ │
│ │ ⚔️ 智·金 🌏 身·土(点此登录) │ │
│ └───────────────────────────────────────┘ │
│ 五个角可点击，触发登录 │
│ 底部有相生指引文字「🌱 完成测评，点亮身·土」│
│ │
│ ★ 精选活动 │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │亲子 │ │情绪 │ │菌群 │ ← 横向滚动 │
│ │瑜伽 │ │管理 │ │调养 │ │
│ │体验课│ │工作坊│ │讲座 │ │
│ │¥199 │ │免费 │ │¥299 │ │
│ │查看→│ │查看→│ │查看→│ │
│ └─────┘ └─────┘ └─────┘ │
│ 点击活动卡片→跳转登录 │
│ │
│ ★ 推荐商品 │
│ ┌───────────────────────────────────────┐ │
│ │ 🧘 亲子瑜伽体验课 ¥199 │ │
│ │ ★★★★☆ 已售230份 │ │
│ │ 适合5-12岁儿童与家长共同参与 │ │
│ └───────────────────────────────────────┘ │
│ ┌───────────────────────────────────────┐ │
│ │ 🎮 舒尔特方格专注力训练 ¥49 │ │
│ │ ★★★★★ 已售568份 │ │
│ │ 经典注意力训练游戏，每日5分钟 │ │
│ └───────────────────────────────────────┘ │
│ 点击商品卡片→跳转登录 │
│ │
│ ★ 登录引导条 │
│ ┌───────────────────────────────────────┐ │
│ │ 🔒 登录解锁完整功能 │ │
│ │ 创建家庭 / 管理任务 / 五行沙盘 │ │
│ │ 【立即登录 →】 │ │
│ └───────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────┤
│ [发现] [商城] ← 自定义底部 │
└─────────────────────────────────────────────┘
关键交互:
- 所有交互点（沙盘五角、活动卡片、商品卡片、登录引导条）统一调用登录跳转
- 登录跳转使用
uni.navigateTo({ url: '/pages/login/login' }) - 登录成功后
uni.reLaunch回到当前页面并恢复原生 TabBar
4.2 商城页（未登录预览态）
位置: pages/shop/index.vue（现有，需改造）
变化:
- 保持现有商品/服务分类标签
- 添加登录状态检测
- 点击商品详情或购买→未登录则跳转登录
- 底部保持与发现页一致的自定义底部导航
限制:
- 未登录状态下最多展示 6 个推荐商品，超过提示登录查看全部
- 价格显示但不展示用户专属价
- 不展示收藏/购物车功能
4.3 登录页（不做内容改造）
位置: pages/login/login.vue（保持现有）
变化: 无内容改造。仅在用户从发现/商城跳转过来时带有 redirect 参数，登录成功后返回来源页。
4.4 已登录 TabBar（保持现有）
登录后恢复原生 4Tab 配置：
- 首页（角色分流）
- 发现（完整版，含真实数据）
- 商城（完整版）
- 我的（个人中心）
5. TabBar 切换策略
未登录态
- 隐藏原生 TabBar（调用
uni.hideTabBar()） - 使用自定义底部导航 — 在 发现页 和 商城页 底部渲染统一的自定义导航组件
- 两个入口：
[发现]|[商城] - 自定义导航视觉风格：浅色背景，选中态高亮色
#FF6B6B
登录态
- 恢复原生 TabBar（调用
uni.showTabBar()） - 使用 pages.json 中配置的 4Tab 结构
切换时机
| 事件 | 动作 |
|---|---|
| App.vue onLaunch（无 token） | 隐藏原生 TabBar，跳转发现页 |
| App.vue onLaunch（有 token） | 显示原生 TabBar, 正常流向 |
| 登录成功 | 显示原生 TabBar, 跳转首页 |
| 退出登录 | 隐藏原生 TabBar, 跳转发现页 |
6. 五行沙盘组件复用
现有: parent-index.vue 和 child-index.vue 中已实现五行沙盘的 HTML+CSS
复用策略:
- 将五行沙盘提取为独立组件
components/wuxing-sandbox.vue - 三个场景共用同一组件（父参数控制模式）：
| 模式 | 场景 | 交互 |
|------|------|------|
|
preview| 发现页（未登录） | 点击任意角→跳转登录，状态文字=「点此登录」 | |parent| 家长首页（已登录） | 点击跳转对应维度详情，状态=实际成长数据 | |child| 孩子首页（已登录） | 同上，但数据源为孩子视角 |
7. 数据来源
未登录态内容数据
Phase 1 实现策略 — 纯静态数据（无后端依赖）：
第一阶段全部使用页面内硬编码的静态默认数据，不依赖任何后端接口。这样可以零后端改造成本快速上线。
| 数据 | 来源 | 策略 |
|---|---|---|
| Banner | 页面内静态 HTML | 1 条默认品牌 Banner |
| 活动卡片 | 页面内静态数组 | 3 条默认活动（亲子瑜伽/情绪管理/菌群调养） |
| 推荐商品 | 页面内静态数组 | 2 条默认商品（瑜伽体验课/舒尔特方格） |
| 五行沙盘 | 前端组件 wuxing-sandbox.vue |
纯 UI 展示，无需数据 |
Phase 2（后续增强）： 如需动态内容，新增后端公开内容接口（无需 JWT 认证），发现页按需调用。
容错策略
- 静态数据作为默认值始终可用
- 如需调用后端接口，接口不可用时回退到静态数据
8. 影响范围
| 文件 | 改动类型 | 说明 |
|---|---|---|
cfc-frontend/App.vue |
修改 | 登录态判断 + TabBar 切换逻辑 |
cfc-frontend/pages/discover/index.vue |
重构 | 全新布局（沙盘+活动+商品） |
cfc-frontend/pages/shop/index.vue |
修改 | 添加未登录态预览逻辑 |
cfc-frontend/pages/login/login.vue |
微调 | 支持 redirect 参数 |
cfc-frontend/components/wuxing-sandbox.vue |
新增 | 五行沙盘组件提取 |
cfc-frontend/components/bottom-nav.vue |
新增 | 自定义底部导航组件 |
cfc-frontend/utils/api.js |
新增 | 公开内容接口 |
| 全站前端文件 | 文本替换 | 溪艾福→浠艾福 |
不改动的范围
- 后端 API 不需要新增（除非需要动态内容接口）
- 首页 parent-index.vue / child-index.vue — 保持现有（登录后使用）
- 登录页 login.vue — 不做内容增强
9. 验收标准
- 未登录用户打开小程序，看到的不是登录页，而是发现页
- 发现页展示五行沙盘（五个角可点击，点击跳转登录）
- 发现页展示活动卡片（3+ 个，横向滚动，点击跳转登录）
- 发现页展示商品卡片（2+ 个，点击跳转登录）
- 未登录时底部导航仅显示「发现」「商城」两个入口
- 商城页未登录时展示商品列表，点击详情/购买跳转登录
- 登录后恢复原生 TabBar（首页/发现/商城/我的）
- 退出登录后回到未登录态
- 全站「溪艾福」文本已替换为「浠艾福」
- 五行沙盘可复用（preview/parent/child 三种模式）