# Peeka · UI 设计稿

> 基于高保真原型 `prototype/` 提炼的设计规范与页面线框  
> 风格定位：**粉彩柔和 · 中英双语 · 低压力社交**  
> 目标用户：16–30 岁  
> 版本：V1.6 · 2026-06-07（对齐 PRD V1.6）

---

## 1. 设计原则

| 原则 | 说明 |
|------|------|
| **低压力** | 大 Yes 小 No、幽默文案、分步而非一屏填完 |
| **匿名安全感** | 全程不展示微信头像昵称，仅展示邀请人自定义提示 |
| **年轻感** | 粉彩配色、轻量猫贴纸水印、大号微信 Emoji、有趣双语文案 |
| **清晰引导** | 每步单一目标，底部主 CTA 明确 |
| **游戏化** | 点选图标而非下拉框，选中态有反馈 |
| **双语表达** | 中文主句 + 英文副句双层结构，语气轻松 meme 化 |
| **信息克制** | 表情选择器仅展示 Emoji，预览区不显示 `[表情名]` |

---

## 2. 设计 Token（V1.5 粉彩柔和）

### 2.1 色彩

| Token | 色值 | 用途 |
|-------|------|------|
| `--bg-base` | `#FFFAF0` | 全局页面背景 |
| `--surface` | `#FFFFFF` | 卡片、弹窗底色 |
| `--primary` | `#FFC1CC` | 主按钮、选中态、链接、标签描边 |
| `--aux-pink` | `#F4C2C2` | 次要按钮填充 |
| `--aux-cyan` | `#E7FEFF` | 💬 FAB、P03 预览区背景 |
| `--aux-cream` | `#F0EAD6` | No 按钮、聊天提示条 |
| `--border` | `rgba(255,193,204,0.35)` | 卡片半透明描边 |
| `--text-dark` | `#5C5346` | 中文主标题、正文 |
| `--text-muted` | `#9A9088` | 英文副句、辅助说明 |
| `--text-on-primary` | `#5C5346` | 粉底按钮上的文字 |
| `--btn-disabled` | `#ECE8E4` | 禁用按钮 |

> 高饱和色仅用于核心交互（按钮、选中态、链接），长篇说明使用 `--text-dark` / `--text-muted`。

### 2.2 字体与双语层级

| 层级 | 中文 | 英文副句 | 说明 |
|------|------|----------|------|
| 导航双层标题 | 18px / 800 | 12px / 600 斜体 / `--primary` | P03/P08/P09/P10 |
| H1 主问句 `.bi-cn` | 22–28px / 700 | — | 卡片内主文案 |
| 英文副句 `.bi-en` | — | 14px / 500 斜体 | 紧跟中文下方 |
| Body | 16px / 400 | — | 说明段落 |
| Caption | 13px / 400 | — | 标签、辅助 |
| 按钮双层 | 16px / 700 | 12px / 500 | `.btn-bi-cn` + `.btn-bi-en` |

字体建议：Inter + PingFang SC

### 2.3 圆角 & 间距

| Token | 值 |
|-------|-----|
| `--radius-card` | 24px |
| `--radius-button` | 999px（胶囊） |
| `--radius-input` | 999px（胶囊） |
| `--radius-option` | 24px |
| `--spacing-page` | 24px 左右 |
| `--spacing-card` | 20px 内边距 |

### 2.4 阴影

```css
--shadow-card: 0 8px 28px rgba(255, 193, 204, 0.12);
--shadow-button: 0 4px 16px rgba(255, 193, 204, 0.35);
```

---

## 3. 全局组件

### 3.1 背景层 `BgCats`
- 全局背景 `#FFFAF0`
- 低透明度猫 Emoji 水印（opacity ~5%）
- P07 可叠加 2%–4% 噪点纹理（`screen--noise`）

### 3.2 内容卡片 `InviteCard`
- 圆角 24px · 白底 · `1px` 半透明粉描边 · `shadow-card`
- 内边距 20px

### 3.3 主按钮 `BtnPrimary`
- 胶囊形全宽，背景 `#FFC1CC`，文字 `#5C5346`
- 最小高度 52px，支持双层中英文案
- 点击涟漪动效（粉底半透明扩散）
- P06 可选手型引导动画

### 3.4 辅助按钮
| 组件 | 样式 | 场景 |
|------|------|------|
| `BtnGhostSm` | `#F0EAD6` 底 | P06「No」 |
| `ChatFab` | `#E7FEFF` 圆形 | P01 左上角、P06 顶部 |
| `BtnSecondary` | `#F4C2C2` 底 | 次要操作 |

### 3.5 禁用按钮 `BtnDisabled`
- 灰底 `#ECE8E4`，双层文案「先选一个嘛 / Pick one first~」
- 选中选项后切换为 `BtnPrimary`

### 3.6 选项格 `OptionGrid`
- 氛围 2×3 / 美食 1×5
- 未选：白底 + 粉描边；选中：淡粉径向光晕 + scale 1.06

### 3.7 输入框 `FieldInput`
- 胶囊形，聚焦时淡粉外发光
- Placeholder 支持中英（如「自定义，如：看展 · e.g. gallery」）

### 3.8 顶部导航 `NavBar`
- **标准**：返回 + 单行标题
- **双层双语 `nav-bar--bi`**：返回 + `.nav-bi-cn` + `.nav-bi-en` + 步骤点（P08/P09/P10）
- 用于 P03、P08、P09、P10

### 3.9 双语文案块 `BiLine`
```html
<div class="bi-line">
  <p class="bi-cn">中文主句</p>
  <p class="bi-en bi-en--fun">English subline~</p>
</div>
```

### 3.10 微信表情选择器 `WxEmojiGrid`
- 5 列网格，**仅显示 Emoji 图标**（无格内中文名）
- 未选：白底 + 粉描边；选中：粉底 + 深色字
- 预览区底 `#E7FEFF`，**不展示 `[表情名]`**

### 3.11 标签 `HintTag` / `TypeChip`
- 未选：白底 + 粉描边；选中：粉底
- 约会类型 Chip 支持双层（如「吃饭 / Dining」）

### 3.12 聊天 `ChatBubble` / `ChatInput`
- 己方气泡：粉底；对方：白底描边
- 顶部提示条：「匿名模式 · No WeChat names shown」

---

## 4. 页面设计稿

---

### P01 · 首页

```
┌──────────────────────────┐
│ 💬                       │  ← ChatFab #E7FEFF
│      🐱 Peeka       │
│      📍 上海 · Shanghai   │
│                          │
│  ┌────────────────────┐  │
│  │ 发起约会邀请        │  │  ← BtnPrimary 双层
│  │ Send an anonymous… │  │
│  └────────────────────┘  │
│  ┌────────────────────┐  │
│  │ 📋 我的约会         │  │  ← HomeCardBtn
│  │ My dates & drama 📋 │  │
│  └────────────────────┘  │
│  进行中的邀请 (2)         │
│  Pending invites — …     │
│  ┌─ 匿名邀请 · 已响应 ─┐  │  ← 列表项双语
│  └────────────────────┘  │
└──────────────────────────┘
```

> V1.6：已去掉首页 Slogan 标语块，保持简洁。

---

### P02 · 身份提示（邀请人）

```
┌──────────────────────────┐
│  ←  身份提示 · Hints      │
│  对方同意前只能看到这些     │
│  They'll only see this…   │
│                          │
│  基础标签 [同城·上海] …    │
│  身份线索（选填，6条）      │
│  [上次见面] [共同话题] …    │
│  自定义一句（30字内）       │
│  预览区                    │
│  [ 保存并继续 / Save → ]  │
└──────────────────────────┘
```

---

### P03 · 制作邀请函（邀请人）

```
┌──────────────────────────┐
│  ←  制作邀请函            │  ← nav-bi 双层
│      Create invite ✨     │
│  选个表情 / Pick an emoji~│
│  🥺 😳 💕 😁 …（仅图标）   │  ← WxEmojiGrid
│  ┌────────────────────┐  │
│  │  #E7FEFF 预览区     │  │
│  │       🥺            │  │  ← 无 [表情名]
│  │ 你会跟我约会吗？      │  │  ← 可编辑中文
│  │ Pretty please…     │  │  ← 可编辑英文
│  └────────────────────┘  │
│  可选约会类型             │
│  [吃饭/Dining] [运动/…]   │  ← 双层 Chip
│  [ 下一步：选好友 → ]     │
└──────────────────────────┘
```

---

### P06 · 邀请函 - 同意页（被邀请人）

```
┌──────────────────────────┐
│ 💬  先聊聊再决定 · Chat…  │  No (#F0EAD6)
│         🥺（大 Emoji）      │  ← 无 [表情名]
│   你会跟我约会吗？         │
│   Will you go on a…      │
│  ┌────────────────────┐  │
│  │ 身份提示预览        │  │
│  │ [ 好！就约！/ Yes!!]│  │
│  │        👆           │  │
│  └────────────────────┘  │
└──────────────────────────┘
```

**交互说明**
- 💬：进入 P15b 匿名聊天（Yes 前可用）
- 「No」：`#F0EAD6` 小按钮 → 二次确认弹窗（须说明匿名拒绝规则）→ 已拒绝页
- 「Yes」：进入 P07
- **不展示**微信头像/昵称；**不展示** `[表情名]`

---

### P07 · 惊喜过渡页（被邀请人）

```
┌──────────────────────────┐
│  ┌────────────────────┐  │
│  │ #FFC1CC 标题区      │  │  ← hero-primary，无插图
│  │ 你居然答应了？！🥹   │  │
│  │ You actually said… │  │
│  │ 我都做好被你拒绝…    │  │
│  │ I was SO ready…    │  │
│  │ [ 下一步 💖 / Next]│  │  ← BtnPrimary 粉底
│  └────────────────────┘  │
└──────────────────────────┘
```

**动效**：卡片弹性进入（`cubic-bezier(0.34,1.56,0.64,1)`）；背景轻噪点

---

### P08 · 约会类型选择（被邀请人）

```
┌──────────────────────────┐
│ ← 什么 vibe？！           │  ← nav-bi 夸张双层
│   what's your VIBE? 💕   │
│  挑一个最 vibe 的！        │
│  [ 氛围/Vibe ✨ ][美食/Food]│  ← Tab 双层
│  ┌────────────────────┐  │
│  │ ⛳ 🚶 🎬 💃 🎢 🏝️   │  │
│  │ [先选一个嘛/Pick…]  │  │
│  └────────────────────┘  │
└──────────────────────────┘
```

**Tab 切换文案**
| Tab | 导航中文 | 导航英文 |
|-----|----------|----------|
| 氛围 | 什么 vibe？！ | what's your VIBE? 💕 |
| 美食 | 吃什么？！ | what are we FEELIN'?! 😋 |

**交互**：单选；选中后按钮变「下一步 / Next →」

---

### P09 · 时间选择（被邀请人）

```
┌──────────────────────────┐
│ ← 哪天有空？！📅          │  ← nav-bi
│   When are you free?     │
│  ┌────────────────────┐  │
│  │ 选日期 · Pick a date│  │
│  │ 选时间 · Pick a time│  │
│  │ [ 锁定日期/Lock it ]│  │
│  └────────────────────┘  │
└──────────────────────────┘
```

#### 日历弹层【参考图4】
- 深色半透明玻璃态（`rgba(30,30,40,0.85)` + blur）
- 支持多选日期（被邀请人可提供多个空闲日）
- 选中日期：蓝色光晕圆圈 `#4D9FFF`
- 底部：左 `Reset` 灰按钮 / 右 `✓` 蓝色圆形确认

#### 时间滚轮弹层【参考图5】
- 三列：时 / 分 / AM·PM
- 选中行高亮白色，上下行渐隐
- 同样 Reset + ✓ 确认

---

### P10 · 地点输入（被邀请人）

```
┌──────────────────────────┐
│ ← 哪里见面？！📍          │  ← nav-bi
│   Where we meeting?      │
│  ┌────────────────────┐  │
│  │ 地点输入（中英 placeholder）│
│  │ [ 提交我的选择/Send →]│  │
│  └────────────────────┘  │
└──────────────────────────┘
```

---

### P11 · 提交成功（被邀请人）

```
┌──────────────────────────┐
│                          │
│         ✨               │
│    已发送给邀请人！        │
│                          │
│  对方确认后会通知你        │
│  请耐心等待～             │
│                          │
│  [   返回首页   ]         │
└──────────────────────────┘
```

---

### P12 · 邀请人响应详情（含原 P13 确认）

```
┌──────────────────────────┐
│  ←  响应详情 · Review     │
│  对方已接受邀请 🎉        │
│  They said YES!          │
│  类型/时间/地点详情        │
│  这个时间适合你吗？        │
│  [ ✓ 确认约会 / Confirm ]│
│  时间不合适 · Bad timing? │  ← 点开消息撰写弹窗
└──────────────────────────┘
```

**时间不合适弹窗**：多行输入 + 取消/发送消息 → Toast + 通知被邀请人

---

### P14 · 约会成功 / 身份揭晓

```
┌──────────────────────────┐
│  ┌─ 白底卡片 ─────────┐  │
│  │   🥳（随机庆祝 Emoji）│  │  ← 无 [表情名]
│  └────────────────────┘  │
│  ┌────────────────────┐  │
│  │ 逮到你了！          │  │
│  │ I got you!!        │  │  ← 中性用词，无 gendered
│  │ 6点见，我出发了 🚗   │  │
│  │ ── 身份揭晓 ──      │  │
│  │ 双方昵称+头像        │  │
│  │ 约会详情            │  │
│  │ [添加到日历/Add…]  │  │
│  └────────────────────┘  │
└──────────────────────────┘
```

> 每次进入 P14 随机切换庆祝 Emoji（🥳😄🤩😎💃等），与邀请函所选表情独立。

---

### P15 · 聊一聊列表

- 导航：聊一聊
- 汇总匿名邀请相关会话，双语说明「Anonymous chats — identities hidden 🎭」

### P15b · 匿名聊天室

- 顶部：`#F0EAD6` 提示条
- 气泡列表 + 胶囊输入框 +「发送 · Send」

### P16 · 约会记录

- 四 Tab 双层：已完成/Done · 进行中/Active · 已拒绝/Declined · 被拒绝/Rejected
- 记录卡片列表

### 已拒绝页（被邀请人）

- 双语标题 + **随机 4 条中英安慰语**之一

---

## 5. 交互流程图（被邀请人）

```mermaid
sequenceDiagram
    participant I as 邀请人
    participant S as 系统
    participant R as 被邀请人

    I->>S: 创建并匿名发送邀请函
    S->>R: 推送通知
    R->>S: 打开 P06
    opt 先聊一聊
        R->>S: P15b 匿名聊天
    end
    alt 拒绝
        R->>S: 点击 No
        S->>I: 拒绝通知
    else 同意
        R->>S: 点击 Yes
        R->>S: P07（无插图）→ P08 选类型
        R->>S: P09 选时间
        R->>S: P10 输入地点
        S->>I: 响应完成通知
        I->>S: 查看 P12
        alt 确认
            I->>S: 确认约会
            S->>R: 成功通知 + 身份揭晓 P14
        else 时间不合适
            I->>S: 撰写消息通知
            S->>R: 应用内消息+订阅通知
        end
    end
```

---

## 6. 动效规范

| 场景 | 动效 | 时长/曲线 |
|------|------|-----------|
| 页面切换 | 淡入 + 轻微位移 | 400ms `cubic-bezier(0.34,1.56,0.64,1)` |
| 按钮点击 | 粉底/青粉涟漪扩散 | 500–600ms |
| 选项选中 | scale 1→1.06 + 径向光晕 | 350ms |
| P08 Tab 切换 | 颜色+文案过渡 | 300ms |
| 背景猫贴纸 | 低透明度静态/微动 | — |
| 按钮引导 | 手型 👆 上下点按 | 1.5s loop |

---

## 7. 微信表情邀请函（V1.6 替代静态 Meme 模板）

| Emoji ID | 名称 | 默认中文 | 默认英文（有趣语气） |
|----------|------|----------|----------------------|
| kelian | 可怜 | 你会跟我约会吗？ | Pretty please… date me? |
| haixiu | 害羞 | 想和你见一面～ | I'd love to see you IRL~ |
| shiai | 示爱 | 有空一起出来吗？ | Got time for a lil adventure? |
| ciya | 呲牙 | 约吗约吗！ | Date? Date?? DATE??? |
| … | （共 10 个） | 可编辑 | 可编辑 |

- 选中 Emoji 后同步 P06 预览，中英文案均可手动修改
- P14 庆祝 Emoji **独立随机**，不绑定邀请函选择

---

## 8. 响应式 & 适配

- 设计基准：**375 × 812**（iPhone X）
- 安全区：底部预留 34px home indicator
- 卡片最大宽度：327px（左右各 24px margin）
- 字体使用 `rpx` 换算，1px = 2rpx

---

## 9. 无障碍 & 安全提示

- 对比度：主文字与背景 ≥ 4.5:1
- 首次使用展示「见面安全提示」：公共场所、告知朋友、注意隐私
- 拒绝按钮虽缩小但仍满足 44×44pt 点击热区

---

## 10. 资产清单

| 资产 | 规格 | 数量 | 备注 |
|------|------|------|------|
| 微信风格 Emoji | 系统字体渲染 | 10+ | 选择器用，无需切图 |
| 活动 emoji 图标 | 网格内系统 emoji | 11 | P08 选项 |
| 猫贴纸水印 | emoji 字体 | 6 | 背景装饰 |
| 噪点纹理 | SVG data-uri | 1 | P07 可选 |
| 按钮手型引导 | emoji 👆 | 1 | P06 |
| 应用 Logo | 128×128px | 1 | 🐱 + 字标 |

> V1.6 已移除 Timmy/Shrek/浴帽猫等静态 Meme 配图依赖。

---

## 11. 版本对齐说明

| 版本 | UI 变更摘要 |
|------|-------------|
| V1.3 | 💬 聊一聊、P16 四 Tab 记录、P12 消息弹窗、拒绝安慰语 |
| V1.5 | 粉彩 Token、去霓虹、24px 圆角、涟漪动效 |
| V1.6 | 全站双层双语、P07 无图、P03/P14 信息精简、nav-bi 导航 |

实现参考：`prototype/styles.css`、`prototype/dopamine-theme.css`、`prototype/index.html`

---

*设计稿维护：设计组 · Peeka*