jackyu66gitandCursor
bd22d9dddd
落地 synastry/star/ask API 与 H5 页面，补齐 cece-frontend-re complete-design 证据文档，并加入 Android 模拟器截图抓取脚本。 Co-authored-by: Cursor <cursoragent@cursor.com>
119 lines
3.6 KiB
Markdown
119 lines
3.6 KiB
Markdown
# 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
|
||
|
||
### 主流程：测评拉新
|
||
|
||
```text
|
||
首页 → MBTI → 答题 → Loading → 结果
|
||
→ 分享 / 解锁完整 / 邀请好友再测
|
||
→ 失败：网络错误重试；中途退出保存进度【待真机】
|
||
```
|
||
|
||
### 主流程：建 TA 档案
|
||
|
||
```text
|
||
首页引导 → 填写生日/关系类型 → 保存
|
||
→ 可用于合盘 / AI 对象切换
|
||
→ 失败：校验生日非法；未登录 → LoginRequired
|
||
```
|
||
|
||
### 主流程：玩法广场
|
||
|
||
```text
|
||
宫格 → 广场列表 → 选应用 → 互动 → 结果 → 热度/分享
|
||
→ Empty：无应用；审核中不可见 🔵
|
||
```
|
||
|
||
---
|
||
|
||
## STEP 4 — 状态机
|
||
|
||
| 状态 | UI |
|
||
|---|---|
|
||
| Init/Loading | 骨架屏 |
|
||
| Loaded | 宫格+流 |
|
||
| EmptyFeed | 流空+推荐宫格 |
|
||
| Offline | 顶条提示 |
|
||
| LoginRequired | 登录半屏 |
|
||
| VIPLocked | 会员半屏 |
|
||
| Error | 重试 |
|
||
|
||
```mermaid
|
||
stateDiagram-v2
|
||
[*] --> Loading
|
||
Loading --> Loaded
|
||
Loading --> Error
|
||
Loaded --> LoginRequired
|
||
Loaded --> VIPLocked
|
||
Loaded --> Offline
|
||
Offline --> Loaded
|
||
Error --> Loading: 重试
|
||
```
|
||
|
||
---
|
||
|
||
## 页面验收（前端）
|
||
|
||
- [ ] 宫格 9+更多与 E1 一致（版本差分记日志）
|
||
- [ ] 「了解 TA」可达档案创建
|
||
- [ ] 玩法广场展示热度与创作者
|
||
- [ ] 信息流可下拉刷新 / 分页 🔵
|