348 lines
17 KiB
Markdown
348 lines
17 KiB
Markdown
# 小红书双屏 - 星河新版本 页面结构分析
|
||
|
||
> **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 单独实现。
|