用户流程 & 内容结构设计

方案 C(TabBar解锁)+ A(登录页增强)合并设计

📱 用户进入流程

打开小程序
→
发现 Tab
(未登录亦可浏览)
→
浏览内容 ← 浏览商城
浏览服务商
→
点击需登录功能
→ 跳转登录页
→
登录后回到
之前页面

发现 Tab — 内容设计

发现(未登录)
溪艾福 Care Family Club
以五行五维为内核的家庭主动健康管理平台
🏆 任务积分 ⭐ 五行沙盘 👨‍👩‍👧 家庭共育
🔥
心·火
🌿
行·木
🌏
身·土
⚔️
智·金
💧
富·水
📖 精选内容
培养孩子专注力的5个实用方法
🔥 心·火 · 2026-06-01
DAN测评:科学了解孩子的认知天赋
⚔️ 智·金 · 2026-05-28
家庭任务积分制:让孩子主动学习
🌿 行·木 · 2026-05-25
登录解锁全部功能
创建家庭、管理任务、查看五行能量沙盘

登录页 — 顶部增强

登录页(增强版)
溪艾福
Care Family Club
🏆
任务积分
激励自主完成任务
⭐
五行沙盘
五维成长可视化
👨‍👩‍👧
双角色
家长孩子协同
登录后使用完整功能
手机号
获取验证码
微信一键登录
先浏览看看 →

商城 Tab — 内容设计

商城(未登录预览)
全部 课程 活动 商品
🧘
亲子瑜伽体验课
¥199
🎮
舒尔特方格专注力训练
¥49
登录查看全部商品和服务

我的 Tab — 未登录状态

我的(未登录)
👤
登录/注册
登录后使用全部功能
立即登录
📖 关于溪艾福
💬 意见反馈
⚙️ 设置

📋 需要实现的核心改动

  1. 路由守卫改造 — 允许未登录访问指定的 TabBar 页面(发现、商城、我的)
  2. 发现页内容重构 — 新增未登录可看的精选内容(产品介绍、文章等)
  3. 商城页未登录态 — 展示商品/服务列表,操作时引导登录
  4. 我的页未登录态 — 显示登录入口 + 基础信息
  5. 登录页顶部增强 — 加产品亮点三卡片展示
  6. 引导按钮 — 登录页底部"先浏览看看"可回到发现Tab

看看各页面的布局设计是否合理?有哪些地方想调整?