xiaoyu/topfans
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
280b4bbee0
topfans/docs/figma-analysis-xiaohongshu-stars.md
zerosaturation 233b527236 docs:星河设计文档
2026-06-10 12:07:27 +08:00

17 KiB
Raw Blame History

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

Figma Source: 小红书双屏 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 单独实现。