digital-psychology/.ai/product/feature-spec/cece-frontend-re/01-tab-home.md

01 · Tab「首页」逆向设计

Evidence: ✅ E1 实测 · ✅ E2「更多」工具 · 🟡/🔵 补全交互

---

STEP 1 — UI Analysis

区域结构（自上而下）

#	区域	可见元素	证据
H1	顶栏	可能含搜索/消息入口；「输入生日，更加了解 TA」引导条	✅ E1
H2	用户/档案摘要	当前本人档案摘要或未建档 CTA	🟡 E6
H3	功能宫格	I人E人、星座、星盘、缘分合盘、沙盘、陪伴小星、商城、倾诉、AI玩法广场、更多	✅ E1
H4	运营 Banner	活动/会员/新品	🟡 E6
H5	推荐信息流	今日运势、热门测试、AI入口、专家推荐、文章/视频/故事/达人内容	✅ E1/E4
H6	底部 Tab Bar	全局	✅ E1

宫格 Icon 全集（不得遗漏）✅ E1

1. I人E人（MBTI）
2. 星座
3. 星盘
4. 缘分合盘
5. 沙盘
6. 陪伴小星
7. 商城
8. 倾诉
9. AI玩法广场
10. 更多 → 二级页：爱情树、幸运地图、pick卡… ✅ E2

AI 玩法广场页内元素 ✅ E1

• Slogan：「全民手搓创意——精选应用」
• 列表卡片：应用名、热度（如 SBTI 305.7 万）、创作者名
• 示例：SBTI 测试版、答案之书、三生三世你和 Ta、灵魂伴侣

---

STEP 2 — Feature Analysis（逐元素）

元素	作用	点击	长按/其它	权限/VIP	分享
了解 TA 引导	建关系档案	进档案创建表	—	登录	否
MBTI	拉新测评	进量表流程	—	部分结果免费	结果强分享
星座	内容/运势	星座频道	—	深度会员	文章可分享
星盘	本命排盘	星盘页+档案切换	—	多盘型/详解会员	海报
缘分合盘	双人匹配	选 A/B→报告	—	指数免费/深文案付费	指数卡
沙盘	沉浸投射	3D 沙盘	—	可能次数限制	场景图
陪伴小星	AI 陪伴	进子场景/问	—	AI 次数	否
商城	电商	商品列表	—	登录支付	商品
倾诉	咨询/AI	分流问/在线	—	—	否
AI玩法广场	UGC 应用集市	列表→应用	—	视应用	应用结果
信息流卡片	消费/转化	详情/达人/测试	可能不喜欢	—	内容分享
更多	收纳	二级宫格	—	—	—

---

STEP 3 — User Flow

主流程：测评拉新

首页 → MBTI → 答题 → Loading → 结果
  → 分享 / 解锁完整 / 邀请好友再测
  → 失败：网络错误重试；中途退出保存进度【待真机】

主流程：建 TA 档案

首页引导 → 填写生日/关系类型 → 保存
  → 可用于合盘 / AI 对象切换
  → 失败：校验生日非法；未登录 → LoginRequired

主流程：玩法广场

宫格 → 广场列表 → 选应用 → 互动 → 结果 → 热度/分享
  → Empty：无应用；审核中不可见 🔵

---

STEP 4 — 状态机

状态	UI
Init/Loading	骨架屏
Loaded	宫格+流
EmptyFeed	流空+推荐宫格
Offline	顶条提示
LoginRequired	登录半屏
VIPLocked	会员半屏
Error	重试

stateDiagram-v2
  [*] --> Loading
  Loading --> Loaded
  Loading --> Error
  Loaded --> LoginRequired
  Loaded --> VIPLocked
  Loaded --> Offline
  Offline --> Loaded
  Error --> Loading: 重试

---

页面验收（前端）

• 宫格 9+更多与 E1 一致（版本差分记日志）
• 「了解 TA」可达档案创建
• 玩法广场展示热度与创作者
• 信息流可下拉刷新 / 分页 🔵