# 小红书双屏 - 星河新版本 页面结构分析

> **Figma Source**: [小红书双屏](https://www.figma.com/design/wjnADnSIFnRGjK4ScQBhXP/%E5%B0%8F%E7%BA%A2%E4%B9%A6%E5%8F%8C%E5%B1%8F?node-id=94-78&t=lA07yxdTfHSZxAlQ-4)
> **Node ID**: `94:78`
> **Frame Name**: 星河新版本

---

## 页面概述
- **页面名称**: 星河新版本
- **Frame 尺寸**: 375 × 812 (iPhone 标准移动端)
- **风格**: 梦幻甜美、饭圈审美、红粉渐变
- **整体氛围**: 主色调为红色/粉色，多层渐变 + 模糊光晕 + 玻璃拟态卡片

---

## 一、整体布局结构（从上到下）

```
┌─────────────────────────────────────────────┐
│ ④ TOP 排行榜主区                  291-650px │
│  ╔══════════╗  ╔══════════╗                  │  ← 背景图: TOP 2 (左上) | TOP 3 (右上)
│  ║ ┌──────┐ ║  ║ ┌──────┐ ║                  │
│  ║ │藏品图│ ║  ║ │藏品图│ ║                  │
│  ║ │      │ ║  ║ │      │ ║                  │
│  ║ │──────│ ║  ║ │──────│ ║                  │
│  ║ │[TOP 2]║  ║ │[TOP 3]║                  │
│  ║ └──────┘ ║  ║ └──────┘ ║                  │
│  ╚══════════╝  ╚══════════╝                  │
│                                              │
│          ╔══════════╗                          │  ← 背景图: TOP 1 (下中)
│          ║ ┌──────┐ ║                          │
│          ║ │藏品图│ ║                          │
│          ║ │      │ ║                          │
│          ║ │──────│ ║                          │
│          ║ │[TOP 1]║                          │
│          ║ └──────┘ ║                          │
│          ╚══════════╝                          │
├─────────────────────────────────────────────┤
│ ⑤ TOP 4-12 散落排名区（内圆）       581-690px│
│                                              │
│        [TOP 9]      [TOP 8]                   │
│         ┌────┐        ┌────┐                  │  ← 背景框
│         │藏品图│      │藏品图│                  │
│         └────┘        └────┘                  │
│         小图░░       小图░░                    │  ← 小图 + 模糊
│                                              │
│    [TOP 10]              [TOP 7]              │
│      ┌────┐                ┌────┐             │  ← 背景框
│      │藏品图│              │藏品图│             │
│      └────┘                └────┘             │
│     小图░░                 小图░░              │  ← 小图 + 模糊
│                                              │
│  [TOP 11]                   [TOP 6]           │
│   ┌────┐                      ┌────┐          │  ← 背景框
│   │藏品图│                    │藏品图│          │
│   └────┘                      └────┘          │
│   小图░░                      小图░░           │  ← 小图 + 模糊
│                                              │
│    [TOP 12]  [TOP 4]  [TOP 5]                 │
│    ┌────┐    ┌────┐    ┌────┐                 │  ← 背景框
│    │藏品图│  │藏品图│  │藏品图│                 │
│    └────┘    └────┘    └────┘                 │
│     小图░░    小图░░    小图░░                  │  ← 小图 + 模糊
│                                              │
├─────────────────────────────────────────────┤
│                                              │
└─────────────────────────────────────────────┘
```

---

## 二、核心区域详解

> 本节按 Figma 节点层级记录各区域尺寸、位置、阴影和渐变细节，并与 一、整体布局结构 简化布局的对应关系如下：
>
> - **2.1 - 2.3** 页面背景层（状态栏 / 顶部用户区 / Banner），**不参与**简化布局中的核心模块，仅作 Figma 节点参考
> - **2.4** 构成 **④ TOP 排行榜主区**（TOP 1-3 三大模块），结构为 `背景图 → 背景框 → 藏品图 → TOP 标签 → 小图+模糊`
> - **2.5** 构成 **⑤ TOP 4-12 散落排名区**（九个小模块内圆环形排列），结构为 `背景框 → 藏品图 → 小图+模糊`
> - **2.6 - 2.7** ⑤ 区辅助元素（底部 8 张缩略图 + 截屏占位标签）

### 2.1 状态栏 (94:149)
- **位置**: (0, 0)
- **尺寸**: 375 × 44
- **组件**: `Iphone` 状态栏组件
- **包含**: 时间、信号、电池图标

---

### 2.2 顶部用户区 (y: 48-91)

#### 2.2.1 顶粉水晶 (94:98, 94:99, 94:100-103)
- **位置**: (6, 50)
- **尺寸**: 91.67 × 35.78
- **结构**:
  - **底层 image 7** (94:100): 71.85 × 21.63, 圆角 10.4px, 边框 `rgba(243, 166, 138, 0.25)` 1px, 阴影 `rgba(249, 54, 54, 0.36)` 2px
  - **核心胶囊 Rectangle 8** (94:101): 69.9 × 14.72, 圆角 25px
    - **渐变** (fill_8RPQFM): `linear-gradient(270deg, #A811FF 0%, rgba(30,180,217,0.57) 81%, rgba(101,10,153,0) 100%)`
  - **image 6** (94:102): 40.48 × 35.19, 阴影 `rgba(249, 54, 54, 0.99)` 2px (顶部水晶图标)
  - **数字 2713** (94:103): 13px Baloo Bhai, 颜色 `#FFFABD` + 红色文字阴影

#### 2.2.2 活动栏位 (94:83, 94:84-89)
- **位置**: (245, 48)
- **尺寸**: 77 × 35.93
- **阴影**: `0px 4px 4px 0px rgba(241, 59, 59, 0.47)`
- **子元素**:
  - **每日任务** (94:88): Abhaya Libre Medium 6px, 颜色 `#FFF9E7` + 黑色阴影
  - **巴士应援** (94:89): Abhaya Libre Medium 6px, 颜色 `#FFF9E7` + 黑色阴影
  - **2 张 image** (94:84, 94:85, 94:86, 94:87): 32.66 × 32.36 缩略图

---

### 2.3 Banner / 装饰区

#### 2.3.1 主背景渐变 (94:172)
- **位置**: (0, -283)
- **尺寸**: 376 × 2225
- **填充** (fill_ADEMUX): `linear-gradient(179deg, rgba(255, 229, 229, 1) 0%, rgba(243, 160, 161, 1) 0%, rgba(255, 156, 156, 1) 86%, rgba(255, 32, 36, 1) 100%)`
- **模糊**: `blur(4px)`

#### 2.3.2 粉色光晕 (94:188)
- **位置**: (0, 163)
- **尺寸**: 375 × 100
- **填充**: `#F3D3E3`
- **阴影**: `0px 4px 4px 0px rgba(0, 0, 0, 0.25)` + `blur(39.5px)`

#### 2.3.3 顶部装饰图 (94:187)
- **位置**: (-29, 264)
- **尺寸**: 434 × 608
- **填充**: 图片
- **效果**: `blur(0px)`

#### 2.3.4 大图 (94:82)
- **位置**: (-3, 91)
- **尺寸**: 378 × 179
- **填充**: 图片 (image 37)

---

### 2.4 TOP 排行榜主区

#### 2.4.1 LV4 大图 (94:178, 107:118)
- **位置**: (-9, 291)
- **尺寸**: 233.25 × 201.38
- **阴影**: `4px 4px 26.3px 0px rgba(127, 7, 7, 0.33)` 暗红阴影

#### 2.4.2 LV1 大图 (108:122)
- **位置**: (195, 352)
- **尺寸**: 181 × 122
- **阴影**: `0px 4px 4px 0px rgba(177, 21, 21, 0.25)`

#### 2.4.3 LV2 大图 (94:178)
- **位置**: (36, 448)
- **尺寸**: 181.11 × 138.05
- **阴影**: `4px 4px 26.3px 0px rgba(127, 7, 7, 0.57)`

#### 2.4.4 Group 9 藏品卡 (96:101)
- **位置**: (238.4, 362.56)
- **尺寸**: 96.01 × 108.14
- **整体不透明度**: 0.69
- **结构**:
  - 描边层 (96:102): 96.01 × 108.14, 描边 20px 钻石渐变 + blur(11.2px)
    - 渐变: `radial-gradient(ellipse at -10% 5%, #86BEFF 0%, #FF3939 32%, #88FFCE 59%, #4D9AF8 100%)`
    - 圆角: `2px 23px 2px 23px`（不规则）
  - 藏品 (96:103): 88.53 × 101.15, 阴影 `2px 2px 4.5px rgba(240, 75, 75, 0.25)`
    - 主图 (96:104): 84.57 × 98.13, 阴影 `3px 3px 4.5px 2px rgba(0, 0, 0, 0.15)`
      - 圆角: `8px 24px 8px 21px`
    - 高光 (96:105): 45.07 × 36.73, 渐变 `linear-gradient(180deg, #53F4D3 1%, transparent 70%)`
      - 圆角: `7px 0px 21.5px 0px`
  - 底部白色块 (96:106): 71.74 × 41.02, 渐变 `linear-gradient(180deg, #FFF 19%, rgba(255,255,255,0.71) 45%, rgba(255,231,231,0.45) 62%, rgba(138,135,131,0.23) 85%, transparent 100%)`
    - 圆角: `13px 13px 6px 6px`
  - 边框层 (96:107): 92.61 × 105.87, 4px 渐变描边
    - 圆角: `16px 23px 13px 17px`
  - 点赞按钮 (96:108): 9.96 × 9.81, 位置 (13.25, 20.74)
    - 渐变: `linear-gradient(137deg, #FEB74C 0%, #F7A1CF 83%)`
  - 点赞数 9430 (96:111): 9px Baloo Bhai, `#FFFABD` + 红色阴影
  - 用户名 (96:112): 6px HYQiHei, 颜色 `#554545`

#### 2.4.5 Group 6 藏品卡 (94:270)
- **位置**: (57.89, 322)
- **尺寸**: 99.71 × 112.28
- **整体不透明度**: 0.6
- **结构**:
  - 描边层 (94:189): 99.27 × 110.81, 钻石渐变 + blur(11.2px), 圆角 `2px 23px 2px 23px`
  - 藏品 (94:192): 95.42 × 104.92, 圆角 14px
    - 主图 (94:193): 90.08 × 103.29, 圆角 14px
    - 高光 (94:194): 48.21 × 38.86, 绿青渐变, 圆角 14px
  - 底部白色块 (94:195): 75.34 × 44.31, 圆角 `12px 12px 5px 5px`
  - 边框 (94:206): 98.82 × 109.34, 4px 渐变描边, 圆角 `17px 23px 14px 17px`
  - 点赞按钮 (94:223): 10.71 × 10.28, 位置 (31.4, 9.65)
  - 点赞数 9653 (94:227): 8px Baloo Bhai, `#FFFABD` + 红色阴影
  - 用户名: 爱喝奶茶的茶茶子 (94:237), 6px HYQiHei

#### 2.4.6 Group 8 藏品卡 (94:272)
- **位置**: (95, 475)
- **尺寸**: 63.55 × 81.29
- **整体不透明度**: 0.65
- **结构**:
  - 描边层 (94:191): 62.22 × 79.37, 钻石渐变 + blur(11.2px), 圆角 `2px 23px 2px 23px`
  - 藏品 (94:200): 59.98 × 76.39, 圆角 15px
    - 主图 (94:201): 59.77 × 74.21, 圆角 `3px 12px 3px 9px`
    - 高光 (94:202): 32.8 × 25.52, 绿青渐变, 圆角 `7px 0px 21.5px 0px`
  - 边框 (94:204): 62.8 × 79.42, 钻石渐变描边 (蓝白) + blur(1px) + 白色阴影
  - 底部白色块 (94:205): 53.88 × 23.95, 圆角 13px
  - 边框层 (94:207): 62.85 × 80.03, 4px 渐变描边, 圆角 `12px 10px 12px 15px`
  - 点赞按钮 (94:232): 7 × 7.19
  - 点赞数 9223 (94:236): 8px Baloo Bhai
  - 用户名: 超级久米 (94:239), 6px HYQiHei

---

### 2.5 TOP 4-12 散落排名区 (y: 581-690)

| 排名 | 标签位置 | 标签尺寸 | 不透明度 |
|------|---------|---------|---------|
| TOP 4 | (163, 690) | 42.63 × 19.92 | 1.0 |
| TOP 5 | (237, 675) | 42.63 × 19.92 | 1.0 |
| TOP 6 | (302.89, 644.05) | 42.63 × 19.92 | 1.0 |
| TOP 7 | (263, 600) | 42.63 × 19.92 | 0.69 |
| TOP 8 | (194, 583) | 42.63 × 19.92 | 0.69 |
| TOP 9 | (131, 581) | 42.63 × 19.92 | 0.69 |
| TOP 10 | (65, 592) | 42.63 × 19.92 | 0.69 |
| TOP 11 | (32, 642) | 42.63 × 19.92 | 1.0 |
| TOP 12 | (88, 666) | 42.63 × 19.92 | 1.0 |

- **TOP 4-6, 11, 12**: 8px C800 字体
- **TOP 7-10**: 8px C800 字体 + 不透明度 0.69（淡出效果）
- **标签背景**: 钻石渐变图片 + `backdropFilter: blur(11.7px)`, 圆角 8px

---

### 2.7 底部 8 张缩略图卡片 (y: 596-762)

| 元素 ID | 名称 | 位置 | 尺寸 | 圆角 | 不透明度 |
|--------|------|------|------|------|---------|
| 94:265 | 微信图片...6 | (180.93, 598.05) | 49.6 × 59.4 | 6px | 0.49 |
| 94:263 | 微信图片...2 | (118.3, 596.05) | 49.6 × 59.4 | 6px | 0.5 |
| 94:267 | 微信图片...8 | (250.86, 614.05) | 49.6 × 59.4 | 6px | 0.51 |
| 94:278 | 微信图片...1 | (19.89, 657.05) | 49.6 × 59.4 | 8px | 1.0 |
| 96:99 | 微信图片...6 | (52.72, 607.05) | 50.4 × 63.98 | 4px | 0.7 |
| 108:140 | 微信图片...28 | (290.73, 659.05) | 49.6 × 59.4 | 3px | 0.7 |
| 94:268 | 微信图片...9 | (225.89, 690.05) | 49.6 × 59.4 | 6px | 1.0 |
| 94:264 | 微信图片...3 | (150.89, 706.05) | 49.6 × 59.4 | 9px | 1.0 |
| 94:283 | 微信图片...7 | (75.89, 682.05) | 50.81 × 66.29 | 5px | 1.0 |

- **统一阴影**: `3px 2px 4px 0px rgba(198, 13, 13, 0.33)`

---

### 2.8 8 个"截屏"占位元素 (y: 652-762)

这些是与缩略图对应的 TOP 标签，使用相同的截屏占位图。

| 元素 ID | 位置 | 尺寸 | 备注 |
|--------|------|------|------|
| 108:121 | (131.89, 762.05) | 83.14 × 17.51 | 截屏占位 2 |
| 108:181 | (272.89, 717.01) | 83.14 × 17.51 | 截屏占位 10 |
| 108:144 | (53.89, 743.05) | 91.31 × 19.23 | 截屏占位 4 |
| 108:146 | (-0.11, 707.05) | 89.03 × 18.75 | 截屏占位 5 |
| 108:142 | (214.89, 747.05) | 73.12 × 15.4 | 截屏占位 3 |
| 108:148 | (169.89, 652.05) | 73.12 × 15.4 | 截屏占位 6 |
| 108:150 | (236.89, 669.04) | 73.12 × 15.4 | 截屏占位 7 |
| 108:152 | (105.89, 652.13) | 73.12 × 15.4 | 截屏占位 8 |
| 108:154 | (40.89, 669.05) | 73.12 × 15.4 | 截屏占位 9 |

- **填充**: 截屏占位图片（裁剪后）
- **不透明度**: 0.85
- **阴影**: `0px 4px 4px 0px rgba(0, 0, 0, 0.25)`

---

## 三、关键设计系统

> 本节设计系统（颜色 / 渐变 / 字体 / 阴影）适用于页面所有元素，**不区分是否在简化布局中显示**。简化布局中未直接画出的元素（状态栏、顶部用户区、Banner 等）的设计定义仍可在原 Figma 节点中查询并应用此处的设计令牌。

### 3.1 主色板
| 颜色 | 用途 |
|------|------|
| `#FF2024` | 主红色 - 用于主背景渐变终止色 |
| `#FF9C9C` | 粉红 - 渐变中段 |
| `#F3A0A1` | 浅粉 - 渐变中段 |
| `#FFE5E5` | 极浅粉 - 渐变起始 |
| `#F3D3E3` | 樱花粉 - 装饰光晕 |
| `#FFFABD` | 暖黄白 - TOP 数字、点赞数 |
| `#FFF9E7` | 暖白 - 任务文字 |
| `#554545` | 深棕 - 用户名 |

### 3.2 渐变系统
| ID | 渐变定义 | 用途 |
|----|---------|------|
| fill_ADEMUX | 179deg 粉红→红 | 主背景 |
| fill_8RPQFM | 270deg 紫→青→透明 | 顶粉水晶胶囊 |
| fill_HIC8YT | 径向 蓝→红→绿→蓝 | 藏品卡描边（多色钻石） |
| fill_2DKCFH | 径向 蓝→白→蓝 | TOP 标签描边（蓝白钻石） |
| fill_KL90Y9 | 180deg 青绿→透明 | 藏品高光 |
| fill_KYWPP8 | 180deg 白→透明 | 藏品底部渐变 |
| fill_4E9HI0 | 137deg 橙→粉 | 点赞按钮 |
| fill_274YUY | 134deg 红→深红 | 点赞图标 |

### 3.3 字体系统
| 字体 | 用途 |
|------|------|
| Baloo Bhai | 数字（点赞数、TOP 排名、积分 2713） |
| C800 | TOP 排名标签 |
| Abhaya Libre Medium | 任务文字（每日任务、巴士应援） |
| HYQiHei | 用户名（中文） |

### 3.4 阴影系统
| 阴影 | 用途 |
|------|------|
| `0 4px 4px rgba(241, 59, 59, 0.47)` | 活动栏位红色发光 |
| `0 0 7.2px rgba(203, 24, 24, 0.84)` | 头像红色光晕 |
| `4px 4px 26.3px rgba(127, 7, 7, 0.33)` | LV4 / LV2 暗红阴影 |
| `0 4px 4px rgba(177, 21, 21, 0.25)` | LV1 浅红阴影 |
| `3px 3px 4.5px 2px rgba(0, 0, 0, 0.15)` | 藏品主图 |
| `2px 2px 4.5px rgba(240, 75, 75, 0.25)` | 藏品卡片 |
| `0 4px 4px rgba(187, 31, 31, 0.27)` | TOP 1-3 头像 |
| `-1px 1px 4px rgba(206, 9, 9, 0.84)` | 文字阴影（红色） |

---

## 四、布局数据汇总表

> 布局聚焦于 TOP 榜主体（④ + ⑤），其他元素（状态栏 / 顶部用户区 / Banner / 底部缩略图）作为 Figma 背景层保留在 二、核心区域详解 中。

| 区域 | y 范围 | 主要内容 | 模块结构 |
|------|-------|---------|---------|
| ④ TOP 排行榜主区 | 291-650 | TOP 1（左下）、TOP 2（左上）、TOP 3（右上）三个大型模块 | 背景图（双线外框）→ 背景框 → 藏品图 → TOP 标签 → 小图+模糊 |
| ⑤ TOP 4-12 散落排名区 | 581-690 | TOP 4-12 九个小型模块，按 4→5→6→7→8→9→10→11→12 顺时针绕内圆 | 背景框（单线）→ 藏品图 → 小图+模糊（无独立背景图、无 TOP 标签在框内外的明确分层） |

### 4.1 模块结构对比

| 层级 | ④ TOP 1-3 | ⑤ TOP 4-12 |
|------|----------|-----------|
| 第 1 层 | 背景图（╔══╗ 双线外框，每模块独立一张） | — |
| 第 2 层 | 背景框（┌──┐ 单线，包裹藏品图） | 背景框（┌──┐ 单线，包裹藏品图） |
| 第 3 层 | 藏品图（主图，组卡片） | 藏品图（缩略图） |
| 第 4 层 | TOP 排名标签（位于藏品图下方，独立） | — |

---

## 五、待确认事项

1. **顶粉水晶胶囊**的渐变颜色与参考图（灰紫→灰青）不一致，是 Figma 中是 `#A811FF → #1EB4D9`（紫色→青色），需要确认是哪个版本。
2. **截屏占位元素** 似乎是未替换的图片占位，应是 TOP 标签的实际显示。
3. **TOP 标签** 使用了 C800 字体，需要确认前端是否已引入此字体。
4. **藏品卡** 的不规则圆角（`8px 24px 8px 21px` 等）需要用 CSS 单独实现。