docs:星河设计文档

2026-06-10 12:07:27 +08:00 · 2026-06-10 12:07:27 +08:00 · 233b527236
commit 233b527236
parent b00f7dabf0
1 changed files with 347 additions and 0 deletions
--- a/docs/figma-analysis-xiaohongshu-stars.md
+++ b/docs/figma-analysis-xiaohongshu-stars.md
@ -0,0 +1,347 @@
+# 小红书双屏 - 星河新版本 页面结构分析
+
+> **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 单独实现。