From 233b527236f614da79ec2fcb746f0172b8f9233a Mon Sep 17 00:00:00 2001 From: zerosaturation Date: Wed, 10 Jun 2026 12:07:27 +0800 Subject: [PATCH] =?UTF-8?q?docs:=E6=98=9F=E6=B2=B3=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/figma-analysis-xiaohongshu-stars.md | 347 +++++++++++++++++++++++ 1 file changed, 347 insertions(+) create mode 100644 docs/figma-analysis-xiaohongshu-stars.md diff --git a/docs/figma-analysis-xiaohongshu-stars.md b/docs/figma-analysis-xiaohongshu-stars.md new file mode 100644 index 0000000..a5824d4 --- /dev/null +++ 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 单独实现。