2026-08-10-wuweipages-loginflow-design.md 7.9 KB
五维页面与健康/成长页面登录前·登录后内容设计
设计日期：2026-08-10 依据：《家的算法》书稿（
book/目录）+ 现有系统结构
一、背景与目标
1.1 背景
系统当前为 4+1 TabBar 结构（首页 | 健康 | 成长 | 我的 + 中间⭐五维按钮）。五维通过中心按钮弹出浮层进入各维度详页。
经排查，各页面登录前/登录后内容覆盖不均衡：
| 页面 | 登录前 | 登录后 |
|---|---|---|
| 行（首页 index-home） | Splash闪屏 | ✅ 完整 |
| 身（body-detail/index） | ✅ 品牌语+雷达图 | ✅ 完整 |
| 心（mind-detail/index） | ❓ 待确认 | ❓ 待确认 |
| 智（wisdom-detail/index） | ❓ 待确认 | ❓ 待确认 |
| 富（wealth/index） | ✅ 品牌语+商品预览 | ✅ 完整 |
| 健康（health-main） | ✅ 有 LoginGuide | ✅ 完整 |
| 成长（growth-main） | ❌ 缺失 | ✅ 完整 |
1.2 目标
- 统一五维详页（身/心/智/富）登录前的内容结构，让未登录用户在进入时产生共鸣并被引导注册
- 补齐成长页登录前内容
- 加强健康页登录前内容
- 登录后内容保持现有的"看见→检测→行动→反馈"闭环能力
1.3 指导原则（来自书《家的算法》）
- 登录前：让用户"看见"自己的问题，产生共鸣，而非硬推销
- 每页一句金句作为"勾子"
- 最小输入展示：让用户觉得"这个我也能做到"
- 登录后：从"看见"自然过渡到"检测→行动→反馈"闭环
二、五维详页统一架构（身/心/智/富）
五个维度页面登录前采用统一结构，由 5 个区块组成：
┌─────────────────────────────────────┐
│ [1] 品牌词 │ ← PageBanner
│ [2] 痛点场景（书中故事摘录） │
│ [3] 最小输入卡（20秒启动法） │
│ [4] 功能预览（3-4个入口） │
│ [5] 引导注册（LoginGuideCard） │
└─────────────────────────────────────┘
2.1 各维度内容对照表
| 维度 | 五行 | 品牌词 | 痛点摘录 | 最小输入 | 功能预览 |
|---|---|---|---|---|---|
| 身 🟠 | 土 | 土厚德载物 · 主动健康，守住基本盘 | "年年体检正常，指标却标红三个" | 喝一杯温水 | 健康报告解析 · 打卡 · 体质测评 · 饮食 |
| 心 🔥 | 火 | 火曰炎上 · 大爱相随，家是港湾 | "身体年年体检，你的心体检过吗？" | 一次深呼吸 | 情绪自评 · 情绪打卡 · 疏导工具 · 家庭天盘 |
| 智 ⚡ | 金 | 金曰从革 · 赋能未来，终身课题 | "你逼孩子学习，自己多久没学新东西了？" | 问一个开放题 | 认知测评 · 训练中心 · 自测 · 知识库 |
| 富 💧 | 水 | 水善利万物 · 利他创富，第二曲线 | "工资到账那刻，幸福感却越来越少" | 记一笔账 | 财商打卡 · 保险规划 · 推广收益 · 商城 |
行（首页）已含完整内容，不在此统一架构内。
2.2 区块数据来源
| 区块 | 数据来源 |
|---|---|
| 品牌词 | 书每章开篇（第三章~第七章） |
| 痛点场景 | 书序章/各章开篇故事摘录 |
| 最小输入 | 书第8章《最小输入》五维清单 |
| 功能预览 | 系统现有功能（各维度子页面） |
| 引导注册 | 统一 LoginGuideCard 组件 |
三、健康页（health-main）登录前内容
3.1 现状
已有简单 LoginGuideCard（PageBanner: "科学管理全家健康" + LoginGuideCard）。
3.2 建议扩展
┌─ [1] 品牌词 ───────────────────────┐
│ "看见·主动健康闭环" │
│ 采集 → 看见 → 行动 │
├─ [2] 痛点卡 ────────────────────────┤
│ "指标正常 ≠ 健康" │
│ 孩子反复生病，你扛了多少次了？ │
├─ [3] 功能预览 ──────────────────────┤
│ 健康报告 · 在线测评 · 打卡 · 方案 │
├─ [4] 健康自测入口 ──────────────────┤
│ [15题五维自检 · 身维度部分] │
├─ [5] 引导注册 ──────────────────────┤
│ [登录后查看全家健康数据] │
└─────────────────────────────────────┘
四、成长页（growth-main）登录前内容
4.1 现状
登录前内容缺失，直接暴露登录后数据。
4.2 建议新增
┌─ [1] 品牌词 ───────────────────────┐
│ "干预 · 记录 · 成长" │
│ 知行合一，每天进步一点点 │
├─ [2] 理念卡 ────────────────────────┤
│ "看见改变正在发生"（书第10章反馈校验）│
├─ [3] 示例展示 ──────────────────────┤
│ 脱敏案例：小明三个月成长记录 │
│ 身维度 +5分 · 智维度 +3分 │
├─ [4] 功能预览 ──────────────────────┤
│ 干预进度 · 追踪记录 · 里程碑 · 调研 │
├─ [5] 引导注册 ──────────────────────┤
│ [登录后查看完整成长档案] │
└─────────────────────────────────────┘
五、登录后内容（保持现状 + 闭环引导）
登录后各页面保持现有功能，并在关键触点补充"看见→检测"引导（方案A，见下方）。
5.1 方案A：检测引导触点
| 触点 | 内容 |
|---|---|
| 自检结果页 | 低分维度 → 显示"建议做专业测评" + 推荐测评类型 |
| 维度详情页 | 数据来源为自检时 → 显示"做专业测评获取精准评分"引导条 |
| 家庭天盘预警Tab | 能量偏低且无近期检测记录 → 自动生成"建议检测"项 |
| 健康预警横幅 | 可检测预警 → 增加"去检测"按钮 |
5.2 维度→测评映射
| 维度 | 对应测评 |
|---|---|
| 身 | 健康报告/体检 |
| 心 | DAN测评（EMI心理子维度）+ 心理状态自评 |
| 智 | DAN测评（认知子维度）+ 认知测评 |
| 行 | DAN测评（部分）+ 关系问卷 |
| 富 | 财商打卡（自检级，无专业测评） |
六、角色与权限
- 登录前：游客可访问各维度详页、健康页、成长页的品牌展示内容
- 登录后：家长/孩子/规划师按现有角色权限展示对应数据
- 规划师 TabBar 保持现有 5 Tab 不变
七、实施范围与拆解
7.1 前端（cfc-frontend）
| 文件 | 改动 |
|---|---|
pages/body-detail/index.vue |
登录前内容按统一架构重组 |
pages/mind-detail/index.vue |
确认登录前现状，按统一架构补齐 |
pages/wisdom-detail/index.vue |
确认登录前现状，按统一架构补齐 |
pages/wealth/index.vue |
登录前内容按统一架构微调 |
pages/health-main/index.vue |
登录前内容扩展（痛点卡+功能预览+自测入口） |
pages/growth-main/index.vue |
登录前内容新增（理念卡+示例+功能预览） |
| 公共 | 痛点卡/功能预览区块可抽象为通用组件 |
7.2 后端（cfc-backend）
- 若"功能预览"需动态数据，新增聚合接口
- 若"维度→测评映射"需配置化，新增映射配置接口
八、暂不涉及（YAGNI）
- ❌ 不新增独立"五维启动器"页面（沿用现有中心浮层）
- ❌ 不重构登录后核心功能
- ❌ 不改变规划师 TabBar