180 lines
5.8 KiB
Markdown
180 lines
5.8 KiB
Markdown
# TOPFANS 排行榜页面结构分析
|
||
|
||
## 页面概述
|
||
- **页面名称**: HOME
|
||
- **尺寸**: 375 x 1588 (移动端)
|
||
- **风格**: 梦幻甜美、饭圈审美、粉色系渐变
|
||
|
||
---
|
||
|
||
## 一、页面布局结构（从上到下）
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ 1. 状态栏 (iPhone Status Bar) │ 高度: ~20px
|
||
├─────────────────────────────────┤
|
||
│ 2. 顶部用户区 │ y: 45px
|
||
│ - 积分: 2713 │
|
||
│ - 每日任务 | 巴士应援 图标 │
|
||
├─────────────────────────────────┤
|
||
│ 3. Banner 横幅区域 │ y: 264px
|
||
│ - 背景装饰 (模糊渐变) │
|
||
│ - "TOPFANS 排行榜" 主标题 │
|
||
│ - "日榜" 标签 │
|
||
├─────────────────────────────────┤
|
||
│ 4. 藏品内容区 (3x4 Grid) │ y: 293px
|
||
│ - 12 个藏品卡片 │
|
||
│ - 每个卡片带 TOP 1-12 排名 │
|
||
│ - 点赞数和文案 │
|
||
│ - "查看更多" 按钮 │
|
||
├─────────────────────────────────┤
|
||
│ 5. 分类导航区 │ y: 950px
|
||
│ - 星卡 | 吧唧 | 海报 │
|
||
│ - 3 个大图标导航 │
|
||
├─────────────────────────────────┤
|
||
│ 6. 筛选 Tab 栏 │
|
||
│ - 热门作品 | 最新作品 │
|
||
├─────────────────────────────────┤
|
||
│ 7. 瀑布流作品展示区 │
|
||
│ - 多张卡片，含图片+点赞+文案 │
|
||
└─────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 二、核心组件详解
|
||
|
||
### 2.1 状态栏 (1:29 -> 1:7)
|
||
- iPhone 状态栏组件，包含时间、信号、电池图标
|
||
|
||
### 2.2 顶部用户区 (活动栏位)
|
||
| 元素 | 类型 | 说明 |
|
||
|------|------|------|
|
||
| 每日任务 | 文字 | 粉水晶样式 |
|
||
| 巴士应援 | 文字 | 粉水晶样式 |
|
||
| 用户头像 | 图片 | 圆形 |
|
||
| 积分显示 | 文字 (2713) | 白色带阴影 |
|
||
|
||
### 2.3 Banner 横幅 (banner条)
|
||
```
|
||
- 背景: 模糊渐变 (粉红到透明)
|
||
- "TOPFANS 排行榜" 主标题
|
||
- "日榜" 标签 (右上角)
|
||
- 装饰性圆形图案
|
||
```
|
||
|
||
### 2.4 藏品内容区 (Grid)
|
||
- **布局**: 3列 x 4行
|
||
- **卡片结构**:
|
||
```
|
||
┌─────────────┐
|
||
│ 图片 │ ← 带圆角的主图
|
||
│ ❤️ 9653 │ ← 点赞图标 + 数字
|
||
├─────────────┤
|
||
│ 新铸爱的小卡也太绝了 │ ← 文案
|
||
├─────────────┤
|
||
│ TOP 1 │ ← 排名标签 (金色)
|
||
└─────────────┘
|
||
```
|
||
- **卡片样式**:
|
||
- 图片圆角: 8px
|
||
- 背景: 白色圆角卡片带阴影
|
||
- 点赞数: 带文字阴影
|
||
- TOP 标签: 金色/红色渐变
|
||
|
||
### 2.5 分类导航区 (顶部金刚区)
|
||
| 图标 | 名称 | 样式 |
|
||
|------|------|------|
|
||
| 星卡 | 星卡 | 粉色水晶风格，opacity 0.75 |
|
||
| 吧唧 | 吧唧 | 同上 |
|
||
| 海报 | 海报 | 同上 |
|
||
|
||
### 2.6 筛选 Tab 栏
|
||
- **热门作品**: 选中状态 (opacity 0.75)
|
||
- **最新作品**: 未选中状态 (opacity 0.52)
|
||
- 样式: 胶囊形状，半透明背景
|
||
|
||
### 2.7 瀑布流展示区
|
||
- 每张卡片包含:
|
||
- 图片 (带圆角)
|
||
- 点赞按钮 + 数字
|
||
- 文案标题
|
||
|
||
---
|
||
|
||
## 三、颜色主题
|
||
|
||
| 用途 | 颜色 |
|
||
|------|------|
|
||
| 主背景渐变 | linear-gradient(126deg, #FFE5E5, #FF9C9C, #6AC5D3) |
|
||
| 卡片背景 | #FFFFFF |
|
||
| 强调/排名 | #FC6466, #F45668, #FFF60F |
|
||
| 点赞红心 | #FF5A5D |
|
||
| 文字主色 | #FFFFFF |
|
||
| 文字深色 | #000000 |
|
||
| Tab 未选中 | opacity 0.52 |
|
||
| Tab 选中 | opacity 0.75 |
|
||
|
||
---
|
||
|
||
## 四、阴影与效果
|
||
|
||
| 效果 | 参数 |
|
||
|------|------|
|
||
| 粉色卡片阴影 | box-shadow: 2px 2px 4px rgba(242, 21, 21, 0.47) |
|
||
| 应援图标阴影 | box-shadow: 0px 4px 4px rgba(238, 38, 38, 0.33) |
|
||
| 模糊背景 | blur(4px), blur(9.3px) |
|
||
| 状态栏背景 | blur(4px) |
|
||
|
||
---
|
||
|
||
## 五、文字样式
|
||
|
||
| 用途 | 样式 |
|
||
|------|------|
|
||
| TOP 排名 | 金色带阴影 (style_GT3LFV) |
|
||
| 日榜标签 | 白色带阴影 |
|
||
| 藏品文案 | 白色带阴影 (style_S0XHUK) |
|
||
| 瀑布发文案 | 同上 |
|
||
| 分类名称 | 白色带阴影 (style_0R0H6H) |
|
||
| 积分数字 | 白色 (style_F5RO1M) |
|
||
|
||
---
|
||
|
||
## 六、数据内容示例
|
||
|
||
### 排行榜藏品 (12个)
|
||
| 排名 | 点赞数 | 文案 |
|
||
|------|--------|------|
|
||
| TOP 1 | 9653 | 新铸爱的小卡也太绝了 |
|
||
| TOP 2 | 9430 | 今日翻牌：这张海报… |
|
||
| TOP 3 | 7933 | 细节控狂喜 |
|
||
| TOP 4 | 8034 | 海报墙又添新成员了 |
|
||
| TOP 5 | 9223 | 这张小卡光影感绝了 |
|
||
| TOP 6 | 6420 | 展开那一刻，忍不住… |
|
||
| TOP 7 | 6342 | 必须单独发一条 |
|
||
| TOP 8 | 9070 | 这个角度我直接封神 |
|
||
| TOP 9 | 5943 | 这套效果每张都想单独说一次 |
|
||
| TOP 10 | 5270 | 新进一位门面 |
|
||
| TOP 11 | 4766 | 压箱底的海报 |
|
||
| TOP 12 | 4326 | 铸爱进度又往前了 |
|
||
|
||
### 瀑布流内容 (示例)
|
||
| 点赞数 | 文案 |
|
||
|--------|------|
|
||
| 3244 | 来给大家看看我新到手的宝贝呀～～～ |
|
||
| 7189 | マイドラだゆううううう |
|
||
| 147 | 咕咕嘎嘎 |
|
||
|
||
---
|
||
|
||
## 七、结论
|
||
|
||
这是一个**粉丝应援类排行榜页面**，核心功能：
|
||
1. 展示用户积分和应援任务入口
|
||
2. TOP 12 藏品排行榜 (3x4 grid)
|
||
3. 分类导航 (星卡/吧唧/海报)
|
||
4. 热门/最新作品筛选
|
||
5. 瀑布流UGC内容展示
|
||
|
||
**开发优先级建议**: 高 (核心排行榜功能) |