# 设计师交付：分端功能脑图 & 线框占位

> 给 UI/UX 设计师 · 品牌：**国内拉拉玩** / **国外 lala one** · 2026-03

---

## 一、信息架构总览

```mermaid
flowchart TB
    subgraph Platform["lala.one 平台"]
        P[Web / Admin]
    end

    subgraph CN["国内 · 拉拉玩"]
        MP[微信小程序]
        CNH5[国内 H5]
        CNAPP[国内 App]
    end

    subgraph GL["国外 · lala one"]
        GLH5[国外 H5]
        GLAPP[国外 App]
        SOC[社媒入口 Line/TG]
    end

    Platform --> CN
    Platform --> GL
    SOC --> GLH5

    MP --- Core
    CNH5 --- Core
    CNAPP --- Core
    GLH5 --- Core
    GLAPP --- Core

    subgraph Core["共用核心模块"]
        C0[场地集合]
        C1[团队运动]
        C2[球队+角色]
        C3[群聊+论坛]
        C4[圈子+素材]
    end
```

---

## 二、三端导航结构（IA）

### 2.1 微信小程序 · 拉拉玩

```
TabBar（4）
├── 首页        → 同城球局 / 快捷入口 / Banner
├── 球队        → 我的球队 / 创建 / 管理
├── 圈子        → 关注流 / 球队圈 / 发布
└── 我的        → 报名 / 消息 / 设置

二级常用路径
├── 球局详情 → 报名 / 局内群 / 分享
├── 发局
├── 球队主页 → 成员 / 论坛 / 圈子
├── 球队管理（队长/经理/运营）
├── 场地详情（轻量）
├── 群聊页
├── 论坛帖列表 / 详情
└── 圈子帖详情 / 发布
```

### 2.2 H5 · 拉拉玩 / lala one

```
无固定 Tab（落地优先）

主路径
├── /m/{id}       球局详情（P0 主落地）
├── /t/{code}     球队邀请
├── /e/{id}       赛事详情
├── /circle/{id}  圈子帖分享落地
├── /play/{city}  同城聚合（国外 SEO）
└── /download     引导 App / 打开小程序

顶栏模式
├── 极简：Logo + 登录
└── 内页：返回 + 标题 + 分享

国内：复杂操作 → 底部固定「打开小程序」
国外：可内嵌完整发局 / 管理
```

### 2.3 App · 拉拉玩 / lala one

```
TabBar（5）
├── 首页        → 发现 / 球局 / 赛事
├── 球队        → 列表 / 管理入口
├── 发布        → 发局 / 发帖 / 发素材（中心按钮）
├── 消息        → 群聊列表 / 系统通知
└── 我的        → 资料 / 场地管理 / 设置

管理端入口（角色可见）
├── 球队管理台（队长/经理/运营）
└── 场地管理台（场主/管理员）★ App 独有完整版
```

---

## 三、功能脑图（按模块 · 三端对照）

```mermaid
flowchart LR
    R["拉拉玩 · lala one"]

    R --> M0[场地集合]
    M0 --> M0a[多片场地]
    M0 --> M0b[多运动类型]
    M0 --> M0c[档期赛事]

    R --> M1[团队运动局]
    M1 --> M1a[足球篮球排球等]
    M1 --> M1b[报名取消]
    M1 --> M1c[局内群]
    M1 --> M1d[分享链接]
    M1 --> M1e[须选集合]

    R --> M2[球队]
    M2 --> M2a[队长]
    M2 --> M2b[副队长]
    M2 --> M2c[球队经理]
    M2 --> M2d[运营]
    M2 --> M2e[球队群]
    M2 --> M2f[球队论坛]
    M2 --> M2g[球队圈子]

    R --> M3[场地]
    M3 --> M3a[场主]
    M3 --> M3b[场地管理员]
    M3 --> M3c[档期赛事]
    M3 --> M3d[场地圈子]

    R --> M4[沟通]
    M4 --> M4a[局内群]
    M4 --> M4b[球队群]
    M4 --> M4c[场地群]
    M4 --> M4d[论坛版块]

    R --> M5[圈子]
    M5 --> M5a[发图视频]
    M5 --> M5b[点赞评论]
    M5 --> M5c[外部分享]
    M5 --> M5d[球局相册]

    R --> M6[账号]
    M6 --> M6a[登录绑手机]
    M6 --> M6b[个人中心]
    M6 --> M6c[消息推送]
```

### 三端能力矩阵（设计时注意差异化）

| 模块 | 小程序 | H5 | App |
|------|:------:|:--:|:---:|
| Tab 主导航 | 4 Tab | 无/极简 | 5 Tab |
| 球局详情+报名 | ● | ● 主落地 | ● |
| 发局 | ● | ○ 引导 | ● |
| 球队管理台 | ● | ○ | ●● 最全 |
| 场地管理台 | ○ 轻 | ○ | ●● 完整 |
| 局内群 | ● | ● | ● |
| 球队群/论坛 | ● | ● | ● |
| 圈子 Feed | ● Tab | ● 落地页 | ● |
| 分享卡片 | ●● 最强 | ● OG | ● 系统分享 |
| 订阅/推送 | 订阅消息 | — | Push |

● 完整 · ○ 引导其他端 · ●● 独有深度

---

## 四、线框占位（低保真 · 375×812 逻辑像素）

> 方框 = 占位区域 · `[文案]` = 建议文案 · `━━` = 主按钮

---

### 4.1 小程序 · 首页

```
┌─────────────────────────────┐
│ 拉拉玩          [城市▼] [🔔] │  ← 顶栏 88rpx
├─────────────────────────────┤
│ ┌─────────────────────────┐ │
│ │     Banner 广告位        │ │  ← 可选 160rpx
│ └─────────────────────────┘ │
│ 我的球队 ──────────────────→ │
│ [队徽] XX足球队  下场: 周六... │
├─────────────────────────────┤
│ 同城活动          [运动▼][集合▼] │
│ ┌─────────────────────────┐ │
│ │ 周六 15:00 · 篮球         │ │
│ │ XX运动中心 · 8/12 · 休闲  │ │  ← 活动卡片（多运动）
│ │ [队徽] XX队        [报名] │ │
│ └─────────────────────────┘ │
│ ┌─────────────────────────┐ │
│ │ ...                      │ │
│ └─────────────────────────┘ │
├─────────────────────────────┤
│ [首页] [球队] [圈子] [我的]   │  ← TabBar 98rpx
└─────────────────────────────┘
         [+] 发局 FAB 右下       ← 浮动按钮
```

---

### 4.2 小程序 · 活动详情（团队运动局）

```
┌─────────────────────────────┐
│ ←  活动详情          [分享] │
├─────────────────────────────┤
│ [篮球图标] 周六 3/28 15:00-17:00
│ XX运动中心（场地集合）  →    │
│   └ 篮球全场 1号 · 8/12 人   │
│ 费用: AA 约50元/人          │
│ 水平: 休闲 · 公开报名        │
├─────────────────────────────┤
│ 组织者 [头像] 张队长  XX队 → │
├─────────────────────────────┤
│ 已报名 (8)                  │
│ (○)(○)(○)(○)(○)(○)...       │
├─────────────────────────────┤
│ [进入局内群]  [查看论坛帖]    │
├─────────────────────────────┤
│                             │
│  ━━━━━━ 立即报名 ━━━━━━     │  ← 底栏固定 CTA
│       或 取消报名 / 已满     │
└─────────────────────────────┘
```

---

### 4.3 小程序 · 发局（须选场地集合）

```
┌─────────────────────────────┐
│ ←  发局              [发布] │
├─────────────────────────────┤
│ 运动类型    [篮球 ▼]        │  ← 团队运动枚举
│ 场地集合    [XX运动中心 ▼] → │  ← 必填
│ 场地片      [全场1号 ▼]      │  ← 可选片+档期
│ 日期时间    [选择器]         │
│ 人数上限    [ - ] 12 [ + ]   │
│ 费用说明    [文字输入]       │
│ 水平        ○休闲 ○竞技     │
│ 报名模式    [公开 ▼]        │
│             会员优先/仅会员   │
│ 备注        [多行文本]       │
│ 关联球队    [XX队 ▼]        │
├─────────────────────────────┤
│  ━━━━━━━━ 发布球局 ━━━━━━━━  │
└─────────────────────────────┘
```

---

### 4.4 小程序 · 球队主页 + 管理入口

```
┌─────────────────────────────┐
│ ←  球队主页          [分享] │
├─────────────────────────────┤
│      [队徽 120rpx]          │
│      XX足球队               │
│      北京 · 竞技 · 28人      │
│  [申请加入] 或 [已加入 ✓]    │
├─────────────────────────────┤
│ [球局] [成员] [论坛] [圈子]  │  ← Segmented
├─────────────────────────────┤
│ （Tab 内容区）               │
│ 成员: 队长/经理/运营 标签     │
│ 列表...                     │
├─────────────────────────────┤
│ 队长可见: [球队管理 →]       │
└─────────────────────────────┘

── 球队管理台（子页）──────────
│ 成员管理 / 角色任命          │
│ 经理 · 运营 · 副队长         │
│ 发局权限 / 审核入队          │
│ 数据: 本月球局/出勤          │
```

---

### 4.5 小程序 · 局内群 / 论坛 / 圈子

**局内群**
```
┌─────────────────────────────┐
│ ←  局内群 · 周六球局         │
├─────────────────────────────┤
│ [系统] 张队长 改了时间...    │
│ [头像] 李四: 我能带一个门将   │
│ [头像] 王五: +1              │
│         ...                  │
├─────────────────────────────┤
│ [输入消息...]  [图] [发送]   │
└─────────────────────────────┘
```

**论坛帖**
```
┌─────────────────────────────┐
│ ←  球队论坛                  │
│ [+ 发帖]                     │
├─────────────────────────────┤
│ [置顶] 下周约战YY队...       │
│ [帖] 招募中场 · 12回复       │
│ [帖] 上周复盘 · 8回复        │
└─────────────────────────────┘
```

**圈子 Feed（Tab）**
```
┌─────────────────────────────┐
│ 圈子              [+ 发布]  │
│ [关注] [同城] [我的球队]     │
├─────────────────────────────┤
│ [头像] XX队 · 2小时前        │
│ ┌─────────────────────────┐│
│ │     [比赛照片 16:9]      ││
│ └─────────────────────────┘│
│ 周六友谊赛精彩瞬间           │
│ ♡ 32   💬 8   ↗ 分享        │
├─────────────────────────────┤
│ ...                          │
└─────────────────────────────┘
```

---

### 4.6 H5 · 球局详情（分享落地 · 国内/国外共用结构）

```
┌─────────────────────────────┐
│ [Logo] 拉拉玩/lala one [登录]│  ← 顶栏极简
├─────────────────────────────┤
│ （同小程序详情信息区）        │
│ OG 预览友好: 标题+图+人数     │
├─────────────────────────────┤
│  ━━━━━━━ 立即报名 ━━━━━━━    │
├─────────────────────────────┤
│ 国内: ┌───────────────────┐ │
│       │ 打开小程序体验完整功能│ │  ← 固定底栏
│       └───────────────────┘ │
│ 国外: [Download App]         │
└─────────────────────────────┘
```

**H5 · 圈子帖落地 `/circle/{id}`**
```
┌─────────────────────────────┐
│ ←  圈子                      │
├─────────────────────────────┤
│ [大图/视频区域]              │
│ 文案内容...                  │
│ ♡ 点赞  💬 评论              │
├─────────────────────────────┤
│ 来自 XX队 · 相关球局 →       │
│  ━━━━━ 关注球队 / 报名下场 ━━━ │
└─────────────────────────────┘
```

---

### 4.7 App · 首页 + 场地管理台（App 独有）

**App 首页**
```
┌─────────────────────────────┐
│ 拉拉玩/lala one    [🔔][搜] │
├─────────────────────────────┤
│ Banner / 快捷: 发局|赛事|圈子 │
│ 附近球局 ...                 │
│ 推荐球队 / 场地 ...          │
├─────────────────────────────┤
│[首页][球队][ + ][消息][我的] │  ← 中心发布
└─────────────────────────────┘
```

**场地管理台（场主/管理员）**
```
┌─────────────────────────────┐
│ ←  场地管理 · XX球场         │
├─────────────────────────────┤
│ [概览] [档期] [赛事] [圈子]   │
├─────────────────────────────┤
│ 今日订场: 6   待审核: 2      │
│ ┌─────────────────────────┐ │
│ │  档期日历（周视图）       │ │
│ │  ■已订 □可订              │ │
│ └─────────────────────────┘ │
│ [+ 发起赛事]  [管理员设置]   │
├─────────────────────────────┤
│ 数据: 本周订场 / 报名 / 线索  │
└─────────────────────────────┘
```

---

## 五、页面清单（设计师排期用）

### 小程序（P0 约 18 屏）

| # | 页面 | 优先级 |
|---|------|--------|
| 1 | 登录/绑手机 | P0 |
| 2 | 首页 | P0 |
| 3 | 球局详情 | P0 |
| 4 | 发局 | P0 |
| 5 | 管理报名 | P0 |
| 6 | 球队列表/主页 | P0 |
| 7 | 创建球队 | P0 |
| 8 | 邀请/入队 | P0 |
| 9 | 球队管理台 | P1 |
| 10 | 局内群 | P0 |
| 11 | 球队群 | P1 |
| 12 | 论坛列表/详情/发帖 | P1 |
| 13 | 圈子 Feed | P1 |
| 14 | 发布圈子/详情 | P1 |
| 15 | 场地详情 | P1 |
| 16 | 场地轻量管理 | P1 |
| 17 | 个人中心/我的报名 | P0 |
| 18 | 分享海报/小程序码 | P0 |

### H5（P0 约 12 屏）

| # | 页面 | 优先级 |
|---|------|--------|
| 1 | 球局详情落地 | P0 |
| 2 | 球队邀请落地 | P0 |
| 3 | 登录 | P0 |
| 4 | 圈子帖落地 | P1 |
| 5 | 赛事详情 | P1 |
| 6 | 同城聚合 | P1 |
| 7 | 局内群 | P0 |
| 8 | 论坛浏览/发帖 | P1 |
| 9 | 球队主页 | P1 |
| 10 | 发局（国外）| P1 |
| 11 | 打开小程序/App 引导 | P0 |
| 12 | 404/失效 | P0 |

### App（P0+P1 约 22 屏）

小程序全部 + 以下增强：

| # | 页面 | 说明 |
|---|------|------|
| 19 | 场地管理台-概览 | App 完整 |
| 20 | 场地管理台-档期日历 | App 完整 |
| 21 | 场地管理台-赛事 | App 完整 |
| 22 | 消息中心（群列表） | Push 聚合 |
| 23 | 发布中心（发局/帖/素材） | 中心 Tab |
| 24 | 数据看板（球队/场地） | P2 |

---

## 六、设计规范提示

| 项 | 建议 |
|----|------|
| 栅格 | 小程序 750rpx；H5/App 375pt 移动端优先 |
| 主色 | 待品牌 VI；国内活力、国外简洁 |
| 按钮 | 底栏固定 CTA 高 96rpx+ 安全区 |
| 分享 | 球局/圈子必出「分享图模板」规格 5:4 + OG 1200×630 |
| 角色标签 | 队长/经理/运营/场管 — 统一 Badge 色板 |
| 空状态 | 无球队/无球局/无帖子 — 需插图+引导 CTA |
| 国外 | lala one 英文优先，泰语预留扩展宽度 |

---

## 七、交互说明（可点击原型对照）

> **在线入口：** [ds.lala.top](https://ds.lala.top/) · [H5 交互原型](../../prototype/h5/index.html) · [Lala One 设计系统](../../prototype/design-system/index.html) · 发布见 [design-prototype-deploy.md](../05-operations/design-prototype-deploy.md)

本地启动：`cd prototype && ./build.sh` · 发布：`./deploy.sh` · 见 [design-prototype-deploy.md](../05-operations/design-prototype-deploy.md)

### 7.1 全局手势与反馈

| 交互 | 行为 | 反馈 |
|------|------|------|
| 返回 | Nav 左侧 Chevron | 返回上一屏 / 浏览器 history |
| 分享 | Nav 右侧 / Feed 分享 | Toast「打开分享面板」 |
| Tab 切换 | 底栏 4 Tab | 切屏 + 高亮当前 Tab |
| 列表 Cell | 整行可点 | 跳转子页 + 按下态灰底 |
| 主按钮 | 底栏 CTA | 按下 opacity 0.65 |
| Toast | 操作结果 | 居中 2.2s 自动消失 |
| Bottom Sheet | 报名确认 | 遮罩点击关闭 |

### 7.2 核心页面交互矩阵

| 页面 | 可点元素 | 跳转 / 结果 |
|------|----------|-------------|
| **首页** | Banner、活动卡片、球队 Cell、Tab | → 详情 / 球队 / 各 Tab |
| **活动详情** | 地图区、组织者、局内群、论坛、相册、底栏 CTA | → 群聊 / 论坛 / 圈子 / 报名 Sheet |
| **报名 Sheet** | 确认 / 取消 | → 成功页 / 关闭 |
| **报名成功** | 进群 / 分享 / 看详情 | → 群聊 / Toast / 详情 |
| **发局 1–5** | Chip 选中、下一步、发布 | 状态同步预览 → 发布成功 |
| **球队主页** | Segmented、管理入口 | → 管理台 |
| **圈子 Feed** | 封面图、♥ 点赞、评论、FAB + | → 帖详情 / 计数切换 / Toast |
| **圈子帖详情** | 点赞、收藏、关联球局/球队 | → 详情 / 球队 |
| **论坛列表** | 帖子 Cell、发帖 | → 帖详情 / 发帖 |
| **论坛帖详情** | 回复输入、发送 | Toast 发布回复 |
| **局内群** | 输入 + 发送 | 消息气泡追加 |
| **登录** | 验证码 / 微信 / 登录 | → 首页 + 状态 loggedIn |
| **场地 B 端** | 概览/片/档期/入驻 | 各管理子页 |

### 7.3 详情页 CTA 状态机（与线框文档同步）

| 状态 | 底栏文案 | 点击 |
|------|----------|------|
| 未登录 + 公开 | 立即报名 | → 登录 |
| 未登录 + 仅队员 | 登录后申请入队 | → 登录 |
| 可报名 | 立即报名 | → 报名 Sheet |
| 已报名 | 已报名 · 取消报名 | 取消 + Toast |
| 已满 | 加入候补 | 候补队列 |
| 仅队员 | 申请加入球队 | → 入队页 |
| 组织者 | 管理条（改期/取消） | Toast 二次确认 |

### 7.4 新增线框 · 论坛帖详情

```
┌─────────────────────────────┐
│ ←  帖子详情          [分享] │
├─────────────────────────────┤
│ [头像] 李队长 [队长]         │
│        2小时前 · 浏览128     │
│ 【讨论】本周阵容怎么排？      │
│ 正文多行…                   │
├─────────────────────────────┤
│ 回复 (8)                    │
│ [头像] 张三: 我可以打后卫…   │
│ [头像] 王五: 中锋我可以…     │
├─────────────────────────────┤
│ [写回复…]            [发送] │  ← 固定底栏
└─────────────────────────────┘
```

### 7.5 新增线框 · 圈子帖详情

```
┌─────────────────────────────┐
│ ←  动态详情          [分享] │
├─────────────────────────────┤
│ [头像] 李队长 · XX篮球队     │
│ ┌─────────────────────────┐ │
│ │      [大图/视频 16:9]    │ │
│ └─────────────────────────┘ │
│ 文案 + #话题                │
│ ♡ 24  💬 8  ↗ 分享  ☆ 收藏  │
├─────────────────────────────┤
│ 关联球局 · 周六14:00    →   │
│ XX篮球队               →   │
└─────────────────────────────┘
```

---

## 八、在线原型与设计系统入口

| 资源 | 链接 | 用途 |
|------|------|------|
| **设计师工作台** | https://ds.lala.top/ | 统一入口 |
| **Lala One 设计系统** | https://ds.lala.top/design-system/ | 组件 / Token / 图标 |
| **H5 交互原型** | https://ds.lala.top/h5/ | 24 页可点流程 |
| 发布文档 | [design-prototype-deploy.md](../05-operations/design-prototype-deploy.md) | 静态 build + deploy |
| 发局线框文档 | [designer-create-session-flow.md](./designer-create-session-flow.md) | 发局 6 步 |
| 详情/报名线框 | [designer-session-detail-register.md](./designer-session-detail-register.md) | 状态机 |
| 场地 B 端线框 | [designer-venue-complex-admin.md](./designer-venue-complex-admin.md) | 管理台 |

---

## 九、相关文档

- [运动类型配置](../04-domain/sport-types-config.md) · [sports.json](../../packages/shared/sports.json)
- [发局流程](./designer-create-session-flow.md)
- [详情/报名页](./designer-session-detail-register.md)
- [场地 B 端](./designer-venue-complex-admin.md)
- [小程序功能点](./miniprogram-features.md)
- [角色、沟通与圈子](../04-domain/roles-communication-circle.md)

**交互 Canvas：** [designer-ia-wireframes.canvas.tsx](/Users/fly/.cursor/projects/Users-fly-work-file-lala1/canvases/designer-ia-wireframes.canvas.tsx)（可在 IDE 侧边打开）